元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

HTML,CSS,JavaScriptの役割

ウェブサイトを作りたいとなったら、始めにHTMLを勉強すると思います。そして、勉強の過程でCSSJavaScriptの存在を知ると思います。今回は、ウェブサイトを作るときに関係するHTML、CSSJavaScriptの役割について書きます。

HTMLの役割:文書の構造化

HTMLで何をやっているのかというと、文字や文書をタグで囲って目印を付けて構造化しています。つまり、文書を構造化するための言語がHTMLです。

構造というのは、いくつかの部品を組み合わせて1つの物を作るというこです。HTMLでは、見出し(h1タグ)やリンク(aタグ)などのタグが部品に当たります。その部品を組み合わせてウェブサイトの1ページを作っています。タグには意味があり、タグで囲まれた部分はそのタグの意味を持ちます。例えば、h1タグ(<h1></h1>)で囲むと、その部分は見出しを意味します。aタグ(<a></a>)で囲むと、その部分はリンクを意味します。

文書を構造化することに意味はあります。

グーグルの検索結果で上位に表示されるために、適したマークアップは必要なことだと考えます。HTMLの構造も評価の対象のはずです。検索アルゴリズムは、ページのHTMLの構造やコンテンツの内容を評価しているのだと考えます。そのため、HTMLを分かった上でウェブサイトのページを作れるとSEO的に不利な状態を避けられるのではないでしょうか。ただし、検索アルゴリズムは公表されていないので、評価のメカニズムは分かりません。

HTMLについて少し難しい話をしたかもしれません。しかし、ウェブサイトを作ることを難しく考える必要はありません。誰しも始めから完璧なものは作れません。勉強して、その都度コードを適したものに修正していければ良いと思います。ちなみに、HTMLのタグで見た目を調整するようなことは、本来の使い方ではありません。

CSSの役割:装飾

CSSは、見た目の調整役という一言につきます。

CSSの記述のルールはもちろんありますが、基本は難しくないと思います。プロパティの種類と値の指定の仕方が分かれば充分だと思います。

CSSは、HTMLのタグ内に記述することもできますが、別ファイルにすることをオススメします。文書構造の記述と見た目の記述を分離した方が、管理しやすいです。

CSSの記述が増えると、CSSの肥大化による破綻という問題が出てくるかもしれません。そのときは、CSSの設計について調べると良いかもしれません。

JavaScriptの役割:動作

JavaScriptが使えるとウェブサイトに動きを付けられます。例えば、以下のようなことができます。

  • 朝の時間帯にサイトを訪問すると「おはようございます」と表示する
  • 画像をランダムに表示する
  • CSSのプロパティの値を変更する
  • 特定の場所をクリックしたら、何かしらのアクションを起こす
  • アクセス解析

JavaScriptが書けると色々とできることが増えます。しかし、HTMLやCSSの習得と比べるとJavaScriptの習得は難しいです。

JavaScriptの記述も別ファイルにすることをオススメします。

まとめ

HTML、CSSJavaScriptの役割について書きました。HTMLで文書構造、CSSで見た目の調整、JavaScriptで動きを付けることができます。それぞれの役割を理解して、ウェブサイトを作れると良いです。

参考サイト

最後にHTML、CSSJavaScriptの勉強に役立つサイトを挙げておきます。