スマートフォンサイトを表示する

  1. TOP
  2. みんビズ制作講座 デザインカスタマイズ : 第7回 見やすい表組みを作ってみよう

エキスパートコラム

みんビズ制作講座:デザインカスタマイズ(全10回)

第7回:見やすい表組みを作ってみよう

執筆:原 一宣。(株式会社Gazi工房)

2013年2月20日更新

  • このエントリーをはてなブックマークに追加

閲覧数7,121views

このコラムをPDF形式でダウンロードする

商品の価格表や、比較表などホームページでは、表組みが活躍する場面は多く登場します。
今回は、基本機能を使った見やすい表組みの作成方法を解説します。

表の各部分の名称と基本操作をおぼえよう

みんビズにログインし、表を挿入したいページを開きます。
[+新規項目の追加]をクリックし、コンテンツメニューから[表]をクリックします。

表の編集画面が表示され、すでにサンプルの表ができていることを確認します。
(画像の表は内容を変更しています。)

この時点で[保存]をクリックし、画面を見ると整然と並んでいる状態となります。

表の各部分の名称

表の各部分の名称をおぼえましょう。

1セル 表の1つ1つのマス目のことを「セル」と言います。
2 表の横方向の「セル」の並びを「行」と言います。
3 表の縦方向の「セル」の並びを「列」と言います。

表の編集メニュー

表を編集するためのメニューについて解説します。

1表の挿入 表の挿入、表全体の詳細な設定をすることができます。
2行のプロパティ / セルのプロパティ 行、セル単位の詳細な設定をすることができます。
3行を上に挿入 / 行を下に挿入 / 行を削除 行の挿入、削除をすることができます。
4列を左に挿入 / 列を右に挿入 / 列を削除 列の挿入、削除をすることができます。
5セルを結合・解除 セルを結合・解除することができます。

行の挿入・削除

行を挿入する時、挿入したい場所の上または下の行をクリックします。

挿入したい場所の上または下の行をクリックしたら、[行を上に挿入]または[行を下に挿入]のアイコンをクリックします。行を削除する場合は、削除したい行をクリックして[行を削除]アイコンをクリックします。

列の挿入・削除

列を挿入する時、挿入したい場所の左または右の行をクリックします。

挿入したい場所の左または右の列をクリックしたら、[列を左に挿入]または[列を右に挿入]のアイコンをクリックします。列を削除する場合は、削除したい列をクリックして[列を削除]アイコンをクリックします。

セルの結合と解除

セルとセルを結合したい場合、結合させたい隣接するセルを選択し、[セルの結合]アイコンをクリックします。結合したセルを解除したい場合、解除したいセルを選択し、[セルの結合の解除]アイコンをクリックします。この場合、結合によって合体した文字は分離しません。

見やすい表組みを作ってみよう

シンプルな表を作成

先に解説をした、基本操作を使って簡単な表を作成します。

この状態で保存をクリックすると、下図のように枠線の無い表組みができます。

では、この表に枠線を付けてみましょう。
表の編集画面で、表内の任意のセルにカーソルを置いた状態で、「表の編集メニュー」から[表の挿入]アイコンをクリックします。

「表の挿入/編集」ウィンドウが開きます。「枠線」の項目に「1」と入力し、[更新]をクリックしてみましょう。

1ピクセルの枠線が表示されました。
このように、「枠線」に数値を入力することで、ピクセル単位で枠線の太さを編集することができます。(小数点は使用することができません。)

ここまで、シンプルな表を作成することができました。
しかし、この状態ではメリハリもなく、見やすい表組みだとは言えません。

文字を際立たせる

表組みで大切な要素は、文字情報です。
文字情報を際立たせるために、まず枠線の色を薄く変えてみましょう。
先ほどと同じ要領で、「表の挿入/編集」ウィンドウを開き、[上級者向け]タブをクリックします。
「枠線の色」の項目にRGBカラーコードを入力するか、[参照]アイコンをクリックし、「カラーピッカー/パレット/規定色」から色を選択し、[更新]をクリックします。

枠線の色を抑えたので、だいぶ文字が際立って見えるようになりました。

さらに、文字情報が読み取りやすいように、枠線と文字の間に余白を挿入します。
「表の挿入/編集」ウィンドウを開き、「Cellpadding(セルパディング)」の項目に「10」と入力し、[更新]をクリックしてみましょう。

セルの内側に余白が挿入され、文字がだいぶ読み取りやすくなりました。

文字の体裁を整える

次に「表の編集メニュー」を使って、表組みの文字情報の体裁を整えていきます。

大切なことは、文字情報の意味とセルの関係を考えて、視覚的に整えることです。

今回は基本機能を使った表組みを解説いたしましたが、みんビズでは他にも、下図のように表現できる機能が付いています。ぜひお試しください。

次回第8回「フォトギャラリーを使ってみよう」では、フォトギャラリーとスライドショーの使い分けなどを解説します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

原 一宣。(はら・かずのり)

原 一宣。(はら・かずのり)

株式会社Gazi工房 代表取締役/JimdoExpert
http://gazikobo.co.jp/

1974年、福島県福島市生まれ。東北福祉大学社会福祉学部社会福祉学科卒業。山形県川西町在住。食品加工会社、電子基板製造会社を経て、フリーランスでWeb制作活動を開始。
2007年に株式会社Gazi工房を設立。Webサイトの企画・設計、制作業務に従事。
イラストやキャラクターデザイン、地域づくりの企画・助言、パソコン教室なども行う。
元東北芸術工科大学 非常勤講師。クリエイティブユニット「gabs」メンバー。
CSS Nite in FUKUSHIMA実行委員。

著書『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(同)。

ああしたい、こう変えたいが手にとるようにわかるCSS基礎

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/3/19~2017/3/25]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!