[CSS][基礎知識]CSSとは
はじめに
今日はCSSの基本を勉強しました。
CSSとは
Webページのレイアウトを定義する規格。これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれたが、これは、文書の論理構造を記述するという本来のHTMLの目的に反するため、文書の視覚的構造を規定する枠組みとしてCSSが新たに策定された。e-words
CSS(Cascading Style Sheets)は、HTML文書に装飾やレイアウトをほどこすための言語です。HTMLが建物の「基礎構造」とするなら、CSSは「内装・外装」にあたります。
CSSを組み込む方法
インライン
<h1 style="color: white">見出し１</h1>
HTMLタグの中にstyle属性として直接記述します。CSSの目的に反するためあまり使用しません。
内部参照
<head> <style type="text/css"> h1 {color: white;} </style> </head>
HTML文書のhead要素の中に記述します。そのページでしか使えないため、例外的にそのページのみで使うスタイルを指定するなど、限定的な使い方に留めるべきです。
外部参照
<head> <link rel="stylesheet" type="text/css" href="外部ファイルへのパス" media="all"> </head>
CSSを外部ファイル化し、それを参照します。スタイルを複数のページに適用できるなどメリットがあります。
| 属性 | 値 | 説明 |
|---|---|---|
| type="" | MIMEタイプ | CSSのMIMEを指定 |
| media="" | mediaタイプ | 対象とするメディアの指定 |
- MIMEタイプ:データの形式を指定
- mediaタイプ:メディアを指定 何も書かないとmedia="all"
スクリーンのほかモバイル機器やプリンタなど、メディアごとに別のCSSを適用できます。
<link rel="stylesheet" type="text/css" media="screen, tv" href="browse.css"> <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css">
なぜCSSを使うのか
メリット
- サイトの重さ軽減（SEOにも有効）
- 文書構造を保ちながら自由にレイアウト
- 編集が簡単
- 読み込みが早い
- ユニバーサルデザインに最適
デメリット
- ブラウザによる表示差（特にInternetExplorerで問題）
CSSの記述に便利なツール
- HTML Validator…HTMLやCSSの検証ができる
- Web Developer…Web開発に便利な様々な機能(Firefoxプラグイン)
