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

2007/05/24

第十八回　HTML・CSSの基礎　【その1】

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

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

今回は配信まで期間が開いてしまいました。
なかなか忙しい日々で配信が遅れてしまうのは良くないですね。
反省しきりです。週一回のペースで配信できればいいのですが。

最近Googleの様々なサービスのアップデートがありましたね。
アルゴリズムで検索にひとまずの「終焉」をうつ布石でしょうか。
今後もGoogleの動向には注目です。

またYahoo!でも「はてな」と同じようなブックマーク表示が
出るようになりました。これはYahoo!ブックマークをされている「数」を
検索結果として表示させるシステムです。
これもまたアルゴリズム検索だけではユーザーの「欲しい情報」まで
たどり着けないと言う現状を表しているのではないでしょうか。
皆さんは「正統派」SEOでユーザーの欲しい情報を提供できる
ウェブサイト作りをしていってください。

さて、今回からはしばらくHTML・CSSの基礎をお話いたします。
一通り学んでいただければ、ビルダー・Golive・DWなどに頼らずとも
サクサクとHTML・CSSが記述できるようになる・・・かもしれません。
このHTML・CSSの基礎を学ぶ前に、必ずHTML・CSSを編集できるツールを
入手しておくことをお勧めいたします。
Crescent Eveが私のオススメです。

http://www.kashim.com/index.html
で配布されています。

HTML・CSSの基礎その1となる今回は約束事です。
今回からお話しするHTMLはXHTML1.0の移行型、CSSはCSS2をベースに
お話していきますのでお間違えのないように。

HTMLとはウェブページを作成するために用いられます。
HTMLは　Hyper　Text　Markup　Language　の略で、
「マークアップする」つまり「しるしをつける」という意味です。
HTMLを用いるからには「段落」「見出し」「強調」を
しっかりと「しるし付け」することが求められます。
これこそがSEOにもつながりますので覚えておいてください。

HTMLのバージョンは様々ありますが、ちょっと割愛。

HTMLは要素と属性に分かれます。
＜a href="index.html"＞Home＜/a＞
よくあるトップページへのリンクを表すHTMLです。
この場合＜a＞＜/a＞が「リンク」としての「要素」で
href　は属性名、index.htmlは属性値となります。
これは間違えないようにしてください。
未だにimg要素のaltを、altタグとか言っている人もいますが間違いです。
altは「属性」なのでお間違えのないように。

HTMLでウェブページを作成するとき、
「開始タグ」「内容」「終了タグ」となります。
＜p＞テキストの内容＜/p＞という感じですね。
XHTML1.0では必ず「終了タグ」が必要になります。
これは空の要素さえも＜img /＞＜br /＞と閉じなければならないと
言うことを意味しています。
この場合間違えてはいけないのは「終了タグ」を記述してはいけないということです。
＜img src="KK.gif" alt="画像"＞＜/img＞は間違いだということです。
＜img src="KK.gif" alt="画像" /＞が正式な記述となります。

HTMLの要素の多くは「ブロック要素」「インライン要素」の２つに分かれます。
＜h1＞はブロック要素で、＜strong＞はインライン要素です。
つまり、「ブロック要素」の中に「インライン要素」を記述することが
正しいHTMLの文法というわけです。

HTMLでは要素の内容として記述できるものが種類ごとに決まっています。
例えば＜ul＞の中には＜li＞しか記述できない、などです。

このほかにも「必須属性」というものがあります。
例えばimgタグにはsrc属性とalt属性が必須です。
これはウェブアクセシビリティの観点からも重要な項目です。
imgタグにalt属性が無ければ「画像を表示できる環境に無い」場合や
「画像を見ることが出来ない場合」などにimgタグの「意味」が
分からないからです。

ちょっと難しいかも知れませんし、自分で既にHTMLを記述できる方には
簡単すぎるかもしれません。しかし「基本」を再度学ぶことは
とても大切なことです。
次回はCSSの基本を学んでいきましょう。

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