CSSのチートシート 後編
CSSのチートシート 後編
文字の配置
文字の配置はtext-alignタグ
を利用すればOK(あくまで文字のみ)
- left - right - center - jistify (両端そろえ。スペースの調整もしてくれる)
p { text-align: right; }
リストの表示方法
1. list-style-type
ulで指定が可能なもの
-disc : 円形 -circle : 中空円 - square : 塗りつぶされた四角
olで指定が可能なもの
-decimal : 数値 -lower-roman : ローマ数字小文字)
2. list-styel-position
-inside :ブロックの内側 -outside :ブロックの外側 - inherit :親要素の指定を継承
ul { list-style-type: square; } ol { list-style: lower-roman }
display
HTML要素をどのように表示するかを決める
- block: ブロック要素として表示する - inline: インライン要素として表示 - inline-block: インラインとしてブロック要素を表示(ブロックした適用できないCSSを指定できるようになる) - none: 表示しない
visibility
HTML要素をどのように見せるかを決める
- visible: そのボックスを表示させる - hidden: そのボックスを非常にさせる
boxのサイズの考え方(divとか)
min-width / max-width と min-height / max-height
min-〇〇 -> 最小でもこのサイズより小さくならない max-〇〇 -> 最大でもこのサイズより大きくならない
box-sizing
ボックスのサイズの算出方法を決めるオプション
- content-box: padding/borderを幅や高さに含めない - border-box: padding/borderを幅や高さに含める
overflow
文字があふれた時の考え方
- visible: はみ出して表示 - scroll: スクロールバーは表示 - hidden: はみ出した部分は隠す
postion
参考サイト 位置を決める基準の指定方法
- static : 配置の方法を決めない(通常通り) - absolute : 絶対値 - relative : 相対位置 - fixed : 絶対値への配置(スクロールしても固定)
位置を決めるオプション
- top - bottom - right - left
z-index
奥域を指定する場合にz-indexを利用する。
css .top { background-color: red; color:white; position: absolute; top: 10px; left: 10px; } .middle { background-color: yellow; color:black; position: absolute; top: 40px; left: 40px; } .bottom { background-color: pink; color:black; position: absolute; top: 60px; left: 60px; }
topを前に持ってきたい場合はtopにz-indexをつけてあげる
. . . .top { background-color: red; color:white; position: absolute; top: 10px; left: 10px; z-index: 10; <---- z-indexを指定 } . .
Topが前に出てきた
背景指定方法
1. background
いくつもの背景の設定を指定する
2. background-color
いくつもの背景色の設定を指定する
<div class="sketch-image"></div>
.sketch-image { width: 700px; height: 500px; border-radius: 10px; background-color: blue; <- 追加 }
3. background-image
いくつもの背景画像の設定を指定する。 書き方はurl('画像へのパス)
.sketch-image { width: 700px; height: 500px; border-radius: 10px; background-image: url(image.jpeg); <- 追加 }
画像の繰り返しが必要のない場合はbackground-repea
設定が有効
background-repeat: no-repeat;
背景設定の一括方法はbackgroundが便利。
1. 画像選択 2. リピート設定 3. 位置設定
これを一気に設定できる。
background: url(image.jpeg) no-repeat 350px 300px;
背景指定の応用
上記で背景設定を記載しましたが。もう少し応用もあります。
1.background-repeat
- no-repaet : 繰り返さない - repeat: 縦横に繰り返す - repaet-x : 横方向のみに繰り返す - repaet-y :縦方向のみに繰り返す
2. background-position
背景の表示位置を指定する
■ キーワード方式 - center - top - bottom - left - right ■ % 画面左上を基準にそのBOX から何%のいちから開始するのかを指定する。 ■ 数値 単位をつけて数値で明確化する
3.background-attachment
画面をスクロールするときに、背景画像をどのように表示するか
- fixed 背景画面の位置が固定されてスクロールしても動かない - scroll スクロールに従って、背景位置も移動する - local そのboxのスクロール位置に合わせて移動する
4.background-size
-contain 縦横比は保持、背景領域に収まるように最大になるように拡大、縮小する。 -cover 縦横比は保持、背景領域に完全に覆う最小サイズになるように拡大、縮小する。
5.background-clip
- border-box 背景をボーダーボックスで適用する - padding-box 背景をバディングボックスで適用する - content-box 背景をコンテントボックスで適用する
影をつける方法
box-shadow
画像などに影をつけたいときに利用する
- 水平方向の影のオフセット値 - 垂直方向の影のオフセット値
box-shadow: 20px 20px;