その他ばいりんがるWEBデザイナーのblogWebデザインやIT,海外についての情報をお届けします。「どのタグを使えばウェブページの骨組みができるの?」といった疑問にお答えすべく、今回はサイトを形作る上で必要なタグを6つ選んでご紹介していきたいと思います。具体的に<header><nav><section><article><aside><footer>の6つのタグに絞り、解説していきます。この記事を読んでいただければ、サイトの設計ができるようになりますので、是非最後まで読んでいただけたら幸いです。スポンサーリンク実際のウェブページ構成まずは、基本となるウェブページの構成をご覧ください。この構成が必ずしも正解ではありませんが、基本的にはこのような構成でウェブページは設計することができます。コードはこうなります。<footer></body>それではそれぞれのタグを見ていきましょう。スポンサーリンクheader(ヘッダー)タグまずはheaderタグですが、その名の通りページの頭部分にくる要素です。headタグと似ていることから混同されがちですが、全く違うタグですのでご注意を。headerタグとは基本的にサイトのロゴやサイト名、バナーといった要素を記載する場所です。alt="logo"></header>nav(ナブ)タグnavとはnavigationの略で、カテゴリーごとにページを分けて表示してくれるタグです。memoなお、このnavタグはheaderタグ内に記載しても問題ありません。<ul></nav>といった記載の仕方になります。aタグとはリンク先に飛ばしてくれるタグで、href属性にリンク先のURLを記載します。htmlには<ol>や<ul>といったリストを作成するためのタグがあります。今回はこの<ol>や<ul>それぞれの役割や使い分け方、使う場面などを詳しく解説...section(セクション)タグsectionタグは一つのセクションを表すタグです。一つの章や節、項目といったものをひとまとめにするタグです。このsectionタグの大きな特徴として、見出しを必ず入れることが勧められており、見出しがない場合はこのsectionタグを使う必要性がありません。<h1>タイトルをここにいれてください。<p>タイトルがなく文章だけしか書かれていません。</p></section>article(アーティクル)タグarticleは日本語に訳すと「記事」となります。その名の通り、記事のような役割をしてくれるタグです。要は、新聞や雑誌でいうところの一面を、このarticleタグで囲っているようなイメージです。<p>2022年カタールW杯で日本が優勝しました。いろはにほへと、いろはにほへと、いろはにほへと、いろはにほへと</p></article>sectionタグとの違いは?ここで一つの疑問が浮かぶはずです。sectionタグとの違いは?実はこの部分は割とぼんやりしており、articleかsectionのどちらかを必ず選ばなければいけないわけではないのです。post.とのことで、日本語にすると、article要素は、文書やページ、アプリケーション、サイトといったものの中の文章や構成が、その要素内だけで完結している際に使用します。これらは、雑誌や学術論文、エッセイ、レポート、ブログ、その他のSNSでも利用できます。いった内容で書かれています。要は、「コンテンツがその内容だけで完成されているのであればarticleタグを使うのが望ましく、それ以外ではsectionタグを使っても大丈夫」ということです。aside(アサイド)タグasideとは日本語で「わきへ」や「余談」といった意味になります。その名の通りページ内での位置は「わきへ」、内容としては「余談」ないしは「補足情報」としての役割を担うタグです。asideタグは特にサイドバーとして使われることが多いタグとなります。footer(フッター)タグfooterタグとはheaderタグの反対語のようなもので、headerタグが頭部分の要素なのに対し、footerタグはページの底辺部分を担う要素です。footer内には著作権情報を記載するのが一般的です。2019</p></footer>まとめいかがだったでしょうか。今回ご紹介した6種類のタグは非常に重要なタグです。これらを知っておくだけで、サイトの構成を作ることができちゃうので、是非ともサイト設計に役立ててみてください。Designer目指し日々奮闘中。海外や英語、Webデザインに関する情報を提供してきます。最近書いた記事Webデザイン初心者でも簡単にwebサイトが作れちゃうCMSって何!?例:WordPressCSSCSSプロパティのoverflowとは?hiddenやscrollの意味についても!HTMLブロック要素とインライン要素の違いとは?インラインブロックで解決!CSSCSSで変更できるfont(フォント)のあれこれ。HTMLの関連記事CSSプロパティのoverflowとは?hiddenやscrollの意味についても!2019年9月22日ブロック要素とインライン要素の違いとは?インラインブロックで解決!2019年9月21日CSSで変更できるfont(フォント)のあれこれ。今や世界的に流行りのジャンルといえばEDMではないでしょうか。世界でも観光地として人気の高い香港。あの「100万ドルの夜景」やジャッキー・チェン、ブルース・リーの出身地としても有名です。ネットワークエンジニアを目指すなら必ず取っておきたい資格CCENT。Steve...xxsuguruxxオーストラリア在住。Designer目指し日々奮闘中。海外や英語、Webデザインなどに関する情報を提供してきます。6お問い合わせお問い合わせプロフィール。