CSSでHTMLをデザインする
ここでは前章で作成したHTMLページをデザインするためのCSS(カスケーディング・スタイル・シート)の記述方法についてご紹介いたします。 このページで基本的なHPの作成、デザインが可能となります。
CSSページを作るための準備
HTMLページの作成時と違い今のところCSSを記述するためのソフトについては種類、大差がありません。
ですのでソフトについてはHTMLを記述しているソフトで問題ありません。
ファイルの拡張子は「.css」になります。
CSSページにおける概念を理解する
CSSの記述事態はHTMLページを構築できる人なら特に難しいことはありません。 むしろ簡単だと個人的には考えます。しかしながら多くの人が躓くのはその概念の理解が難しいとされているからです。 そこで、ここでは最低限必要な2つの概念を出来る限りわかりやすいコメントで説明を心がけています。
セレクタ
CSSを記述する上でセレクタの概念がもっとも重要な部分となります。 いろいろ名前がありますが、それほどややこしいものではないのでわからなくなったときに確認してみてください。
名前 | 例 | 説明 |
タイプセレクタ | p{margin: 0;} | 指定したある要素のみに適用される |
全称セレクタ | *{margin: 0;} | 全ての要素に適用される |
グループ化 | p,h1,a{margin: 0;} | 「,」で並べた全ての要素に適用される |
名前 | 例 | 説明 |
idセレクタ(#id名) | #example{margin: 0;} | 指定したid属性を持つ一意の要素に適用される |
classセレクタ(.class名) | .example{margin: 0;} | 指定したclass属性を持つ一意の要素に適用される |
名前 | 例 | 説明 |
子孫セレクタ(A B) | #example p{margin: 0;} | 親要素Aに含まれる子孫要素Bに適用される |
子供セレクタ(A>B) | #example>p{margin: 0;} | 親要素Aに直接含まれる子供要素Bに適用される |
隣接セレクタ(A+B) | #example+p{margin: 0;} | 要素Aの直後にある要素Bに適用される |
ボックスモデル
「HTMLページを作る」にある表示例を見ていただくとわかるとおり、CSSにはボックスも出るという空白部分の領域が設けられています。 このボックスモデルを自由に設定するだけでHTMLページは飛躍的に整頓されたページへと変化します。
名前 | 説明 |
コンテンツ | 文字、画像などのコンテンツの部分 |
パディング | コンテンツとボーダーの間の空白部分 |
ボーダー | 境界線。コンテンツに対してCSSのborderプロパティで指定する部分 |
マージン | 各コンテンツのボーダーと隣り合うコンテンツのボーダーとの空白部分 |
CSSデータをHTMLファイルに関連付ける
せっかく作成したCSSデータもHTMLファイルに関連付けなければまったく意味がありません。 両ファイルを関連付ける作業は難しくはありません。確実に行ってください。
CSSを書く
概念についてご紹介いたしましたが実際はCSSを記述していくことで覚えていく方が効率的でわかりやすいでしょう。
CSSではHTML文書で記述した要素に対してプロパティを適用させていくことでページのデザインを行います。
プロパティは100種以上にも及び、適用できる要素もまちまちですので、まずは基本的なプロパティをご紹介いたします。
1.余白、配置についてのプロパティ
プロパティ | 使い方 | 値 | 適用可能要素 |
プロパティの説明 | |||
margin | セレクタ{margin: 値;} | 長さを1個から4個並べる | 全て |
上下左右のマージンの設定。 | |||
padding | セレクタ{padding: 値;} | 長さを1個から4個並べる | 全て |
上下左右のパディングの設定。 | |||
border-width | セレクタ{border-width: 値;} | 枠線の太さを1個から4個並べる | 全て |
上下左右の枠線(ボーダー)の太さを指定する。 | |||
border-style | セレクタ{border-style: 値;} | 枠線のスタイルを1個から4個並べる | 全て |
上下左右の枠線のスタイルを指定する。 | |||
border-color | セレクタ{border-color: 値;} | 枠線の色を1個から4個並べる | 全て |
上下左右の枠線の色を指定する。 | |||
border | セレクタ{border: 値;} | 太さ,スタイル,色を並べる | 全て |
上下左右の枠線の太さ、スタイル、色を指定する。 | |||
width | セレクタ{width: 値;} | 長さ,%,auto | ブロック要素,インライン要素 |
要素の幅を指定する。 | |||
height | セレクタ{height: 値;} | 長さ,%,auto | ブロック要素,インライン要素 |
要素の高さを指定する。 | |||
float | セレクタ{float: 値;} | left,right,none | 全て |
回り込み、段組の効果を作成する。 | |||
clear | セレクタ{clear: 値;} | none,left,right,both | ブロック要素 |
floatプロパティの回り込み効果を解除する。 | |||
position | セレクタ{position: 値;} | static,absolute,relative,fixed | 全て |
ページ内で座標を指定して要素を配置する。 | |||
overflow | セレクタ{overflow: 値;} | visible,hidden,scroll,auto | ブロック要素 |
指定された幅,高さから要素の内容がはみ出したときの表示方法を指定する。 |
2.文字、テキスト
プロパティ | 使い方 | 値 | 適用可能要素 |
プロパティの説明 | |||
font-size | セレクタ{font-size: 値;} | 長さ、%等 | 全て |
セレクタに記載した要素の文字のサイズを指定する。 | |||
font-family | セレクタ{font-family: 値;} | フォント名等 | 全て |
セレクタに記載した要素をどのフォントで表示するか指定する。 | |||
font-weight | セレクタ{font-weight: 値;} | bold、normal等 | 全て |
セレクタに記載した要素の文字の太さを指定する。 | |||
line-height | セレクタ{line-height: 値;} | normal、実数、%等 | 全て |
セレクタに記載した要素の行の高さを指定する。 |
3.色、背景
プロパティ | 使い方 | 値 | 適用可能要素 |
プロパティの説明 | |||
color | セレクタ{color: 値;} | 色 | 全て |
文字の色を指定する。 | |||
background-color | セレクタ{background-color: 値;} | 色 | 全て |
HTML要素の背景に塗られる色を指定する。 | |||
background-image | セレクタ{background-image: 値;} | URLまたはnone | 全て |
HTML要素の背景に敷き詰める背景画像を指定する。 | |||
background-repeat | セレクタ{background-repeat: 値;} | repeat,repeat-X(Y),no-repeat | 全て |
背景画像の繰り返しのパターンを指定する。 | |||
background-position | セレクタ{background-position: 値;} | %,長さ,位置 位置 | 全て |
背景画像の表示位置を指定する。 | |||
background-attachment | セレクタ{background-attachment: 値;} | fixedまたはscroll | 全て |
背景画像を固定する。 | |||
background | セレクタ{background: 値;} | backgroundプロパティ5種の値 | 全て |
backgroundプロパティ5種の値をまとめて指定する。 |
4.リスト、テーブル
プロパティ | 使い方 | 値 | 適用可能要素 |
プロパティの説明 | |||
list-style-type | セレクタ{list-style-type: 値;} | none,disc,decimalなど | リスト項目 |
リスト項目の行頭記号を指定する。 | |||
list-style-image | セレクタ{list-style-image: 値;} | URLまたはnone | リスト項目 |
リスト項目の行頭記号に画像を指定する。 | |||
list-style | セレクタ{list-style: 値;} | list-styleプロパティ3種の値 | リスト項目 |
リスト用のプロパティ3種をまとめて指定する。 | |||
border-collapse | セレクタ{border-collapse: 値;} | collapseまたはseparate | table要素 |
表の枠線を一体化か分離か指定する。 | |||
empty-cells | セレクタ{empty-cells: 値;} | showまたはnone | td,th要素 |
空セルの枠線の表示を指定する。 | |||
caption-side | セレクタ{caption-side: 値;} | top,bottom,left,right | caption要素 |
表題の表示位置を指定する。 |