見出しをカスタマイズしたい、作ってみたいと思ってもなかなかできない方も多いのではないでしょうか。
- CSSが全くわからない
- プロパティの意味がわからない
- 文字が多すぎて不明すぎる
ここでは初心者でも取り組めるような簡単な見出しの作り方を紹介していきます。
CSSがわからないボクでも大丈夫？
ここで紹介するプロパティは簡単でわかりやすいものばかり！
必要なプロパティ、記述方法、実際の簡単の見出しを紹介して解説していきます。
- 簡単な見出しの作り方
- 必要なプロパティの紹介
- おしゃれな見出しの作り方（応用編）
では、早速見ていきましょう。
見出しを作り方を説明する前に
まずCSSの基本構造について簡単に解説していきます。
プロパティってどんなもの？
先程からプロパティという言葉が出てきておりますが、どのような装飾をしたいかという意味です。
このような記述を見たことあると思いますが、赤い文字で書かれた「：」の前のものがプロパティになります。
この画像で言うと「color」がプロパティってことね
うん、あってるよ
値というものはプロパティに対する装飾になるので、この場合ですと「文字色を指定する」という意味になります。
紹介する見出しはコピペOK
ここで紹介する見出しは、初心者でも理解しやすいシンプルな見出しです。
- 文字色の変更
- 線の種類の変更
- 背景色の変更 など
実際に表示された画像をもとに、この部分はどのプロパティによって表示されているのかしっかり解説していきます。
また紹介するCSSは全てコピペ対応ですので、ご自身でお好きなカラーなどを変更して楽しんでみてください。
線だけでできる見出しの作り方
まずは、線を使った見出しについて紹介していきます。
使用する主なプロパティ
高度な見出しを作る場合は、もっとたくさんのプロパティが必要ですが、この５つだけでも簡単に作成できます。
見出しCSSを記述する
見出しを指定する際は、h1〜h6というセレクタになるということを覚えておいてください。
装飾する場所を指定するもの
今回の場合は見出しになるので、以下のような解釈になります。
見出し1については記事タイトルで使用されているので、見出し変更する際は見出し2（h2）からになります。
では、実際に記述したCSSを見てみましょう。
.h2{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: black; /* 文字色 */
border-top: dotted 3px #fc8f64; /* 線の種類、太さ、色 */
border-bottom: dotted 3px #fc8f64; /* 線の種類、太さ、色 */
padding:10px; /* 要素内の余白 */
}
わわわわわ・・・
頭が痛くなる文字がたくさん・・・
position: relative
このプロパティは、指定した基準の位置に表示することができるプロパティになります。
値は「relative」を使用することが多いです。
基本的にはよく使うプロパティですので、覚えておきましょう。
font-size: 24px
文字の大きさを指定するプロパティです。
上記に目安として大きさの例を載せましたが、見出し２は記事内で最も大きい見出しになるので、一番大きく指定しましょう。
見出し３以降から順に大きさを小さくしていくと、より良い階層となる
color: black;
文字の色を指定するプロパティです。
わかりやすく「black」と英語表記しましたが、カラーコードで指定する際は「#000000」になります。
「＃」で記述しているものが、カラーコードになります。
こちらのサイトでも確認できます。
その他にも「Cocoon設定」から「エディタ」をクリックすると、たくさんのカラーを見ることができます。
基本的に文字カラーだけではなく、以下で説明する線の色や背景色も同様に記述します。
border-top(bottom): dotted 3px #fc8f64;
borderは線を表示するプロパティです。
/* 基本的な記述例 */ border: 線の種類 線の太さ 線の色;
主に使う線の種類は４つになります。今回は点線（dotted）を採用しています。
border横に記載したtopやbottomのプロパティは、線の表示位置を指定するものです。
プロパティの次に「-」をつけて記述します。
/* 基本的な記述例 */ border-top: 線の種類 線の太さ 線の色; border-left: 線の種類 線の太さ 線の色;
今回の場合はわかりやすく上と下で同じCSSを記述しましたが、これで上と下にて点線がつくということになります。
padding:10px;
要素内の余白を指定するプロパティです。
今回の場合は、見出しタイトル（文字）と線の間隔をどの程度空けるか指定するものになります。
広くしたい場合は数値を大きくし、反対に狭くしたい場合は数値を小さくしよう
実際の見出しを見てみよう
こちらが先程紹介したCSSで記述した見出しの実際画像になります。
では次に、実際に表示された画像をもとに、どこが何を表しているのか見ていきましょう。
borderプロパティと文字のカスタマイズ
まず線と文字について反映された部分を解説していきます。
- border-top（bottom）と記載したものは、「上と下」に表示
- 線のカスタマイズで「点線、3px、#fc8f64（オレンジ）」も反映
- 見出しタイトル部分になる文字は「24px、黒色」で表示
画像と実際に記述したCSSを合わせてみると、どこが何を意味しているのか何となくわかったかと思います。
CSSはこのように記述することで、実際に表示されるということです。
余白の指定
縦と横に示した矢印が指定した余白になります。
今回は見出しタイトル（文字）が短かったので、右端の余白分までは画像には載っていませんが、上下と左は余白が空いていますね。
長い見出しタイトルを指定した場合は、右側も左側と同じ余白が空くので覚えておこう
線の見出しに関するまとめ
上記で説明した通り、CSSにはどんな装飾、どこの位置にを指定することで簡単に見出しが作成できます。
何がどの意味を示しているのか理解できると、カスタマイズの幅も広がるので参考にしてみてください。
線をカスタマイズしよう
ではここから大きく記述方法は変えず、線の種類だけ変えるとどのようなイメージになるのか見ていきます。
記述に変更がある部分は、ピンク色または黄色マーカーで示しているので、確認してみてね
実線バージョンCSS
/* 実線ver */
.h2{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: black; /* 文字色 */
border-top: solid 3px #fc8f64; /* 線の種類、太さ、色 */
border-bottom: solid 3px #fc8f64; /* 線の種類、太さ、色 */
padding:10px; /* 要素内の余白 */
}
borderプロパティのカラーを変更することで、別の色に変更することができます。
「#fc8f64」がカラーコードなので好きなカラーに変更してね
二重線バージョンCSS
/* 二重線ver */
.h2{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: black; /* 文字色 */
border-top: double 7px #fc8f64; /* 線の種類、太さ、色 */
border-bottom: double 7px #fc8f64; /* 線の種類、太さ、色 */
padding:10px; /* 要素内の余白 */
}
二重線の場合、２本分の太さで計算されるので、５px以上で指定しないと線同士がくっついてしまいます。
線の幅を広くしたい場合は、数値を大きくしましょう。
破線バージョンCSS
/* 破線ver */
.h2{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: black; /* 文字色 */
border-top: dashed 3px #fc8f64; /* 線の種類、太さ、色 */
border-bottom: dashed 3px #fc8f64; /* 線の種類、太さ、色 */
padding:10px; /* 要素内の余白 */
}
このように線の種類を変えるだけでも、イメージは変わりますね。
お好きな線の種類、色など指定してカスタマイズしてみてください。
背景色を使った見出しの作り方
次に背景色付きの見出しの作り方を解説していきます。
使用する主なプロパティ
線で作る見出しと少し変わって、角の丸みをつけるプロパティと背景色を指定するプロパティを使っていきます。
見出しCSSを記述する
見出しセレクタには変更点はないので、先程同様にh2を例に記述していきます。
.h2{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: black; /* 文字色 */
padding:10px; /* 要素内の余白 */
border-radius: 10px; /* 角の丸み */
background: #fc8f64; /* 背景色 */
}
では「角の丸み」と「背景色」について簡単に説明していきます。
先程解説したものは省略しますので、線の見出しの説明でご確認ください
border-radius: 10px;
角に丸みをつけるためのプロパティです。
丸みをつけるだけで、同じ背景でもイメージが柔らかくなります。
丸みを強調したい場合は数値を大きくし、反対に少しだけの場合は「5px」以下で指定してね
background: #fc8f64;
背景色を指定するプロパティです。
backgroundの後に、カラーコードを記述するという簡単なものですので、わかりやすいと思います。
記述方法は線の見出しの文字色で説明した通りなので確認してみてください。
実際の見出しを見てみよう
こちらが先程紹介したCSSで記述した見出しの実際画像になります。
では、画像をもとにどこが何を表しているのか見ていきましょう。
角の丸みと背景色のカスタマイズ
※解説のために画像縮小したので、左のみ丸くなっています
角の丸みと背景色の反映された部分を解説していきます。
- border-radiusプロパティで「10pxの丸み」を出したので、角が丸くなって表示
- backgroundで「#fc8f64（オレンジ）」を指定したので、背景色も反映
背景色を使うことは見出し以外にもよく使うので覚えておくと良いでしょう。
プロパティを少しでも知ることで、色々なカスタマイズができるようになります。
背景色の見出しに関するまとめ
先程同様に、何がどこを意味しているのかわかると簡単に見出しが作成できます。
背景色を使った見出しはよく使われているので、ぜひ覚えていってくださいね。
他のカスタマイズも見てみよう
では大きく記述方法を変えず、色や丸みを変更するカスタマイズを紹介します。
記述に変更がある部分は、ピンク色または黄色マーカーで示しているので、確認してみてね
文字色を変更する
まずは背景色をそのままに文字を白にしてみましょう。
/* 文字色白ver */
.h2{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: white; /* 文字色 */
padding:10px; /* 要素内の余白 */
border-radius: 10px; /* 角の丸み */
background: #fc8f64; /* 背景色 */
}「color」プロパティの部分を、白（white）に変更することで文字色を変更できます。
先程紹介した文字色が黒よりも、少し優しいイメージになりましたね。
背景色が暗めの場合は、文字色を明るい色で指定しないと見えなくなってしまうので、注意しましょう
背景色を変更する
次に文字色を白のままに、背景色を変更してみます。
/* 背景色ピンクver */
.h2{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: white; /* 文字色 */
padding:10px; /* 要素内の余白 */
border-radius: 10px; /* 角の丸み */
background: #ef93b6; /* 背景色 */
}
背景色を変更することで、また雰囲気も変わりますね。
丸みを変更する
最後に丸みを少し強くしてみましょう。
/* 丸み強めver */
.h2{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: white; /* 文字色 */
padding:10px; /* 要素内の余白 */
border-radius: 20px; /* 角の丸み */
background: #ef93b6; /* 背景色 */
}
また違ったイメージの見出しになりましたね。
このように数値や色を変更すると、いろいろなカスタマイズができますので、ぜひ参考にしてみてください。
おしゃれな見出しを作ってみよう
最後に少し複雑になってしまうかもしれませんが、今まで紹介したプロパティでちょっとおしゃれな見出しを紹介します。
これを見ると「すごく難しいCSS記述しているんでしょ」と思うかもしれませんが、先程紹介したプロパティのみで作成しています。
では実際に記述したCSSは以下のようになります。
.test1{
position: relative; /* 表示位置指定 */
font-size: 24px; /* 文字の大きさ */
color: white; /* 文字色 */
border: solid 1px #ff9b9b; /* 全体の線 */
border-left: solid 20px #ff9b9b; /* 左のみの線 */
background: #ffc1c1;/* 背景色 */
border-radius: 5px; /* 角の丸み */
padding:10px; /* 要素内の余白 */
}
先程よりも指定する分が多いのでその分長くなってしますが、紹介したプロパティのみで構成されています。
２つの線を使ったカスタマイズ
では少し複雑な部分を解説していきます。
- 見出しタイトル文字横の太いピンクの部分は「border-left」で左のみの線をつけるよう指定
- 実線（solid）を記述して、20pxで線を太くするよう指定したことで、左のみに太い線が表示
- 周りの同色の線は、位置を指定しない「border」単体の書き出しで、太さだけ変更して値を記載
背景色が２つあるということではなく、太い線＋背景色という形で構成されています。
borderはtopなどの部分指定をしない限り、４辺に表示されます
今回紹介したプロパティだけでも、数値や使い方によっていろいろな見出しができるので、ぜひ試してみてください。
まとめ
おしゃれな見出しで検索すると、コピペで簡単に導入できる見出しがたくさん紹介されています。
ですので、わざわざ自作する必要もないですが、プロパティの知識がつくことでその見出しを少しアレンジすることもできます。
確かに色変えたいと思っても、プロパティわかってないとできないよね
また自作することで愛着が湧くという点もあります。
CSSを覚えたい方は簡単なものから覚えていくと楽かもしれません。
こういったわかりやすいものから、理解していくと覚えやすいと思います。
ぜひ少しでもCSSのプロパティの意味を知って、カスタマイズの幅を広げていって欲しいです。
パソコン作業を続けていると、眼精疲労によって偏頭痛になることありませんか？
そんな方におすすめな商品はコチラ！
スマホ同様に画面に貼るタイプで、画面保護にもなる一石二鳥の商品です！
偏頭痛持ちの私が、このフィルム一枚で偏頭痛が激減！
ぜひ試してみてください！！
