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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

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」と入力すること
文書構造をマークアップする

(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>
<!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 &#169; UCHI NO NYAN'S All Rights Reserved. </small></p>
</body>
</html>
アウトライン構造の確認




(9)情報のグループ化

  • レイアウトの指定のために、情報を「グループ化」する
  • コメントアウト」を挿入し、どこからどこまでがグループ化をわかりやすくする
<div>ブロック領域</div>

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>うちのにゃんこ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">

<div id="header">
<h1><span class="star"></span>うちのにゃんこ<span class="star"></span></h1>
<p class="lead">我が家のアイドル、にゃんこ達を紹介します!</p>
<ul>
<li><a href="#content">我が家のにゃんこ紹介</a></li>
<li><a href="#profile">飼い主紹介</a></li>
<li><a href="#entry">猫写真募集</a></li>
</ul>
</div><!-- /#header -->

<div id="content">
<h2>我が家のにゃんこ紹介</h2>

<div id="subaru" class="block">
<h3>●すばる<span class="cat-type male">(白キジトラ・オス)</span></h3>
<p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。 段ボール箱のかどや柱で爪とぎをするのが大好き。</p>
<p>[写真]</p>
<dl class="data">
<dt>特徴:</dt>
<dd>大きな目と耳。まがったしっぽ。</dd>
<dt>性格:</dt>
<dd>マイペース。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /#subaru -->

<div id="gureko" class="block">
<h3>●ぐれ子<span class="cat-type female">(灰色毛皮・メス)</span></h3>
<p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。 しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p>
<p>[写真]</p>
<dl class="data">
<dt>特徴:</dt>
<dd>しゃがれ声。ゴロゴロすりすり攻撃。</dd>
<dt>性格:</dt>
<dd>甘え上手。腹黒。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /#gureko -->

<div id="nezuko" class="block">
<h3>●ねず子<span class="cat-type female">(白茶トラ・メス)</span></h3>
<p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。 見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p>
<p>[写真]</p>
<dl class="data">
<dt>特徴:</dt>
<dd>片目。小顔。</dd>
<dt>性格:</dt>
<dd>プライド高い。人間に対しては女王様。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></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>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪<br>10にゃんこ集まったら紹介ページを開設します!</p>
<p class="apply"><a href="#">応募はこちら</a></p>
</div><!-- /#entry -->

<div id="footer">
<p><small>Copyright &#169; UCHI NO NYAN'S All Rights Reserved.</small></p>
</div><!-- /#footer -->

</div><!-- /#container -->
</body>
</html>


《style.css

@charset "utf-8";

/* reset
--------------------------------------------------*/
html, body, h1, h2, h3, p, ul, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body
--------------------------------------------------*/
body {
  background: #FBF8CB url(img/bg-stripe01.png) repeat-x;
}

/* font-size
--------------------------------------------------*/
body { font-size: 16px; }
h1 { font-size: 36px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
p { font-size: 16px; }
ul, li, dl, dt, dd { font-size: 16px; }
small { font-size: 14px; }

/* link
--------------------------------------------------*/
a { color: #DF4839; }
a:hover { color: #FF705B; }

/* layout
--------------------------------------------------*/
#container {
  width: 880px;
  margin: 40px auto;
  padding: 40px 80px;
  border: 1px solid #F6BB9E;
  background: #FFF;
}
#header {
  margin: 20px 0 24px 0;
}

/* heading
--------------------------------------------------*/
h1 {
  margin-bottom: 40px;
  color: #6FBB9A;
  text-align: center;
}
h2 {
  margin-bottom: 24px;
  padding: 12px 20px;
  border: 1px dotted #94C8B1;
  border-left: 10px solid #D0E35B;
  color: #6FBB9A;
}
h3 {
  margin-bottom: 18px;
  color: #393939;
}

/* #header
--------------------------------------------------*/
.star {
  color: #D0E35B;
}
.lead {
  margin-bottom: 20px;
  padding: 20px;
  border-top: 1px dotted #6FBB9A;
  border-bottom: 1px dotted #6FBB9A;
  text-align: center;
}
#header ul {
  list-style: disc;
  margin-left: 2.5em;
}
#header li {
  margin-bottom: 10px;
}

/* #content
--------------------------------------------------*/
.block {
  margin: 20px 0;
  padding: 55px 20px 30px 30px;
  background: #FBF9CC url(img/bg-stripe02.png) repeat-x;
}
#content p {
  line-height: 1.5;
  margin: 10px 0 6px 0;
  padding: 10px 10px 0 0;
}
span.cat-type {
  font-size: 0.9em;
  font-weight: normal;
}
span.cat-type.male {
  color: #2793A7;
}
span.cat-type.female {
  color: #DF972F;
}

/* float layout
--------------------------------------------------*/
img.photo {
  float: left;
  margin-right: 30px;
}
dl.data {
  float: left;
  width: 468px;
}
dl { overflow: hidden; }
dt {
  float: left;
  font-weight: bold;
}
dd {
  padding-left: 1.0em;
  margin-bottom: 10px;
}

/* more
--------------------------------------------------*/
#content p.more {
  text-align: right;
  background: url(img/icon-arw01.png) no-repeat right 13px;
  padding-right: 20px;
}

/* other
--------------------------------------------------*/
#profile, #entry {
  margin-bottom: 26px;
}
#entry p {
  line-height: 1.5;
}
#entry p.apply {
  text-align: right;
  background: url(img/icon-arw01.png) no-repeat right 3px;
  margin: 10px 16px 0 0;
  padding-right: 20px;
}

/* #footer
--------------------------------------------------*/
#footer {
  text-align: center;
  border-top: 1px dotted #666;
  padding: 10px;
}