PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【HTML/CSS】 レイアウトの宿題

CSSを使ったレイアウトの宿題が出ていたので、さまざまなレイアウトをトレースしました。

01 サイト概要風

f:id:game-web-design:20140922132308p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Spread Experiment Web Site</title>
<style>
html, body, div, h1, h2, p{
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

body{
  font-family: "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}

.post{
  width: 530px;
  margin: 20px auto;
}

h1{
  font-size: 20px;
  background:url(img/01.png) no-repeat;
  padding: 12px 0 12px 45px;
  border-bottom: solid 2px #FEC900;
  
}

h2{
  display:inline-block;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  background: #FF8800;
  margin: 12px 0;
  padding:10px 10px 8px 10px;
}

p{
  text-indent: 1em;
  line-height: 1.6;
  margin-bottom: 16px;
  font-size:14px
}

</style>

</head>

<body>
<div class="post">

<h1>Spread Experiment Web Site</h1>
<h2>カテゴリーA</h2>
<p>段落内のテキスト1文字目をインデントします。段落を表す「p」を再定義し、[p の CSS ルール定義]ダイアログが表示されたらカテゴリから[ブロック]を選択します。続けて[Text-indent]に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、1文字目の左側に指定した値のスペースが追加されます。</p>

<p>段落全体をインデントします。STEP-01と同じように「p」を再定義し、カテゴリから[ボックス]を選択します。左右のみをインデントする場合は、最初に[Margin]にある[すべて同一]のチェックをはずします。これにより、上下左右個別にマージンが設定できるようになるので、[Right]と[Left]に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、段落の左右に指定した値のスペースが追加されます。</p>

</div><!--.post-->

</body>
</html>

02 画像プレビュー風

f:id:game-web-design:20140922132351p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お気に入りのギター</title>
<style>
html, body, div, p{
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

body{
  font-family: "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}

#container{
  text-align: center;
  margin: 20px auto;
  width: 510px;
  overflow: hidden;
}
img{
  vertical-align: bottom;
  border: none;
}
.img{
  float: left;
  margin: 5px;
}
p{
  line-height: 1.6;
}

</style>

</head>

<body>
<div id="container">

<div class="img">
<p>
<img alt="" src="img/02.jpg"><br>
ES-335
</p>
</div>

<div class="img">
<p>
<img alt="" src="img/03.jpg"><br>
Telecaster
</p>
</div>

<div class="img">
<p>
<img alt="" src="img/04.jpg"><br>
Les Paul Custom
</p>
</div>

<div class="img">
<p>
<img alt="" src="img/05.jpg"><br>
Firebird
</p>
</div>

<div class="img">
<p>
<img alt="" src="img/06.jpg"><br>
SG
</p>
</div>

<div class="img">
<p>
<img alt="" src="img/07.jpg"><br>
Cavern Bass
</p>
</div>

<div class="img">
<p>
<img alt="" src="img/08.jpg"><br>
Precision Bass
</p>
</div>

<div class="img">
<p>
<img alt="" src="img/09.jpg"><br>
Jazz Bass
</p>
</div>

<div class="img">
<p>
<img alt="" src="img/10.jpg"><br>
D-28
</p>
</div>


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

</body>
</html>


03 イベント告知風

f:id:game-web-design:20140922132454p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ガラスの靴の持ち主を捜しています!</title>
<style>
html, body, div, h1, h2, h3, p, ul, li{
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

img{
  border: none;
  vertical-align: bottom;
}

a{
  text-decoration: none;
}

body{
  font-family: "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  background:url(img/bg.gif) center repeat-y;
  color:#711808;
  font-size: 14px;
}

#header h2{
  text-align: center;
  margin: 40px 0 20px 0;
}

#header p{
  padding-left: 16px;
  line-height: 1.5;
  margin: 0 16px 0 32px;
}

#container{
  margin: 0 auto;
  width: 600px;
}

#content{
  margin: 30px 0;
}

#content h3{
  margin: 30px 0 10px 10px;
}

#content p{
  line-height: 1.5;
  margin: 0 16px 0 32px;
  
}

#content ul{
  list-style: none;
  margin: 0 16px 0 32px;
}

#content li{
  margin: 0 0 8px 0;
  text-indent: -1em;
  line-height: 1.5;
}

#content h2.centering{
  text-align: center;
  margin: 10px 0 20px 0;
}

#content p.centering{
  text-align: center;
  margin: 10px 0 20px -10px;
}

.yes{
  padding-right: 16px;
}
</style>

</head>

<body>
<div id="container">

<div id="header"><img alt="ガラスの靴の持ち主を探しています!" src="img/main.gif">


<h2><img alt="■川崎アゼリア・オープン懸賞 パソコンでご応募する方は" src="img/b_1.gif"></h2>

<p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br>
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>
</div>

<div id="content">
<h3>【応募規約】</h3>

<ul>
<li>○パソコンでのご応募は、お一人様一回限り(複数ご応募いただいた場合は最終応募のみ有効)とさせていただきます。<br>
※但し、郵便ハガキでのご応募は、ハガキ1通を1口として、お一人様何口でもご応募できます。</li>
<li>○商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。</li>
<li>○当選後の権利譲渡、換金はできません。</li>
<li>○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</li>
<li>○ご応募は日本国内在住の方に限らせていただきます。</li>
<li>○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。</li>
<li>○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内に展示した靴となりますので、予めご了承ください。また、サイズは23.5cmとなります。</li>
</ul>

<h3>【個人情報のお取扱いについて】</h3>

<p>ご応募にあたり、ご記入いただいた個人情報(郵便番号、住所、氏名、電話番号、年齢)は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</p>

<h3>【個人情報のお取扱いについて】</h3>

<p><a href="#">(プライバシーポリシー)</a></p>
<h2 class="centering"><img alt="■上記の内容に同意して応募しますか?" src="img/b_2.gif"></h2>
<p class="centering"><img alt="はい" src="img/b_yes.gif" class="yes"><img alt="いいえ" src="img/b_no.gif"></p>


</div><!--#content-->

<div id="footer">
<address>
<img alt="応募先・お問い合わせ" src="img/address.gif">
</address>
</div><!--#footer-->

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

</body>
</html>


04 2カラムレイアウト

f:id:game-web-design:20140922132745p:plain

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Homepage Title</title>
<style>
html, body, div, h1, h2, p, ul, li, small{
  margin: 0;
  padding: 0;
  line-height: 1.0;
}

body{
  font-family: "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
  background:url(img/bg.gif) center repeat-y #E6E6E6;
}

#container{
  background: #fff;
  margin: 0 auto;
  padding: 20px;
  width: 740px;
}

#header{
  background:url(img/01.jpg) no-repeat center top;
  height: 160px;
  padding: 20px;
  margin-bottom: 30px;
}

#wrapper{
  overflow: hidden;
  margin-bottom: 14px;
}

#content{
  width: 540px;
  float:left;
}

#sidebar{
  width: 180px;
  float: right;
}


#sidebar li{
  border-top: 2px solid #E6E6E6;
  list-style: none;
  padding: 10px 0 8px 10px;
}

#sidebar li:last-child{
  border-bottom: 2px solid #E6E6E6;
}

h1{
  font-family:
  "Lucida Grande",
  "Hiragino Kaku Gothic ProN",
  Verdana,
  Meiryo, 
  sans-serif;
}

h2{
  background: #C5F54D;
  padding: 10px 0 8px 20px;
  font-size:18px;
  margin-bottom: 30px;
}

p{
  line-height: 1.6;
  margin-bottom:16px;
}

#footer{
  border-top:solid 2px #C5F54D;
  text-align: center;
  padding-top: 10px;
}

</style>

</head>

<body>
<div id="container">
<div id="header">
<h1>Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div>

<div id="wrapper">

<div id="content">


<h2>コンテンツのタイトル</h2>

<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>

<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div>

<div id="sidebar">
<ul>
<li>メニューのリンク1</li>
<li>メニューのリンク2</li>
<li>メニューのリンク3</li>
<li>メニューのリンク4</li>
<li>メニューのリンク5</li>
<li>メニューのリンク6</li>
</ul>
</div>

</div><!--#wapper-->

<div id="footer">
<small>Copyright c AUTHOR NAME, All Rights Reserved.</small>
</div>

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

</body>
</html>