HTML・HTMLリファレンス・WEBやぁ、朝型、夜型というよりは夕方型のユトピ(@yutopi60pa)だよ。最近はポケモンGOと握力を鍛えすぎで筋肉痛気味です。他の指たちも勘弁してくれって言ってます。なんとかしてほしいものです。「SEO効果について」の3本です!ユトピ来週もまた見てくださいねー!じゃんけんぽん(グー)!うふふふふ。来週にはいかないです。いうことで今回はHTMLタグの「hタグ」について解説していきます。まとめhタグとは?hタグとは、Headeingの略で、HTML上で見出しを意味します。見出しとは本などで、記事よりも大きな文字で目を引かせる目的で書かれたタイトルのことです。目次に書かれる「章」や「節」の一覧などで使用されていますよね。他にも新聞の見出しとかも同じです。HTMLでその見出しの意味を持ってせたい時にhタグを使用します。hタグは見出しという性質から、最初から文字が大きくなったり、太文字になって目がひくようなデザインになっていることが多いです。他にもhタグには「h1」から「h6」まで、全部で6種類あります。使い方としてはhタグが階層構造になるように使っていきます。h1タグは一番大きな見出しで、その下にh2タグがいくつか並び、h2タグに下にh3タグが来るなど、必要に応じてhタグを使って階層化していくのが役割です。実際にやってみましょう。大見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト中見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト中見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト小見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト中見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト小見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト小見出しテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストこのようにhタグを使って記事を見やすくまとめることができます。今回のデモではデザインは特に入っていませんが、CSSでもっと見やすくするようなデザインを作ってもいいですね。このブログですと吹き出しのデザインをCSS作って、h2タグ適用させています。他のサイトのhタグを参考にしてみるのも勉強になりますよ!hタグの2つの注意点ここでhタグの注意点をまとめていきます。どれも最初のうちはやりがちなミスの代表なのでしっかりと目を通しておきましょう。hタグの数字の順序を守ろうこの間違いはうっかりしているとやりがちです。h2などなど、一つの記事に対してこのように数字の順序がバラバラになるような書き方はしてはいけません。h2h4からh2と数字の順番がおかしくなっているように見えますが、これは大丈夫です。この場合はh4が所属している最初のh2タグの章が終わり、新しい章に移動したので、h4からh2に行っても問題ありません。・・・)は守らなくても大丈夫です。誤用に気を付けよう次はhタグの特徴の間違った使い方について。HTMLでのコーディングになれていない人で、hタグを太文字や大きな文字にするためだけに使ったり、改行をさせるために使ったりする人がたまにいます。仮面ライダーは大学生の本郷猛がショッカーによって改造された人造人間である当然ながらこれは間違い。hタグが太文字になったり、大きくなったりするのは「見出し」としての機能を果たすためです。見出しは目立たせなければいけないので、文字にデザインを入れています。改行をするのはhタグがブロック要素だから。太文字にしたい場合はbタグやstrongタグ、文字を大きくする場合はfontタグやCSSを使いましょう。SEO効果についてhタグはしばしばSEO対策には欠かせないタグの1つだと言われてきました。※SEOとはあるキーワードで、googleやyahooの検索順位上位を目指すために行われる対策のこと。大事なのが「h1タグ」。h1タグは本で言う表紙に書かれたタイトル。その文章の最も重要な部分に使うタグです。以前はh1タグは1ページに1個が絶対!なんて言われていました。HTML5ではh1タグを複数使うことは文法上間違っていないんです。加えて、Googleの偉い方は「あまり気にする必要はない」と発言しています。Googleのマット・カッツさんは「気にする必要はない」と言っているyoutubeの動画でも公開されているのですが、Googleのマット・カッツさんは「WEBサイトを作っていてh1タグがh2タグの次に来てしまうのですが問題ありますか?」という質問に対して「順番は気にする必要はない」と発言しています。この見解には納得です。WEBサイトの運用にあまり慣れてない管理者だった場合は、特にhタグの順序など気にせずにサイトを展開してしまうことがほとんどだと思います。順序がいくらバラバラだとはいえど、ユーザーに閲覧されるべき情報が眠っている可能性があるのは明白で検索エンジンは有益な情報を検索結果に表示させるために、そういったサイトも評価することが考えられます。僕が様々なキーワードで検索しhタグの順序がバラバラになっているサイトに行きついているところを考えても、検索結果に多大な影響を与える部分とは考えにくいといえるからです。h3などの見出しタグの重要性と正しい順序このようなGoogle先生の見解を見ると、先ほどの大きな誤用みたいなことでなければ、あまり気にしすぎることはないんじゃないかと僕は思います。実際hタグが全くないページでも検索順位上位に表示されることありますから。ユーザーが第1なので、わかりやすく読みやすくするためにhタグを正しく使うのは当たり前なのですがね。まとめいかがでしたかな?hタグ自体はただ囲むだけなので難しくはないですよね。それをどこに使うかは、最初の文章を考える段階で決めていかなければなりません。そっちの方が難しく、大変だと思います。基本は理解しやすい文章を作ることなので、hタグはあくまで手助けとしての役割しかないです。そこをしっかりと理解してhタグを使っていってくださいね。コメントをキャンセルメールアドレスが公開されることはありません。