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

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

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

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

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

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

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

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

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

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

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

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

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

このCSSでは、border-left（div要素の左側に線を引く）、border-bottom（div要素の下側に線を引く）の２つの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要素で作った四角の角を丸めることができます。
数字が大きければ大きいほど角がまるまり、楕円に近づいていきます。