目次
CSSの構文
セレクタ {
プロパティ: 値
}
body {
color: blue
}主要なタグ
コメント /* */
大きさを指定する単位
大きさを指定する単位には次のようなものがあります。
px：ピクセル 画素数
%：親要素に対する割合
vh：ビューポート（画面サイズ）の高さに対する割合
100vhは画面の高さと同じ（100%）を表します。ただし、スマホの場合ブラウザの状態によって見え方が変わってくるという問題点があります。
vw：ビューポート幅に対する割合
vmin：画面の高さか幅の小さい方に対する割合
vmax：画面の高さか幅の大きい方に対する割合
em：全角1文字分に相当する値（テキストの冒頭にインデント）
displayプロパティ
displayプロパティは、要素の表示形式を決めるプロパティで次のような値を設定できます。
| display | block | inline | inline-block |
|---|---|---|---|
| 要素の並び | 縦 | 横 | 横 |
| width height指定 | ○ | × | ○ |
| margin padding指定 | ○ | ○（左右のみ） | ○ |
| text-align | × | ○（親要素に指定） | ○（親要素に指定） |
| vertical-align | × | ○ | ○ |
block：p、div、ul、h1などの初期値
inline：a、span、imgなどの初期値
inline-block：インライン要素であり、ブロックレベル要素でもある振る舞いをさせることができます。横並びにしたり、上下左右にpadding・marginを持つこともできる便利な設定です。
.button{
display: inline-block;
}none：非表示にします（ex. スマホ表示の際は表示しないなど）
フレックスボックス（Flexbox）
display:flex
align-tems:center display:flexが付く要素を中央揃えにします。
justify-content: center
「Flexboxチートシート」というページで詳しく紹介されています。
CSSの使用例
画像を丸く表示
border-radiusと overflowをセットで使います。
border-radius 角を丸く
overflow はみ出たところをhiddenで隠します（def. visible）
border-radius: 50%;
overflow: hidden;地図を埋め込む
「地図を表示する」で紹介しています。
iframeで別のHTMLソースが埋め込まれます。変更はできません。
簡単なアニメーション（transition）
transition プロパティが変化するまでの時間を設定
transition: background-color .25s;video 動画
このように書くと複数動画ファイルを置くことができる
mp4が読み込めないブラウザの場合の代替ファイルを定義できる
<video>
<source src="./asset/videos/testVideo.mp4" type="video/mp4">
</video>autoplay属性 自動で再生される
loop属性 繰り返す
muted属性 音が出ないようにする
preload属性 HTMLが読み込まれたら、即座にMP4の読み込みを開始する
ボタンの影 box-shadow
.button{
display: inline-block;
color: #fff;
font-weight: bold;
background-color: #333;
text-align: center;
padding: 15px 60px;
text-decoration: none;
box-shadow: 5px 5px 3px #bbb;
transition: box-shadow .25s;
}
.button:hover{
box-shadow: 0 0 0 #bbb;
}box-shadow: 5px 5px 3px #bbb; 横に5px 縦に5px 影をつけ、3px分ボヤーッとさせます。
hoverしたときに0にして影を消して、transitionで少し遅くすることで、ボタンが押されてる感を演出します。
フォーム、ラベル（form,label）
メールフォーム、ログインフォームなどでボタンを押して送るようなインタラクティブな要素を使う時にバックエンドとの連携がしやすくなります。
label：設定されていると自動的にフォーカスがあたります。
<label for="name">
LabelName
</label> for属性を設定するか、囲ってしまう書き方もあります。
CSSスタイルが適用される順番
リクエスト数を少なくするため、読み込ませるCSSファイルの数をなるべく少なくします。
カスケーディング
次の順で要素にスタイルを適用させます。
- 優先度が高いもの
- 詳細度
- 最後に宣言されたもの
優先度
- UA（User Agent）指定スタイルで!important
- ユーザー指定スタイル（ブラウザに追加したスタイル）で!important
- デベロッパー指定スタイル（Webサイトで読み込まれたスタイル）で!important
- デベロッパー指定スタイル
- ユーザー指定スタイル
- UA指定スタイル
詳細度
セレクタの種類や組み合わせによって、詳細度がC→Aと高くなり優先されます。
| セレクタ | 凡例 | 詳細度 |
|---|---|---|
| IDセレクタ | #huga | A |
| 疑似クラス | first-child, :hover | B |
| 属性セレクタ | [attr=”value”] | B |
| クラスセレクタ | .hoge | B |
| 疑似要素 | ::before, ::after | C |
| タイプセレクタ | section, div, p | C |
インラインスタイルと!important宣言
インラインスタイルは、他の詳細度が高いセレクタよりも優先されます。
<p style="color; red">大当たり！</p>!important宣言は、さらに優先されます。
.box {font-size: 14px !important}継承
主にテキストにまつわる次のプロパティは継承されます。
- color
- cursor
- font,font-family,font-size,font-style,font-weight
- line-fight
- text-align
- text-indent
- text-transform
- visibility
- white-space,word-spacing
CSSリセット
ブラウザは内部にUAスタイル（User Agent Stylesheet）と呼ばれるデフォルトのスタイルを持っていますが、ブラウザやバージョンによって異なるため、ブラウザによって表示が異なってしまいます。
そこでブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルが考案されました。
CSSがリセットできるライブラリは複数あります。
制作するWebサイトのデザインが必要とするのが、強いリセットなのか弱いリセットなのかを見極めて使い分けます。
HTML5 Doctor Reset Stylesheet
ほとんどの要素の修飾がクリアされる強いリセット。
デザイン性の高いWebサイトやWebアプリケーションにも有効です。
ただし、コード量は多くなります。
Normalize.css
見出し要素のフォントサイズの違いや要素間の余白を確保しつつ、ブラウザ間の差異をなくす「弱いリセット」です。
ただ、2018年が最終アップデートと少し古いので、他のCSSを選択した方がよさそうです。
SanitizeCSS
Normalizeの上位互換のようなCSSです。
特定ブラウザのバグ対応、デフォルトのスタイリングがより最適化されています。
Reboot
ある程度の装飾は残された状態でブラウザによる差異がなくなるように設計されています。
どんなリセットスタイルを持っているかを知っておく必要があります。
リセットCSSの読み込み方法
リセットCSSは、自作のCSSの前に読み込みます。
基本的にリセットCSSはファイルをコピーして、HTMLファイルやCSSファイルと同様に自分のサーバー上に配置します。
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>こちらのサイトで詳しく紹介されています。