• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

サイトから学ぶ、hタグ(見出し)の使い方とデザイン #1

投稿者アイコン
2020/12/16
書いた人:
futappa_staff
カテゴリ:
デザイン
1,758 views

実例サイトを例に、各見出しの使い方とデザインを学びましょう!

サイトから学ぶ、hタグ(見出し)の使い方とデザイン #1

目次

はじめに

色々なサイトを例に、各見出しの使い方とデザインを学びましょう!

今回はキュレーションサイトで見つけた1サイトを参考例として紹介させていただきます★
部分的にスクショして載せており、全て掲載してる訳ではありません。細かい部分は実際のサイトも見て確認してみてくださいね。

参考サイトのご紹介

「株式会社アスカフューネラルサプライ」という葬儀施設運営、仏壇仏具販売をされている会社だそうです。綺麗に魅せているサイトだと思ったので、使わせていただきました(^^)
では早速ですが、各見出しをみていきましょう。

h1タグ

heading_h1_01
トップページのロゴ部分

h2タグ

heading_h2_01
heading_h2_02
トップページ・下層ページ両方で使われていました。

heading_h2_04
下層ページに、先ほどのよこバージョンもありました。

heading_h2_03

h3タグ

heading_h3_01

heading_h3_02
全ページ共通コンテンツの部分です。

heading_h3_03
全ページ共通コンテンツの部分です。

heading_h3_04

heading_h3_05

heading_h3_06

heading_h3_07

heading_h3_08
会社案内のページで、理念などを掲載している部分です。メッセージ性のある大事な部分なので、他ページとは違う見せ方をしていました。

h3・h4タグ

heading_h3_09

まとめ

いかがでしたか? なんとなくデザインを見るだけでなく、共通の見出しを探したり、hタグのレベルはどうなっているのか?など気をつけて見るのも とても勉強になります!こういう習慣もつけていきたいですね♪

参考サイト


この記事を読んだ人はこんな記事も読んでいます