CSS 見出し・段落のスタイリング
文字サイズを調節する
よく使う相対単位と絶対単位
相対単位:em 1em=1文字分の長さ
: % 親要素に対しての%
絶対単位:px 1px=画面上の1ピクセル
スマートフォン向けサイトの単位
vw:幅指定
vh:高さ指定
***meta要素のviewportで最適化調整を併用
100vw,100vhが1基本単位
文字サイズの指定
セレクタ{font-size:数値と単位;}
行間の調整
セレクタ{line-height:数値または数値と単位;}
書体の指定/*Google fonts 日本語フォント*/
セレクタ{font-family:書体の種類;}
文字色を指定
セレクタ{color:#16進数;}
見出しのレベル
h1-h6
背景色を指定
セレクタ{background-colir:#16進数;}
余白の設定
セレクタ{padding:単位と数値;}
囲み線で装飾する
セレクタ{border:先の太さ 線の種類 線の色;}
h1{border:1px solid #000000;}
線の種類
solid/*実践で表示*/
double/*2本線で表示*/
groove/*線が窪んで見えるように表示*/
ridge/*線が隆起して見えるように表示*/
inset/*全体が窪んで見えるように表示*/
outset/*全体が隆起して見えるように表示*/
adashed/*破線で表示*/
dotted/*点線で表示*/
none/*線をなしにする*/
hidden/*線を非表示にする*/
線で飾る
border-top/*上*/
border-right/*右*/
border-bottom/*下*/
border-left/*左*/
セレクタ{border-bottom:先の太さ 線の種類 線の色;}
下線との間を広げる
セレクタ{padding-xx: @@px;}
先頭を画像で飾る
セレクタ{background-image:url(画像の場所/ファイル名)}
画像の繰り返し表示をコントロールする
セレクタ{background-repeat:値;}
例 h5{background-repeat:no-repeat;}
背景画像の位置を調整
設定できる値
top/*要素の上辺に表示*/
bottom/*要素の下辺に表示*/
left/*要素の左辺に表示*/
right/*要素の右辺に表示*/
center/*要素の中央に表示*/
例 background-position:top center;
段落の字下げを設定する
セレクタ{text-indent:数値と単位;}
文字揃えを設定する
セレクタ{text-align:値;}
字間を調節する
セレクタ{letter-spacing:数値と単位;}
この記事が気に入ったらサポートをしてみませんか?