第十九回　HTML・CSSの基礎　【その2】 [まぐまぐ！]

2007/06/01

第十九回　HTML・CSSの基礎　【その2】

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇ 上位表示実現へ!XHTML・CSSで作るウェブサイト  ◇
◇ 発行：不定期　著作：淵上　喜弘【LLCJIRIKI】  ◇
◇ http://www.jiriki.co.jp　　　　　　　　　　　◇
◇ http://jiriki.jp     　　　　　　　　　　　　◇
◇ info@jiriki.co.jp　　　　　　　　　　　　　　◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

SEO・SEMブログが出来ました！
http://jirikiseo.blog94.fc2.com

いよいよ6月となりましたね。
去る5月24日にYSTのインデックスなどががらりと変わっています。
皆様のウェブサイトは順位変動があったでしょうか？
当社は相変わらず「ウェブサイト制作」の
キーワードで1位を維持しています。
皆さんのSEOにメルマガ・ブログ共にお役に立てれば幸いです。

さて、今回は引き続きHTML/CSSの基礎を学んでいきましょう。
十八回ではHTMLの基礎のさわりをお話しましたが、
今回はCSSの基本中の基本をお話していきます。

かつて、いや実際には今でもHTMLの中身にデザイン要素を含ませている
ことが多く見受けられます。それが全て「悪い」とは言いませんが、
ウェブ標準技術からすれば「非推奨」となってしまいます。
例えば、＜body＞の中に＜body bgcolor="ffffff"＞などですね。
＜table＞要素も本来であれば「表」として使うべきところをデザイン要素として
使う場合も一般的になっています。
＜font＞や＜center＞なども「非推奨」となる要素です。

ウェブページの容量や、SEO観点から見てもHTMLの中身にデザイン要素を
含むことは好ましくありません。
このため、デザイン要素を外部に置く、つまりCSSの出番となります。
HTMLはページの内容を記述する。CSSはページのデザインを記述する、と覚えましょう。

現実にはCSSは未だブラウザごとに「解釈の仕方」が異なるので
ブラウザごとの確認作業がもっとも手間だと思います。
しかし、このたび登場したDWのCS3ではこのあたりが解消されるようです。
便利なので当社でも導入を検討中です。

ではいよいよCSSの文法を見ていきましょう。
以下は＜p＞に対するCSSの記述です。

p ｛
   font-size: 14px;
   text-align: left;
   ｝

どうでしょう。簡単だと思いませんか。
基本的には今までHTML内に記述していた内容とそう大差ないはずです。

この場合　pをセレクタ。　font-size text-align　をプロパティ。
14px left　を値として見る事になります。
この記述方法は一般的なものなので必ず頭に入れておきましょう。
また、値を入力したあとは必ずセミコロン「;」　を入力します。
これを忘れていて指定したように表示されない、という初歩トラブルもあります。
また、CSS内にコメントを書く場合は　/＊　コメント　＊/ と書きます。
こうしてコメントをCSS内に書いておくことであとからの見直しが容易になります。
見出しの指定、段落の指定、テキスト全体の指定、リンクの指定、など
それぞれ項目ごとにコメントで区切るクセ付けをしましょう。

次回は実際にHTML・CSSの実例を見ながら解説をしていきます。
次回の配信は6月中旬になりますが、HTML・CSSのサンプルをお作りいたしますので
申し訳ございませんがお待ち下さい。

**************************************************
■著者：淵上　喜弘【LLC JIRIKI　合同会社ジリキ】■
■http://www.jiriki.co.jp 　　　　　　　　　　　■
■http://jiriki.jp      　　　　　　　　　　　　■
■お問い合わせご質問は　info@jiriki.co.jp　まで ■
**************************************************