3:本文を追加メイン領域だけを抜粋して、記事の本文を追加する。2から追加されたところである。本文の段落を示し、実際には段落の数だけある。文書構造としてセクション(節)に分けるのに使うが、どこで使うべきかわからないって人も多いという。わかりやすい説明は、「見出し(hタグ)を付ける場所で区切る!」だろう。最上位のセクションとしている。(ソースの緑字部分)は何かというと、別の目的のために本文全体を囲んでいるものだ。区切れば、hタグを区別して使う必要はない(明示的なセクショニング)。よる区切りを省略できる(暗黙のセクショニング)。階層のレベル分だけいくらでも重ねて使うことができる。見栄えが全く良くない?そもそも実際にはこれだけじゃ未完成?細かい部分とかスタイルシートとかは説明してないし、そういうのが一番難しかったりするのだが、難しい部分は後から少しずつ追加していけばいいわけで。ここまでわかれば、ひとまずどこに出しても恥ずかしくないサイトを作れるようになっているはずだ。モバイル対応も実は簡単スマートフォンやタブレット端末といった小さな画面に向けたサイトのデザインは現在では必須となっている。大画面のデスクトップPCとは別の表示にしたい場合、CSSの「メディアクエリ」という仕組みによってスタイルを別々に適用できる。メディアクエリは、以下の例のように「全体向けのCSS」とは別に「画面サイズに応じたCSS」を記述してスタイルを適用するものだ。*/「メディアクエリ」というと難しく感じるが、CSSは基本的に上から下へと上書きしていく仕組みであり、メディアクエリでも同様である。モバイル向けの表示において、全体向けのCSSと同じスタイルでいいときはメディアクエリには何も書かず、スタイルを変えたい部分だけメディアクエリにCSSを書いて上書きをする、という感じになる。基本的には上のほうのCSSをコピーして、数値や色だけを変えるという方法でよく、決して難しい話ではない。文字の大きさをメディアクエリによって切り替える例である。メディアクエリで上書きして、他のプロパティについてはそのままにしているので、どの画面幅の端末に対しても文字の大きさ以外は共通のスタイルとなる。これまでのHTMLの話と一見関係なさそうだが、何が言いたいのかというと、HTMLを構造的かつシンプルに書けば、モバイルに対応するのも簡単だということだ。メディアクエリとその他のモバイル対応に関しては、以下の記事でもう少し詳しく説明しているので、併せて参照されたい。終わりに今回は、誰でもすぐに書けるくらい簡単なHTMLの書き方を紹介した。この記事を書こうと思ったのは、身の回りでサイトを作ろうとしている人や、サイトをモバイルに対応させようとしている人がいろいろ苦労しているのを見て、HTMLなんてもっと簡単に書けるのに......と思ったのがきっかけだ。世の中の多くの人はHTMLを自分で一から作ったりはせず、見栄えの良いテンプレートやテーマを使用していて、HTMLやCSSについてはブラックボックス、という人も多いだろう。シンプルなテンプレートを提供している人もいるが、知識のある人が自分でゴリゴリカスタマイズするためのものも多い。そこで、初心者でも簡単に書け、構造的な最新のHTMLを理解する助けになるような書き方を考えてみた。次回(次とは言ってない)はCSSによるページのレイアウトを解説しようかなーなんて。(2015/09/17)こめんとコメントはまだありません。こめんとする本文のみ必須。メールアドレスは公開されないよ。お名前メアド名前とメアドを入力欄に記憶する数式の空欄を正しく埋めてね。※本文には日本語を最低でも“何文字か”含めてね。(詳細)コメントを投稿すると、メールアドレスを含む投稿内容と、投稿者を識別するIPアドレスなどが当サイトのサーバーに送信され、保持される。これらの情報は当サイトのサービスの提供やコンテンツの改善のために利用される。あなたは、当サイトによるこれらの情報の取り扱い(取得・処理・利用)に同意しなければ、コメントを投稿することはできない。この同意の要件は法的な要件として追加されたもので、当サイトによるこれらの情報の取り扱いは従来から変わっていない。当サイトの個人情報の取り扱いについて詳しくは、プライバシー・ポリシーを読んでね。(125)※過去30日間の閲覧数データによる。