ホームページ制作

CSS(スタイルシート)

CSS(スタイルシート)はウェブページのレイアウトを構成したり、背景色や文章の文字色を指定したりと、ウェブページをデザインすることができます。スタイルシートを利用することで、HTMLを文書構造、スタイルシートをデザイ ン、のように両者を独立させることができます。

CSS(スタイルシートの特徴)

CSSはCascading Style Sheetの略です。スタイルシートとは「コンピュータのアプリケーション-ソフトにおいて、レイアウトを統一できるように、文字の大きさやフォントなどの書式を登録しておく書類」を指す言葉で、ウェブ以外でも使われる言葉です。ホームページ作成においてはスタイルシートと使った場合は、CSS(カスケーディング・スタイル・シート、カスケード・スタイル・シート)の意味で使われます。

HTMLでデザイン(テーブルレイアウト)

HTMLでデザインをしてしまうテーブルレイアウトという作り方があります。テーブルタグは本来、表を作るためにあります。テーブルレイアウトは表の枠(セル)の中に文章と画像を入れて、レイアウトするためにテーブルを使います。

以前はテーブルレイアウトによるHTMLでデザインするのが主流でしたが、今はCSSによるデザインが主流となっています。

CSSでデザインのメリット

  • デザインをCSSで行うことにより、HTMLが文章構造だけの記述になるので、シンプルになり、内容を捉えやすくなります。
  • 同じデザインを使う場合は、一ヶ所記載するだけで、全ての箇所に反映させることができます。
  • デザインの統一化が容易にできます。
  • デザインを変えようと思ったときに、一ヶ所の変更で全てに反映させることが可能です。ミスが起こることも大幅に減ります。
  • 文章構造が正しく作れますので、アクセシビリティが高まります。
  • 検索ロボット(クローラー)にとっても、内容がわかりやすくなるため、SEO効果も高まります。

CSSの記述場所

CSSの記述は外部ファイルに記載して読み込む方法、ウェブページのヘッダー部分に記述する方法と、タグに記載する方法があります。基本的には全てのウェブページを一括で指定できるように、外部ファイルに記述して読み込みます。

メディア指定

ウェブページは対象メディアによって使用するスタイルシートを変更させることができます。モニター用、テレビ用、プロジェクター用、プリント用などでデザインを変更できます。

例えば、プリント用はヘッダーやサイドメニューは表示しないで、メイン情報のみを印刷できるようにすることができます。