0シェアするそれでは、まずはブロックレベル要素から解説します。ブロックレベル要素は非常に種類が多く、よく使うタグからあまり使わないタグまで用意されています。全て覚えることができれば完璧なのですが、実際にそれら全てを使う機会はあまりありません。そこで、この記事ではよく使うタグや、使う頻度は少なくても覚えておくべきタグに絞って説明していきます。絞ると言っても、HTMLを構築するために必要な部分はほとんどカバーできるよう解説しています。この中に様々な要素を詰め込み、ひとまとまりの区画として定義します。--></div>div要素とは、大きな範囲をひとまとまりの区画として指定する要素です。「div」とは「division」の略で、区画を意味します。このdiv要素で囲んだ部分を大きな区画として定義します。div要素という大きなブロックを基盤として、ページ全体を構成していきます。h1~h6要素<h1>ウェブサイトの作り方</h1><h2>HTMLの書き方</h2><h3>ブロックレベル要素について</h3><h3>インライン要素について</h3><h2>CSSの書き方</h2>h1要素、h2要素、h3要素、h4要素、h5要素、h6要素とは、見出しを指定する要素です。h1要素は大見出し、h2要素は中見出し、h3要素は小見出し、と数字の順番に大きい見出しとして扱っていきます。見出しの使い方について、明確な使い方のルールは決まっておりません。「絶対にこう書かなければいけない」というものはないので、分かりやすいように使ってください。簡単な決まり事としては、「h1要素から始める」「途中の見出しレベルを飛ばさない」ということがあるので、順番に書いていけば問題ありません。例のように、途中から前の見出しレベルに戻っても、その後また数字の順番に書いていけばエラーは出ません。p要素<h2>HTMLの書き方</h2><p>HTMLの詳しい書き方について解説していきます。/>まずはメモ帳を開いてみましょう。</p>p要素とは、段落を指定する要素です。国語の教科書の段落を思い出すと分かりやすいでしょうか。段落はひとかたまりの文章のことですので、まとまった文章をp要素で囲みます。段落内で改行したい場合は、br要素というインライン要素を使います。インライン要素については、次の記事で詳しく説明します。blockquote要素<h3>マークアップの参考</h3><p>p要素を記述するには、他サイト様の下記解説を参考にしてみてください。cite="http://www.example.com/test.html"><p>p要素はひとまとまりの段落を指定します。</p></blockquote>この要素は、引用文として指定する文章を囲みます。他のサイト等から文章を引用する場合はこの要素で囲み、cite属性に引用元のURLを記載します。blockquote要素はあくまでも引用範囲を指定するものなので、中身はしっかりとp要素などでマークアップしてください。順不同リスト<h3>ブロックレベル要素</h3><p>以下にブロックレベル要素を列挙します。<li>blockquote要素</li></ul>ul要素とli要素を使って、順不同のリストを指定します。順番が決まっていないものを列挙する際に使用します。ul要素で全体を囲み、各項目をli要素で記載します。li要素の中に更にul要素(リスト)を入れて、入れ子で記載することもできます。<li>文字コードをUTF-8に指定し、拡張子をhtmlとして保存する</li></ol>ol要素とli要素を使って、順序リストを指定します。こちらは、順番が決まっているものを列挙する際に使用します。順不同リストとの記載の違いは、ul要素かol要素かの違いのみです。<dd>見出しの項目を指定します。<dd>ひとまとまりの段落を指定します。</dd><dl>定義リストでは、「用語」と「説明」をそれぞれセットで記載します。全体をdl要素で囲み、「用語」をdt要素で記載し、「説明」をdd要素で記載します。用語の説明だけに使うのではなく、それぞれが関係する項目の場合にも使うことができます。summary="各要素の説明表です。</tr></table>場合によっては、文字の羅列よりも一覧表としてまとめたほうが見やすいコンテンツもあります。その際に、table要素を使って表として定義します。表の各項目のことを「セル」と呼びます。table要素で全体を囲み、tr要素で横方向の行、th要素やtd要素でセルを記載します。th要素は「見出しセル」、td要素は「通常セル」として扱われます。table要素のsummary属性には、その表の概要文を記載します。詳細に分類する書き方もありますが、そちらは更に複雑な書き方になります。基本的な表のマークアップを覚えてからの方が良いでしょう。--><p>この上に水平線を表示</p>hr要素は、その部分に区切りを示す水平線を表示します。基本的に、区切ったり線を表示したりするデザインの部分はCSSで対応する部分ですが、汎用的にこのタグを利用する場合もあります。div要素などで範囲を決めていけば、おのずと区切りが明確になってくるので、しっかりと構造を組み立てていけばあまり利用する機会はないかもしれません。Reserved.</address>このaddress要素には、フッター用の著作権表示を記入します。サイト名ではなく、所有者や制作者の氏名を記入する場合もあります。この表示は、サイト内の全てのコンテンツの著作権は、そのサイト(もしくは人)に帰属するという意味です。これで大まかなブロックレベル要素は終わりです。次回は、メールフォームやお問い合わせフォームなどの、フォーム作成用のタグについて解説していきます。フォーム作成用のタグもブロックレベル要素、インライン要素があるのですが、フォーム用はフォーム用としてまとめた方が分かりやすいと思いますので、専用の記事でまとめます。揃ったら、まずは簡単な文章をブラウザに表示してみましょう。前回の記事まで、ブロックレベル要素とフォーム用のタグについて解説してきました。今回の記事では、インライン要素について解説します。今回の記事から、body要素内のタグについて説明していきます。body要素内で使うタグには大きく分けて二種類あります。フォーム編フォームを構成するには、丁寧にマークアップし、各種フォーム用のタグを適切に配置しなければなりません。マークアップ例と共に、そ...記事を読むコードの中の「タグ」の基本を覚えようたぶん最初のサンプルを見ても、なにがなにやら全然分からなかったと思います。最初はそれで大丈夫です。前回に引き続き、この記事ではhead要素内のタグについて解説します。title要素とlink要素について、サンプルコードを元に詳...記事を読む【HTML】絶対パスと相対パス前回の記事で、絶対パスと相対パスという用語が出てきました。この~パスとは、URLを指定する方式です。それぞれの指定の仕方...記事を読む【HTML】要素内のid属性とclass属性について要素をタグとして書いていく上で、id属性とclass属性というものを使う場合が出てきます。コメントをキャンセルメールアドレスが公開されることはありません。管理人プロフィール皆さんこんにちは。管理人のぶーにゃんです。このサイトは、私の好きなこと、得意なこと、興味を持ったことを色々投稿しています。ゲーム、インターネット、パソコンなどなど、こういったことに興味がある方々、良ければこのサイトを見てみてください。