WebApp/CSS

CSSの基礎

書式

セレクタ {プロパティ: 値;}

記述方法詳細はセレクタの記述方法参照。

適用方法

  • <style>要素内に記述
  • <link rel="stylesheet" href="ファイル名">として外部ファイルで取り込む(HTML5からは type="text/css"の省略が可能になった)
  • <p style="color: red;">〜</p>としてインラインで記述

色の指定方法

指定方法説明記述例
キーワード指定特定のキーワードを指定するred、blue
16進数RGBをそれぞれ16進数で指定。2桁とも同じ値の場合は1桁に省略可能#ff0000、#f00
RGB / RGBARGBをそれぞれ10進数で指定。rgbaは4番目の引数に透明度(0 〜 1)を指定color: rgba(255, 0, 0, 0.5);
HSL / HSLA1番目は色相環(360度で1週とし、0:赤 120:緑 240:青)
2番目は彩度で、色の鮮やかさを示す(低いとくすんだ色になる)
3番目は明度で、明るさを示す(0%だと黒、100%だと白)
4番目は透明度(0〜1の範囲で透過率を指定)
color: hsl(0, 100%, 50%);
color: hsl(0, 100%, 50%, 0.5);
transparent背景色などを透明にする場合に指定background-color: transparent;
opacity透明度を指定(0 〜 1)するopacity:0.5;

単位について

相対単位説明
%親要素のサイズを 100% として算出
em親要素のサイズを 1 として算出
rem<html>要素を1として算出
ex小文字の x の高さを 1 として算出
絶対単位説明
px1ドット分
mm10mm = 1cm
cm1cm = 10mm
in1in = 2.54cm
pt72pt = 1in
pc1pc = 12pt

ベンダープレフィックス

ブラウザベンダーが独自に実装する場合につける識別子で、CSSの各プロパティの先頭に付与する。

Prefixブラウザ
-moz-FireFox
-webkit-Chrome、Safari
-o-Opera
-ms-IE


 

セレクタ

記述方法

セレクタ [区切り要素 セレクタ...] { スタイルシート }
セレクタ指定するものCSS記述例HTML記述例
ID#<ID名>#sampleid="sample"
クラス.<CLASS名>.sampleclass="sample"
要素タグ名p<p>〜</p>
属性[属性]href^="http://"<a href="http://google.com/>
疑似:[疑似]:nth-of-child(2)-
区切り後に指定したセレクタが適用される条件
,or条件
連続and条件(.pet.cat とした場合は、class="pet cat" となってる要素に適用)
空白子要素 及び 孫要素
>(不等式)子要素のみ
+直後の兄妹要素(前に指定したセレクタと同一階層の要素)のみ
チルダ以降の兄妹要素(前に指定したセレクタと同一階層の要素)全て
*全てに一致

適用優先度

優先度指定するもの
最優先!importantを指定( color: #ffffff !important; )
1.0.0.0インラインスタイル( <p style="color: red;"> )
0.1.0.0ID
0.0.1.0クラス属性セレクタ疑似クラス
0.0.0.1要素、疑似要素

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 は数値以外に以下の値で入力が可能。

入力値説明
even偶数
odd奇数
n+数値数値以降全て
-n+数値数値以前全て
数値n数値で割りきれる要素
3n+22、5、8 ... 番目の要素に適用

:first-of-type / :last-of-type

親要素から見て、最初(最後)の要素に適用。指定した要素のみカウントする。
nth-of-type(1) / nth-last-of-type(1) と指定したのと同じ動作。

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など)は全て、上 右 下 左 の順番に指定される。
border-bottom-style や padding-left など top right bottom left で単独指定も可能。
ボックスのサイズは、width + border + padding となる。

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は境界の形状を角丸にする)の指定。
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;
}

指定可能なプロパティ

プロパティ説明
border境界線
border-<位置>個別に境界線を指定。top(上) bottom(下) left(左) right(右)
border-radius角丸の境界線
border-color境界線の色を指定
border-width境界線の幅を指定
border-sytle境界線のスタイルを指定
border-style説明
none境界線を表示しない
solid1本の実線
double2本の実線
groveくぼんだ立体線
ridge隆起した立体線
inset上と左が暗く、下と右が明るい隆起してる窪んでるボタンのような外見
outset上と左が明るく、下と右が暗い隆起してる立体的ボタンのような外見
dashed破線
dotted点線

padding

borderプロパティの境界より内側4辺(padding-<位置>の指定も可)に対しての余白を指定。

margin

borderプロパティの境界より外側4辺(margin-<位置>の指定も可)に対して余白を指定。
各要素にはそれぞれデフォルトの margin が指定されている。
ボックスを親要素の中央に表示したい場合は、値に auto を使用する。

.box {
  witdh: 200px; height: 100px;
  border: 5px solid #f00;
  margin: 10px auto 10px;	/* 上下 10px 横幅をautoで指定することで横の中央表示 */
}

box-sizing

ボックスはデフォルト(content-box)となりwidth、border、paddingを合算した結果が最終的な表示サイズになる。
widht: 100px; padding: 10px; border-width: 5px の場合。

プロパティボックス領域コンテンツ領域(内容が書ける領域)
content-box130px(100 + 10*2 + 5*2)100px(widhtの値)
border-box100px(widhtの値)70px(100 - (10*2 + 5*2))

display

ブロックレベル・インライン等の、要素の表示形式を指定する。

プロパティ説明要素の例
block縦に積み重なるように表示(改行されて表示)<div> <p> <nav>
inline改行や空白を伴わないで表示<span> <i> <i>
inline-blockinline表示されつつも固定幅を持つ<img> <video>
none要素を表示せず、領域も存在させない-
visibility:hidden要素を表示せず、領域は存在する-
list-item先頭に・が付与される。padding-leftが少ないと領域外に表示される<li>
flexフレキシブルレイアウトにする-
プロパティ同じように振る舞うtable要素
tabletable
inline-tabletable(インライン要素のように振る舞う)
table-captioncaption
table-celltd
table-columncol
table-column-groupcolgroup
table-fotter-grouptfoot
table-header-groupthead
table-rowtr
table-row-grouptbody


 

フレキシブルレイアウト

親領域に対して複数の子要素をまとめて「右下揃え」や「均等配置」などを指定することが可能。
display: flex; を指定することで、フレキシブルレイアウトを指定したことになる。

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-start全てのボックスを開始位置側に寄せる(デフォルト)
flex-end全てのボックスを終了位置側に寄せる
center全てのボックスを中央に寄せる
space-between全てのボックスを均等に配置する
space-aroundボックス間の余白が全て同じになるように配置(最初と最後の余白はボックス間の半分)
inherit親要素から継承

flex-wrap

親要素の幅をはみ出した場合の挙動を指定。
例えば親要素のサイズが 700px とし 200px の子要素が 4 つあった場合、はみ出した要素を下段に落とす。

プロパティ説明
nowrap1行に収める(デフォルト)
wrap下段に落とす
wrap-reversewrapから順番を逆にする(上下方向が逆になる、つまり上段に乗せる)

align-items

垂直方向に対してレイアウトを指定する。

プロパティ説明
stretch縦一杯まで子要素が引き延ばされる(デフォルト)
flex-start親要素の縦上部に配置され伸縮なし
flex-end親要素の縦下部に配置され伸縮なし
center親要素の縦中央に配置され伸縮なし
baselineテキストのベースラインを基準に揃える


 

テキスト

color

文字色の指定。

font-size

文字サイズの指定。種類は 単位について に参照。
キーワードで指定することも可能。( xx-small x-small small medium large x-large xx-large )

font-weight

文字の太さを指定。( normal bold bolder(更に太字) lighter(細字) )

font-style

文字の表示スタイルを指定。

プロパティ説明
italic斜体(人がコメントした言葉などの場合に強調する意図として使用)
oblique斜体(デザインとして使用)

font-family

フォント名またはフォント種類指定。,区切りで複数指定することで最初に合致したフォントを使用。

プロパティ説明
フォント名"MS ゴシック"、"MS 明朝"などフォント名を指定
sans-serifゴシック系のフォント
serif明朝系のフォント
cursive筆記体・草書体のフォント
fantasy装飾的なフォント
monospace等幅フォント
  • WEBフォント PCにインストールしない状態で、ローカルやサーバ上にフォントを保存するこで使用できるフォント。
    外部フォントを読み込むことでデバイス依存しない文字の表示が期待される。
    @font-face {
      font-family: 'bokutachi';	/* http://yoshihisa.que.jp/fontopo/ */
      src: url('bokutachi.otf'); }
    p { font-family: bokutachi; }

font-variant

スモールキャピタル(小文字と同じ高さで作られた大文字)表示する。

プロパティ説明
small-capsスモールキャピタル表示を行う

font

font-XXXX関連プロパティを一度に指定できるシュートハンドプロパティ。

font: bold italic 15px "MS 明朝";

text-align

水平方向に対する文字の行揃え、均等割り付けなどを指定。

プロパティ説明
left左揃え
right右揃え
center中央揃え
justify均等割り付け

text-decoration-XXXX

スタイルシート説明
text-decoration-line線の装飾
text-decoration-color線の色
text-decoration-style線の種類
text-decoration上記3つのショートハンドプロパティ
text-decoration-line説明
underline下線
overline上線
line-through打ち消し線
blink点滅
text-decoration-style説明
solid実線(デフォルト)
double二重線
dotted点線
dashed破線
wavy波線

text-shadow

文字に影をつける。

text-shadow: 5px 5px 2px 1px #000; /* 左から <横のオフセット> <縦のオフセット> <ぼかし距離> <広がりの距離> <色> */

line-height

行の高さを指定。

line-height: 1.5;      /* 文字サイズに 1.5 をかけた長さが 1行目と2行目の距離になる */

vertical-align

テキストや画像の垂直方向の位置を指定する。
適用できるのは、インライン要素とテーブルセルのみ。ブロックレベル要素には適用できない。

プロパティ説明
baseline親要素のテキストのベースラインと同じ位置になる
top親要素のボックス領域上端に揃える
middle親要素のボックス領域中央に揃える
bottom親要素のボックス領域下端に揃える
sub親要素のテキストの下付き文字に定められた位置に揃える
super親要素のテキストの上付き文字に定められた位置に揃える
text-top親要素テキストの上端に揃える
text-bottom親要素テキストの下端に揃える
数値%baselineを基準にし 親要素の line-height値に対する割合を指定
数値親要素のbaselineの指定値分、上に揃える

direction

文章の記述方向を指定。

プロパティ説明
ltr左から右
rtl右から左

unicode-bidi

Unicodeの文字ルールに「左から右」といった場合でも、そのルールを上書きする。

プロパティ説明
embeddirectionプロパティで指定された値を組み込む
bidi-overridedirectionプロパティで指定された値で上書きする

quotes

contentプロパティで挿入する引用符を指定。
引用の先頭につける開始引用符と、引用の末尾につける終了引用符の二つをペアにして、スペースで区切って指定。
さらにスペースで区切って引用符のペアを指定することで、入れ子の階層の深い引用符を設定することが可能。

<style>
  q       { quotes: "[" "]" "'" "'"; }
  q:befor { content: open-quote;     }
  q:after { content: close-quote;    }
</style>
0<q>1<q>2</q>1</q>0         <!-- 0[1'2'1]0  と表示される -->

text-transform

アルファベットを変換する。

プロパティ説明
capitalize単語の先頭のみ大文字で表示
lowercase全て小文字で表示
uppercase全て大文字で表示

white-space

連続する半角スペース・タブ・改行をどのように表示し、領域内に収まらない場合は自動改行を行うか。
「改行」はソース上の改行をそのまま反映するか、「半角」は全角スペースとタブを半角にするか、「折り返し」は画面端での自動改行。

プロパティ改行半角折り返し
normal×
pre××
nowrap××
pre-wrap×
pre-line

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>文字が右に回り込む
プロパティ説明
none回り込みをさせない
leftボックスを左に配置して後続の内容を右側に回り込ませる
rightボックスを右に配置して後続の内容を左側に回り込ませる

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>
プロパティ説明
none左右にあるフロートの関係を維持し回り込み表示させる
left左側にあるフロートの関係を切り離し下に表示させる
rigth右側にあるフロートの関係を切り離し下に表示させる
both左右にあるフロートの関係を切り離し下に表示させる

overflow

ボックス領域に入りきらなかった場合の表示を指定。

.box { width: 200px; height: 200px; overflow: scroll; }
<div class="box"><img src="img.png" width="300px" height="300px"></div>
プロパティ説明
visibleボックスからはみ出して表示(デフォルト)
scrollスクロールバーを表示
hiddenはみ出した部分は非表示
autoブラウザ依存。大抵はスクロールバー表示

position

ボックスの位置を指定。動かす距離は top bottom left right で指定する。
top(left)は親要素の上(左)の位置を基準に、下(右)方向へ移動する距離を指定する。
bottom(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">ボックス2</div>
<!-- 直近の親要素は body の為、body要素の最下段の位置から上に30px移動した位置に表示 -->
<div class="box3">ボックス3</div>
プロパティ説明
static配置方法は指定しない。top bottom left rightは無視される
relative本来の表示位置を基準に指定した分、移動(直近要素からの相対位置指定)
absolute直近のposition指定されてる親要素を基準に指定した分、移動(直近の親要素からの絶対位置指定)
fixedスクロールしても動かず固定される。ヘッダやフッタに良く使われる。基準点は absolute と同じ

columns

column-count、column-width をまとめて指定できるショートハンドプロパティ。

column-count

1つのボックス内を、いくつのカラムに分けて表示するか指定。

div { column-count: 3; }   /* <div>で囲まれた文字列を横に3分割して表示 */

column-width

column-countがカラムの数を指定するのに対して、カラムの幅を指定する。
幅500pxのカラムに200pxを指定した場合は、カラム数は 2 になる。

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要素内に書かれた内容は3分割されて表示される。
   <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

4つの座標を指定して、その座標で囲まれた要素を切り抜く。
clip: rect(上辺の距離, 右辺の距離, 下辺の距離, 左辺の距離)と指定し、その要素は、positionプロパティに absolute または fixed を指定する必要がある。

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>

値に関数を使用することでグラデーション背景にすることが可能。
直線は下から上に向かってグラデーションされる。
円形は中心から外側に向かってグラデーションされる。

関数種類書式
linear-gradient()直線linear-gradient(角度, 開始色, 途中色, 終了色);
radial-gradient()円形radial-gradient(中心位置, 形状 サイズ, 開始色, 途中色, 終了色);
形状説明
ellipse楕円(デフォルト)
circle円形
サイズ説明
cover指定範囲に合わせて覆う(デフォルト)
closest-sideボックスの一番近い辺に合わせる
closest-cornerボックスの一番近い角に合わせる
farthest-sideボックスの一番遠い辺に合わせる
farthest-cornerボックスの一番遠い角に合わせる
contain指定範囲内に収める
/* 左から、青、赤(左から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

背景画像の繰り返しを指定。

プロパティ説明
repeat背景画像を繰り返し表示(デフォルト)
repeat-x水平方向に繰り返し表示
repeat-y垂直方向に繰り返し表示
no-repeat繰り返さず1度だけ画像を表示

background-position

画像の表示位置(画像の左上のドットが表示される場所)を指定。デフォルトは center top(中央上段表示)
% 指定は表示領域の左上から距離を、横/縦の順で指定。100% 100% は right bottom と同じ。
right 30% と指定した場合は、右側に上から30%の位置に表示する。

background-origin

背景の表示位置を指定。

プロパティ説明
padding-box背景画像はpadding境界の外側から配置(初期値)
border-box背景画像はborder境界の外側から配置
content-box背景画像はpadding境界の内側から配置

background

color、image、repeat、position、origin プロパティをまとめて指定できるショートハンドプロパティ。

background: #ccc url(top.png) top no-repeat;

background-size

背景画像の大きさを指定。

プロパティ説明
auto自動的に算出される(初期値)
contain縦横の比率を維持して最大サイズになるように表示(縦か横に伸びきったらそれ以上拡大(縮小)しない)
cover縦横の比率を維持して背景領域を埋めるサイズになるように表示(縦横に伸びきるまで拡大(縮小)する)
%背景領域に対する背景画像表示領域を横/縦の比率で指定

background-attachment

背景画像を固定するか、スクロールするか指定。

プロパティ説明
fixed背景画像の位置は固定
scrollスクロールに伴って、背景画像も移動する

background-clip

背景の表示領域を指定。

プロパティ説明
border-boxborder境界の外側まで表示(デフォルト)
padding-boxpadding境界の外側まで表示
content-boxpadding境界の内側まで表示

box-shadow

ボックスに影をつける。カンマ区切りで指定することで複数の影を重ねることが可能。

box-shadow: 横のオフセット 縦のオフセット ぼかし距離 広がりの距離 色 [inset]
/* inset を付与すると、広がりの方向をボックスの内側にする */


 

リスト

list-style-image

マーカー(リストの先頭に表示するもの)を画像にする。

list-style-image: url(icon.png);

list-style-position

マーカーの位置をボックスの外側(outside/初期値)か、内側(inside)か指定する。

list-style-type

マーカーの形状を指定する。

プロパティ説明
disc小さい黒丸
circle小さい白丸
square小さい黒四角
decimal数字の連番
upper-alpha大文字アルファベット連番(小文字はlower-alpha)
upper-roman大文字ローマ数字の連番(小文字はlower-roman)
hiraganaあいうえお連番

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要素で作成された各列の幅は文字数によって自動的に広がるか、最初の列に合わせるか指定。

プロパティ説明
auto全ての列を自動的に広げる(デフォルト)
fixed最初の列だけ自動的に広げ、残りは全て最初の列の幅に合わせる

border-collapse

table要素のボーダーを重ねるか、間隔を開けるか指定。

プロパティ説明
separate隣接するセルのボーダーの間隔をあける(デフォルト)
collapse隣接するセルのボーダーを重ねて表示

border-spacing

border-collapse: separate; を指定した際の間隔を 横 縦 の順で指定する。

empty-cells

border-collapse: separate; を指定した際に、空要素のテーブルの線を表示するか指定。

プロパティ説明
show表示する(デフォルト)
hide非表示


 

変形

transform-style

子要素の描画を2Dにするか、3Dにするか指定する。

プロパティ説明
flat2D(デフォルト)
preserve-3d3D

transform

要素に対して変形を行う。スペース区切りで複数指定することも可能。

div.ex     { transform-style: preserve-3d; }
div.ex img { transform: rotateZ(30deg);    }
<div class="ex">
  <img src="sample.png">
</div> 
2D関数説明
translate(X, Y)横 縦に移動
translateX(X)横に移動
translateY(Y)縦に移動
scale(X, Y)横 縦の倍率(浮動小数点)を指定し拡大縮小
scaleX(X)横の倍率(浮動小数点)を指定し拡大縮小
scaleY(Y)縦の倍率(浮動小数点)を指定し拡大縮小
rotate(角度)回転(単位はdeg)
skew(X, Y)横 縦の歪み(単位はdeg)
skewX(X)横の歪み(単位はdeg)
skewY(Y)縦の歪み(単位はdeg)
matrix()6つの引数を持つ。横縮尺 縦傾斜 横傾斜 縦縮尺 横移動距離 縦移動距離
3D関数説明
perspective: 数値;奥行きの深さを指定する
translateZ(Z)奥行きの移動
translate3d(X,Y,Z)横 縦 奥行きの移動
scaleZ(Z)奥行きの倍率
scale3d(X, Y, Z)横 縦 奥行きの倍率
rotateX(X)X軸を基準に3次元回転
rotateY(Y)Y軸を基準に3次元回転
rotateZ(Z)Z軸を基準に3次元回転
matrix3d()4 x 4の行列計算で上記を一括指定


 

アニメーション

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

スタイルシート説明
transition-propertyアニメーション効果を与えるCSSのプロパティ(widthや、background-colorなど)を指定。指定しない場合は全てのプロパティが対象になる
transition-durationアニメーション時間の指定(単位は秒)
transition-delayアニメーション開始するまでの時間(単位は秒)
transition-timing-functionアニメーション方法を指定
transition-timing-function説明
ease自然なイメージ(デフォルト)
linear等速
ease-inゆっくり始まる
ease-outゆっくり終わる
ease-in-outゆっくり始まって、ゆっくり終わる
steps()指定した回数で等間隔に分割して実行する。回数の後にstartで1stepから、endで0stepから再生する
cubic-bezier()3次ベジェ曲線のコントロールポイントを(x1, y1, x2, y2)で指定

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">
スタイルシート説明
animation-nameアニメーションを実行する @keyframes 規則名を指定
animation-duration1サイクルのアニメーション実行時間
animation-delayアニメーション開始までの待ち時間
animation-iteration-count再生回数を指定。inifinite を指定すると無限ループ
animation-directionalternate を指定することで1サイクルの通常再生の後、反転再生も行う
animation-timing-functiontransition-timing-functionと同じ
animation-fill-modeアニメーション終了時の状態を指定
animation-fill-mode説明
noneキーフレームで指定されたスタイルは、アニメーション前後で適用されない
forwardsアニメーションの終了後にキーフレーム最後(100%)のスタイルを適用
backwardsアニメーション開始時、即座にキーフレーム最初のスタイル(0%)を適用し animation-delay までその状態を維持する
bothforward / backwards両方が適用される


 

レスポンシブWebデザイン

単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスでレイアウトを動的に変化するように作られたWebデザイン。

手法説明
手法説明
ブレイクポイント画面レイアウトの変更となる幅を指定する方法
グリッドデザイン画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせてデザインする方法(bootstrapなどのツールあり)
フルードデザイン画面の幅に合わせてコンテンツの横幅が可変となるデザイン手法
フルードグリッドリキッドレイアウト(横幅に合わせて可変)に対応したグリッド設計のこと
グリッドデザインで作成した値をpxから%指定に置き換えることでフルードグリッド化する

メディアタイプ

style や link 要素で mediaタイプを指定することで、スタイルを適用するメディアを振り分けることが可能。
メディアタイプの種類は Appendixのmediaを参照。

メディア特定

横幅が400px以下(max-width: 400px)、縦幅が800px以上(min-width: 800px)といった特定の条件を指定し、合致した場合にスタイルを適用することが可能。
メディアタイプを省略した場合は、all and が付与しているのと同等の扱いになる。
only はメディアクエリ未対応のブラウザに対して書式を無視させる。

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スタイル指定 }
条件説明
widthビューポート(ブラウザの表示領域)の横幅
heigthビューポート(ブラウザの表示領域)の縦幅
device-widthスクリーンの横幅
device-heigthスクリーンの縦幅
orientation表示領域の向き(縦長 portrait か 横長 landscape)
aspect-ratio表示領域のアスペクト比率(横/縦 で指定)
device-aspect-ratioスクリーンのアスペクト比率(横/縦 で指定)
colorカラー色のビット数
color-index色のパレット数(使用できる色の数)
monochrome白黒・グレイスケール環境での色のビット数
resolution解像度(単位は「dpi」または「dpcm」)
scanTVの操作方式(プログレッシブ progressive か インターレース interlace )
grid文字格子メディア(1)かビットマップメディア(0)指定

※ 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="プロパティ=値" [, ...]>
プロパティ内容初期値設定
width980px200 - 10000px or device-width
heigth高さ横幅とアスペクト比から計算233 - 10000px
device-widthデバイスのスクリーン幅で表示
(CSSピクセルで表示になる)
--
device-heightデバイスのスクリーン高さで表示
(CSSピクセルで表示になる)
--
initial-scale倍率の初期設定表示範囲から計算される値 最小〜最大倍率の範囲
minimum-scale最小縮小比率設定0.250 - 10
maximum-scale倍率の最大値設定1.60 - 10
user-scakable拡大・縮小の可否yes(複数指定も可能)

トップ   編集 凍結解除 差分 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-01-30 (金) 10:55:03 (1051d)