TOPHP作りの話>CSSでHTMLをデザインする

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セレクタ・classセレクタ
名前 説明
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要素
表題の表示位置を指定する。
inserted by FC2 system