サイト作成の基礎知識 HTMLとCSS


日々の生活にhappyをプラスする|ハピタス

副業でサイトアフィリエイトを行ったり、自身の副業の成果をネット上に公開したりするにはサイト作成を行う必要があります。

普段何気なく閲覧している各種サイトがどのように作成されているのかについては、自分でサイトを作成して運営する際にはとても役立ちますので基礎知識として知っておくべきでしょう。

サイトはHTMLとCSSでできている

サイトは、主にコンテンツの論理的な構造(段落や改行など)を決めるHTMLというマークアップ言語とCSSというHTMLの修飾(文字の色やサイズの変更など)を行う記述で構成されています。

これだけ言われてもよくわからないと思いますので、当サイトのトップページのHTMLとCSSを見てみると、実は以下のようになっています。

サイトはHTMLとCSSからできている

暗号のような文字の羅列に見えてびっくりするかもしれませんが、これがサイトの正体なのです。IE(インターネットエクスプローラー)やGoogle Chromeなどのブラウザでサイトを閲覧したときに、きちんとデザインされた形で表示されるのは、ブラウザがこのようなHTMLとCSSを解読して人間が見やすいように表示してくれているのです。

HTML(Hyper Text Markup Language)

HTMLとはHyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の略で、Markupの名前の通り、文章中の段落の区切り・改行・表の挿入位置などの印を付けるための言語です。

各印はタグと呼ばれており、例えば、囲った部分を太字で表示することを示す<b></b>タグを使って

と記述したものをブラウザで表示させると、「おはようございます。」と太字で表示されます。

タグは沢山の種類があるため全てを覚えるのは難しいですが、

  • <title></title>:サイトのタイトルを示す
  • <h2></h2>:文章中の見出しを示す
  • <p></p>:文章中の段落を示す
  • <a></a>:他のページやサイトへのリンクを示す

などはサイト作成の際によく使うため覚えておくと役に立ちます(使用頻度が高いので、サイト作成をしていれば勝手に覚えると思いますが)。

その他、HTMLタグの使い方については以下のページにて説明しています。

CSS(Cascading Style Sheets)

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、文字の色やサイズ、余白などのデザイン回りを表現するために用いられる記述です。

一応、文字の色くらいであればHTMLだけでも簡単にできますので、

と記述することで「色が変わります。」のように文字の色を赤にすることができます。ただ、複数の箇所を赤色にした後に別の色に変更することになれば該当する全てのタグを修正しなければならず非常に手間がかかってしまいます。

そこで、修飾を楽に行うために、CSSファイルに、

と記述しておけば、

のように修正したとしても、<span class=”colored”></span>タグで囲った文字については10箇所でも100箇所でも同時に文字の色を変更できるようになるというメリットがあります。

また、文字の色だけではなく、文章の各段落間のマージンや、サイトのコンテンツ部分・サイドバーの幅など、デザインに関することは何でもCSSで定義することができます。

なお、HTMLとCSSを混ぜて記述することもできますが、HTMLの記述が長くなって可読性が失われて修正や保守が困難になるので、HTMLとCSSは別ファイルに記述しておくのが一般的です。

CSSの基本的な使い方については以下のページで説明しています。

何故、HTMLとCSSを使うのか?

現在はサイトを簡単に作ることができるサービスやツールが多数存在するため、HTMLやCSSを全く知らなくてもサイトを構築することができますが、一昔前はHTMLとCSSの理解なくしてサイト作成は不可能でした。

サイトは人間が閲覧するものなのだから、もっと直感的に分かりやすいように作れば良いような気がしてきますが、そのような作り方がされていないのにはどのような理由があるのでしょうか?

人間にもコンピュータにも分かりやすくするため

前述の通り、HTMLはサイトの内容の論理的な構造を、CSSはHTMLの修飾を示す記述がなされている言語であり一定の規則に従った文法が存在するため、この文法さえ知っていれば誰(コンピュータも含む)が見ても同じ内容に解釈することができます。つまり、不特定多数の人間(やコンピュータ)が情報を扱うことにとても向いているのです。

仮に、標準的なHTMLやCSSが存在しなければ各々好き勝手にサイトを作成して公開することになりますが、サイトAの閲覧にはaというツールが、サイトBの閲覧にはbというツールが必要になるなどサイトごとの閲覧条件が異なるものになってしまって、インターネットは非常に煩雑なものとなっていたでしょう。

というか、サイトを閲覧するだけでそこまで煩雑だったのなら、インターネットは今ほど発展していなかったかもしれません。

一方で、文法が定義されているHTMLとCSSを用いてサイトを作成・公開すれば、HTMLとCSSを解釈して適切に表示できるブラウザ一つで世界中のどのサイトでも閲覧できて非常に便利です。人間が見てもコンピュータが見ても一意に解釈可能なサイトを作ることができる、というのがサイト作成のためにHTMLとCSSが存在する理由の一つなのです。

HTMLとCSSの役割を分離できるため

<font></font>タグや<center></cender>タグなどを駆使すればHTMLだけでもスタイルの指定を行うことができますが、サイトの規模が大きくなるとHTMLの記述が膨大になりHTMLを見ても論理構造を示しているのか、スタイルを示しているのかが分かりづらくなってしまいます。

しかし、スタイルの定義に関する部分を全てCSSに記述するような手法を取ると、HTMLは文章の論理構造のみを、CSSはスタイルのみを表すようになり、それぞれの役割が完全に分離するため非常に分かりやすいものとなるのです。

スタイルの変更を容易にするため

繰り返しになりますが、文字サイズを設定するためにサイト上のそれぞれの<p></p>タグを

のように記述する(HTMLタグにスタイル定義を組み込む)と、後で文字サイズを変更するときには、全ての<p></p>タグの設定を変更しなければなりません。

しかし、CSSを使用して文字サイズを

と設定した上で<p></p>タグを使用すれば、以降はCSSを一箇所変更するだけでサイト上の全ての<p></p>タグ文字サイズを変更することができるため、スタイル変更にかかる手間を大幅に削減することができます。

また、この点を利用すればCSSファイルを複数用意しておいて適用するCSSファイルを変更するだけでサイトのスタイルを一変させることができる(デバイスごとのスタイル・サイトのイメージカラーなど)というメリットもあります。

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です