スタイルシートを使う

SEO対策ということで、色々なサイトを調べてみると、

○HTML上の論理構造をはっきりさせること

という文章をよく目にします。
そのことを頭において、自分のサイトのHTMLを眺めてみると、もともと『表(<table>タグ)』を、レイアウトを形成する為の基本として用いていたので、Webを視覚的に見た場合は、整っているように見えても、論理構造がほとんど構成されていなかったように思いました。
 
『論理構造』というと、いまいちピンと来ないかも知れませんが、簡単に言うと、
○HTMLのソースを上から順番に眺めていった時に、秩序だっているかどうか
という事になると思います。

表(<table>)を多用したページは、視覚的には整って見えるのですが、HTMLのソースを見ると、文脈を感じさせないようなバラバラな配列になっていることは多いような気がします。
それと、<table><tr><td></td></tr></table>のようなタグを多く使わなければならないので、少し複雑なページを作ると、作成されたhtmlのファイルが大きくなってしまう傾向があります。
 
この問題をクリアする第一歩として、表を用いないページ作成に取り組みました。
 
このページで、大体のイメージがつかめたら、
詳細や正確なところは、ご自身でご確認下さい。
次のサイトは参考になると思います。


HTMLクイックリファレンス

色コードの変換(16進←→10進)に便利なページ

CSSを活用し始めると、色コードを結構意識する場面が増えてきます。次のページがいいですよ。
http://www.kitaq.net/lib/rgb/

関連書籍



CSS3 Design Book
著者: 渡邉 希久子   出版年月: 2012-03-10  
定価: ¥ 2,814 (新品)
速習Webデザイン 改訂第3版 HTML&スタイルシート
著者: 栗原 明則   出版年月: 2012-03-07  
定価: ¥ 2,604 (新品)
Webデザイン基礎 改訂3版 (速習Webデザイン)
著者: 境 祐司   出版年月: 2012-01-06  
定価: ¥ 2,604 (新品), ¥ 2,100 (中古)
Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)
著者: 高津戸 壮   出版年月: 2011-12-07  
定価: ¥ 3,024 (新品), ¥ 4,559 (中古)
Your rating: なし Average: 4.8 (6 votes)

にほんブログ村 IT技術ブログへ人気ブログランキングへ