CSS 見出し・段落のスタイリング

文字サイズを調節する

よく使う相対単位と絶対単位

相対単位：em 1em=1文字分の長さ
　　　　： % 親要素に対しての％

絶対単位：px 1px=画面上の1ピクセル

スマートフォン向けサイトの単位

vw：幅指定
vh：高さ指定
***meta要素のviewportで最適化調整を併用
100vw,100vhが１基本単位

文字サイズの指定

セレクタ{font-size:数値と単位;}

行間の調整

セレクタ{line-height:数値または数値と単位;}

書体の指定/*Google fonts 日本語フォント*/

セレクタ{font-family:書体の種類;}

文字色を指定

セレクタ{color:#16進数;}

見出しのレベル

h1-h6

背景色を指定

セレクタ{background-colir:#16進数;}

余白の設定

セレクタ{padding:単位と数値;}

囲み線で装飾する

セレクタ{border:先の太さ 線の種類 線の色;}
h1{border:1px solid #000000;}

線の種類

solid/*実践で表示*/
double/*２本線で表示*/
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:数値と単位;}