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

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

1か月授業内容まとめ - 情報のグループ化

HTML & CSS

情報のグループ化

  • テキスト、P.032
  • 情報のまとまりごとにソースをグループ化し、そこに名前をつけてソースの可読性を高める
  • レイアウトやデザインの再現のために必要な枠を用意する

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


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

ソースコード
  • レイアウトブロックのid名は、汎用型(どのサイトであっても通用する名前)に変更しています
<!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></span>うちのにゃんこ<span></span></h1>
<p id="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アパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br>
段ボール箱のかどや柱で爪とぎをするのが大好き。</p>
<p><img src="img/subaru.jpg" alt="すばる" class="ph"></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>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。<br>
しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p>
<p><img src="img/gureko.jpg" alt="ぐれ子" class="ph"></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>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。<br>
見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p>
<p><img src="img/nezuko.jpg" alt="ねず子" class="ph"></p>
<dl class="data">
<dt>特徴:</dt>
<dd>片目。小顔。</dd>
<dt>性格:</dt>
<dd>プライド高い。人間に対しては女王様。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div><!-- /#nezuko -->
</div><!-- /#content -->
<div id="profile">
<h2>飼い主紹介</h2>
<dl>
<dt>H.N. :</dt>
<dd>roka404</dd>
<dt>仕事 :</dt>
<dd>フリーランスでWeb関係のお仕事してます</dd>
<dt>mail :</dt>
<dd><a href="#">info@hogehoge.com</a></dd>
<dt>Web :</dt>
<dd><a href="#">http://www.hogehoge.com/blog/</a></dd>
</dl>
</div><!-- /#profile -->
<div id="entry">
<h2>猫写真募集</h2>
<p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪<br>
<strong>10にゃんこ集まったら紹介ページを開設します!</strong></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>

HTML5新要素を使用した場合

  • テキスト、P.033
  • HTML5新要素を使用する場合は、明確な文書構造が明示できないと破綻するので注意が必要です
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>うちのにゃんこ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<h1><span></span>うちのにゃんこ<span></span></h1>
<p class="lead">我が家のアイドル、にゃんこ達を紹介します!</p>
<nav>
<ul>
<li><a href="#content">我が家のにゃんこ紹介</a></li>
<li><a href="#profile">飼い主紹介</a></li>
<li><a href="#entry">猫写真募集</a></li>
</ul>
</nav><!-- /nav -->
</header><!-- /header -->
<main id="content">
<section id="cats">
<h1>我が家のにゃんこ紹介</h1>
<section id="subaru" class="block">
<h1>●すばる<span class="cat-type male">(白キジトラ・オス)</span></h1>
<p>目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br>
段ボール箱のかどや柱で爪とぎをするのが大好き。</p>
<p><img src="img/subaru.jpg" alt="すばる" class="ph"></p>
<dl class="data">
<dt>特徴:</dt>
<dd>大きな目と耳。まがったしっぽ。大きな目と耳。まがったしっぽ。</dd>
<dt>性格:</dt>
<dd>マイペース。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</section><!-- /#subaru -->
<section id="gureko" class="block">
<h1>●ぐれ子<span class="cat-type female">(灰色毛皮・メス)</span></h1>
<p>生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。<br>
しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p>
<p><img src="img/gureko.jpg" alt="ぐれ子" class="ph"></p>
<dl class="data">
<dt>特徴:</dt>
<dd>しゃがれ声。ゴロゴロすりすり攻撃。</dd>
<dt>性格:</dt>
<dd>甘え上手。腹黒。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</section><!-- /#gureko -->
<section id="nezuko" class="block">
<h1>●ねず子<span class="cat-type female">(白茶トラ・メス)</span></h1>
<p>ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン(涙)。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。<br>
見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p>
<p><img src="img/nezuko.jpg" alt="ねず子" class="ph"></p>
<dl class="data">
<dt>特徴:</dt>
<dd>片目。小顔。</dd>
<dt>性格:</dt>
<dd>プライド高い。人間に対しては女王様。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</section><!-- /#nezuko -->
</section>
</main><!-- /main#content -->

<section id="profile">
<h1>飼い主紹介</h1>
<dl>
<dt>H.N. :</dt>
<dd>roka404</dd>
<dt>仕事 :</dt>
<dd>フリーランスでWeb関係のお仕事してます</dd>
<dt>mail :</dt>
<dd><a href="#">info@hogehoge.com</a></dd>
<dt>Web :</dt>
<dd><a href="#">http://www.hogehoge.com/blog/</a></dd>
</dl>
</section><!-- /section#profile -->

<section id="entry">
<h1>猫写真募集</h1>
<p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪<br>
<strong>10にゃんこ集まったら紹介ページを開設します!</strong></p>
<p class="apply"><a href="#">応募はこちら→</a></p>
</section><!-- /section#entry -->
<footer>
<p><small>Copyright &#169; UCHI NO NYAN'S All Rights Reserved.</small></p>
</footer><!-- /footer -->
</div><!-- /#container -->
</body>
</html>