[css]スタイルシート
サイトの見た目をいじれるスタイルシート。
基本
拡張子は"css"
外部ファイルで用意し、HTML内のhead内にlinkで指定する。
<link rel="stylesheet" type="text/css" href="../css/hoge.css">
hrefの中身は各環境に合わせて。
複数のスタイルシートを使う場合は複数並べて記載すればOK
書き方
セレクタ、プロパティ、値の3要素からなる
- セレクタ : 対象を決める
- プロパティ : 項目を決める
- 値 : 設定値を決める
例)
span.red { color:red; font-size:20px; }
span要素のクラス"red"の文字色を赤にして文字サイズを20pxにする。
※colorはカラーコードでも指定できる。詳細はWEB色見本 原色大辞典 - HTMLカラーコードを参照。
この例では"span.red"がセレクタ、"color"と"font-size"がプロパティ、"red"と"20px"が値。
クラス名のみで指定したい場合は要素部分は省略可能。
例)
.red { color:red; font-size:20px; }
もちろん要素のみで指定したい場合はクラス名が不要。
例)
span { color:red; font-size:20px; }
その他
主に設定できる項目は下記の通り
プロパティ | 説明文 |
---|---|
color | 文字色の指定 |
background | 背景の指定 |
background-color | 背景色の指定 |
font-family | フォント種類の指定 |
font-weight | フォント太さの指定 |
line-height | 行の高さを指定 |
text-align | 行の揃え位置を指定 |
width | 幅の指定 |
height | 高さの指定 |
margin | マージンの指定 |
padding | パディングの指定 |
border | ボーダーの色や太さを指定 |
position | 要素の配置方法を指定 |
display | 要素の表示形式を指定 |
float | 左か右に寄せて配置 |
z-index | 要素の重なりの順序を指定 |