CSS
CSSの基本書式
プロパティ1 : 値1;
プロパティ2 : 値2;
}
指定場所
- style属性で指定
- タグ内にstyle属性を設定する
<タグ名 style="プロパティ1:値1;プロパティ2:値2;"> - head>style要素内に指定
-
<style>
セレクタ{
プロパティ1 : 値1;
プロパティ2 : 値2;
}
</style> - 外部スタイルシートに指定する
-
head要素内 <link rel="stylesheet" href="スタイルートファイルのURL">スタイルシートファイル セレクタ{
プロパティ1 : 値1;
プロパティ2 : 値2;
}
セレクタ
どの対象にスタイルを適用するかを指定するための書式
名称 | 書式 | 対象 | ポイント |
---|---|---|---|
全称セレクタ | * | すべての要素 | 0 |
要素型セレクタ | 要素名(タグ) | 指定した要素 | 1 |
疑似要素 | 要素名::first-line | 初めの1行 | |
要素名::first-letter | 初めの一文字 | ||
要素名::before | 要素の前 | ||
要素名::after | 要素の後 | ||
属性セレクタ | 要素名[属性名(="属性値")] | 指定された属性値を持つ要素 | 10 |
要素名[属性名^="foo"] | 属性値がfooで始まる属性を持つ要素 | ||
要素名[属性名$="foo"] | 属性値がfooで終わる属性を持つ要素 | ||
要素名[属性名*="foo"] | 属性値がfooを含む属性を持つ要素 | ||
classセレクタ | (要素名).クラス名 | 指定したクラス | |
疑似クラス | a:link | 未訪問のリンク | |
a:visited | style="background:#d1e8ff"訪問済みのリンク | ||
要素名:hover | マウスカーソルが乗っている要素 | ||
要素名:active | クリック中の要素 | ||
要素名:first-child | 要素内で最初に現れる子要素 | ||
要素名:nth-child(n) | 要素内で全要素中n番目に現れる子要素 cf.nth-child(2n+1) 奇数ごとの設定 |
||
要素名:nth-of-type(n) | 要素内で同一要素中n番目に現れる子要素 cf.nth-of-type(2n) 偶数ごとの設定 |
||
idセレクタ | (要素名)#id名 | idに紐付けられた要素 | 100 |
子孫 | セレクタ1 セレクタ2 | セレクタ1で指定された要素内にあるセレクタ2要素 | |
子 | セレクタ1>セレクタ2 | セレクタ1で指定された要素の直下にあるセレクタ2要素 | |
隣接 | セレクタ1+セレクタ2 | セレクタ1で指定された要素に隣接しているセレクタ2要素 | |
複数指定 | セレクタ,セレクタ | セレクタで指定されたものに共通して設定 |
スタイル指定の優先順位
CSSでは一つの対象に複数のスタイルを指定することができる。仮にそのスタイル指定がバッティングしたときには以下の優先順位でスタイルが適用される。
- !important
値のあとに!importantを付けるとその値が最優先される
- セレクタの種類
指定した方法のポイントの合算で高いポイントのものから優先される
- 指定場所
- style属性での指定>head要素内指定>外部スタイルシート
- 同じ指定場所,ポイントの時には後に記述したものが優先
ボックス
- 基本
-
marginborderpaddingcontent1.top2.right3.bottom4.left
※ ボックスの大きさ=コンテンツの大きさ+paddingの幅+ボーダーの幅
- 種類
-
- インライン
Wordにおける「文字」に相当
「大きさ」を持たない。
<span>、<strong>、<em>、<img>、<a>など
インライン要素1インライン要素2 - ブロック
改行される塊、Wordにおける「段落」および「図」などに相当
幅の指定が無ければ1行全体を領域とする。
<div>、<p>、<h1>、<table>、<figure>、<section>など
ブロック要素1ブロック要素2
大きさ
- 単位
-
CSSで使用する単位付き数値 単位 意味 em 今の時点での基準フォントサイズの高さ ex 小文字xの高さ rem html要素で設定された基準フォントサイズの高さ px ピクセル(絶対値) % 基準値に対する相対的な比率 単位による動き方の違いは「大きさ設定」を参照せよ。
- 異なる単位の計算
-
[width/height/font-size…]:calc(単位付き数値 [+ - * /] 単位付き数値);
※数値と演算子の間にはスペースが必要
※未確定仕様だが主要ブラウザは正式対応済み
記述 見え方 <span style="font-size:1.5em">あ</span>
<span style="font-size:calc(1.5em + 5px)">あ</span>ああ
色
- 色名(カラーネーム)による指定
- black white blue red yellow green purple gray silver gold navy lime pink orange brown など
- 16進数表現
- #赤[00-FF] 緑[00-FF] 青[00-FF]
- RGBAカラー(半透明が使える)
- rgba(赤[0-255],緑[0-255],青[0-255],透明度[0(完全に透明)-1(完全に不透明)])
※詳細はWEB色見本 原色大辞典 - HTMLカラーコードなどを参照せよ
ボックス設定
- コンテンツの幅・高さ
-
- 幅
-
width:幅; - 高さ
-
height:幅;
- 背景
-
background: 色指定 [url("画像のURL")]; - ボーダー
-
- 上
-
border-top:線種 太さ 色; - 右
-
border-right:線種 太さ 色; - 下
-
border-bottom:線種 太さ 色; - 左
-
border-left:線種 太さ 色; - 線種
-
border-style:全線種 | 上下 左右 | 上 左右 下 | 上 右 下 左; - 色
-
border-color:全色 | 上下 左右 | 上 左右 下 | 上 右 下 左; - 太さ
-
border-width:全太さ | 上下 左右 | 上 左右 下 | 上 右 下 左; - 上下左右まとめて指定
-
border:線種 太さ 色;
※border-top-styleといった指定も可能
線種 記述 意味 見え方 none 罫線なし あsolid 一本線 あdouble 二本線 あgroove 溝 あridge 尾根 あinset へこみ あoutset 膨らみ あdashed 破線 あdotted 点線 あ - 角を丸める
-
border-radius:[水平方向 左上 右上 右下 左下 / 垂直方向 左上 右上 右下 左下]; 記述 見え方 <div style="border-radius:50% 20% 50% 0 / 50% 50% 20% 0;> </div>
- マージンとパディング
-
- 上
-
[margin/padding]-top:幅; - 右
-
[margin/padding]-right:幅; - 下
-
[margin/padding]-bottom:幅; - 左
-
[margin/padding]-left:幅; - 上下左右まとめて指定
-
[margin/padding]:全部の幅 | 上下幅 左右幅 | 上幅 左右幅 下幅 | 上幅 右幅 下幅 左幅;
- 影
-
box-shadow:none | 水平距離 垂直距離 [ぼかし距離 広がり距離] 色 [inset]; 記述 見え方 <div style="box-shadow:0.1em 0.2em #c0c0c0">影</div>
影<div style="box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">影</div>
影<div style="box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0 inset">影</div>
影
コンテンツ付加
contentプロパティを用いるとHTMLには書かれていない文字や記号を要素の前後に表示させることができる。その際使用するセレクタはbefore疑似要素とafter疑似要素のみである。
- 文字・記号の付加
-
content:"文字・記号"; 記述 見え方 .customer::before{
content:"ようこそ♡";
}
.customer::after{
content:"さま♪";
}
--------------------
<span class="customer">高橋愛</span>ようこそ♡高橋愛さま♪ - 引用(<q>)の表示
-
- 引用符の設定
-
quotes:"開始記号""終了記号" ["開始記号""終了記号"];
※スペースの後にさらに開始終了のペアをおくと階層化させることができる。 - 引用符の付加
-
content:open-quote | close-quote; - 初期状態
-
q{
quotes: "「 " "」" "『 " "』";
}
q::before{
content: open-quote;
}
q::after{
content: close-quote;
}最近のブラウザでは言語に応じた引用符が自動的に割り振られるようになっている。そのときデフォルトで設定されているスタイルが上である(改めて設定する必要はない)。
記述 見え方 同級生から<q><q>一つの妖怪がヨーロッパにあらわれている、――共産主義の妖怪が</q>って誰の言葉だっけ?</q>と聞かれた。そんなことも知らないのか。フロイトに決まっているじゃないか。
同級生から
と聞かれた。そんなことも知らないのか。フロイトに決まっているじゃないか。一つの妖怪がヨーロッパにあらわれている、――共産主義の妖怪が
って誰の言葉だっけ?特別な引用符を割り振りたいときにはCSSで設定を変更する(記号部分のみを書き換える)。
- 他言語の引用符
他言語の引用符を使いたいときにはlang属性を変更する。
記述 見え方 <p lang="en">He cried <q>She said to me <q>You are stupid!</q></q>.</p>
He cried
She said to me
.You are stupid!
- 連番
-
- 連番初期化
-
counter-reset:カウンタ名;
このプロパティを指定した要素が登場するごとに「カウンタ名」の連番を初期化(カウントを0)する - インクリメント(連番の数字を進める)
-
counter-increment:カウンタ名;
このプロパティを指定した要素が登場するごとに「カウンタ名」の連番を一つ進める - 連番の付加
-
content:counter(カウンタ名);
カウンタ名の現在の数字を表示する - 連番の付加(階層化)
-
content:counters(カウンタ名,区切り文字);
階層化された連番を表示する
記述 見え方 .rank{
counter-increment:count1
}
.rank::before{
content:counter(count1);
}
--------------------
<span class="rank">石川</span><span class="rank">松浦</span><span class="rank">加護</span>1石川2松浦3加護 .container {
counter-reset: count2;
}
.item{
counter-increment:count2
}
.item::before{
content:counters(count2,".");
}
--------------------
<div class="container">
<div class="item">ごまっとう
<div class="container">
<div class="item">後藤</div>
<div class="item">松浦</div>
<div class="item">藤本</div>
</div>
</div>
<div class="item">後浦なつみ
<div class="container">
<div class="item">後藤</div>
<div class="item">松浦</div>
<div class="item">安倍</div>
</div>
</div>
</div>1 ごまっとう
1.1 後藤
1.2 松浦
1.3 藤本
2 後浦なつみ
2.1 後藤
2.2 松浦
2.3 安倍
変形
- 回転
-
transform: rotate(角度deg); ※safariは正式対応前(要-webkit-)
記述 見え方 <div style="transform:rotate(45deg)">回転</div>
回転 - 傾斜
-
transform: skew(X軸の傾斜角度deg, Y軸の傾斜角度deg); ※safariは正式対応前(要-webkit-)
記述 見え方 <div style="transform:skew(25deg,20deg)">傾斜</div>
傾斜 - 縮尺
-
transform: scale(X方向の比率, Y方向の比率); ※safariは正式対応前(要-webkit-)
記述 見え方 <div style="transform:scale(0.8,1.8)">縮尺</div>
縮尺
ボックス表示切り替え
- 非表示1
-
visibility:visible(初期値) | hidden 記述 見え方 <p style="visibility:
">見えない</p>
<p">見える</p>見える
- 非表示2
-
display:none; 記述 見え方 <p style="display:
">見えない</p>
<p>見える</p>見えない
見える
- ブロック→インライン
-
display:inline; 記述 見え方 <ul>
<li style="display:">高橋</li>
<li style="display:">新垣</li>
</ul>- 高橋
- 新垣
- インライン→ブロック
-
display:block; 記述 見え方 <span style="display:">高橋</span>
<span style="display:">新垣</span>高橋新垣 - 疑似リスト(インライン|ブロック→リスト)
-
display:list-item; 記述 見え方 <span style="display:;">高橋</span>
<span style="display:;">新垣</span>高橋新垣 - 疑似テーブル(インライン|ブロック→テーブル)
-
display:table | table-row | table-cell /…;
テーブルタグと同様にテーブルを組んでいく。table-cellは<td>と同等
table要素、table-row要素は省略可。
記述 見え方 <div style="display:">
<p style="display:">後藤</p>
</div>
<div style="display:">
<p style="display:">松浦</p>
<p style="display:">藤本</p>
</div>後藤
松浦
藤本
- Flexbox
-
実際の動きはFlexBoxを参照せよ
- コンテナに指定
-
display:flex; 中の要素をフレックスボックスアイテムにする
- flex-direction
-
flex-direction:row | row-reverse | column | column-reverse; アイテムを並べる方向と順序-横|横を逆順に|縦|縦を逆順に
- justify-content
-
justify-content:flex-start | flex-end | center | space-between | space-around; 左揃え|右揃え|中央揃え|中央揃えでボックス間に余白を取る|中央揃えでボックスの左右に余白を取る
- flex-wrap
-
flex-wrap:nowrap | wrap | wrap-reverse; flexboxが横に溢れたときに折り返すかどうか。
wrap-reverseは折り返しを上に積み上げる形で行う。
- align-content
-
align-content:flex-start | flex-end | center | space-between | space-around | stretch; 上揃え|下揃え|中央揃え|中央揃えでボックス間に余白を取る|中央揃えでボックスの左右に余白を取る|余白を均等に割り振る(初期値)
- アイテムに指定
-
- order
-
order:順番; ボックスを並べる順番を指定
- flex-basis
-
flex-basis:初期の幅; 初期状態のボックスの幅。widthで設定するのと同じ指定ができる。
初期値はauto
- flex-grow
-
flex-grow:拡張比率; コンテナが広がったときに各ボックスが拡張される比率。
0のときは大きさ固定
初期値は0
- flex-shrink
-
flex-shrink:縮小比率; コンテナが狭まったときに各ボックスが縮小される比率。
0のときは大きさ固定
初期値は1
- flex
-
flex:flex-grow flex-shrink flex-basis; 3つのプロパティをこの順に指定する。
個別要素のプロパティ
- 文字(インライン)
-
- 文字色
-
color: 色指定; 記述 見え方 <span style="color:#00FF00">緑</span>
緑 - フォント指定
-
- 大きさ
-
font-size: 大きさ; 記述 見え方 通常<span style="font-size:1.5em">大</span>
通常大 - イタリック
-
font-style: normal | italic; 記述 見え方 <span style="font-style:italic">斜Ii</span>
斜Ii - 太さ
-
font-weight: normal | bold; 記述 見え方 <span style="font-weight:bold">太</span>
太 - 種類
-
font-family:フォントの種類(sans-serif/serif/etc); 記述 見え方 <span style="font-family:'Hiragino Mincho Pro','MS Mincho';font-size:2em">明</span>
明
- 文字飾り
-
text-decoration:none | underline | overline | line-through; 記述 見え方 <span style="text-decoration:overline line-through">線</span>
線 - 影
-
text-shadow:none | 水平距離 垂直距離 [広がり距離] 色; 記述 見え方 <span style="text-shadow:0.5em 0.2em 0.1em #FF0000">影</span>
影 - 文字間隔
-
letter-spacing:none | 間隔; 記述 見え方 <span style="letter-spacing:1em">間隔</span>
間隔
- 段落(ブロック)
-
- 間隔(行間)
-
line-height:高さ; 記述 見え方 <p style="line-height:2.5em">後藤</p>
<p style="line-height:0">松浦</p>
<p>藤本</p>後藤
松浦
藤本
- 配置(行揃え)
-
text-align:left | right | center | justify; 記述 見え方 <p style="text-align:right">右</p>
右
- インデント
-
text-indent:インデント幅; 記述 見え方 <p style="text-indent:1em">小学校のときに段落を作るときには「改行して一文字あける」と習った。 Wordでは勝手にそうなるようだ。ではHTMLではどうするのだろう。</p>
小学校のときに段落を作るときには「改行して一文字あける」と習った。 Wordでは勝手にそうなるようだ。ではHTMLではどうするのだろう。
- リスト(ブロック)
-
- マーカーの書式
-
list-style:[マーカー形状] [url('画像のURL')] [outside/inside]; マーカー形状 記述 意味 見え方 none マーカーなし - 中澤
- 石黒
disc 黒丸 - 飯田
- 安倍
circle 白丸 - 福田
- 保田
square 黒四角 - 矢口
- 市井
decimal 算用数字 - 小川
- 紺野
decimal-leading-zero 先頭に0 - 新垣
- 亀井
lower-roman 小文字のローマ数字 - 後藤
- 石川
upper-roman 大文字のローマ数字 - 吉澤
- 加護
lower-alpha 小文字のアルファベット - 道重
- 田中
upper-alpha 大文字のアルファベット - 久住
- 光井
lower-greek ギリシャ文字 - 辻
- 高橋
cjk-ideographic 漢数字 - 李
- 銭
hiragana あいう - 譜久村
- 生田
hiragana-iroha いろは - 鞘師
- 鈴木
katakana アイウ - 飯窪
- 石田
katakana-iroha イロハ - 佐藤
- 工藤
- 表(ブロック)
-
- キャプション位置
-
caption-side:top | bottom; - セル内の縦位置
-
vertical-align:baseline | top | middle | bottom; 記述 見え方 <td style="vertical-align:top">上</td>
上 - セル内の横位置
-
text-align:left | right | center; 記述 見え方 <td style="text-align:center">中</td>
中 - 罫線→ボーダー
-
border:線種 太さ 色; 記述 見え方 <td style="border:2px dotted #F00">点線</td>
点線 - 境界線の重なり
-
border-collapse:collapse | separate; 記述 見え方 <table style="border-collapse:separate">分離する</table>
分離する 記述 見え方 <table style="border-collapse:collapse">重ね合わせる</table>
重ね合わせる - 境界線の重なりの幅
-
border-spacing:左右の間隔 上下の間隔; 記述 見え方 <table style="border-collapse:separate;border-spacing:0.5em 0.1em">分離</table>
分離 - 空白セル
-
empty-cells:show | hide; 記述 見え方 <td style="border:solid 1px #F00;empty-cells:show"></td>
<td style="border:solid 1px #F00;empty-cells:hide"></td>