見出しの装飾をするためのCSSプロパティ集

コッコ

ブログの見出しデザインをコピペしたけど、もうちょっと自分用に微調整したいなぁ

そんなお悩みをお持ちの方は参考にしてみてください

初心者必読！見出しデザインカスタマイズ方法【CSS】ブログでオリジナリティを出すのに活躍するのが「見出し」ですよね！そんな見出しのデザインを色別に作成したので、ぜひ参考にし...

見出しの色の調整

文字の色を変える
背景の色を変える

見出しの文字の調整

文字のサイズを変える
文字に影をつける
文字の位置（行・横方向）を変える

見出しのボックスの調整

border（線）の調整
ボックスの角を丸くする
ボックスに影をつける

見出しの余白を調整

marginを調整
paddingの調整

見出しの色の調整

▼カラーコードは下記の記事から

カラーコード・アイキャッチ・ロゴ作成に使えるリンク集画像や動画を作る時におすすめのサイトのリンクを集めましたどれもデザインをする時に役立つ素敵なサイトで、実際にいつも利用させていた...

文字の色を変える

h2{
  color: #000000;
}

背景の色を変える

h2{
  background-color:#ffffff;
}

見出しの文字の調整

文字のサイズを変える

h2{
   font-size:80%; /*通常サイズの80％の大きさに変更*/
}

値には、下記の単位が指定できます

px（1px=画面のドット1つ分の大きさ）
em（元のサイズに対する割合で100％と1emは同じ大きさ）
%
large,x-large,xx-large
small,x-small,xx-small

マイナスは使えません

文字に影をつける

text-shadowの値は「右にずらす幅、下にずらす幅、ぼかす幅、影の色」の順で設定する

h2{
   text-shadow: 5px 5px 3px #c0c0c0
}

マイナスを使うと、反対方向に影ができる

文字の位置（行・横方向）を変える

h2{
  text-align: center; /*中央揃え*/
  text-align: left;　/*左揃え*/
  text-align: right;　/*右揃え*/
}

見出しのボックスの調整

border（線）の調整

普段使うことは少ないけど、見出しをデザインする時などには良く使うプロパティ

border値は「線の太さ、線の種類、線の色」の順で設定する

h2{
   border-bottom: 4px dashed #003366;
   border-left: 10px solid #003366;
}

border	左右上下のborderを設定
border-top	上のみborderを設定
border-right	右のみborderを設定
border-bottom	下のみborderを設定
border-left	左のみborderを設定

線の種類

solid	実線（普通の線）
double	二重線
dotted	点線
dashed	破線（縫い目みたいな線）
none	なし（初期値）

ボックスの角を丸くする

値には、半径を入力します

h2{
   border-radius: 10px; /*4角が丸くなる*/
}

h2{
   border-radius: 10px 0 0 10px; /**左側の上下だけ丸くなる*/
}

設定できる値（半径）は下記の通り

デモ：border-radius｜MDN

ボックスに影をつける

box-shadowは「横の位置、縦の位置、影のぼかし度、影の広さ、影の色」の順で設定する

h2{
   box-shadow: 10px 10px 2px 1px rgba(0, 0, 255, .2);
}

デモ：box-shadow｜MDN

見出しの余白を調整

目には見えませんが、各文字列や画像は四角い領域に囲まれています

解説

padding：文字列や画像から、borderまでの領域をpaddingと呼ぶ
border：文字列や画像を囲む枠。通常は表示されない
margin：borderより外側の余白をmarginと呼ぶ

marginを調整

h2{
  margin:0;  /*要素の左右上下の余白（margin）を無くす*/
}

margin	左右上下のmarginを設定
margin-top	上のみmarginを設定
margin-right	右のみmarginを設定
margin-bottom	下のみmarginを設定
margin-left	左のみmarginを設定

値には、下記の単位が指定できます

px
em
%
auto
0

マイナスは使えません

デモ：margin｜MDN

paddingの調整

h2{
   padding-left: 10px; /*要素の左側に余白を作る*/
}

padding	左右上下のpaddingを設定
padding-top	上のみpaddingを設定
padding-right	右のみpaddingを設定
padding-bottom	下のみpaddingを設定
padding-left	左のみpaddingを設定

デモ：padding｜MDN