HTMLとCSSで作るウェブサイト作成入門

CSS(１)スタイルシートCSSとは

動画解説を見る

　CSSとは、カスケーディング・スタイル・シート(cascading style sheet)の略です。HTMLのタグに「ブラウザでの効果」、つまり、「ウェブページでの見た目」を定義することができます。「ウェブページに見た目のスタイルを適用する技術」、と理解すれば良いでしょう。
　例えば、次のサンプルの赤字部分がCSSです。意味としては、「見出しタグの<h1>〜</h1>で囲まれた部分の文字を赤色にする」ということになります。

[HTMLサンプル]
<html>
<head>
<title>人間の欲求</title>
<style type="text/css">
h1 { color: red; }
</style>
</head>
<body>
<h1>生存(Existence)欲求</h1>
生命の維持や、安定した生活を求める本能的な欲求
<h1>関係(Relatedness)欲求</h1>
他者から愛され、受け入れられ、認められたいという欲求
<h1>成長(Growth)欲求</h1>
自ら発展し、なるべきものになりたいという欲求
</body>
</html>

[サンプルのブラウザ表示結果]
CSSの基本

　ところで、上記サンプルのように表示するには、赤字になっている3カ所を、<font color="red">〜</font>で囲むことでも実現できます。そうすれば、CSSを使う必要はありません。にもかかわらず、なぜわざわざCSSを使うのでしょうか。それは、(1)コンテンツとデザインを切り離せる、(2)見た目を一度に指定できる、(3)指定できる見た目の自由度が高い、というメリットがあるからです。

●コンテンツとデザインを切り離せる

　CSSを使うことで、ウェブページの内容であるコンテンツ部分と、それをどう配置するかというデザイン部分を切り離すことができます。つまり、コンテンツはHTMLで、デザインはCSSで、という具合です。コンテンツとデザインが混在したHTMLはごちゃごちゃして見にくいですし、結果としてHTML文書も長くなります。長いHTML文書は、当然、データ量が多くなり、トラフィックを増加させますし、検索エンジン対策(SEO、検索エンジンに検索されやすくする対策)上も良くないと言われています。

●見た目を一度に指定できる

　上記サンプルのように、3カ所の見出しを<font>タグを使って実現しようとすると、HTMLソースの3カ所に、<font color="red">〜</font>を設定しなくてはなりません。3カ所くらいなら良いですが、これが10カ所、100カ所と増えていくと、設定するのは一苦労です。また、もし赤色をやめて青色にしようと思ったら、<font>タグならその100カ所の全てを変更しなければなりません。ですが、すでに設定されている見出しタグ<h1>を、CSSでスタイルを変えて、文字を赤色に指定すれば、1カ所だけで変更できます。青色に修正する場合も1カ所の変更でOKです。
　また、CSSを、独立したCSSファイルとして保存し、HTML文書内で読み込んで、スタイルを適用することができます。複数のページから構成されるウェブサイトを構築する場合、トップページ、情報ページ、問合せページ、プロフィールページ・・・とページ毎にスタイルを適用していくことは、データの重複という意味でもメンテナンス性という意味でも無駄の多いやり方です。ウェブサイトを構成するページは、通常、どれもほぼ同じデザインになることが通常です(共通の色、共通のヘッダ、共通のメニューなど)。そこで、共通のCSSファイルを作成し、複数のHTMLファイルから呼び出して使えば効率的です(下図)。もし、デザインを修正する場合でも、共通のCSSだけ修正するだけで済みます。

●指定できる見た目の自由度が高い

　CSSを使うと、HTMLのタグでは実現できないような、さまざまな見た目を実現することができます。例えば、箇条書き(リスト)で、行頭の中黒を表示させないようにすることや、見出しタグの<h1>などで文字サイズを大きくしないようにしたり、<p>〜</p>タグで囲まれた部分に背景色を付けるなどです。また<textarea>などのデータ入力用タグなど背景色を指定したりすることも可能です。こだわりのウェブデザインをしたいなら、CSSは欠かすことはできません。

 　 　
　
　
　
SPONSORED LINK
　

SPONSORED LINK