seth-tech’s blog

仕事で調べたことなど備忘録

[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 要素の重なりの順序を指定