ホームページ作成

【ホームページ作成】テーブル（表）の作成・装飾 (HTML,CSS)

テーブル（表）の作成・装飾 (HTML,CSS)

HTMLやスタイルシート（CSS）を使ったテーブル（表）の作成、装飾方法について解説しました。

文字数に関係なく、表の各列幅を均等にする

通常、table要素を使って表を作ると、セルの内容量に応じて自動的に横幅が決定されます。その結果、幅がバラバラになることがあります。横幅のピクセル数を指定することなく、セル幅を均等にする方法をご紹介。

ガイド：西村文宏
テーブルの見出しだけ立体的にする

テーブル(表)を装飾する際、枠線や背景色を加えるだけではシンプルなので、見出し部分の装飾に少し凝ってみてはいかがでしょうか。見出しのセルだけ、グラデーションを使って立体的に見えるよう装飾してみましょう。

ガイド：西村文宏
スタイルシートで表を見やすく装飾！

ワープロで表を作成すると、様々な装飾ができますね。そのような表をウェブ上でも作ってみましょう！スタイルシートを使って、余白や文字間隔などを細かく調節し、自由自在に装飾する方法をご紹介。

ガイド：西村文宏
スタイルシートでワープロ並みに表を装飾！

ワープロで表を作成すると、様々な罫線で表を装飾できますね。そのような表をウェブ上でも作ってみたいと思いませんか？スタイルシートとHTMLで、複雑な表の装飾も自由自在に作れるようになりましょう。

ガイド：西村文宏
スタイルシートでワープロ並みに表を装飾２

ワープロで表を作成すると、様々な罫線で表を装飾できますね。そのような表をウェブ上でも作ってみたいと思いませんか？スタイルシートとHTMLで、複雑な表の装飾も自由自在に作れるようになりましょう。(CSS実践編)

ガイド：西村文宏
マウスが乗った行だけ装飾を変化させる

リンクの上にマウスを乗せたときにリンク文字の装飾を変化させるのによく使われる「hover疑似クラス」は、実はリンク以外に対しても使えます。うまく活用すると、大きな表をとても見やすく（使いやすく）できます。

ガイド：西村文宏
セル全体が立体的に見える表組みを作る

表を構成するセルの枠線だけが立体的に見えるのではなく、表のセル1つ1つそのものが立体的に見える表を作ってみましょう。なかなか見栄えのよい表ができあがります。

ガイド：西村文宏
表のセンタリング方法の謎

スタイルシートを使って表をセンタリングできますか？表のセンタリングは、ブラウザによって表示が異なったり、セルの中身までセンタリングされてしまったり、様々な謎があります。それらの解決方法はこちら！

ガイド：西村文宏
線種が豊富な表を作りたい！（前編）

ワープロや表計算ソフトで作成できるような、実線・点線・破線・二重線、太線・細線…など、様々な線を活用した表を、ホームページ上でも作ってみませんか？様々な線種の表を簡単に作成する方法をご紹介！

ガイド：西村文宏
線種が豊富な表を作りたい！（後編）

ワープロや表計算ソフトで作成できるような、実線・点線・破線・二重線、太線・細線…など、様々な線を活用した表を、ホームページ上でも作ってみませんか？様々な線種の表を簡単に作成する方法をご紹介！＜後編＞

ガイド：西村文宏

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！