HTMLでメインコンテンツを作るときは、先にアウトラインの全体構造を決めてからコンテンツの肉付けやデザイン等の詳細をつめていくと効率的に作成ができます。
またHTMLでメインコンテンツを作成していてdivで属性をつけたりしてますけど、調べてみるとdivよりsection要素を使用したほうがHTMLの構造に意味を持たせることができるので使い方を知りたくなりました。
メインコンテンツ作成の説明をしながらsectionを理解していこうと思います。
メインコンテンツとは
そもそもメインコンテンツとはってとこから始まるのですが、メインコンテンツは複数のコーナーを運営してる中のコンテンツの中でも主要なコンテンツのことをいいます。
トップページとか一番読み応えのある中心のような考え方です。
メインコンテンツにはメニュー部分とかフッター部分とかも含まれると思いますが、今回はメインコンテンツの中でもメインになるコンテンツになる作成、そしてメインコンテンツに必要なsectionの理解です。
HTMLでメインコンテンツを作成する
まずはHTMLでsection要素にしないで、ざっとマークアップした場合は以下になります。
<div class="contents-wrap">
<div class="contents-img">
<img src="images.jpg" alt="">
</div>
<div class="contents-text">
<h2>コンテンツの見出し</h2>
<p>コンテンツ文章を書く</p>
</div>
</div>
<div class="contents-wrap">
<div class="contents-img">
<img src="images.jpg" alt="">
</div>
<div class="contents-text">
<h2>コンテンツの見出し</h2>
<p>コンテンツ文章を書く</p>
</div>
</div>
CSSでflexboxをつかう場合を考えてマークアップしたつもりです。
おそらくHTMLでメインコンテンツを作るパターンとしては、ごく普通のパターンかなと。
一見するとごちゃごちゃした感じがして、難しそうなこと書いてる感じのHTMLですが、使ってるタグは少ないです。
- divタグ
- hタグ
- imgタグ
- pタグ
だけです。
divで属性をつけて枠組みを作成
初めにメインコンテンツの枠組みをHTMLのdivタグを使って作っていきます。
メインコンテンツには見出しや画像、文章が入るので全体をまとめる枠組みになる部分を先に作ってしまうほうがメインコンテンツ作成が楽になります。
メインコンテンツ全体に使うdivの開始タグと閉じタグを書いたら、開始タグにはCSSのために属性をつけておきます。
メインコンテンツ全体のdivの次は、画像と文章になる部分にもdivを使い属性を追加してメインコンテンツ全体の枠組みよりも小さい枠組みを作ります。
画像をimgタグで表示させる
次にメインコンテンツに表示させる画像をimgタグを使ってマークアップします。
先にdivタグで画像のための枠組みを作成してあるので、画像用のdivの開始タグと終了タグの中にHTMLを書いていきます。
<img src=”image.jpg” alt=””>
画像の表示は画像ファイルを置いてるファイルパスが間違ってると表示されないのでパス指定を間違えないように注意です。
hタグで見出しにする
次にメインコンテンツの見出しを作成します。
見出しはdivの枠組みを作った文章用の枠組みの中にHTMLを書きます。
<h2>hタグの中に見出し文</h2>
hタグの開始タグと終了タグの中に見出しになる文章を書くと、実際にhタグの中だけが画面に表示されます。
pタグで文章になる部分を作る
HTMLのpタグの開始タグと終了タグを書いて、その中に文章を書いていきます。
このときのpタグの中に書いた文章は、先ほどhタグで書いた見出しに対しての文章になる部分です。
HTMLのpタグは文章の段落を作ります。
文章に段落をつけたい場合は、先に書いたpタグの閉じタグの後にもう一度pタグの開始タグと閉じタグを書いて、その中に文章を書いていくと文章が次の段落になります。
メインコンテンツの中の文章をpタグで書いたら、最後のpタグの閉じタグの下には枠組み作成した閉じタグがあるのを確認しておきます。
- hタグとpタグをまとめてるdivタグ
- コンテンツ全体をまとめてるdivタグ
閉じタグの順番が間違えてるとHTMLの記述ミスになってしまうので注意です。
そして実際に表示を確認してみると上記の画像のように寂しい表示ですが表示できています。
メインコンテンツ部分のHTML要素は同じコンテンツで使う時にはコピペして使い回します。
見出しの文章とコンテンツの文章を書き換えるだけなので、使いまわせる部分は楽にメインコンテンツ作成が進むほうが効率良いです。
HTMLは先にアウトラインを決めてしまえば、あとはアウトラインの中に階層を下げていくようにメインコンテンツになる範囲を絞っていく書き方になるので書きやすくなります。
コンテンツ作成をアウトラインから理解する
今回のHTMLで書くコンテンツ作成では、先にアウトラインを組み立ててから作成することを意識しています。
アウトラインの意味は「輪郭」「物事のあらまし」といった意味があります。
HTML5まではアウトラインを見出し要素で文書の階層構造を定義してました。これはその昔から「暗黙的アウトライン」と言われているらしいです。
専門的なことを調べたら、HTMLのアウトラインでサイト全体に関する情報を含むセクションを示す方法は、HTML以前では実現できてなかったようです。
ですがアウトラインの意味を示すことができることになった現在では、ブラウザにHTML文書の構造を伝えやすくなりました。
そんなHTMLのアウトライン構造に意味を持たせることができる要素には「section要素」があります。
ついついdivの使用が楽な感じなので使うことが多いですが、なるべくならHTMLタグで意味のあるタグがあるなら、そちらを使用してメインコンテンツ作成もしたいところです。
HTMLのsection要素の理解
HTMLのsection要素はコンテンツの範囲を明確にするための要素です。
そして範囲を明確にするために使う場合でも、関連してる内容を区別する場合にsection要素を使うという理解まで必要です。
そんな意味のあるsection要素は「セクショニング要素」と言います。
HTMLのsection要素で理解しておく基本としては、内容を「章、節、項」に分けて記述すること。
章、節、項..へっ？難しいな..
sectionの単語の意味を調べてみると「断片」とか「部分」といった意味でした。
ゆるく理解すると「コンテンツのパーツ」を作るときに使う。のような感じになります。
HTMLのsection要素は「凡用セクション」ということもあるらしく、まとめるコンテンツにdivタグよりも、も少し重要な意味を持たせたいときに使用します。
そんなsection要素ですが、なんかイメージが理解できてきたのでまとめてみると
各セクションごとに適切に章となる部分と見出しを定義したりすることで、明示的なHTMLのアウトライン構造を構築することができる。
という理解で良きかと。
section要素をスタイルの命名だけに使わない
ここまで理解したときに、今までスタイルをあてるだけのdivで作成してたメインコンテンツをsection要素にしていくってことが浮かんでくるのですが、調べてみると今までのdiv要素の部分を全てsection要素に置き換えればよいということでもないらしいのです。
レイアウト目的で領域を囲む場合にも、そのdiv要素をsectionタグにするとか「簡単に意味付けできるな」と思ったのですが少し甘かったようです。
section要素はドキュメントのアウトラインを生成するためのセクションを示すので、スタイルあての命名ではないので、スタイルあてだけの場合にはけっきょくdivにするということ。
逆に意味のある部分でsection要素にして属性つけてスタイルあてるなら問題ないってことかと思います。
これ以上細かく調べると、よくわからなくなってくるので実際にHTMLのsection要素をメインコンテンツ作成したHTMLに使用してみようと思います。
section要素を使用したメインコンテンツ
- 関連してる内容を区別する場合は「section要素」を使う
- 関連してるか迷った場合は静かに「div要素」を使う
上記だけを意識してメインコンテンツを組み立てるのみ。
<section class="contents-wrap">
<div class="contents-img">
<img src="images.jpg" alt="">
</div>
<div class="contents-text">
<h2>コンテンツの見出し</h2>
<p>コンテンツ文章を書く</p>
</div>
</section>
<section class="contents-wrap">
<div class="contents-img">
<img src="images.jpg" alt="">
</div>
<div class="contents-text">
<h2>コンテンツの見出し</h2>
<p>コンテンツ文章を書く</p>
</div>
</section>
メインコンテンツ作成したHTMLで変更したのは、各コンテンツの枠組みに使用してたdivタグでクラス属性をつけてたタグを「意味のあるsection要素」に変更です。
使い方に少しビビってます。このsection要素の使い方が「ミスったsection」になってないことを祈ります。
先にCSSを書いてないしメインコンテンツの部分だけなので、意外とsection要素に変更することが楽な気がします。
メインコンテンツをsection要素にしてみたので、残るは実際の表示を確認です。
作成したメインコンテンツの表示を確認する
HTMLで作成したメインコンテンツの表示を確認します。
表示の確認はフォルダからメインコンテンツ作成したファイルをダブルクリックしてブラウザに表示させます。
個人的にはテキストエディタのAtomの使用なら、エディタ内でプレビューができるのでおすすめです。
関連 Atomエディタをインストールして日本語化(MacとWindowsどちらも)
.contents-wrap {
display: flex;
justify-content: space-between;
margin-bottom: 7rem;
}
.contents-wrap:nth-child(odd) {
flex-direction: row-reverse;
}
.flex-contents {
width: 60%;
}
.flex-img {
width: 35%;
}
.flex-contents h2 {
margin-bottom: 2rem;
font-size: 2.2rem;
}
.flex-img img {
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
.contents-wrap, .contents-wrap:nth-child(odd) {
flex-direction: column;
}
.flex-contents, .flex-img {
width: 100%;
}
.flex-contents {
padding: 3rem;
}
.flex-contents h2 {
text-align: center;
}
}
HTMLだけの表示確認だけだと味気ないので、少しCSSでスタイルをあてて確認もしてみます。
PC表示の確認
スマホ表示の確認
実際に、これだけがメインコンテンツだったら危ない気がします。
HTMLでメインコンテンツ作成するサンプルのような感じで何か少しでも参考程度になればと思います。
