ＨＴＭＬ　４日目

投稿日：2021-10-20

更新日：2022-03-24

第５章：グループの定義

とりあえず、今回はサラッとなぞるだけ。。。後日改めて詳細に勉強する。

ブロックレベルのグループを定義する

header要素：ヘッダー

語源：header（頭・導入部）

nav要素：ナブ・ナビゲーション

語源：navigation（航海術、航空術、目的地へ導く方法）

    <nav>
      <ul>
        <li><a href="#">メニュー１</a></li>
        <li><a href="#">メニュー２</a></li>
        <li><a href="#">メニュー３</a></li>
      </ul>
    </nav>

footer要素：フッター

語源：footer（下部、ページ下部）

main要素：メイン（主要コンテンツ）

語源：main（主な、主要な）

article要素：アーティクル

語源：article（記事・論文）

見出し要素を入れ子にすることが強く推奨されている

section要素：セクション（章・部分）

語源：section（章）

見出し要素を入れ子にすることが強く推奨されている

article要素とsection要素の使い分け

article要素
自己完結するコンテンツごとにグループ化
section要素
関連するコンテンツを章分けしてグループ化

aside要素：アサイド（バナー・広告・関連記事）

語源：aside（さておき）

div要素：セクション（章）

語源：division（汎用グループ・レイアウト用グループ）

わからないうちはdiv要素を使う手もあり

第６章：リンクの定義

リンクを定義する

a要素：リンクを定義

語源：anchor（アンカー、錨）

<p>テキスト<a href="表示したいページのURL">リンクの対象</a>テキスト</p>

「href」＝エイチレフ

リンクを指定する属性：a要素にhref属性

a要素を使ってリンクを定義する場合、href属性にクリック時に表示したいページの場所を記述する。

<a href="表示したいページのURL">リンクの対象</a>

リンク先を別タブで表示する属性：a要素にtarget属性

リンク先を別タブで表示する場合、target属性に「_brank」を指定する
※外部サイトを表示する時などに利用するケースが多い

<a href="表示したいページのURL" target="_blank">リンクの対象</a>

絶対パスと相対パス

	絶対パス	相対パス
主な使いどころ	外部サイトへのリンク	自サイトへのリンク
使用するための条件	サーバ上にファイルがある公開されている	同じコンピュータ内にファイルがある公開されていなくてもOK
パス	1つのファイルに1つ	1つのファイルでも位置関係によって複数
記述例	http://jobtech.jp/news/01.html	../news/01.html

絶対パスと相対パスの比較

絶対パス

例）住所と一緒。

デメリット：公開されていないとURLを書けない！
　　　　　　（公開前にリンクの確認ができない）

相対パス

例）自分と相手の位置関係を表す書き方。

相対パスで使う記述	記述例	内容
フォルダ名/	img/	今いる位置から指定したフォルダ内に移動：下の階層に移動
../	../	今いる位置から一つ上のフォルダに移動：上の階層に移動
ファイル名.拡張子	index.html	今いる位置の指定したファイルを表示

●同じフォルダ内なら「ファイル名」のみでOK

●同一フォルダ内にファイルがない時は
フォルダ名 / ファイル名
(「/」⇒「フォルダの中へ」ってこと)

●一つ上の階層のフォルダ内にファイルがある時は
../ファイル名
（「../」⇒「そのファイルが属しているフォルダ」みたいなこと）

ディレクトリマップ

相対パスを考えるときは「リンクを作成しているファイル（リンク元）」と「リンクをクリックして表示されるファイル（リンク先）」の位置関係を把握しなければならない。ディレクトリ（フォルダ）とファイルの位置関係を図にしたディレクトリマップを描く

ページ内リンクを定義する

ページ内リンクを定義するには以下の2つの手順を実行する。

1.ページ内の移動先にid属性を記述

<要素名 id="id名">・・・</要素名>

2.移動元にa要素を定義しhref属性に「#id名」を記述

<a href="#id名">リンクの対象</a>

id名：1つのHTMLファイル内で同じ名前を複数を使うことができない
class名： 1つのHTMLファイル内で同じ名前を複数を使える
　　※デザインでは「class」を使用するといい

ページトップへ戻るリンク