プログラミング入門ナビ編集部はじめにHTMLを学んでいるみなさん、学習は順調ですか?やはりHTML学習の醍醐味といえばウェブページを自分で作れるようになることですよね。この記事では、簡単なウェブページ作成を通してHTMLの基礎習得に欠かせないHTML要素を網羅的に学習します。本記事の内容を動画でも解説しています。演習問題それでは早速ですが演習問題です。完成イメージ下記のようなウェブページを制作してください。前準備:素材の入手テキストこちらのリンク先からコピー&ペーストして使用してください。画像こちらのリンク先からダウンロードし、これから作るhtmlファイルと同階層に配置してください。情報のグループ化ウェブページの見た目には影響しませんが、情報のグループ化は意味付けや後からデザインをつける時の利便性の観点で非常に重要です。今回は下記のようにグループ化してください。ヒント「三毛猫モモの紹介ページ」はページ自体のタイトルですのでh1要素、他の見出し(プロフィール、好きな食べ物、SNS)はh2要素を使いましょう。画像の表示にはimg要素が使えますね。プロフィールは順序付きリスト、好きな食べ物は説明リストを使います。「フォロー」の部分はご自身のツイッターアカウント、または講師の中村のアカウント(https://twitter.com/ynakayu)をa要素で記述しましょう。著作権表示はsmall要素でできます。演習回答ウェブページは作成できましたか?ここからは回答例を解説していきますので、必ず自分で演習ページを作ってから見てくださいね。簡単におさらいコードの全体例に入っていく前に、それぞれの要素についておさらいしていきましょう。先に答えが見たい方はスキップして下の方の「回答コード例」を先に見ても構いませんが、間違えた箇所があったらここに戻って各要素の詳細を確認してください。見出し各話題に入る前の冒頭部で、そこで記述される内容のテーマをわかりやすく目立たせるために使われるのが見出しです。見出しの大きさによってh1、h2、h3、h4、h5、h6までの要素が用意されており、数字が小さいほど大きい見出し、大きいほど小さい見出しになります。<h2>見出しにしたい部分</h2>簡単なようでいて、忘れがちな細かいルールもあるので自信がない方は下記の記事で復習しておきましょう。画像を表示させるにはimg要素を使用します。この要素ではsrc属性を使って画像のパスを指定するのでしたね。src="cat.jpg">どこにある画像を指定するかによって、パスの指定方法が異なります。下記の記事で詳しく説明しているので、気になった方は確認してください。HTMLに欠かせない「属性」とは?画像の表示方法を例にわかりやすく解説!説明リストプロフィールの部分で生年月日等を説明しているように、ある用語や文言の説明に特化したリストを説明リストと呼びます。<dd>説明3</dd></dl>各タグの意味や使い方を忘れてしまった方は下記の記事からおさらいしましょう。説明リストとは?HTMLで用語説明ページを作るのに最適!使い方を確認しよう順序付きリスト好きな食べ物など、文言を順番つきで列挙する用途には順序付きリストを使用します。・・・略・・・</ol>順序のない箇条書きを使うこともできます。これらの違いやタグの意味については下記から確認してください。商標登録など、ページ全体に関する細目を表記するにはsmall要素を使用します。<small>ここに細目を記述</small>詳しくは下記の記事も参考にしてください。文章の内容に合わせてarticleやsection等の要素を使い分けてグルーピングすると、文章の構造がわかりやすくなる、スタイルを当てやすくなるというメリットがあります。自信のない方は下記記事で詳しく説明していますので、目を通してみましょう。情報のグループ化は重要!div要素だけでなく意味に応じてarticleやsection等を使い分けよう!回答コード例それでは、今回の演習の回答コード例はどのようになるのか見てみましょう。<p>三毛猫のモモについて紹介します。href="https://twitter.com/ynakayu">フォロー</a>してください。演習について、受講者の方からよくいただく質問と回答を掲載します。講師と同一の手順で記述していく必要がありますか?動画を見ながら進めてくださった方の中には、講師の記述していく順番と全く同一の方法で書いた方がいいのか気にされる方もいらっしゃるようです。答えはNoで、同じ手順で書く必要はありません。実際、どんな順番で書いたとしても最終的に正しい記述になっていれば全く同じ表示結果となります。詳しくは下記の記事でも解説していますので参考にしてください。HTMLの正しい書き順は?タグが先?コンテンツが先?表示されたページの見た目(文字サイズやフォント)が若干違いますお手元の演習回答のウェブページ表示結果が、この記事や動画内で解説している表示結果と若干異なることを気にされる方もいらっしゃるようです。文字のサイズやフォントのみの違いであれば、全く問題ありません。使用しているブラウザやOSによってこの辺りは若干見え方が異なるためです。HTML文書の構造が同じであれば正しく記述できていますので、問題ありません。まとめ演習方式でHTMLの基礎となる代表的な要素の使い方を解説しました。簡単なウェブページを作りながら進めると、表示結果を確認しながら楽しく学べますね。覚えた知識をもとにご自身でも簡単な紹介ページを作ってみてはいかがでしょうか。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。プログラミング入門ナビ編集部はじめにウェブページを作る時、文章の構造を意識してHTMLコーディングしていますか?HTMLには、各部分でどんな内容を書いているのかグルーピングするための要素があります。いったグルーピングをしないで書くのも間違いではありません。情報をグループ化して文章構造をはっきりとさせると様々なメリットがあるのです。内容を動画でも解説しています。情報のグループ化の重要性div要素とHTML5以降の新要素HTML5より前のバージョンでは、文章のかたまりをdiv要素でまとめていました。div要素は意味を持たない汎用ブロックで、こちらを使っている方も多いかもしれません。HTML5以降ではこれに代わる新要素が登場しており、後述する理由からdivだけでなく文書の意味に応じて使い分けることが推奨されています。詳しくは後ほど紹介しますが、headerやfooter、article等といった要素です。なんとなくどんな部分に使うのか想像がつきますね。情報のグループ化によるメリット文章の構造がわかりやすくなる人間にとってはもちろん、コンピュータからみても何の文章が書かれているのか見やすくなるのが大きな利点です。複数人でコードを書く時にもわかりやすくて便利ですし、検索エンジンが膨大なウェブページの中から必要な部分を抽出してくるのにも役立ちます。スタイルをあてやすくなるウェブページのデザインはCSSを使って行います。CSSで定義したスタイルをHTML文書に適用する際、情報ごとにグループ化されていると非常にスタイルをあてやすいです。プログラスではCSSの講座も解説していますので、興味のある方はこちらも参考にしてください。CSS入門(Proglus)情報のグループ化を行う要素ここからグルーピングに使用できる新要素を1つ1つ見ていきましょう。header文書のヘッダー部分を示します。ここには大抵ページ自体の見出し(基本的にはh1見出し)や、後述のナビゲーションが入ることが多いです。footer文書のフッターを示します。ウェブページの著作権表記や商標登録表記などを入れることが多いです。navナビゲーションを示します。ナビゲーションとは、ページ上部でページ全体の構成や各セクション・ページへのリンクが貼られている部分のことです。main文章のメインコンテンツ領域を示します。article記事コンテンツを示す要素です。ページ・アプリケーション・サイトなどの中で自己完結しており、個別に配信や再利用を行うことを意図した構成物に適用します。記事に対するコメントやブログの記事等です。sectionセクションを示す要素です。セクションとは見出し+それに伴うコンテンツの組み合わせを指しますが、見出しがない場合もあります。articleと似ていますが、articleはその部分だけで完結した文章として成り立つ場合に使うのに対し、sectionはその限りではありません。他ページへのリンクを含んでいて、それをクリックした遷移先でも情報を確認する必要がある場合はsectionを使うと良いでしょう。aside余談要素を示します。メインコンテンツとは関連性が低い情報のことです。「アサイド」は日本語で「脇へ」とか「傍らに」といった意味で、まさにその意味合いとなっていますね。サイドバーや広告の表示に使われることがあります。練習用のページを作ってみよう説明を読んでもイメージが沸きにくいですので、実際に先ほどの要素を含んだページを作ってみましょう。ページのイメージ完成形としてこのようなウェブページを作ります。文章構造このウェブページの文章構造は下記のようにします。コード例それでは実際に書いてみましょう。エディタで「group.html」というファイルを新規作成し、下記のように記述してみてください。先の項目で学習した各要素が折り込まれていることに注目です。リンク先はダミーとして”#”と書いています。クリックしても何のページにも飛ばないですがテストページなので問題ありません。<p>グループ化を学べるサイトを10個紹介いたします。</body></html>ファイルを保存して、ブラウザで表示させてみましょう。先ほどのイメージ通りに表示されれば成功です。今回学習したグルーピングのための各要素(header・nav・main等)がなくてもHTMLとしては間違いではありません。興味のある方はこれらを外して表示させてみてください。同じ表示になるはずです。情報のグループ化をした方がいいですか?必須ではありません。グループ化をしなくても得られる表示は同じです。先述の通り文書構造がわかりやすくなる・スタイルがあてやすくなるというメリットがあるため、グループ化することを推奨します。divだけを使用してはいけませんか?div要素だけ使用しても情報のグルーピングはできます。新要素を使う方が文章構造をより正確に表現できるのでおすすめです。どの要素をどこに使うべきかわかりませんこれについては100%の正解があるわけではなく、結局はウェブ製作者の意図に合わせて様々なパターンが考えられます。正解は1つではありませんので、深く悩みすぎずに用途に合わせて設計しましょう。まとめHTML5の新要素を使った情報のグループ化方法について解説しました。本格的なウェブサイトであればあるほどグループ化は重要になります。覚えてグループ化を心がけてください。本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。・About・プライバシーポリシ。