今回は、ブログやメディアサイトのタイトル、見出しスタイルに使える基本的な装飾を紹介します。
【HTML/CSS】ブログ等に使える見出しスタイルまとめ
今回紹介する、見出しスタイルについては、初心者でもコピーのみでも適用できる簡単なスタイルのみを紹介していきます。
※記事内の見出しスタイルで使用しているhtml、CSSはコピーしてそのままでも、少しカスタマイズしてもお使いいただけます。
見出し、タイトルの文字装飾
今回のスタイルは上記5種のシンプルなデザインになります。
htmlコードの指定クラスに沿って説明していきます。※htmlやCSSを確認する場合、codepenのhtml、cssタブをクリックすることで確認ができます。CSSはコメント「/*各タイトル装飾*/」以下をご確認ください。サンプルの為、pタグで説明していますが、ご自身のサイトに合わせて「h2、h3」タグなどに変更して下さい。
①「.title1」部分・・・装飾や画像を使用しないとてもシンプルなサイトなどに使える、「太字＋文字色」を指定したシンプルな見出しになります。
②「.title2」部分・・・シンプルでも少しデザインを加えたサイトでも使える、よく見るパターンの見出しです。「枠線（下線）＋文字色」を指定するだけで実装できます。また、「padding」で文字と線の間に隙間を持たせることで、きれいな仕上がりにできます。
③「.title3」部分・・・こちらも「title3」と同じく枠線を使用したスタイルで、見掛けることもよくある見出しスタイルです。「枠線（左線）＋文字色」を指定するだけで実装できます。左線と見出しの間を空けたい場合は、「padding-left」を、線幅を変更したい場合は、「border」の幅指定部分の数値を変えることで、変更可能です。
④「.title4」部分・・・上記3つよりも目立たせたいときに使える、背景ベタ塗りの基本的な見出しです。「背景色＋文字色」の指定のみで実装できます。背景色の上下左右に余裕を持たせたい場合は、見出し、タイトルタグに「padding」を指定することで変更可能です。
⑤「.title5」部分・・・こちらは上記「title4」の背景色指定の応用版で、背景のグラデーション指定「linear-gradient」を使用して、上部部分に透明色を指定し、下部部分にその他の色を指定することで、タイトル下部にのみ背景色が付いているような見た目にできます。マーカーのような見た目にできるので、背景色を少しおしゃれにしたい方におすすめです。「linear-gradient」の起点指定部分の%を変更することで、背景色を付ける幅を変更できます。
基本的なタイトルの装飾については、上記装飾の文字や背景、枠線の色を変更するだけでも問題無いと思います。
まとめ
今回は、初心者向けの基本的なタイトル、見出しデザインについて紹介しました。
各セクションの頭になる部分ですので、文章よりも目立たせるようなデザインにするのがおすすめです。
前へ
