婚活LABより、ブライダルネットの期間限定クーポン配布中!!

第5回 WEBサイト作成講座『各セクションのマークアップ』

第5回 WEBサイト作成講座『各セクションのマークアップ』

今回は、前回までに作成したサンプルサイトのトップページとなるindex.htmlにブラウザに表示される内容を新しく学習するタグの解説を交えながらマークアップしていきます。スタイルを整えるのは次回以降の講座でCSSというHTML言語とは違ったもので解説しますのでレイアウト案との表示はかなりずれていますが気にしないでください。

前回までの講座は以下リンクよりご覧ください。

第1回 WEBサイト作成講座 『HTMLの基礎中の基礎』

第2回 WEBサイト作成講座 『必須となる要素の解説』

第3回 WEBサイト作成講座 『サイトの構造とデザイン』

第4回 WEBサイト作成講座『レイアウト案に沿った記述』

今回はサンプル画像を4数枚用意しました。前回までに作成したsampleディレクトリの中にわかりやすいようにimageという名前のディレクトリを作成しましょう。index.htmlと同じ階層になるはずです。その中に以下よりダウンロードしたサンプル画像4枚を保存してください。

[wpdm_button_template id=’353′ style=”instagram” align=”left”]

 

 

ヘッダの内容をマークアップする

前回までに作成したレイアウト案のheader要素の中身をマークアップします。

index.htmlのheader要素の中には見出しとなるh1要素があらかじめマークアップしてあります。

今回は前回解説したnav要素と、新たにul要素、a要素、p要素を使って以下のようにマークアップしてください。a要素の中のハイパーリンクはまだ作成していないファイルですが今回は先に記述しておきます。

<header>
	<h1>サンプル株式会社</h1>
	<nav>
		<ul>
			<li>
				<a href="index.html">HOME</a>
			</li>
			<li>
				<a href="service.html">業務案内</a>
			</li>
			<li>
				<a href="company.html">会社概要</a>
			</li>
			<li>
				<a href="recruit.html">求人案内</a>
			</li>
			<li>
				<a href="contact.html">お問い合わせ</a>
			</li>
		</ul>
	</nav>
	<p>営業時間 AM 8:00 ~ PM 17:00</p>
	<p>電話番号 03-****-****</p>
</header>

見出しを表すh1〜h6要素について

見出しを表示するにはh1〜h6要素を使用します。hの後に続くする数字は見出しの重要度を表します。

この要素で注意しなければならないのは、一般的には一番大きな見出しとなるh1要素は各ページに一つにするということです。
例えば、トップページであればサイトタイトルをh1とするのが一般的です。当講座のサンプルコードであれば『サンプル株式会社』に該当します。
後に作成していきますが、会社概要ページでは、サイトタイトルと、ページのタイトルとなる『会社概要』は両方重要な見出しでありますが両方をh1でマークアップするのではなくページタイトルとなる『会社概要』のみをh1とするのが一般的です。

また、h1〜h6要素は、順番を守って使用するよう心がけましょう。
例えば、いきなりh6が出てくる様な使い方や、h1の次にh3が出てくる様な使用方法はやめましょう。

リストを表すul要素について

ul要素はリストを作成する際に使用されます。子となる要素にli要素を含みます。
リストの各項目をそれぞれli要素でマークアップし、全体をul要素でli要素を入れ子となる様にマークアップします。

似たような要素にol要素があります。ol要素は序列を表します。同じようにli要素を子要素として配置します。デフォルトでは各項目の前に序列を表す数字が表示されます。

ハイパーリンクを表すa要素について

a要素はハイパーリンク先を表示する為に使用されます。一般的にhref属性とセットで使用されます。
以下が主な属性の解説です。

href ハイパーリンク先のURLを指定
target ハイパーリンクをどのように開くかを指定
例 属性値を『_blank』とした場合、新しいタブ、または新しいウインドウで開く

href属性の属性値となるリンク先のURLは絶対パス、または相対パスにて指定します。

絶対パス、相対パスとは

HTMLにおいての絶対パスと相対パスの違いについて解説します。HTMLではファイルの階層は『/』で区切ります。

絶対パスとは、対象となるURLをすべて記述することにより対象のファイルの有る場所を示す方法です。HTMLでは『http://』から記述します。
例) http://sample.co.jo/〇〇〇〇.html

相対パスとは、現在表示しているファイルから対象となるファイルを相対的に記述することにによりファイルの有る場所を示す方法。
例) 表示しているファイルと同一のディレクトリに対象ファイルがある場合。
〇〇〇〇.html

ファイルが上層に位置する場合は『../』と記述して上層ディレクトリを示します。
例) 表示しているファイルの一階層上層のsampleディレクトリに対象のファイルがある場合。
../sample/〇〇〇〇.html

さらに詳しいa要素の解説は以下よりご覧ください。

HTML5 aタグの使用方完全版!! 主要属性解説付

段落を表すp要素について

p要素は段落を表します。見出しなどに属さない文章やimg要素を入れ子にして画像を表示させる為に使用されます。他のサイトを見てみると、営業時間や連絡先はdiv要素のみでマークアップされている場合も多いですが当サンプルサイトではp要素でマークアップします。
div要素については非常に重要な要素となりますので次回以降詳しく解説します。

メインコンテツをマークアップする

同じように、レイアウト案を確認しながら、main要素内をマークアップしていきます。

今回はimg要素、h2要素、p要素を使って以下のようにマークアップしてください。

<main>
	<p><img src="image/companyimagesample.png" alt="企業イメージ画像" width="900px" height="300px"></p>
	<article>
		<section>
			<h2>企業PR1<h2>
			<p><img src="image/primagesample1.png" alt="企業PR画像1" width="450px" height="200px"></p>
			<p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト</p>
		</section>
		<section>
			<h2>企業PR2<h2>
			<p><img src="image/primagesample2.png" alt="企業PR画像2" width="450px" height="200px"></p>
			<p>サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト、サンプルテキスト</p>
		</section>
	</article>			
</main>

画像を表示するimg要素について

WEBサイト上に画像を表示するにはimg要素を使用します。img要素は必須属性とセットで記述しないと意味を持ちません。
以下より主な属性を解説します。

src※必須 画像のURLを指定。
alt 画像が表示されなかった場合の代替テキストを指定
width 画像の横幅を指定
height 画像の高さを指定

a要素のhref属性の属性値と同じように、src属性の属性値も絶対パス、または相対パスにて記述します。
alt属性はhtml5では必須要素ではないですが一般的には代替テキストを必ず入力します。

article要素とsection要素について

HTML5から新しく使用出来るようになった要素でありこの2つの要素は解釈が様々であり、使用者によって使い方も様々です。
ここでは、簡単に解説します。

article要素とは、日本語では記事という意味を持ち、ページから切り取ったとしても独立して成り立つ内容をマークアップするために使用します。

section要素とは、日本語で節や、分割、区分という意味を持ち、ページ内で様々な要素を分割するために使用します。直下に見出しとなる要素を使用することが一般的です。アウトラインを明示する効果があります。

アウトラインとは・・・

日本語では輪郭などと訳されます。HTMLでは『文書の構造』と捉えると理解しやすいかと思います。
見出し要素などで構造的にマークアップすることにより生成されます。HTML5ではsection要素などのセクショニングコンテンツもアウトラインを生成します。現段階ではそこまで意識する必要はありません。

サイドバーをマークアップする

サイドバーには、企業ホームページではローカルナビゲーションや他のページの紹介リンク画像、ブログではカテゴリー一覧や新着記事などが表示されていることが多いです。
当サイトでは簡単な求人案内ページに誘導する画像をサイドバーに表示させてみたいと思います。
以下のように、aside要素の中身をマークアップしてください。

<aside>
	<p><img src="image/sidebersample.png" alt="急募!!" width="290px" height="100px"></p>
</aside>

フッターをマークアップする

当講座のサンプルページでは、フッターにコピーライトを表示します。以下のように、footer要素の中身をマークアップしてください。

<footer>
	<p>&copy;2018 サンプル株式会社</p>
</footer>

コピーライトについて

コピーライトは必ずしも必要ではないですが、自分の作ったWEBサイトが著作権に守られているとユーザーに明確に伝えることができます。また、著作権の保有者を明確に表示することにより無断コピーや複製などの防止にも繋がります。日本国内においては創作物は自動的に著作権の対象となりますので申請などは必要がありません。

コピーライトを明記するには、著作権を表す『©』の後に『発行年』、『所有者』を記述します。

例) ©2018 〇〇〇〇

他にも、Copyright © 2018 〇〇〇〇. All Rights Reserved.と言った書き方もよく見られます。
また、特殊文字の『©』をブラウザ上で表示させるには&copy;と入力する必要があります。これは文字参照と呼ばれます。

今回の講座はここまでです。一度マークアップしたindex.htmlをクリックして見てください。記述した要素が縦に並んで表示されていると思います。画像などがうまく表示されない場合はパスを確認してみてください。

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!