JIMDO EXPERT
メニューの表示切り替え

HOME  > 実践!ホームページ作成! > 第16回 表マスター!

【連載】 実践!Jimdoでホームページ作成!

第16回 表マスター!

チッチ

今日は前回のつづき、表の設定について説明するよ!

そのまえに少し前回のおさらいをしてみよう。

あっくん、「行」「列」「セル」について覚えてる?

あっくん

ええっと・・・表の縦が・・・あれ?横だったかな?えっと・・・

チッチ

この図を見て思い出してみようね。

「行」「列」「セル」は表をつくったり、いろいろな設定をするときに必要だから覚えておいてね。

表の各部分の名称

表の各部分の名称

セル ・・・ 表のひとつのマスのことを「セル」といいます。

・・・ 表の横に並んだ「セル」のまとまりを「行」といいます。

・・・ 表の縦に並んだ「セル」のまとまりを「列」といいます。

あっくん

思い出したよ!縦に並んだ「セル」を「列」、横に並んだ「セル」を「行」っていうんだったね。

チッチ

そうだよ!おさらいはできたかな?

じゃあ、早速、表の設定について解説していくよ!

あっくんが前回つくった表を見せて!

あっくん

うん!これが、前回ぼくがつくった表だよ~。

この表をもっと見やすくしたいんだ。

表
チッチ

まかせて!はじめに表全体の設定について教えるね。

まず、つくった表をクリックして、表の編集画面を開いたら、「表を挿入」のアイコンをクリックしてごらん。

表を挿入
あっくん

はーい!「表の挿入/編集」っていう小さなウィンドウが表示されたよ!

チッチ

この「表の挿入/編集」から表全体のいろいろな設定を編集できるんだよ。

たとえば、表の枠線を表示させたり、表の背景に色をつけたりできるんだ!

表をクリックしないで「表を挿入」アイコンをクリックすれば新しい表をつくることもできるよ。

表の挿入/編集

表の挿入/編集

・・・ 列の数を指定できます。(※編集の場合はここから変更はできません。)

・・・ 行の数を指定できます。(※編集の場合はここから変更はできません。)

Cellpadding ・・・ セル内の余白を指定できます。

Cellspacing ・・・ セルとセルの間隔を指定できます。

配置 ・・・ 表の全体の位置を「中央揃え」「左揃え」「右揃え」から選択できます。

枠線 ・・・ 表の枠線の太さを指定できます。

・・・ 表の全体の幅をピクセルまたはパーセントで指定できます。

高さ ・・・ 表の全体の高さをピクセルまたはパーセントで指定できます。

クラス ・・・ 表のクラス名を選択できます。

表に見出しを付ける ・・・ 表に見出しを付けることができます。

あっくん

ええっと・・・表に枠線をつけるにはどうしたらいいのかなぁ?

チッチ

6番の「枠線」の項目に「1」って入力してごらん。

1ピクセルの太さの線が表示されるようになるよ。

あっくん

わぁ!!枠線ができた!!

じゃあ、つぎはね、枠線と文字の間隔をもっと広くしたいなぁ!

表
チッチ

そんなときは3番の「Cellpadding」を「10」にしてごらん。

セルの内側に10ピクセルの余白ができるよ。

あっくん

わーい!すごく見やすくなった!!

こんなに簡単に表の設定が変えられるなんて思わなかったよ!

表
チッチ

それから10番の「表に見出しを付ける」のチェックボックスにチェックをいれてごらん。

すると、表の上にスペースができるからここに表の見出しを入力できるんだよ!

あっくん

見出しを付けるのも簡単なんだね!

やった~!!!理想通りのパーフェクトな表ができたよ!!!

表
チッチ

さらに「上級者向け」のタブをクリックすれば、もうちょっと詳しく表の設定をすることができるよ。

表の挿入/編集 (上級者向け)

表の挿入/編集 (上級者向け)

ID ・・・ 表のIDを設定できます。

サマリー ・・・ 表の説明を設定できます。

スタイル ・・・ 表のスタイルシートを設定できます。

言語コード ・・・ 表の言語コードを設定できます。

背景画像 ・・・ 表の背景画像を設定できます。

セル枠線 ・・・ セルの枠線を「なし」「上」「下」「上下」「左」「右」「左右」「上下左右(box)」「上下左右(border)」から選択できます。

表の外枠 ・・・ 表の外枠を「なし」「グループ毎」「行」「列」「全て」から選択できます。

文章の方向 ・・・ 表の中の文章の方向を「左から右」「右から左」から設定できます。

枠線の色 ・・・ 表の枠線の色を設定できます。

背景色 ・・・ 表の背景色を設定できます。

あっくん

「ID」とか「スタイルシート」ってなあに?

難しくてよくわかんないよ~!!

チッチ

ここは少し専門的な知識が必要だから、ぜんぶわからなくても大丈夫だよ。

でも、9番の「枠線の色」や10番の「背景色」を変えることができるのは便利だから覚えておくといいよ!

あっくん

難しい!って思ったけど、必要な所だけ設定すればいいね!

じゃあ「枠線の色」と「背景色」を覚えておくね。

チッチ

次は「行のプロパティ」を説明するよ。

「行のプロパティ」のアイコンをクリックしてごらん。

行のプロパティ
あっくん

はーい!!

今度は「行のプロパティ」っていう小さなウィンドウが開いたよ。

チッチ

この「行のプロパティ」では行ごとにいろいろな設定ができるんだよ。

たとえば、一番上の行だけ目立たせたいときに便利だね。

行のプロパティ

行のプロパティ

 ・・・ 行に「表ヘッダ」「表ボディ」「表フッタ」を指定できます。

配置 ・・・ 行の文章の位置を「中央揃え」「左揃え」「右揃え」から選択できます。

垂直方向の配置 ・・・ 行の文章の縦方向の位置を「上揃え」「中央揃え」「下揃え」から選択できます。

クラス ・・・ 行のクラス名を設定できます。

高さ ・・・ 行の高さをピクセルまたはパーセントで指定できます。

チッチ

行のプロパティにも「上級者向け」タブがあるね。

この「上級者向け」タブをクリックすれば、さらに詳しい設定ができるよ。

行のプロパティ (上級者向け)

行のプロパティ (上級者向け)

ID ・・・ 行のIDを設定できます。

スタイル ・・・ 行のスタイルシートを設定できます。

文章の方向 ・・・ 行の中の文章の方向を「左から右」「右から左」から選択できます。

言語コード ・・・ 行の言語コードを設定できます。

背景画像 ・・・ 行の背景画像を設定できます。

背景色 ・・・ 行の背景色を設定できます。

チッチ

ここでちょっと注目して欲しいのが「更新」ボタンの上のプルダウンメニューなんだよ。

「選択行の更新」「「奇数行の更新」「偶数行の更新」「全ての行の更新」から設定したい行を選べるから、表の中で奇数の行だけまとめて背景色を変えることも簡単にできちゃうんだよ!

行の更新
あっくん

へぇ~!一行ずつ指定しなくてもいいんだ!便利だね~!!

チッチ

最後は「セルのプロパティ」について説明するよ。

「セルのプロパティ」のアイコンをクリックしてみて!

セルのプロパティ
あっくん

はーい!「セルのプロパティ」のウィンドウが開いたよ!

チッチ

この「セルのプロパティ」からセルのいろいろな設定ができるよ。

セルのプロパティを使えばひとつのセルごとに設定ができるから、とっても便利!

セルのプロパティ

セルのプロパティ

配置 ・・・ セルの中の文章の位置を「中央揃え」「左揃え」「右揃え」から選択できます。

セル種別 ・・・ セルの種別を「日付」「ヘッダ」から選択できます。

垂直方向の配置 ・・・ セルの文章の垂直方向の位置を「上揃え」「中央揃え」「下揃え」から選択できます。

スコープ ・・・ セルがどの方向に対しての見出しであるか「列」「行」「行グループ」「列グループ」から選択できます。

・・・ セルの幅をピクセルまたはパーセントで指定できます。

高さ ・・・ セルの高さをピクセルまたはパーセントで指定できます。

クラス ・・・ セルのクラス名を選択できます。

あっくん

ぼく、わかってきたよ!

セルも「上級者向け」タブからもっと詳しい設定ができるんでしょ?

チッチ

そのとおり!

セルごとに枠線の色や背景色を変えることもできちゃうんだよ! 

セルのプロパティ (上級者向け)

セルのプロパティ (上級者向け)

ID ・・・ セルのIDを設定できます。

スタイル ・・・ セルのスタイルシートを設定できます。

文章の方向 ・・・ セルの中の文章の方向を「左から右」「右から左」から選択できます。

言語コード ・・・ セルの言語コードを設定できます。

背景画像 ・・・ セルの背景画像を設定できます。

枠線の色 ・・・ セルの枠線の色を設定できます。

背景色 ・・・ セルの背景色を設定できます。

チッチ

それに「更新」ボタンの上にあるプルダウンメニューから「選択セルの更新」「行内のセルの更新」「全てのセルの更新」を選んで設定することもできるよ。

あっくん

表全体の設定と行とセルの設定ができれば、自由自在に表がつくれるね。

こんなに簡単にかっこいい表ができちゃうなんてすごい!!

チッチ

設定の項目がたくさんあって難しいような気がするかもしれないけど、少しずつ覚えていけば大丈夫!

表の設定の仕方をマスターしていろんな表をつくってみてね!

あっくん

よーし!早速おいしいケーキ屋さんのリストをつくるぞー!!

チッチ

あっくん・・・ダイエットのためにカロリー表つくるんじゃなかったの・・・?

表は情報を整理して見せたい時に便利なので、是非活用しましょう!

あっくん、おいしいケーキ屋さんのリストできたら教えてね。