css・HTMLの書き方ノート
cssとHTMLの使い方を整理し、思い出しながら使うことを想定したノートです。
内容は入門レベルです。
cssとは、WEBサイトのデザインを一括して指定できるプログラミング言語です。
文字の装飾や図の配置など個別に指定すると管理が大変です。
cssを使えばその問題を解決できます。
下の灰色のボタンで表示を絞り込むことができます。
HTML
基本構造
htmlタグ: HTMLである事を示す。
headタグ: 検索エンジン用の説明、CSSへのリンク、ページタイトル。
ブラウザに表示されない。
metaタグ: 使用言語、ページの説明。
titleタグ: ページタイトル。
ブラウザのタブやブックマークに利用される。
linkタグ: CSSなどを読み込む。
bodyタグ: コンテンツ部分。
グループ
headerタグ: ロゴ、ページタイトル、メインメニュー
navタグ: メインメニュー
mainタグ: メインコンテンツ
articleタグ: 独立して成立する記事
sectionタグ: テーマのあるグループ
divタグ: 上記以外のグループ
asideタグ: 補足
footerタグ: ページ下部。コピーライト、リンク
body内
ul: リスト（番号なし）
ol: リスト（番号あり）
li: リスト内の項目
strong: 強調
blockquote: 引用
audio, video: 音声データ、動画データ
pictureタグ
<picture>
<source media="(min-width: 760px)" srcset="img_1.jpg">
<source media="(min-width: 380px)" srcset="img_2.jpg">
<img src="img_3.jpg" alt="ブラウザ幅によって画像を切り替える"">
</picture>
pictureタグの中にsourceタグを1つ以上、imgタグを1つ記述する。
sourceを上から順番に読み、条件に当てはまればsrcsetの画像を表示する。
sourceに当てはまる条件がなければimgタグの画像を表示する。
ボタンの画像
<input type="image" src="画像の場所" name="ボタンの名前" alt="説明テキスト">
ラジオボタン（ラベルの上も選択可能にする）
<input type="checkbox" name="名前" value=値 id="ID名">
<label for="ID名">表示する文字列</label>
ページ内リンク
<a href="#ID名">リンク用の文字列</a>
<div id="ID名"> ←ここに移動する
コンテンツ
</div>
エスケープ文字
一覧
< <
> >
空白（無視されない）
空白（半角幅）  
空白（全角幅）  
& &
° °
± ±
× ×
÷ ÷
¹ ¹
² ²
½ ½
¾ ¾
{ {
} }
CSSの基本
設計：BEMの命名規則
ブロック__要素--装飾
ブロックは大枠、要素は部品。
優先順（ID(#), クラス(.), 要素, 後書き）
a#id, #id, a.class, .class, a（詳しく指定した方優先）
絶対単位（px）
変えたくない値（要素の間隔や線の幅）に使う
相対単位(%, em, rem, vw, vh, vmin, vmax)
親要素基準
50% 0.5em
ルート要素基準
0.5rem
表示領域基準
50vw 50vh
（vはviewport、wはwidth、hはheight）
10vmin 5vmax
（幅・高さの短い方/高い方基準の何%か）
ブレイクポイント
画面サイズによってスタイルを変更する。
相対単位の使用を推奨。
@media(max-width: 600px) { }
色の指定
2桁で赤/緑/青を指定
#0055ff
#05f（ゾロ目は1桁省略できる）
RGBで指定（例は白）
rgb(255, 255, 255)
透明度も指定（例は黒の半透明）
rgba(0, 0, 0, .5)
赤, 緑, 青, 透明度の順
3色同値は無彩色。#fff: 白、#ddd: 明るいグレー、#333: 暗いグレー
余白(外側はmargin、内側はpadding)
px, rem, %などで指定。autoで自動。
margin: 10px # 4方向全て同値
margin: 0 auto # 中央配置（上下0, 左右auto）
margin: 1px 2px 3px 4px # 上,右,下,左
個別指定
margin-top: 0
margin-left: 4%
margin-right: 4%
margin-bottom: 10px
画面サイズの例
iPad: (768～834, 1024～1112)
iPhone: (375～414, 667～896)
文字
まとめて指定（font）
font-style, font-variant, font-weight, font-size, line-height, font-familyを指定。
文字サイズ（font-size）
文字サイズを正しく反映するための設定。px, rem %など。
html { font-size: 100%; }
文字サイズの指定
font-size: medium;
小さい順にxx-small, x-small, small, medium, large, x-large, xx-large
フォント
font-family: serif, sans-serif, "Yu Goh2ic", "游ゴシック体", "ヒラギノ丸ゴ Pro W4";
# 左にある方が優先される
serif: 明朝、sans-serif: ゴシック、cursive: 筆記体、fantasy: 装飾、monospace: 等幅
文字の色（color）
白文字の例
color: #fff;
color: white;
文字の太さ（font-weight）
太字
font-weight: bold;
数字（1～1000）で指定
一段細く lighter、一段太く bolder
行間（line-height）
フォントサイズとの比率（無単位）, px, em, %など
line-height: 1.7;
自動的な折り返しなし
white-space: nowrap;
文字の間隔（letter-spacing）
px, rem, %など
文字の位置（text-align）
text-align: justify; # 両端揃え
text-align: left # 左揃え
# ほか right, center
線
まとめて指定（border）
border-width, border-style, border-colorを指定。
線の太さ（border-width）
border-width: 1px 2px 3px 4px; # 上, 右, 下, 左
border-width: thin; # 細線
太線 thick、中間 medium
線の種類（border-style）
boder-style: solid; # 一本線
非表示 none、2本線 double、破線 dashed、点線 dotted
谷型 groove、山型 ridge、凹 inset、浮き上がり outset
線の色（border-color）
border-color: #000;
下線（border-bottom）
border-bottom: 2px;
下線・取消し線（text-decoration）
text-decoration: none; # 傍線なし
下線: underline、上線: overline
打消し線: line-through、点滅: blink
線の角を丸める（border-radius）
border-radius: 50%;
線をまとめて設定（border）
border: 5px dotted blue;
border-top等で個別の設定もできる
tableの境界線を重ねる（border-collapse）
border-collapse: collapse; # 隣接する境界線を重ね合わせる
border-collapse: separate: # 境界線を離す
tableのtd/thの間隔（border-spacing）
border-spacing: 1px; # 上下左右1px空ける
border-spacing: 2px 3px; # 左右2px、上下3px空ける
画像
画像サイズ
画像が親要素より大きくなることを防ぐ
img { max-widh2: 100%; }
背景
背景色
background-color: white;
背景画像（ファイル）
background-image: url(images/bg.png);
背景画像（グラデーション）
background-image: linergradient(色1, 色2);
繰り返し
background-repeat: repeat;
横に繰り返し repeat-x、縦に繰り返し repeat-y
背景で埋める
background-size: cover;
画像を全表示 contain
自動的にトリミング
object-fit: cover;
背景の位置
background-position: top center;
横方向: left, center, right
縦方向: top, center, bottom
まとめて指定（background）
background-color, background-image, background-repeat
background-attachment, background-position
リンク
カーソルを重ねた時（hover）
a:hover{ color: #fff; }
配置
Flexbox（display: flex; で有効にする）
横の並びを左から
flex-direction: row
右から row-reverse、上から column、逆順 column-reverse
下に折り返し
flex-wrap: wrap
折り返しなし nowrap
下から上に折り返し wrap-reverse
左に揃える
justify-contant: flex-start;
右揃え flex-end、中央 center
両端（均等）space-between、全て均等 space-around
上下中央揃え
align-items: center;
上揃え flex-start、下揃え flex-end
要素の高さに広げる slietch、ベースライン揃え baseline
表示順を2番目に指定
order: 2;
重要なコンテンツは上部に記述し、orderで入れ替える
grid（display: grid; で有効にする）
横の並び
1:1:1の比率で横に並べる
grid-template-columns: 1fr 1fr 1fr;
1frのボックスを1列に3つ並べる
repeat(3, 1fr);
（繰り返す数, 要素の幅）
指定の幅以上で画面の幅によって伸縮
repeat(3, minmax(240px, 1fr));
（繰り返す数, （最小, 最大））
幅に応じて繰り返しの数を変更
repeat(auto-fit, minmax(240px, 1fr));
縦に並べる（1:2:1）
grid-template-rows: 1fr 2fr 1fr;
子要素間の余白
gap: 5px;
サイズ変更
横1～3番目までの幅（grid2つ分）
grid-column: 1 / 3;
横1～3番目までの幅（grid2つ分）
grid-row: 1 / 4;
@media内で使い、サイズを元に戻す
grid-row: auto;
ファイル
ファイルの種類
JPG: 軽い。用途: 写真・グラデーション。色数の多い画像。
PNG: 軽い。透過可能。用途: イラスト・ロゴ。色数の少ない画像。
GIF: 透過やアニメーション可能。用途: 単色・簡単なイラスト。
SVG: ベクター形式。拡大しても画像が劣化しない。用途: 高解像度ディスプレイ。
容量調整
Compressor.io: 画像ファイルを劣化させずサイズ圧縮できるサイト。
Compressor.ioへのリンク