CSSで見出し（h1タグ）の大きさやデザインを変える基本的な書き方

フォントの大きさやデザインを変えるタグ

フォントの大きさやデザインを変えるタグには下記のようなものがあります。

「font-family」はフォントの種類を設定するもので、「Meiryo」などが設定できます。

「font-size​​」はフォントの大きさを変えるもので、「px」「em」「％」などの指定方法があります。

「font-weight」はフォントの太さを指定するもので、「normal」「lightner」などを指定します。

バックグラウンドのデザインを変えるタグ

バックグラウンド（背景）のデザインを変えるタグには下記のようなものがあります。

「background」は背景を指定します。「no-repeat」の設定が一般的で、背景を繰り返し表示させない役割があります。

一方で「background-color​​」は背景色を指定するタグで、「green」など指定したい色を英単語で指定する方法と、「#ffffff​​」などカラーコードで指定する方法があります。

ボーダーのデザインを変えるタグ

ボーダーのデザインを変えるタグは下記のようなものがあります。

「border​​」はボーダーの色や太さを指定する​​ものです。

「border-bottom​​」「border-top​​」はそれぞれ下線、上線の種類や色・太さを指定します。

「border-left（rigtht）​​」はタイトルの左側（右側）にラインを配置し、そのラインの種類や色・太さを指定します。

「border-radius​​」は要素の境界の外側の角を丸める指定をするもので、数値、または％が大きいほど外側の角が丸みを帯びます。

位置を整えるタグ

hの位置を整えるタグには下記のようなものがあります。

「width​​」は幅を指定し、「height​​」は高さを指定します。

「margin​​」と「padding」はいずれも余白を指定するものなので、混同してしまう方が多いですが、「margin​​」は要素の「外側」の余白を指定するもので、「padding」は要素の「内側」の余白を指定するものです。

フォントの大きさやデザインを変える

タグ

• font-family
• font-size​​
• font-weight

フォントの大きさやデザインを変える記述例は下記の通りです。

.h1 {

font-famiry: Meiryo;

font-size: 32px;

font-weight: normal;

}

この記述は「フォントの種類はMeiryo、文字の大きさが32px、文字の太さはnormal」という意味です。

バックグラウンドのデザインを変える

タグ

• background
• background-color​​

バックグラウンドのデザインを変える記述例は下記の通りです。

.h1 {

background: no-repeat;

}

この記述の場合は「背景はリピートしない」という意味になります。

ボーダーのデザインを変える

タグ

• border​​
• border-bottom​​
• border-top​​
• border-left​​
• border-radius​​

ボーダーのデザインを変える記述例は下記の通りです。

.h1 {

border-bottom: transparent;

border-left: 9px solid blue;

}

この場合は「下線が透明で、左に1本、9pxの青い線が表示される」という意味です。

位置を整える

タグ

• width​​
• height​​
• margin​​
• padding​​

位置を整える記述例は下記の通りです。

.h1 {

width: 20px;

height: 25px;

padding:20px;

}

この場合は「幅が20px、高さが25px、文字周りの余白が20px」という意味です。