デザインに一手間 HTML、CSS初心者バイトの小手先デザインテク vol.2 CSSで作る簡単な見出しの飾り

初めましてLight Webのアルバイトのネコスケです。

「デザインに一手間 HTML、CSS初心者バイトの小手先デザインテク」


この記事はHTML、CSS初心者なアルバイトである私ネコスケが実践する、簡単なHTML、CSSしか書けなくてもちょっとしたデザインの小手先でwebサイトやブログをより素敵にできるテクニックについて実践しながら紹介する記事です。

自身のデザインスキルも磨きながら、読者の皆様とともに素敵なwebデザインを目指します!

第二回目のテーマは「CSSで作る簡単な見出しの飾り」です。

hタグで作る見出し

基本見出しは「hタグ」というものを使って作ります。

このhタグで囲んだ文字は、普通のpタグで囲んだ文字に比べ、太く大きい文字として表示されます。

hタグはh1からh6まであり、hの後に着く数字はそれぞれフォントの太さ大きさを表しています。

h1が最大サイズでh2、h3・・・と隣の数が増えていくごとにサイズが小さくなっていきます。

コードは以下の通りになります。
(文量が多いうえ、やることは同じなので今回は⟨h1⟩で作った見出しのみ抜粋してご紹介します。)

⟨h1⟩h1の見出しです⟨/h1⟩

ちなみにhタグで大きくなる文字のサイズは、webサイトが反映される媒体によって変わり、そのままで使うとレイアウト崩れを起こす可能性もあります。
ですので、CSSでサイズ指定をしてから使う場合が多いです。
CSSを使えば、文字のサイズだけでなく太さ、配色を変えたり、今回やろうとしているように簡単な装飾をつけたりすることも可能です。

CSSで見出しのデザインを変える〜borderを使った装飾〜

まずは以下の画像のような装飾をつけてみます。

この装飾はCSSの「border」というプロパティを利用して作っています。

「border」は、div要素を線で囲って装飾するプロパティです。

基本となるHTMLコードは以下になります。

⟨div class=”midasi2″⟩
⟨h1 class=”border_sousyoku”⟩これが見出しです2⟨/h1⟩
⟨h2⟩小見出し2⟨/h2⟩
⟨p class=”naiyo”⟩内容内容内容内容内容内容内容内容内容内容内容
⟨br⟩ 内容内容内容内容内容内容内容内容内容内容内容 ⟨/p⟩
⟨img src=”images/image2.jpg” alt=”バンフ” height=”640px”⟩
⟨/div⟩

このHTMLを基本形にCSSでデザインを作っていきます。
CSSコードは以下の通りです。

.border_sousyoku/*h1タグの装飾*/
{
color: black;/*文字色*/
text-align: left;/*文字を左寄せ*/
padding-left: 40px;/*左から文字を40px開けた位置に配置*/
border-left: 20px solid orange;
/*左側の太い線*/
border-bottom: 2px solid orange;/*文字下側の細い線*/
}

このCSSでは、border-left(div要素の左側に線を引く)、border-bottom(div要素の下側に線を引く)の2つのborderプロパティを使用しています。
border-leftで少し太めの線を引くと、文字の左側に長方形っぽい模様が書けます。

この特性を利用して、div要素の左側に長方形、下側に細い線を置いて組み合わせて装飾を作ります。

CSSで見出しのデザインを変える〜文字に背景色をつける〜

以下の画像のような、単純に文字に背景色をつけて、文字を四角で囲っているようなものを作っていきます。
最初に紹介したものよりも簡単そうですが、今回はh1タグをさらにdivタグで囲って、よりレイアウトを整えやすくした状態で作ってみます。

基本となるHTMLコードは以下になります。

⟨div class=”midasi3″⟩
⟨div class=”h1_sosyoku3″⟩⟨h1 class=”sousyoku”⟩これが見出しです3⟨/h1⟩⟨/div⟩
⟨h2⟩小見出し3⟨/h2⟩
⟨p class=”naiyo”⟩内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容⟨/p⟩
⟨img src=”images/image1.jpg” alt=”南国” height=”640px”⟩
⟨/div⟩

このHTMLを基本形にCSSでデザインを作っていきます。
CSSコードは以下の通りです。

.h1_sosyoku3/*h1タグの装飾*/
{
width: auto;
padding:10px;/*div要素内の左端から10px開けたところに要素を置く*/
background-color: #f4f4f4;/*背景の四角の色*/
border-radius: 5px;/*角丸*/
}

CSSで文字を四角で囲む際は「background-color」というプロパティを使います。
このプロパティはdiv要素で囲んだ部分を指定した色で塗りつぶしてくれるプロパティで、これを利用して画面上にただの四角形を作ったりだとかもできます。

pタグやh1タグなどのブロック要素にかけると、文字が書いてある部分の背景を四角く塗りつぶしてくれます。

今回はその性質を利用して、h1タグに直接background-colorをかけても良かったのですが、背景の四角の塗りつぶしが文字のサイズに影響されてしまうで、div要素の背景の塗りつぶしとh1タグの文字を別にして、四角の中で、見出しのサイズを自由に変えたり位置を動かしたりできるようにしました。

「border-radius」は値で指定した数字分、div要素で作った四角の角を丸めることができます。
数字が大きければ大きいほど角がまるまり、楕円に近づいていきます。

Light Webからのお知らせ

ライトウェブはプライバシーマークを取得しました!
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します!