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

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

文書をHTMLでマークアップ

HTML+CSS

文書をHTMLでマークアップする

  • テキスト、P.020
  • すでにあるテキストに意味づけをしていきます
  • テキストに書いてあるように、実際に手を動かしならマークアップの練習をしていきます
文書構造をマークアップする
  • テキスト、-P.020〜033
  • 以下のテキストを利用し、正しいツリー構造になるようマークアップの練習を行います
  • 最初からテキストを真似るのではなく、自分なりの考え方マークアップをし、検証(バリデート)しながら修正をしていきます
★うちのにゃんこ★

我が家のアイドル、にゃんこ達を紹介します!

我が家のにゃんこ紹介
飼い主紹介
猫写真募集
我が家のにゃんこ紹介

●すばる(白キジトラ・オス)

目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。

[写真]
特徴:
大きな目と耳。まがったしっぽ。
性格:
マイペース。
もっと見る→

●ぐれ子(灰色毛皮・メス)

生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。

[写真]
特徴:
しゃがれ声。ゴロゴロすりすり攻撃。
性格:
甘え上手。腹黒。
もっと見る→

●ねず子(白茶トラ・メス)

ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。

[写真]
特徴:
片目。小顔。
性格:
プライド高い。人間に対しては女王様。
もっと見る→

飼い主紹介

H.N. :
roka404
仕事 :
フリーランスでWeb関係のお仕事してます
mail :
info@hogehoge.com
Web :
http://www.hogehoge.com/
猫写真募集

ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪ 10にゃんこ集まったら紹介ページを開設します!

応募はこちら→

Copyright © UCHI NO NYAN'S All Rights Reserved.

新規ドキュメント作成

  • ファイル名は、「index.html」として管理フォルダー内に保存する
  • ファイル名・フォルダー名には、日本語は使用しないこと
  • 拡張子は、必ず「.html」と入力すること

文書構造をマークアップする

(1) 文書タイトルを変更する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>うちのにゃんこ</title>
</head>
<body>

</body>
</html>


(2) テキストを流し込む

原稿の文書構造を考える

(3) マークアップ前のHTML文書を確認する

  • アウトライン構造を読み解く


(4) 原稿から文書構造を読み取る

  1. 見出しを探す
  2. 箇条書きリストを探す
  3. 「文書のかたまり」を探す
  4. その他の情報構造を探す
HTMLタグでマークアップする

(5) 見出しをマークアップする

<h1>見出しテキスト</h1>


(6) 段落をマークアップする

<p>段落テキスト</p>


(7) 箇条書きをマークアップする

<ul>
  <li>リスト項目</li>
</ul>
<ol>
  <li>リスト項目</li>
</ol>


(8) 定義型リストをマークアップする

<dl>
  <dt>項目タイトル</dt>
  <dd>項目内容テキスト</dd>
</dl>


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


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

  • テキスト、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ページ)がある場所を記述する仕組みのことです
絶対パス
  • http から始まるWebサイトのアドレスを使ってファイル(またはWebページ)がある場所を記述する
相対パス
  • 現在のファイルから目的のファイルまでの相対的な位置関係を記述する

著作表記

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