WebApp/CSS †CSSの基礎 †書式 †セレクタ {プロパティ: 値;}
記述方法詳細はセレクタの記述方法参照。 適用方法 †
色の指定方法 †
単位について †
ベンダープレフィックス †ブラウザベンダーが独自に実装する場合につける識別子で、CSSの各プロパティの先頭に付与する。
セレクタ †記述方法 †セレクタ [区切り要素 セレクタ...] { スタイルシート }
適用優先度 †
ID †#pid { color: red; }
<p id="pid">ここにスタイル適用</p>
クラス †p.pclass { color: red; }
<p class="pclass">redスタイル適用</p>
.my_class {color: blue;}
<span class="my_class">blueスタイル適用</span>
空白 †div p { color: red; } /* div 要素内にある <p>要素に適用 */
<div><span><p>適用</p></span></dv>
> †div > p { color: red; }
<div>
<div><p>適用される</p></div>
<em> <p>適用されない</p></em>
<div>
+ †h2 + p { color: red; }
<h2>ここを基準にする</h2>
<p>適用される</p>
<p>適用されない</p>
~ †h2 ~ p { color: red; }
<h2>ここを基準にする</h2>
<p>適用される</p>
<span><p>適用されない</p></span>
<p>適用される</p>
全称セレクタ †* { margin: 0; padding: 0; boder: none } /* 全ての要素に適用 */
div * { font-size: 12px; } /* div要素に入ってる全ての要素に適用 */
h1,p { font-size: 12px; } /* h1とp要素に適用 */
属性セレクタ †li[title] /* <li>にtitle属性を持ってる場合に適用 */ li[title="my_title"] /* <li>のtitle属性が"my_title"の場合に適用 */ a[href^="http://"] /* <a>のhref属性が"http://"から始まる場合に適用 */ a[href$=".pdf"] /* <a>のhref属性が".pdf"で終わってる場合に適用 */ a[href*="google"] /* <a>のhref属性に"google"が含まれてる場合に適用 */ 疑似クラス †<セレクタ>.<疑似クラス> { スタイル }
要素の状態やユーザの操作によってスタイルを個別に指定することを実現するためのもの。 :before / :after †content:" ";とセットで開始タグ直前（直後）に指定した文字を埋め込む p:before {content: "￥"; } /* <p>要素のテキストの前に"￥"を付与 */
<a href="index.html">TOP</a>
<p>200</p>
:link †全てのリンク :visited †訪問済みリンク :active †マウスボタンでリンクを押してる状態（キーボードのタブで移動し選択された状態） :hover †マウスを乗せた状態（スマフォなどのタッチデバイスでは使えない） a:hover { color: red; } /* マウスオーバーした時に文字を赤くする */
:focus †フォームの入力など、フォーカスがあたった状態 input:focus { background: #c6ffd0; border: 1px solid #0f0000 }
<input type="text">
:target †ラベルリンク先の要素（リンク先にジャンプした場合にスタイル適用） p:target { color: red; }
<a href="#target">ターゲットへのリンク</a>
<p id="target">リンク先にジャンプしたらこの文字が赤色になる</p>
:enabled / :disabled †要素が有効（無効）な状態にスタイル適用。 button:enabled { color: blue; }
button:disabled { color: red; }
<button>青文字</button>
<button disabled>赤文字</button>
:checked †ラジオボタン、チェックボックスがチェックされた場合にスタイル適用。 :root †文書のルートとなる要素に適用。HTMLの場合は<html>。 :first-child / :last-child †親要素から見て最初（最後）の子要素に適用。 nth-child(1) / nth-last-child(1) と指定したのと同じ動作。 li:first-child { color: red; }
<ul>
<li>適用される</li>
<li>適用されない</li>
</ul>
:nth-child(n) / :nth-last-child(n) †親要素から見て、最初（最後）から n 番目の要素に適用。どの要素でも関係なくカウントする。 p:nth-child(2) { color: red; }
<div>
<section>
<h2>見出し</h2>
<p>適用される</p> <!-- sectionに対して上から2番目なので適用 -->
<p>適用されない</p>
</section>
<p>適用される</p> <!-- divに対して上から2番目なので適用 -->
</div>
n は数値以外に以下の値で入力が可能。
:first-of-type / :last-of-type †親要素から見て、最初（最後）の要素に適用。指定した要素のみカウントする。 p:first-of-type { color: red; }
<p>適用される</p>
<p>適用されない</p>
<span>
<p>適用される</p>
<p>適用さされない</p>
</span>
:nth-of-type(n) / :nth-last-of-type(n) †親要素から見て、最初（最後）から n 番目の要素に適用。指定した要素のみカウントする。 p:nth-of-type(2) { color: red; }
<div>
<section>
<h2>見出し</h2>
<p>適用されない</p>
<p>適用される</p> <!-- section要素に対して2番目のp要素の為、適用 -->
</section>
<p>適用されない</p>
<p>適用される</p> <!-- div要素に対して2番目のp要素の為、適用 -->
</div>
:only-child †子要素が1つのみの場合に適用。子要素が2つ以上ある場合は適用されない。 .my_class span:only-child { color: red; }
<div class="my_class">
<span>適用される</span> <!-- 子要素が1つのみなので適用される -->
</div>
:only-of-type †1種類しか使用されてない子要素に適用。 .my_class :only-of-type { color: red; }
<div class="my_class">
<p>適用される</p>
<span>適用されない</span>
<span>適用されない</span>
</div>
:empty †子要素を全く持たない場合に適用。 :not() †セレクタで選択された要素を除外する。 .my_class li:not(.test) { color: red; }
.my_class2 button:not([disabled]) { color: blue;}
<ul class="my_class">
<li>適用</li>
<li class="test">未適用</li>
</ul>
<span class="my_class2">
<button disabled>未適用</button>
<button class="test">適用</button>
</span>
ボックスモデル †外側の余白（margin） ┌境界線（border）―――┐ ｜内側の余白（padding） ｜ ｜┌―――――――――┐｜ -- ｜｜内容 ｜｜ ↑ ｜｜ ｜｜ 高さ（height） ｜｜ ｜｜ ↓ ｜└―――――――――┘｜ -- └―――――――――――┘ ←幅（width）-----→ 引数を4つ指定可能なプロパティ（padding / marginなど）は全て、上 右 下 左 の順番に指定される。 width / height †要素（内容を記載できる範囲）の幅や高さを決める。%指定した場合は親要素の領域から割合。 .my { background-color: red; width: 50%; }
<p class="my">横半分赤背景</p>
max-width / max-heigth / min-width / min-heigth †要素の最大幅（高さ）、最小幅（高さ）を指定。 input { max-width: 30% } /* 親要素の大きさによって可変するが、横幅30%以上は広がらない */
border / border-radius †境界線（border-radiusは境界の形状を角丸にする）の指定。 .my {
border: 5px;
border-color: red;
border-style: solid dotted; /* 上 右 下 左 の順に4つ指定することも可能 */
border-radius: 2px;
}
/* 以下のようにまとめて指定可能 */
.my {
border: 5px solid dotted red;
border-radius: 2px;
}
指定可能なプロパティ
padding †borderプロパティの境界より内側4辺（padding-<位置>の指定も可）に対しての余白を指定。 margin †borderプロパティの境界より外側4辺（margin-<位置>の指定も可）に対して余白を指定。 .box {
witdh: 200px; height: 100px;
border: 5px solid #f00;
margin: 10px auto 10px; /* 上下 10px 横幅をautoで指定することで横の中央表示 */
}
box-sizing †ボックスはデフォルト（content-box）となりwidth、border、paddingを合算した結果が最終的な表示サイズになる。
display †ブロックレベル・インライン等の、要素の表示形式を指定する。
フレキシブルレイアウト †親領域に対して複数の子要素をまとめて「右下揃え」や「均等配置」などを指定することが可能。 flex-direction †横並び（row）にするか、縦並び（column）にするか指定。 .flex { display: flex; flex-direction: row; }
<ul class="flex">
<li>要素1</li> <!-- 要素1 と 要素2 が横に並んで表示される -->
<li>要素2</li>
</ul>
justify-content †ボックスの整列方法を指定する。 .flex { display: flex;
width: 300px;
background-color: #ccc;
justify-content: space-between;}
<div class="flex">
<span>要素1</span> <!-- 0px の位置に配置（要素は左端にくっついてる）-->
<span>要素2</span> <!-- 130px の位置に配置 -->
<span>要素3</span> <!-- 260px の位置に配置（要素は右端にくっついてる）-->
</div>
flex-wrap †親要素の幅をはみ出した場合の挙動を指定。
align-items †垂直方向に対してレイアウトを指定する。
テキスト †color †文字色の指定。 font-size †文字サイズの指定。種類は 単位について に参照。 font-weight †文字の太さを指定。（ normal bold bolder(更に太字) lighter(細字) ） font-style †文字の表示スタイルを指定。
font-family †フォント名またはフォント種類指定。,区切りで複数指定することで最初に合致したフォントを使用。
font-variant †スモールキャピタル（小文字と同じ高さで作られた大文字）表示する。
font †font-XXXX関連プロパティを一度に指定できるシュートハンドプロパティ。 font: bold italic 15px "ＭＳ 明朝"; text-align †水平方向に対する文字の行揃え、均等割り付けなどを指定。
text-decoration-XXXX †
text-shadow †文字に影をつける。 text-shadow: 5px 5px 2px 1px #000; /* 左から <横のオフセット> <縦のオフセット> <ぼかし距離> <広がりの距離> <色> */ line-height †行の高さを指定。 line-height: 1.5; /* 文字サイズに 1.5 をかけた長さが 1行目と2行目の距離になる */ vertical-align †テキストや画像の垂直方向の位置を指定する。
direction †文章の記述方向を指定。
unicode-bidi †Unicodeの文字ルールに「左から右」といった場合でも、そのルールを上書きする。
quotes †contentプロパティで挿入する引用符を指定。 <style>
q { quotes: "[" "]" "'" "'"; }
q:befor { content: open-quote; }
q:after { content: close-quote; }
</style>
０<q>１<q>２</q>１</q>０ <!-- ０[１'２'１]０ と表示される -->
text-transform †アルファベットを変換する。
white-space †連続する半角スペース・タブ・改行をどのように表示し、領域内に収まらない場合は自動改行を行うか。
word-spacing †単語と単語のスペース間隔を指定。マイナス指定も可能。 letter-spacing †文字と文字のスペース間隔を指定。マイナス指定も可能。 text-indent †テキストの1行目のインデントを指定。2行目以降は通常表示。 text-indent: 10px; /* テキストの前を 10px 開ける */ レイアウト †float †ボックスを左か右に寄せて、逆側にテキストなどを回り込ませることが可能。 .box { width: 100px; height: 100px; background-color: #ccc; float: left;}
<div class="box"></div>文字が右に回り込む
clear †floatで指定した回り込みを解除する。 .box1 { width: 100px; height: 100px; background-color: #ccc; float: left;}
.box2 { clear: left; }
<div class="box1"></div>
<p>文字が右に回り込む</p>
<p class="box2">回り込み解除</p>
overflow †ボックス領域に入りきらなかった場合の表示を指定。 .box { width: 200px; height: 200px; overflow: scroll; }
<div class="box"><img src="img.png" width="300px" height="300px"></div>
position †ボックスの位置を指定。動かす距離は top bottom left right で指定する。 .box1 { width: 200px; height: 50px; background-color: #ccc; }
.box2 { width: 200px; height: 50px; background-color: #0cc; position: relative; top: 30px; }
.box3 { width: 200px; height: 50px; background-color: #00c; position: absolute; bottom: 30px; }
<div class="box1">ボックス1</div>
<!-- 通常はボックス1のテキストの真下に表示されるが 下に 30px 移動した位置に表示される -->
<div class="box2">ボックス２</div>
<!-- 直近の親要素は body の為、body要素の最下段の位置から上に30px移動した位置に表示 -->
<div class="box3">ボックス３</div>
columns †column-count、column-width をまとめて指定できるショートハンドプロパティ。 column-count †1つのボックス内を、いくつのカラムに分けて表示するか指定。 div { column-count: 3; } /* <div>で囲まれた文字列を横に3分割して表示 */
column-width †column-countがカラムの数を指定するのに対して、カラムの幅を指定する。 column-gap †カラムとカラムの間隔を指定。 div { width: 500px; column-count: 3; column-age: 30px; }
column-rule †column-rule-width（カラムの幅）column-rule-style（カラムのスタイル）column-rule-color（カラムの色） をまとめて指定できるショートハンドプロパティ。 div { width: 500px; column-count: 3; column-rule: 2px dotted gray; }
column-span †値をall（デフォルトはnone）に設定した場合、その要素をすべてのカラム（列）にまたがる形で表示する。 div { width: 500px; column-count: 3; column-rule: dotted gray; }
div p { column-span: all; }
<div>
div要素内に書かれた内容は３分割されて表示される。
<p>この要素は分割されない</p>
</div>
z-index †ボックスの重なり順を指定する。数値が高いほど上に表示される。 p.sample {
background-color: #99cc00;
position: absolute; top: 0; z-index: 2;
}
div.sample {
background-color: #ccc;
width: 200px; height: 100px;
position: absolute; top: 0; z-index: 1;
}
<p class="sample">上に重なります</p>
<div class="sample">下に表示される</div>
clip †４つの座標を指定して、その座標で囲まれた要素を切り抜く。 img.clip {
clip: rect(0px, 100px, 200px, 30px);
position: absolute;
}
背景 †background-color †背景色を指定。 background-image †背景画像を指定。カンマ区切りで複数指定した場合、後に指定した画像ほど下のレイヤーになる。 .sample { width: 200px; height: 500px;
background-image : url(top.png), url(bottom.png), url(center.png);
background-repeat : no-repeat, no-repeat, repeat-y;
background-position: left top , left bottom, left top;
}
<div class="sample">この要素内に背景画像が表示される</div>
値に関数を使用することでグラデーション背景にすることが可能。
/* 左から、青、赤(左から25%の位置から開始)、黄色を表示する（90deg は to rightと同じ）*/ background-image: linear-gradient(90deg, blue, red 25%, yellow); /* 完全な円（circle指定）で表示 */ background-image: radial-gradient(left top, circle, blue, red) background-repeat †背景画像の繰り返しを指定。
background-position †画像の表示位置（画像の左上のドットが表示される場所）を指定。デフォルトは center top（中央上段表示） background-origin †背景の表示位置を指定。
background †color、image、repeat、position、origin プロパティをまとめて指定できるショートハンドプロパティ。 background: #ccc url(top.png) top no-repeat; background-size †背景画像の大きさを指定。
background-attachment †背景画像を固定するか、スクロールするか指定。
background-clip †背景の表示領域を指定。
box-shadow †ボックスに影をつける。カンマ区切りで指定することで複数の影を重ねることが可能。 box-shadow: 横のオフセット 縦のオフセット ぼかし距離 広がりの距離 色 [inset] /* inset を付与すると、広がりの方向をボックスの内側にする */ リスト †list-style-image †マーカー（リストの先頭に表示するもの）を画像にする。 list-style-image: url(icon.png); list-style-position †マーカーの位置をボックスの外側（outside/初期値）か、内側（inside）か指定する。 list-style-type †マーカーの形状を指定する。
counter-increment †連番だけではなく、○番目といったリストカウント表記をカスタマイズする。 counter-increment: 識別名 [カウンタアップ数]; content : counter(識別名); .cnt p { counter-increment: my-cnt 2; }
.cnt p:before { content : counter(my-cnt) "番目"; }
.cnt p:nth-child(3) { counter-reset : my-cnt; } /* 3つ目の要素でカウンタを初期化 */
<div class="cnt">
<p> 要素1</p> <!-- 1番目 要素1 -->
<p> 要素2</p> <!-- 2番目 要素2 -->
<p> 要素3</p> <!-- 1番目 要素3 -->
<p> 要素4</p> <!-- 2番目 要素4 -->
<p> 要素5</p> <!-- 3番目 要素5 -->
</div>
テーブル †caption-side †テーブルのキャプション位置（top bottom left right）を指定。 table { caption-side: bottom; }
<table border="1">
<caption>説明を下に表示</caption>
<tr><td>掲題</td><td>内容</td></tr>
</table>
table-layout †table要素で作成された各列の幅は文字数によって自動的に広がるか、最初の列に合わせるか指定。
border-collapse †table要素のボーダーを重ねるか、間隔を開けるか指定。
border-spacing †border-collapse: separate; を指定した際の間隔を 横 縦 の順で指定する。 empty-cells †border-collapse: separate; を指定した際に、空要素のテーブルの線を表示するか指定。
変形 †transform-style †子要素の描画を2Dにするか、3Dにするか指定する。
transform †要素に対して変形を行う。スペース区切りで複数指定することも可能。 div.ex { transform-style: preserve-3d; }
div.ex img { transform: rotateZ(30deg); }
<div class="ex">
<img src="sample.png">
</div>
アニメーション †transtion †transtion-XXXX のショートハンドプロパティ。時間指定が2つある場合は、最初の時間を duration と解釈する。 .trans {
width: 100px; height: 100px;
background-color: #cc0;
transition: width 2s 0.5s ease-in-out;
}
.trans:hover { width: 200px; }
<div class="trans">テキスト</div>
transition-XXXX †
animation †animationのショートハンドプロパティ。 .sample { animation: anime 2s infinite; }
@keyframes anime {
0% {transform:translate(0px, 0px);}
50% {transform:translate(0px, 20px) scale(1.2, 1.2);}
100% {transform:translate(0px, 0px);}
}
<image class="sample" src="image.png">
レスポンシブWebデザイン †単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスでレイアウトを動的に変化するように作られたWebデザイン。
メディアタイプ †style や link 要素で mediaタイプを指定することで、スタイルを適用するメディアを振り分けることが可能。 メディア特定 †横幅が400px以下（max-width: 400px）、縦幅が800px以上（min-width: 800px）といった特定の条件を指定し、合致した場合にスタイルを適用することが可能。 media="[[not | only] メディアタイプ and] (条件) [and ( [not | only] 条件) ... ]" ※or 条件の指定は、カンマを使用する 外部CSSで振り分ける場合。 <link rel="stylesheet" media="(max-width: 640px) and (device-aspect-ratio: 16/9)" href="sample.css"> CSS内部に記述する場合。 @ media (max-width: 640px) and ( not orientation: portrait) { CSSスタイル指定 }
※ min/max指定が可能か否か（max は 指定数値以下、min は 指定数値以上の意味になる） グリッドデザインの例 †横幅を 80px で 12分割 した場合のレイアウトを作成。画面を2分割で構成する例。 #box { overflow: hidden; width: 960px; background-color: #ccc; } /* 表示される全体の横幅 */
#box #main { width: 620px; margin: 0 10px; float: left; } /* 8分割（左右 の余白 10px 含め640px） */
#box #sub { width: 300px; margin: 0 10px; } /* 4分割（左右 の余白 10px 含め320px） */
<div id="box">
<span id="main">メイン画面</span>
<span id="sub">サブ画面</span>
</div>
viewport †スマートフォン向けに文書の表示領域を設定する。 <meta name="viewport" content="プロパティ=値" [, ...]>
|