
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
ITコラム
2016.12.12
HTML5 【 レイアウト 】1 ~ 新要素を使った書き方のイメージ、HTML5 【 レイアウト 】2 ~ article、aside、section、navで、HTML5の新要素であるセクション要素(article、aside、section、nav)について紹介しましたが、セクションは見出し(h1 ~ h6)と密接な関係があります。
今回は、セクション要素と見出し要素のルールについてまとめます。
見出し要素(h1 ~ h6)は、数字の小さい方が文字の大きさも大きく、重要度も高いです。
例えば、h1がタイトル、h2は大項目、h3が小項目、...と数字が大きくなると重要さやまとまりのレベルが下がっていくイメージです。
HTML5より前のバージョンでは、見出し要素の数字から、項目のレベルや範囲が推測されていました。
HTML5から、セクション要素の<article><aside><section><nav>が加わったため、項目のレベルや範囲であるセクションを明確にすることができるようになりました。
どのセクション要素の中でも見出し要素(h1 ~ h6)が使えますが、特に<section>は、その中に見出し要素を含むことになっているので、<h1> ~ <h6>のレベルによって、<section>のレベル(階層の深さ)が明示されます。
セクション要素と見出し要素との関係は、次のような形が一般的です。
ページ全体のタイトルがh1、大見出しがh2、小見出しがh3と、セクション要素と見出し要素との階層のレベルが合っています。
さきほどのレイアウトに比べて不自然に見えるかもしれませんが、次のような構成も文法上は成立します。
ところで、セクション要素と見出し要素との間には以下のルールがあります。
[1]見出しレベルが前より下位になった場合には、前のセクションに含まれる暗示的サブセクションが開始する。
[2]見出しレベルが前より上位になった場合には、前のセクションはそこで終了し、新しい暗示的セクションが開始する。
このルールに従うと、さきほどのレイアウトは、下のようなイメージで成立していることになります。
<section>内の最初の見出しは、その<section>のレベルを決定します。
上の例で、最初の<section>の見出しはh2です。
そして、その次の見出しがh4なので、さきほどのルール[1]の通り、この見出し(h4の見出し)の所から暗示的なサブセクションが始まります。
さらに、その次の見出しがh1で上位になるので、さきほどのルール[2]の通り、前の見出し(h4の見出し)に基づくセクションが終了して、この見出し(h1の見出し)の所から新たに暗示的セクションが始まります。
文法上はOKで、暗示的サブセクションが生成されるとはいっても、上のような構成は書く方も見る方も大変ですので、このような構成の場合は理論上こうなるということを知った上で、2.一般的な形のようにわかりやすく構成していく方が良いと思います。
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.