ブログ運営

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

見出しの装飾をするためのCSSプロパティ
コッコ
コッコ
ブログの見出しデザインをコピペしたけど、もうちょっと自分用に微調整したいなぁ

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

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

見出しの色の調整

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

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

文字の色を変える

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; /**左側の上下だけ丸くなる*/
}

設定できる値(半径)は下記の通り

  • %
  • px

デモ:border-radius|MDN

ボックスに影をつける

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

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

 

デモ:box-shadow|MDN

見出しの余白を調整

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

解説
  1. padding:文字列や画像から、borderまでの領域をpaddingと呼ぶ
  2. border:文字列や画像を囲む枠。通常は表示されない
  3. 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

見やすい!イエロー系の見出しデザイン27種【WordPressソースコード】
見やすい!イエロー系の見出しデザイン27種【WordPressソースコード】HTMLやCSSがわからなくても、コピペでOK! このページでは、イエローベースの見出しデザインをご紹介します イエ...
おしゃれ!グリーン系の見出しデザイン27種【コピペCSS】
おしゃれ!グリーン系の見出しデザイン27種【コピペCSS】HTMLやCSSがわからなくても、コピペでOK! このページでは、グリーンベースの見出しデザインをご紹介します グリ...
かわいい!ピンク系の見出しデザイン27種【コピペOKのCSS】
かわいい!ピンク系の見出しデザイン27種【コピペOKのCSS】HTMLやCSSがわからなくても、コピペでOK! このページでは、ピンクベースの見出しデザインをご紹介します ピンク...
かっこいい!ブルー系の見出しデザイン27種【WPカスタマイズ】
かっこいい!ブルー系の見出しデザイン27種【WPカスタマイズ】HTMLやCSSがわからなくても、コピペでOK! このページでは、ブルーベースの見出しデザインをご紹介します ブルー...