【保存版】CSS 逆引き辞典（初心者用 随時更新予定）
使い方
「CSSの説明書（スタイルシートリファレンス）」「CSS命令一覧」「CSSプロパティ一覧」と、いろいろありますがやりたい事をどう命令するのかがわからないと調べられません。何度も同じことを調べて同じサイトに辿り着くことが多かったので、自分で見直す用に「逆引き辞典」を作ることにしました。
とりあえず「何を」「どうする」で調べられるようにしてみます。随時覚えたことを更新していきます。
なにを？
※特定の要素に見つからないときは「要素全体（共通）」にある場合があります。
基本の書き方
要素（タグ、ID、クラス）に対してのスタイルを決定します。
例えば、ページにある全ての<p>~</p>内の文字を赤色にする場合
p { color: red; }
ID名の前には「#」を付ける。クラス名の前には「.」を付ける。
スタイルは１つの要素にいくつでも指定できる
例えば、ボタン「id="btn"」を装飾する場合
.btn{
display: block;
padding: 5px 30px; /*余白*/
color:#fff; /*文字の色*/
font-size: 16px; /*文字のサイズ*/
text-align: center; /*文字の位置*/
background:#1B73BA; /*背景色*/
border-radius: 10px; /*角の半径*/
cursor: pointer; /*カーソル（指のかたち）*/
}
このように書くと見やすい。記述順も決めておくと編集が楽になる。
記述順の例
ブロック・配置（display, position, float, top, left）
余白（margin, padding）
サイズ（width, height）
テキスト（color, font-size, font-weight, text-align）
背景（background, border, box-sizing）
その他（cursor, opacity）
要素をどうする？
特定の要素をどうする？
文字をどうする？
テキストボックスをどうする？
ボタンをどうする？
画像をどうする？
ヘッダー・フッターをどうする？
解説
要素を中央に表示する方法
１．margin: 30px auto; /*範囲外の余白（autoで中央表示）*/
上から30ピクセルの位置に中央寄せで表示する。
「margin（マージン）」は通常、領域外の余白を設定。[上][右][下][左]の順番。
２．text-align: center; /*中央に表示する*/
「text-align:right;」で右揃え。
３．position: absolute; /*絶対位置で表示*/
left: 0;
right: 0;
margin: auto; /*中央寄せ*/
絶対位置の場合は「left: 0; right: 0;」で左右のpositionをゼロにする。
※中央寄せにならない時の原因
要素（親要素）の幅が画面いっぱいになっている場合がある。
要素の位置を設定する方法
ブロック要素の場合（ブロック要素とは、前後に改行が入る要素）
例えば、h1~h6, p, div, ul, ol, li, table要素など。
※「display: block; /*要素をブロック表示にする*/」で指定もできる
１．top: 10px; /*上から10ピクセルの位置に配置*/
left: 10px; /*左から10ピクセルの位置に配置*/
※「position:relative; /*相対位置への配置*/」
これを先に指定しないと[top][bottom][left][right]は使えない。
２．margin: 15px 0px; /*範囲外の余白（上下、左右）*/
値が４つの場合は[上][右][下][左]の順番。
３．padding: 5px 10px; /*範囲内の余白（上下、左右）*/
値が４つの場合は[上][右][下][左]の順番。
４．text-align:center; /*文字の位置*/
要素内の文字を中央に配置する
ブロック要素でない場合（インライン要素）
例えば、img, label, input, textarea, a, span要素など。
※「display: inline; /*要素をインライン表示にする*/」で指定もできる
１．float: right; /*右に寄せる*/
右に寄せたい要素（画像など）に使用。
clear: both; /*「float」を解除*/
「float」を解除したい要素（文字など）に使用。
要素の幅を設定する方法
width: 80%; /*全体の80％の幅で表示*/
「px（ピクセル）」でも設定可。
要素の最大の幅を決める方法
max-width: 600px; /*幅の最大値を設定*/
「%」でも設定可。表示領域が変わる場合に幅が大きくなりすぎないように設定する。
要素の高さを設定する方法
height: 60px; /*60ピクセルの高さで表示*/
「%」でも設定可。
要素に背景色を付ける方法
background: #eee; /*背景色を薄灰色にする。「#eee」は「#eeeeee」と同じ*/
もしくは、background-color: #eee;
要素に外枠を作る方法
border: outset 2px; /*外枠を作る（スタイル、太さ）*/
※まわりの要素との間隔が気になる場合は、margin（領域外の余白）を見直す。
要素に下線を付ける方法
border-bottom: 2px solid #c2c2c2; /*下線を表示。太さ、１本線、色を設定*/
※要素との間隔が気になる場合は、padding（領域内の余白）を見直す。
要素の透明度を指定する方法
opacity: 0.8; /*透明度*/
0.0（完全に透明）～1.0（完全に不透明）の間で指定する。
特定の要素がクリックされたとき
#ID名:focus{ } （この中に命令を入れる）
「.クラス名:focus{ } 」や「a:focus { }」でグループにも対応可。
特定の要素にカーソルが乗ったとき
#ID名:hover{ } （この中に命令を入れる）
「.クラス名:hover{ } 」や「a:hover { }」でグループにも対応可。
カーソルの形を変える方法
cursor: pointer; /*カーソルを指の形に変える*/
「cursor: default;」で標準カーソル。「cursor: not-allowed;」なら禁止マークになる。
文字を太字にする方法
font-weight: bold; /*文字を太字にする*/
HTMLファイルで<b>~</b>でも可能だが、HTML4.01 では「非推奨(deprecated)」。
文字の大きさを変える方法
font-size: 18px; /*文字のサイズを18ピクセルにする*/
「%」でも設定可。ほかにも「em」や「ex」の単位がある。
文字に色を付ける方法
color: #ffffff; /*文字を白色にする。黒は「#000000」*/
「#ff0000」の代わりに「red」でも可。
文字に背景色を付ける方法
background: #1B73BA; /*背景色*/
もしくは、background-color: #1B73BA;
文字を中央に表示する方法
text-align: center; /*中央に表示する*/
「text-align:right;」で要素の右揃え。
文字を右に表示する方法
position: absolute; /*絶対位置（rightのために必要）*/
right: 30px; /*右に配置*/
親要素を基準にする時は「position: relative;」で相対位置を指定。
※h1~h6, p, div, ul, ol, li, table要素には必要ない。（デフォルトでブロック表示）
文字を画像の右側に表示する方法
float: left; /*画像を左に寄せる*/
右に文字を表示したい要素（画像）に使用。
clear: both; /*「float」を解除*/
「float」を解除したい要素（文字）に使用。（次の要素がない時は空白の<div class="解除用"></div>を作ればオッケー）
スマホの時だけ小さくする方法
@media screen and (max-width: 600px) { };
この中で要素と文字のサイズを指定
例えば、この中に「p { font-size: 80% }」を入れると、画面の幅が600px以下の時は<p>タグの文字のサイズが通常の80%になる。
テキストボックスの外枠を消す方法
border: none; /*外枠を表示しない*/
outline: none; /*テキストボックスがクリックされたときの外枠を表示しない*/
「none」は「0」でも可。
「width: 100%;」なのにはみ出す場合の対処法
box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
「padding」で左に余白を作ったときに起こる問題。
ボタンの外枠を消す方法
border: none; /*外枠を表示しない*/
outline: none; /*ボタンがクリックされたときの外枠を表示しない*/
「none」は「0」でも可。
ボタンの角を丸める方法
border-radius: 25px; /*半径25pxで角を丸める*/
半径25pxで高さが50pxのときは半円になる。
画像の縦横比を維持したままリサイズ(拡大/縮小)する方法
width: 80px; /*幅を基準に指定する場合。例：80ピクセルの幅で表示*/
height: auto; /*縦横比を維持する高さを自動計算*/
画像を中央に表示する方法
display: block; /*要素の表示形式*/
margin: auto; /*中央寄せ*/
先に要素をブロック表示にしないと[margin]が使えない。
画像を背景に指定する方法
background-image: url("back_image.jpg"); /*画像を背景に指定*/
その要素の背景画像を指定する。CSSファイルからの相対パスで指定。（同じフォルダにある場合、パス名は不要）
画像を文字の右側に表示する方法
float: right; /*右に寄せる*/
右に寄せたい要素（画像）に使用。
clear: both; /*「float」を解除*/
「float」を解除したい要素（文字）に使用。（次の要素がない時は空白の<div class="解除用"></div>を作ればオッケー）
ヘッダー・フッターを固定する方法
position: fixed; /*絶対位置で固定*/
top: 0px; /*上に配置*/
フッターの場合は「bottom: 0px; /*下に配置*/」
ヘッダー・フッターの左の隙間をなくす方法
left: 0px; /*左の隙間をなくす*/
通常はmargin（範囲外のスペース）の初期値が8pxのため隙間があいてしまう。
これからも随時更新していきますのでよろしくお願いします。
↓よかったらポチッとしていってください。
