モバイルスペースが流行していた頃、HTMLでプログラミングをしていた女子は以外に多いもの。
mobile spaceの思い出(モバスペあるある)
最近になってまたブログやWebサイト作成が静かなブームですが、現在の画面レイアウトはCSSで行うのがセオリー。tableレイアウト全盛期にモバスペでHTMLを身に着けた女子にとって、CSSレイアウトの世界はわけがわからないもの。
いくら今の主流だといっても、慣れ親しんでよく知っているスタイルを捨てて未知の新しいものに変えるのはちょっとためらいますよね。
しかし、テーブルレイアウトではなくCSSレイアウトが今の主流になったのにはわけがあります。
CSSレイアウトを身に付けた時のメリットを、今回ご紹介したいと思います。
目次
テーブルレイアウトとCSS比較
まずは簡単に二つのレイアウト方法の比較をしてみようと思います。
同じデザインのものをそれぞれの方法で作ってみたので、見てください。
なお、テーブルレイアウトについては昔モバスペで流行していた形式で記述します。
テーブルレイアウト
 |
【自己紹介】 このサイトの管理人です。 よろしくおねがいします。 |
| 名前：ノッテ |
<table style="border: solid #000000 1px;"> <tbody>
<tr>
<td width="150" height="150"><img class="alignnone size-thumbnail wp-image-24" src="https://t-shukujo.com/wp-content/uploads/2016/02/9eb686982d08ecee3c84dd9b182e772b-150x150.png" alt="ノッテ" width="150" height="150" /></td>
<td bgcolor="#fafdff" rowspan="2">【自己紹介】
このサイトの管理人です。
よろしくおねがいします。</td>
</tr>
<tr>
<td bgcolor="#ffffbb">名前：ノッテ</td>
</tr>
</tbody> </table>CSSレイアウト
このサイトの管理人です。
よろしくおねがいします。
<div id="css-all">
<div class="css-left">
<div class="css-img"><img class="alignnone size-thumbnail wp-image-24" src="https://t-shukujo.com/wp-content/uploads/2016/02/9eb686982d08ecee3c84dd9b182e772b-150x150.png" alt="ノッテ" width="150" height="150" /></div>
<div class="css-name">名前：ノッテ</div>
</div>
<div class="css-right">【自己紹介】
このサイトの管理人です。
よろしくおねがいします。</div>
</div>.css-all{
border:solid #000000 1px;
background:#fafdff;
}
.css-left, .css-right{
float: left;
}
.css-name{
background:#ffffbb;
}
.css-all:before, .css-all:after {
content: "";
display: table;
}
.css-all:after {
clear: both;
}二つの見た目に大きな違いはありませんが、ソースコードを見ればわかるように、構造は大きく異なっています。
テーブルレイアウトでは表のセルで囲みをいくつか作り、その中に表示したい要素を並べて詰め込んでいきました。
対してCSSレイアウトでは、HTML側は<div>タグで囲まれた要素が並んでいるだけのすっきりした構造。
サイトの構造を記述するだけにとどめておきます。
<div>にclassやidを持たせ、CSSでそのclassやidを指定してデザインを記述することで、上のテーブルレイアウトと同じような見せ方をしています。
HTMLとCSSについては、どうしてもCSSが分からない人のためのCSS入門 で簡単に解説していますので、読んでみてください。
CSSにするメリット
二つのソースコードを比較すると、テーブルレイアウトのほうが短くCSSレイアウトのほうが長いですね。
それに、同じように見せられるなら、慣れ親しんだテーブルレイアウトでも良いのでは？と思う方も多いと思いますが、CSSレイアウトにのほうが便利でメリットもあるので、現在の主流になっています。
CSSレイアウトのメリットをいくつか挙げてみます。
HTML文書の正しい使い方をしている
元々、HTMLはサイト作成に限らず文書作成のためのマークアップ言語です。
文書の形式やタイトルなどの情報を保持するhead要素、文書本体のbody要素、見出しのh1、小見出しのh2、h3等、タグにはそれぞれ役割があり、文書の構造をまとめています。
基本的にHTMLは装飾せず、このような文書の構造のみを記述することが推奨されています。
テーブルレイアウトは、そもそも表を表示するためのtableタグを用いているので、文書構造が正しくありません。
また、左から右、上から下というセルの順番になっているため、文書としての順番と見た目の順番が一致しない場合もあります。
文書構造が正しいと、人間だけではなく機械が読みやすいサイトを作ることが出来ます。
機械が読みやすいと、例えば盲目の人に対してやさしいサイトになります。
盲目の人はインターネットを使う際、読み上げ機能を用いてサイトの情報を聞き取ります。
正しい文書構造で記述されたサイトは、読み上げ機能が文章や段落を順番どおりに読み上げるので、盲目の人にも正しく情報を届けることが出来るのです。
Googleの検索ではユーザビリティを重視するため、上位に表示されるのはこの基本を守っているサイトが多いといいます。
ただ、装飾なしのサイトや、レイアウトがちゃんと組まれていないサイトは見た目がよくなく、非常に読みづらいです。
色や配置も文書の主張や意図を伝える大事な情報です。
したがって、CSSによってHTMLを装飾します。
文書の構造はHTML、装飾はCSSと分業することで、サイトを見る人にとっても、Googleのようなサーチエンジンにとっても分かりやすいサイトを作ることが出来るのです。
複数ページや複数の要素を一発で指定できる
ホームページやブログのヘッダーやサイドバーなど、複数ページで同一の構造、機能、見た目を持つものに対して、同一のidやclass属性をつけることで、デザインの記述を一つのCSSで済ませることが出来ます。
テーブルレイアウトで複数ページの構造を同一にしようとすると、その都度HTMLにテーブルタグでデザインを記述していかなければならないため、かえってソースコードの総量は多くなります。
後でデザインを変えたいときに楽
HTMLをサイトの構造を記述するだけにとどめておき、デザインをCSSで指定していれば、デザインだけ変えたいときにCSSのみ変更すればよいので、効率が上がります。
何か要素を足したいときにCSSレイアウトならdivなどで囲んだものを追加しCSSを記述すればすむものを、テーブルレイアウトだとtrタグやtdタグを大量に、それも正確に追加しなければならない場合があったりと、デザインする段階で無駄な時間を使います。
また、複数ページのデザインを一気に変える際に非常に楽になります。
あるclassやidの属性に対して、CSS一箇所変更するだけで、全てのページのその属性を持つデザインに変更が適用されるため、メンテナンスや更新の時間が短縮されます。
テーブルレイアウトのサイトのデザインを一気に変えようとした場合、全てのページのデザインを変えなければならないため大変ですし、サイトの規模が大きくなるほど変更に漏れが出やすくなってきます。
デザインの流行を取り入れやすい
今の時代、Webサイトを観ることの出来るデバイスの種類は豊富です。
PCはもちろん、スマホやタブレットでネットを見る人がとても増えました。
そのため、PCでもモバイル端末でも見やすいレスポンシブデザインが今のトレンドです。
初心者でもレスポンシブデザインを簡単に実現してくれるフレームワーク（BootStrapやMaterializeなど）が豊富にあります。
当サイトでもMaterializeを用いてレスポンシブデザインにしているので、PCとスマホでは表示が異なります。
CSSレイアウトだと、デバイスの画面サイズごとにフレキシブルに要素を配置できるので、レスポンシブデザインにも出来ますが、テーブルレイアウトはどのデバイスでもデザインが固定のため、PCで見やすいサイトがスマホでは見づらいなんてことも。
これから先、デザインのトレンドもどんどん変わっていくでしょうが、それらに対応しやすいのはやはりこの先もずっとCSSデザインのほうでしょう。
以上がCSSレイアウトのメリットです。
まとめ
いかがでしたでしょうか。
サイトの構造と、色やレイアウトなどの装飾を分けることで、サイトを読む人にも機械にも自分にも優しいサイトになります。
人や機械にとって読みやすいサイトにすれば、サイトのリピーターが増えますし、メンテナンスのしやすいサイトにすれば、デザインの一新もすぐに出来ますし、トレンドを取り入れたデザインにも簡単にできます。
CSSで出来ることは本当に多く、テーブルレイアウトでは実現できない表現なども簡単に実現できます。
ブログやWebサイトの作成やデザインをしてみようと思いましたら、是非CSSを覚えて素敵なサイトを作ってくださいね。