CSSとは何か?使用するメリットや適用方法を紹介。

20141017-1HTMLとは何か?」で解説したとおり、HTMLはマークアップ言語となります。Webページの文章に意味を付けることで、文章構造を明確にします。それに対して、CSSは「Cascading Style Sheets:カスケーディング・スタイルシート」の略で、Webページの装飾やレイアウトを行うものです。

キレイで見やすいWebページを作成するためには、必要不可欠な技術ですから必ず覚えておくようにしましょう。ここでは、CSSが必要な理由やメリットなどを解説します。Webデザインを身に付けたい人は、参考にしてください。

 

CSSの登場について

1996年に初めてCSSが登場しました。インターネット技術の標準化を目指す「W3C」という団体が、勧告したものですね。しかし、当初はインターネットブラウザの多くがCSSに対応していなかったために、全く普及しませんでした。

その後、2004年に新基準の「CSS2.1」が発表され、さらに「Mozilla」や「Opera」などの次世代ブラウザが登場したことで、CSSが一気に普及していきます。それから現在まで、Webデザインの手法として、世界中で使用されているわけです。

 

CSSを使うメリットとは?

実際のところ、HTMLだけでもWebページをデザインすることはできます。テーブルタグを使えば、段組みのレイアウトが可能ですし、center要素やcolor属性を使うことでテキストの装飾が出来るようになっています。

でも、HTMLの本来の目的は、文章構造をマークアップすることです。見出しや段落、箇条書きなどの構造を明確にすることなんですね。だから、HTMLで装飾をすると、目的からずれてしまうことになります。さらに、ソースも複雑になってしまうために、ページの表示が遅くなってしまう原因となることがあります。

ですから、CSSを使ってレイアウトを行うことが、推奨されているわけですね。CSSを使うメリットしては、以下のようなものがあります。

 

HTMLのソースがシンプルになる

文章構造とレイアウトを分離することで、HTMLに記述する内容を減らすことができます。そうすると、情報量が少なくなって、コンピュータが読み取りやすくなるわけですね。ですから、ページの容量が軽くて、表示速度も速いサイトを作成することが出来ます。

最近の検索エンジンは、Webページの表示速度を重要視しています。なので、表示速度が速いページほど、検索結果でも上位に上がりやすくなるということです。ユーザビリティにも良いですし、SEO対策にも繋がりますから、かなりメリットがありますね。

 

Webページの管理が楽になる

レイアウトや装飾をCSSで行うと、CSSを修正するだけですべてのページに反映されます。1つずつページを修正する必要がありませんから、管理が非常に楽になります。特に、数百ページのWebサイトであれば、修正が大変ですよね。でも、CSSを使っていると、大幅に労力を減らすことができます。

また、サイトのイメージチェンジを行いたい場合でも、CSSを修正するだけで全く別のデザインに変えることも可能です。サイト管理者からすれば、すごく便利だと思います。

 

CSSを適用させるには?

HTMLの文章にCSSを適用させるには、3つの方法があります。見た目の表示はすべて同じになりますが、その後の管理に大きな違いが出てきます。状況によって使い分けが可能ですから、覚えておくようにしてください。

 

link要素を使う

最も一般的な方法は、CSSを別ファイルで作成して、それをHTMLにリンクさせるというものです。

<link rel=”stylesheet” href=”style.css” type=”text/css”>

上記のソースをHTMLのhead要素に挿入することで、リンクさせることができます。この方法を使うことで、上記で述べたようなメリットを得られます。サイトの管理としては、最も優れたやり方となりますね。

 

style要素を使う

これは、<style>○○○</style>の中にCSSを記述して、HTMLのhead要素に直接入れるという方法です。同じファイル内にHTMLとCSSがありますから、記述がしやすいメリットがあります。しかし、ページ数が多くなってくると、修正が大変になるデメリットがあります。

なので、小規模なWebページの際に有効な方法かもしれません。

 

style属性を使う

これは、HTMLのタグにstyle属性を入れて装飾を行うものです。

<p style=”font-size: 20px;”>ここにテキストが入ります。</p>

上記のような形で、直接記述を行います。適用箇所が少なくて、別ファイルを作るのが面倒な時に使うと良いでしょう。

現在だと、「link要素」を使う方法が一般的です。大多数のサイトで使われている手法なので、Webデザインを行う時には「link要素」を使っておけば間違いないはずです。CSSをしっかりと理解して、Webデザインをマスターしましょう。

サブコンテンツ

このページの先頭へ