WEBマーケティング

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

CSSで見出し(h1タグ)の大きさやデザインを変える基本的な書き方
CSSを用いることで、HTMLだけで記述された単調な構成に様々なデザインを施すことができます。
見出し(h1タグ)は、記事やページにおいて視覚的に重要な役割を果たすものです。今回紹介する方法で、ユーザーに魅力を届けられるデザインを目指しましょう。

CSSとは

CSSとは、「Webページのスタイルを指定するプログラミング言語」です。

HTMLとあわせて利用する言語で、HTMLはWebページの要素の意味、情報構造を定義しますが、CSSはそれらの装飾を指定します。

HTML内に記述することでも適用できますが、全てのページにそのCSSを適用させるためには、全てのHTMLファイルに同じ記述をする必要があります。

それでは手間もかかり、記述ミスも発生しやすいので、CSSファイルを別で用意するのがおすすめです。

CSSでhタグの大きさやデザインを変える主なタグ一覧

CSSでhタグ(見出しのタグ)の大きさやデザインを変えるタグには様々なものがありますが、広く用いられているタグとして、

  • フォントの大きさやデザインを変えるもの
  • バックグラウンドのデザインを変えるもの
  • ボーダーのデザインを変えるもの
  • 位置を整えるもの

などがあります。

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

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

タグ 意味 設定例
font-family フォントの種類を指定する Yu Gothic、Meiryo、Arial、sans-serif
font-size​​ フォントの大きさを指定する px、em、%
font-weight フォントの太さを指定する normal、lightner、500

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

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

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

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

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

タグ 意味 設定例
background 背景を指定する​​ blue、content-box、no-repeat
background-color​​ 背景色を指定する​​ green、#ffffff​​

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

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

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

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

タグ 意味
border​​ ボーダーの色や太さを指定する​​
border-bottom​​ 下線の種類や色・太さを指定する​​
border-top​​ 上線の種類や色・太さを指定する​​
border-left​​ タイトルの左側にライン​​を配置しそのラインの種類や色・太さを指定する
border-radius​​ 要素の境界の外側の角を丸める指定をする

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

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

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

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

位置を整えるタグ

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

タグ 意味
width​​ ​​幅を指定する​​
height​​ 高さを指定する​​
margin​​ マージンを指定する​​
padding​​ 文字周りのパディング(余白を指定する)​​

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

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

CSSでh1タイトルを変更する場合の記述例

CSSでh1タイトルのデザインを変更する場合には、上記でご紹介したようなタグを用いる必要があります。

的確にCSSを施すことで、スタイリッシュなデザインを作ることができ、ユーザーにとって見やすい、魅力的なWebページを作成できます。

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

タグ

  • 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」という意味です。

まとめ

今回はh1をCSSで装飾するにあたって主に利用されるタグや、記述例をご紹介しました。

基本的にはそこまで難しくないものが多いですが、「margin」と「padding」の違いなど、混同しやすいものもあるので注意しましょう。

CSSでh1タグを装飾して理想通りのページにするために、ぜひこの記事をお役立てください。

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 大澤 健人(おおさわ けんと)大澤 健人(おおさわ けんと)のFacebook
2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
   

Seminarセミナー

現在受付中のセミナーはありません。

Service Siteサービスサイト

CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。