みんビズ制作講座：デザインカスタマイズ（全10回） 第7回：見やすい表組みを作ってみよう 執筆：原 一宣。（株式会社Gazi工房） 商品の価格表や、比較表などホームページでは、表組みが活躍する場面は多く登場します。 今回は、基本機能を使った見やすい表組みの作成方法を解説します。 表の各部分の名称と基本操作をおぼえよう みんビズにログインし、表を挿入したいページを開きます。 ［+新規項目の追加］をクリックし、コンテンツメニューから［表］をクリックします。 表の編集画面が表示され、すでにサンプルの表ができていることを確認します。 （画像の表は内容を変更しています。） この時点で［保存］をクリックし、画面を見ると整然と並んでいる状態となります。 表の各部分の名称 表の各部分の名称をおぼえましょう。 セル 表の1つ1つのマス目のことを「セル」と言います。 行 表の横方向の「セル」の並びを「行」と言います。 列 表の縦方向の「セル」の並びを「列」と言います。 表の編集メニュー 表を編集するためのメニューについて解説します。 表の挿入 表の挿入、表全体の詳細な設定をすることができます。 行のプロパティ / セルのプロパティ 行、セル単位の詳細な設定をすることができます。 行を上に挿入 / 行を下に挿入 / 行を削除 行の挿入、削除をすることができます。 列を左に挿入 / 列を右に挿入 / 列を削除 列の挿入、削除をすることができます。 セルを結合・解除 セルを結合・解除することができます。 行の挿入・削除 行を挿入する時、挿入したい場所の上または下の行をクリックします。 挿入したい場所の上または下の行をクリックしたら、［行を上に挿入］または［行を下に挿入］のアイコンをクリックします。 行を削除する場合は、削除したい行をクリックして［行を削除］アイコンをクリックします。 列の挿入・削除 列を挿入する時、挿入したい場所の左または右の行をクリックします。 挿入したい場所の左または右の列をクリックしたら、［列を左に挿入］または［列を右に挿入］のアイコンをクリックします。 列を削除する場合は、削除したい列をクリックして［列を削除］アイコンをクリックします。 セルの結合と解除 セルとセルを結合したい場合、結合させたい隣接するセルを選択し、［セルの結合］アイコンをクリックします。結合した セルを解除したい場合、解除したいセルを選択し、［セルの結合の解除］アイコンをクリックします。この場合、結合によっ て合体した文字は分離しません。 見やすい表組みを作ってみよう シンプルな表を作成 先に解説をした、基本操作を使って簡単な表を作成します。 この状態で保存をクリックすると、下図のように枠線の無い表組みができます。 では、この表に枠線を付けてみましょう。 表の編集画面で、表内の任意のセルにカーソルを置いた状態で、「表の編集メニュー」から［表の挿入］アイコンをクリッ クします。 「表の挿入/編集」ウィンドウが開きます。「枠線」の項目に「1」と入力し、［更新］をクリックしてみましょう。 1ピクセルの枠線が表示されました。 このように、「枠線」に数値を入力することで、ピクセル単位で枠線の太さを編集することができます。（小数点は使用す ることができません。） ここまで、シンプルな表を作成することができました。 しかし、この状態ではメリハリもなく、見やすい表組みだとは言えません。 文字を際立たせる 表組みで大切な要素は、文字情報です。 文字情報を際立たせるために、まず枠線の色を薄く変えてみましょう。 先ほどと同じ要領で、「表の挿入/編集」ウィンドウを開き、［上級者向け］タブをクリックします。 「枠線の色」の項目にRGBカラーコードを入力するか、［参照］アイコンをクリックし、「カラーピッカー/パレット/規定色」 から色を選択し、［更新］をクリックします。 枠線の色を抑えたので、だいぶ文字が際立って見えるようになりました。 さらに、文字情報が読み取りやすいように、枠線と文字の間に余白を挿入します。 「表の挿入/編集」ウィンドウを開き、「Cellpadding（セルパディング）」の項目に「10」と入力し、［更新］をクリックしてみ ましょう。 セルの内側に余白が挿入され、文字がだいぶ読み取りやすくなりました。 文字の体裁を整える 次に「表の編集メニュー」を使って、表組みの文字情報の体裁を整えていきます。 大切なことは、文字情報の意味とセルの関係を考えて、視覚的に整えることです。 今回は基本機能を使った表組みを解説いたしましたが、みんビズでは他にも、下図のように表現できる機能が付いてい ます。ぜひお試しください。 次回第8回「フォトギャラリーを使ってみよう」では、フォトギャラリーとスライドショーの使い分けなどを解説します。 次回のコラムを見る » 原 一宣。（はら・かずのり） 株式会社Gazi工房 代表取締役／JimdoExpert http://gazikobo.co.jp/ 1974年、福島県福島市生まれ。東北福祉大学社会福祉学部社会福祉学科卒業。山形県川西町在住。食品加 工会社、電子基板製造会社を経て、フリーランスでWeb制作活動を開始。 2007年に株式会社Gazi工房を設立。Webサイトの企画・設計、制作業務に従事。 イラストやキャラクターデザイン、地域づくりの企画・助言、パソコン教室なども行う。 元東北芸術工科大学 非常勤講師。クリエイティブユニット「gabs」メンバー。 CSS Nite in FUKUSHIMA実行委員。 著書『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』（共著、エムディエヌコーポレーション）、『ああしたい、こう変えたいが手にと るようにわかるCSS基礎』（同）。 Copyright 2017 はじめてＷＥＢ All Rights Reserved. http://hajimeteweb.jp/
© Copyright 2024 Paperzz
