Blogger Labo：【CSS】Bloggerカスタマイズでよく使うプロパティ集

Bloggerカスタマイズでよく使うプロパティをまとめてみました（基本的に自分用）。


文字（テキスト・フォント）


font-size（フォントサイズ） －文字の大きさ－


font-size:値;

・説明：フォントのサイズを指定
・値：数値（px、em、ex）、%、キーワード（xx-small、x-small、small、medium、large、x-large、xx-large）
・用例：font-size:10px;
・備考：fontプロパティでまとめて指定することも可能（font: bold large/120% "ＭＳ 明朝";）

font-weight（フォントウエイト） －文字の太さ－


font-weight:値;

・説明：フォントの太さを指定
・値：数値（100～900）、normal（標準）、bold（太字）、lighter（細め）、bolder（太め）
・用例：font-weight: bold;

font-style（フォントスタイル） －文字の形態－


font-style:値;

・説明：フォントの形態を指定
・値：normal（標準）、italic（イタリック体）、oblique（斜体）
・用例：font-style: italic;

font-family（フォントファミリー） －フォントの種類－


font-family:値;

・説明：フォントの種類を指定
・値：フォント名、キーワード（sans-serif、serif、cursive、fantasy、monospace）
・用例：font-family: "ＭＳ ゴシック",sans-serif;

line-height（ラインハイト） －行の高さ－


line-height:値;

・説明：行の高さ（行間）を指定
・値：normal、数値（px、em、ex）、数値のみ、%
・用例：line-height: 15px;

text-decoration（テキストデコレーション） －文字の装飾－


text-decoration:値;

・説明：文字の装飾を指定
・値：none（標準）、underline（下線）、overline（上線）、line-through（打ち消し線）ほか
・用例：text-decoration: underline;
・備考：text-decoration-line、text-decoration-style、text-decoration-colorの値を使用可

color（カラー） －文字色－


color:値;

・説明：文字色を指定
・値：カラーネーム（redなど）、配色パターン（#000000など）
・用例：color: #000000;

色・背景


background（バックグラウンド） －背景－


background:値;

・説明：背景の指定
・値：カラーネーム（redなど）、配色パターン（#000000など）、画像URLほか
・用例：background: #000000;

background-color（バックグラウンドカラー） －背景色－


background-color:値;

・説明：背景色の指定
・値：カラーネーム（redなど）、配色パターン（#000000など）、透明（transparent）
・用例：background-color: #000000;

background-image（バックグラウンドイメージ） －背景画像－


background-image:url("画像URL");

・説明：背景画像の指定
・値：画像URL、none（なし）
・用例：background-image: url("../images/sample.png");

background-repeat（バックグラウンドリピート） －背景画像のリピート－


background-repeat:値;

・説明：背景画像のリピート方法を指定
・値：repeat（縦横）、repeat-x（横方向のみ）、repeat-y（縦方向のみ）、no-repeat（繰り返さずに表示）
・用例：background-repeat: no-repeat;
・備考：background-imageと組み合わせて使う

background-position（バックグラウンドポジション） －背景画像の表示位置－


background-position:値;

・説明：背景画像の表示開始位置を指定
・値：キーワード（left/center/right、top/center/bottom）、%、数値
・用例：background-position: left center;
・備考：background-imageと組み合わせて使う

幅・高さ


width（ウィドゥス） －横幅－


width:値;

・説明：横幅を指定
・値：auto（自動）、数値（px）、%
・用例：width: 100px;
・備考：レスポンシブ設定などで使用することが多い

max-width（マックスウィドゥス） －横幅の最大値－


max-width:値;

・説明：横幅の最大値を指定
・値：none（なし）、数値（px）、%
・用例：max-width: 100px;
・備考：レスポンシブ設定などで使用することが多い

min-width（ミンウィドゥス） －横幅の最小値－


min-width:値;

・説明：横幅の最小値を指定
・値：none（なし）、数値（px）、%
・用例：min-width: 100px;
・備考：レスポンシブ設定などで使用することが多い

height（ハイト） －高さ－


height:値;

・説明：高さを指定
・値：auto（自動）、数値（px）、%
・用例：height: 100px;
・備考：レスポンシブ設定などで使用することが多い

max-height（マックスハイト） －高さの最大値－


max-height:値;

・説明：高さの最大値を指定
・値：none（なし）、数値（px）、%
・用例：max-height: 100px;
・備考：レスポンシブ設定などで使用することが多い

min-height（ミンハイト） －高さの最小値－


min-height:値;

・説明：高さの最小値を指定
・値：none（なし）、数値（px）、%
・用例：min-height: 100px;
・備考：レスポンシブ設定などで使用することが多い

余白（マージン・パディング）


margin（マージン） －外側の余白－


margin:値;

・説明：外側の余白を指定
・値：auto（自動）、数値（px）、%
・用例
　・[上下左右]：margin:10px;
　・[上下][左右]：margin:10px 5px;
　・[上][左右][下]：margin:7px 10px 5px;
　・[上][右][下][左]：margin:7px 5px 10px 5px;
　・[上]：margin-top:10px;
　・[下]：margin-bottom:10px;
　・[左]：margin-left:10px;
　・[右]：margin-right:10px;

padding（パディング） －内側の余白－


padding:値;

・説明：内側の余白を指定
・値：auto（自動）、数値（px）、%
・用例
　・[上下左右]：padding:10px;
　・[上下][左右]：padding:10px 5px;
　・[上][左右][下]：padding:7px 10px 5px;
　・[上][右][下][左]：padding:7px 5px 10px 5px;
　・[上]：padding-top:10px;
　・[下]：padding-bottom:10px;
　・[左]：padding-left:10px;
　・[右]：padding-right:10px;

線（枠線・境界線）


border（ボーダー） －線－


border: 値（スタイル） 値（太さ） 値（色）;

・説明：枠線・境界線の指定
・値
　・スタイル（本数）：solid（1本）、double（2本）
　・スタイル（装飾）：groove、ridge、inset、outset、dashed（破線）、dotted（点線）
　・スタイル（非表示）：none（なし）、hidden（隠す）
　・太さ：数値（px、em、ex）、thin（細い）、medium（普通）、thick（太い）
　・色：カラーネーム（redなど）、配色パターン（#000000など）、透明（transparent）
・用例
　・[上下左右]：border: solid 2px #000000;
　・[上]：border-top: solid 2px #000000;
　・[下]：border-bottom: solid 2px #000000;
　・[左]：border-left: solid 2px #000000;
　・[右]：border-right: solid 2px #000000;

border-color（ボーダーカラー） －線の色－


border-color:値;

・説明：枠線・境界線の色の指定
・値：カラーネーム（redなど）、配色パターン（#000000など）、透明（transparent）
・用例
　・[上下左右]：border-color: #000000;
　・[上下][左右]：border-color: #000000 #00ff00;
　・[上][左右][下]：border-color: #000000 #00ff00 #ff0000;
　・[上][右][下][左]：border-color: #000000 #00ff00 #ff0000 #0000ff;
　・[上]：border-top-color : #000000;
　・[下]：border-bottom-color : #000000;
　・[左]：border-left-color : #000000;
　・[右]：border-right-color : #000000;

border-style（ボーダースタイル） －線の装飾－


border-style:値;

・説明：枠線・境界線の装飾の指定
・値
　・本数：solid（1本）、double（2本）
　・装飾：groove、ridge、inset、outset、dashed（破線）、dotted（点線）
　・非表示：none（なし）、hidden（隠す）
・用例
　・[上下左右]：border-style: solid;
　・[上下][左右]：border-style: solid double;
　・[上][左右][下]：border-style: solid double groove;
　・[上][右][下][左]：border-style: solid double groove ridge;
　・[上]：border-top-style : solid;
　・[下]：border-bottom-style : solid;
　・[左]：border-left-style : solid;
　・[右]：border-right-style : solid;

border-width（ボーダーウィドゥス） －線の太さ－


border-width:値;

・説明：枠線・境界線の太さを指定
・値：数値（px、em、ex）、thin（細い）、medium（普通）、thick（太い）
・用例
　・[上下左右]：border-width: 1px;
　・[上下][左右]：border-width: 1px 2px;
　・[上][左右][下]：border-width: 1px 2px 3px;
　・[上][右][下][左]：border-width: 1px 2px 3px 4px;
　・[上]：border-top-width : 1px;
　・[下]：border-bottom-width : 1px;
　・[左]：border-left-width : 1px;
　・[右]：border-right-width : 1px;

表示・配置など


display（ディスプレイ） －表示形式－


display:値;

・説明：要素の表示形式を指定
・値
　・インラインとブロック：inline、block、list-item、run-in、inline-block
　・テーブル：table、inline-table、table-row-group、table-header-group、table-footer-group、table-rowほか
　・ルビ：ruby、ruby-base、、ruby-text、ruby-base-container、ruby-text-container
　・非表示・継承：none（非表示）、inherit（親要素の値を継承）
　・フレックスコンテナ：flex、inline-flex
　・グリッドレイアウト：grid、inline-grid
・用例：display: none;
・備考：「display:none;」はテンプレートのレスポンシブデザインや記事ページの設定に使える

float（フロート） －左・右に寄せる－


float:値;

・説明：要素を左または右に寄せて表示する
・値：left（左寄せ）、right（右寄せ）、none（指定なし）
・用例：float: left;

clear（クリア） －回り込み解除－


clear:値;

・説明：回り込みを解除を指定する
・値：left（左寄せ解除）、right（右寄せ解除）、both（すべての回り込み解除）、none（解除しない）
・用例：clear: left;

リスト（箇条書きリストなど）


list-style（リストスタイル） －リストのスタイル－


list-style:値;

・説明：リストマーカー・マーカーイメージ・マーカーポジションの指定
・値：square（四角）、inside（領域の内側に）、画像URL（マーカーを画像に）、none（なし）ほか
・用例：list-style: georgian inside url("../images/sample.png");

list-style-type（リストスタイルタイプ） －リストマーカーのタイプ－


list-style-type:値;

・説明：リストマーカーのタイプを指定
・値：none（なし）、disc（黒丸）、circle（白丸）、square（黒四角）、lower-roman（ローマ数字の小文字）ほか
・用例：list-style-type: disc;

list-style-position（リストスタイルポジション） －リストマーカーのスタイル－


list-style-position:値;

・説明：リストマーカーの位置を指定
・値：outside（領域の外側に）、inside（領域の内側に）
・用例：list-style-position: inside;

list-style-image（リストスタイルイメージ） －リストマーカーに画像を指定－


list-style-image:値;

・説明：リストマーカーに画像を指定
・値：画像URL、none（なし）
・用例：list-style-image: url("../images/sample.png");

テーブル


table-layout（テーブルレイアウト） －テーブルの表示設定－


table-layout:値;

・説明：テーブルの表示方法を指定
・値：auto（列幅を自動で変更）、fixed（列幅を固定）
・用例：table-layout: auto;

border-collapse（ボーダーコラップス） －セルの枠線設定－


border-collapse:値;

・説明：セルの枠線タイプを指定
・値：collapse（セルのボーダーを重ねて表示）、separate（セルのボーダーの間隔を空けて表示）
・用例：border-collapse: collapse;

text-align（テキストアライン） －行の配置－


text-align:値;

・説明：行の揃え位置を指定
・値：start（始点）、end（終点）、left（左）、right（右）、center（中央）、justify（均等割付）ほか
・用例：text-align: center;

vertical-align（ヴァーチカルアライン） －列の配置－


vertical-align:値;

・説明：列の揃え位置を指定
・値：baseline、top（上）、middle（中央）、bottom（下）、数値（px、em、ex）、%
・用例：vertical-align: center;

参考リンク：スタイルシートリファレンス