読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

HTML - 要素の入れ子(ネスト)と子孫関係

HTML

要素の入れ子(ネスト)と子孫関係

  • テキストP.035
  • HTML文書全体が、html要素を最上位(ルート)の先祖要素とする入れ子によるツリー構造になっています
  • このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造には、まった影響を与えないということ

f:id:web-css-design:20160821084353p:plain

ブロックレベル要素とインラインレベル要素
  • HTML5以前の考え方です(ただし、非常に重要な絶対的ルールです)
  • HTML5の新要素で記述する場合には、この概念はなくなります

f:id:web-css-design:20160821083333p:plain

  • インラインレベル要素は、ブロックレベル要素に内包されていないといけない
<p><img src="" alt=""></p>
  • インラインレベル要素の中に、ブロックレベル要素を内包することはできない
  • 以下の記述は、間違いです(HTML5の場合は、可能)
<a href=""><p>テキスト</p></a>

ブロックレベル要素の特徴

  • 幅の大きさを指定しない限り、ブラウザ幅全体を表示領域とする
  • つまり、行揃えの指定ができる

インラインレベル要素の特徴

  • 文章1行の中の1文字の扱いと同様の扱いになります
  • つまり、行揃えの指定ができない
コンテンツ部分をマークアップ
  • テキストP.038〜
  1. 読みやすいように段落内で改行する
  2. 大事な語句を強調する
  3. 画像を挿入する
  4. リンクを設定する

強制改行

  • <br>
  • forced line break

大事な語句を強調

  • <em> または <strong>
  • emphasis

画像を挿入

  • img:image
  • src:source
  • alt属性は、必須
<img src="img/subaru.jpg" alt="すばる">

相対パス絶対パス

  • 「パス」とは、「ファイルの場所」を示すための大切な仕組みです
相対パス relative path
  • 今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを指定します

相対パスを記述

  1. 同じ階層内にあるファイル →ファイル名 で記述
  2. 同じ階層内にある、別フォルダの中にあるファイル → フォルダ名/ファイル名 で記述
  3. 今いる階層の1つ上の階層にあるファイル → ../ファイル名 で記述(※2つ上の階層にあるファイル の場合は「../../ファイル名」となります)
絶対パス absolute path
  • httpから始まるWebサイトのアドレス(URL)を使って場所を指定します
相対パス

f:id:web-css-design:20160821150628p:plain



《nav1のボタンを押すと、categoryAのindex.htmlを表示する》

<ul>
<li><a href="categoryA/index.html"><img src="img/nav1.png" alt="カテゴリAへリンク"></a></li>
</ul>

f:id:web-css-design:20160821150755p:plain


《categoryBのindex.html内のhomeボタンを押すと、siteトップのindex.htmlを表示する》

<ul>
<li><a href="../index.html"><img src="../img/home.png" alt="サイトトップへリンク"></a></li>
</ul>

f:id:web-css-design:20160821151317p:plain

注意!

  • フォルダー名・ファイル名に日本語を使用することは不可
  • フォルダー名・ファイル名にスペースをを使用することは不可