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

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

1か月授業内容まとめ - マークアップのルール

HTML & CSS

覚えておきたいマークアップのルール

  • テキスト、P.035
  • 要素の入れ子(ネスト)と親子関係

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

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

POINT

  • テキスト、P.037
  • アークアップの肝は、コンテンツの内容を理解して「文書構造」を見つけること
  • HTMLの文書構造の基本は「見出し」「段落」「箇条書き」
  • 要素の入れ子・内包関係のルールを厳守しよう

改行を挿入する

  • テキスト、P.039
  • ひと段落の中の読みやすさを作るために、強制的に改行を作ります
  • 終了タグのない「空要素」です

重要な語句を強調する

  • テキスト、P.039
  • あくまでも「重要である」ことを意味付けします
  • デザイン的に太く見せたいためにstrong要素を使用することはできません

画像を挿入する

  • テキスト、P.040
  • 「image source」を意味する「img要素」と「src属性」をセットで記述します
  • width属性とheight属性は、マルチデバイスに対応させる必要のある現在は、記述しません
  • 「alt属性」は、適切な代替テキスト入れますが、文字が入らなくても必須です(記述しない場合は、文法エラーです)
ブロックレベル要素とインラインレベル要素
  • 画像は、インラインレベル要素のためブロックレベル要素の中に入れる必要があります

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

<p><img src="img/subaru.jpg" alt="すばる"></p>

リンクを設定する

  • テキスト、P.040
  • テキストリンク、画像リンク、メールリンクの3種類のリンクがあります
  • メールリンクは、セキュリティの観点から今では使用されることはありません
ハイパーリンクとは
  • 遷移先の情報を記述して、クリックするとその内容が表示されるようにする仕組みです
<a href="index.html">コンテンツ</a>

絶対パス相対パス

  • テキスト、P.044
  • ハイパーリンクを利用するときに、そのファイル(またはWebページ)がある場所を記述する仕組みのことです
相対パス 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

注意!

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

著作表記

  • サイト制作時に初心者の場合、テキストや画像が全て自分の作成したものとは限りません
  • そのときには「All Right Reserved.」という記述は、しないようにしましょう