最終更新日：2020年4月28日
こんにちは、エヌ（＠enublog）です
見出しのデザインってこだわりたいですよね！色んなデザインを試してみて自分のサイトに合ったデザインにする。デザイン選びは服屋で服選びをする時のようにワクワクしますよね。
さて、見出しのデザインが決まれば実際に自分のサイトにデザインをするわけなんですが、実際うまくデザインできないんですよね（笑）
見出しの文字のサイズであったり、色であったり、今回ご紹介する見出しデザインと文字との余白などやることはとても多いんです
今回の記事では、見出しのデザインと文字の間の余白調整についてご紹介します。簡単なのですぐに終わらすことができます！
半角スペースで余白はできない
まずは実験として半角スペースだけでできるのかどうか
このように<h3>〇〇見出しの空白←文の前に空白をあけました
結果↓
できないんですよね（笑）
実は全角スペースで余白はできる！？
半角ではできないのに全角だとできる。そんなことありえる？（笑）
できんのかい！
もう解決してしまった！終わり！
しかしここで終わってはいけません
たしかに全角スペースで空白を生むことはできました。しかし全角スペースにはデメリットがあります。
・幅の調整ができないため見栄えが悪い
全角スペースは幅が一定のため自分好みの幅で調整することができません。幅を気にしない方であれば全角スペースでも問題ないかと思います。では一体どうすれば幅を調整できるのか。それはCSSとHTMLを使えば解決します。
margin-rightで調整
margin-rightを打ち込むことで余白ができる且つ幅の調整ができます
HTML
<span class="margin-right-10"></span>CSS
.margin-right-10{
margin-right : 10px;
}【使用例】
①まずはCSSにコードを挿入
②HTMLコードを入れる
<h3><spna class="margin-right-10"></span>見出しの空白
今回は見出しのデザインと文字の間に余白をつけるということなので文の横にこのようなHTMLコードを打ち込みます。
</spna>の打ち込みは忘れず入れましょう！
これで問題なく入りました！
幅の調整はCSSのサイズを変更するだけ
幅のサイズ調整する際はCSSコードのみ変更で大丈夫です
.margin-right-10{
margin-right : 10px;
}↑10pxと書いてある部分だけ変更
これで幅の調整は自由にできます。
いかがだったでしょうか。見出しのデザインと文字が被ってしまう方はこれで解決できたかと思います。このようにデザインに関する記事をこれからも書いていければと思います。ぜひみてください！