CSSレイアウト - 実習
実習（テキスト）
★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します！ 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる（白キジトラ・オス） 目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。 ［写真］ 特徴： 大きな目と耳。まがったしっぽ。 性格： マイペース。 もっと見る→ ●ぐれ子（灰色毛皮・メス） 生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。 ［写真］ 特徴： しゃがれ声。ゴロゴロすりすり攻撃。 性格： 甘え上手。腹黒。 もっと見る→ ●ねず子（白茶トラ・メス） ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン（涙）。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。 ［写真］ 特徴： 片目。小顔。 性格： プライド高い。人間に対しては女王様。 もっと見る→ 飼い主紹介 H.N. ： roka404 仕事 ： フリーランスでWeb関係のお仕事してます mail ： info@hogehoge.com Web ： http://www.hogehoge.com/ 猫写真募集 ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪ 10にゃんこ集まったら紹介ページを開設します！ 応募はこちら→ Copyright © UCHI NO NYAN'S All Rights Reserved.
マークアップ - 実習手順
- テキストP.020〜033
- 以下のテキストを利用し、正しいツリー構造になるようマークアップの練習を行います
- 最初からテキストを真似るのではなく、自分なりの考え方マークアップをし、検証（バリデート）しながら修正をしていきます
新規ドキュメント作成
- ファイル名は、「index.html」として管理フォルダー内に保存する
- ファイル名・フォルダー名には、日本語は使用しないこと
- 拡張子は、必ず「.html」と入力すること
文書構造をマークアップする
（１）文書タイトルを変更する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>うちのにゃんこ</title> </head> <body> </body> </html>
（２）テキストを流し込む
原稿の文書構造を考える
（３）マークアップ前のHTML文書を確認する
- アウトライン構造を読み解く
（４）原稿から文書構造を読み取る
- 見出しを探す
- 箇条書きリストを探す
- 「文書のかたまり」を探す
- その他の情報構造を探す
HTMLタグでマークアップする
（５）見出しをマークアップする
<h1>見出しテキスト</h1>
（６）段落をマークアップする
<p>段落テキスト</p>
（７）箇条書きをマークアップする
<ul> <li>リスト項目</li> </ul>
<ol> <li>リスト項目</li> </ol>
（８）定義型リストをマークアップする
<dl> <dt>項目タイトル</dt> <dd>項目内容テキスト</dd> </dl>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>★うちのにゃんこ★</h1> <p>我が家のアイドル、にゃんこ達を紹介します！</p> <ul> <li>我が家のにゃんこ紹介</li> <li>飼い主紹介</li> <li>猫写真募集</li> </ul> <h2>我が家のにゃんこ紹介</h2> <h3>●すばる（白キジトラ・オス）</h3> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。</p> <p>［写真］</p> <dl> <dt>特徴：</dt> <dd>大きな目と耳。まがったしっぽ。</dd> <dt>性格：</dt> <dd>マイペース。</dd> </dl> <p>もっと見る→</p> <h3>●ぐれ子（灰色毛皮・メス）</h3> <p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p> <p>［写真］</p> <dl> <dt>特徴：</dt> <dd>しゃがれ声。ゴロゴロすりすり攻撃。</dd> <dt>性格：</dt> <dd>甘え上手。腹黒。</dd> </dl> <p>もっと見る→</p> <h3>●ねず子（白茶トラ・メス）</h3> <p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン（涙）。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p> <p>［写真］</p> <dl> <dt>特徴：</dt> <dd>片目。小顔。</dd> <dt>性格：</dt> <dd>プライド高い。人間に対しては女王様。</dd> </dl> <p>もっと見る→</p> <h2>飼い主紹介</h2> <dl> <dt>H.N. ：</dt> <dd>roka404</dd> <dt>仕事 ：</dt> <dd>フリーランスでWeb関係のお仕事してます</dd> <dt>mail ：</dt> <dd>info@hogehoge.com</dd> <dt>Web ：</dt> <dd>http://www.hogehoge.com/</dd> </dl> <h2>猫写真募集</h2> <p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪ 10にゃんこ集まったら紹介ページを開設します！</p> <p>応募はこちら→</p> <p><small>Copyright © UCHI NO NYAN'S All Rights Reserved. </small></p> </body> </html>
アウトライン構造の確認
（９）情報のグループ化
- レイアウトの指定のために、情報を「グループ化」する
- 「コメントアウト」を挿入し、どこからどこまでがグループ化をわかりやすくする
<div>ブロック領域</div>
<body> <div id="wrap"> <h1>★うちのにゃんこ★</h1> <p>我が家のアイドル、にゃんこ達を紹介します！</p> <ul> <li>我が家のにゃんこ紹介</li> <li>飼い主紹介</li> <li>猫写真募集</li> </ul> <div id="cats"> <h2>我が家のにゃんこ紹介</h2> <div id="subaru"> <h3>●すばる（白キジトラ・オス）</h3> <p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。</p> ［写真］ <dl> <dt>特徴：</dt><dd>大きな目と耳。まがったしっぽ。</dd> <dt>性格：</dt><dd>マイペース。</dd> </dl> <p>もっと見る→</p> </div><!-- /#subaru --> <div id="gureko"> <h3>●ぐれ子（灰色毛皮・メス）</h3> <p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p> ［写真］ <dl> <dt>特徴：</dt><dd>しゃがれ声。ゴロゴロすりすり攻撃。</dd> <dt>性格：</dt><dd>甘え上手。腹黒。</dd> </dl> <p>もっと見る→</p> </div><!-- /#gureko --> <div id="nezuko"> <h3>●ねず子（白茶トラ・メス）</h3> <p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン（涙）。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p> ［写真］ <dl> <dt>特徴：</dt><dd>片目。小顔。</dd> <dt>性格：</dt><dd>プライド高い。人間に対しては女王様。</dd> </dl> <p>もっと見る→</p> </div><!-- /#nezuko --> </div><!-- /#cats --> <div id="profile"> <h2>飼い主紹介</h2> <dl> <dt>H.N. ：</dt><dd>roka404</dd> <dt>仕事 ：</dt><dd>フリーランスでWeb関係のお仕事してます</dd> <dt>mail ：</dt><dd>info@hogehoge.com</dd> <dt>Web ：</dt><dd>http://www.hogehoge.com/</dd> </dl> </div><!-- /#profile --> <div id="entry"> <h2>猫写真募集</h2> <p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪ 10にゃんこ集まったら紹介ページを開設します！</p> <p>応募はこちら→</p> </div><!-- /#entry --> <p>Copyright © UCHI NO NYAN'S All Rights Reserved.</p> </div><!-- /#wrap --> </body>
