9/1｜HTML,CSS応用まとめ/メニューバー制作

9/1

- 背景画像の横にタイトル記述(位置調整) f:id:tk3m:20140902003504p:plain

　ボーダー線記述
　枠線で囲みボタン制作
　段落制作

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Spread Experiment Web Site</title>
<style>
html, body, h1, h2, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
body {
  font-size: 16px;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo, Osaka,
  sans-serif;
  line-height: 1.5;
}
#container {
  width: 530px;
  margin: 10px auto;
}
h1 {
  font-size: 20px;
  padding: 20px 0 10px 0;
  text-indent: 45px;
  background:url(img/01.jpg) no-repeat left;
  margin-bottom: 10px;
  border-bottom:#FEC501 solid 3px;
}
h2 {
 font-size: 13px;
 color: #FFF;
 line-height: 1.5;
 text-indent: 10px;
 padding: 4px;
 margin-bottom: 15px;
 background: #FF9900;
 width: 100px;
}
p {
 font-size:14px;
 line-height: 1.5;
 text-indent: 1em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Spread Experiment Web Site</h1>
<h2>カテゴリーＡ</h2>
<p>段落内のテキスト1文字目をインデントします。段落を表す「p」を再定義し、［p の CSS ルール定義］ダイアログが表示されたらカテゴリから［ブロック］を選択します。続けて［Text-indent］に任意の数値を入力し、プルダウンメニューから単位を選択します。これにより、1文字目の左側に指定した値のスペースが追加されます。
</p>

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

</body>
</html>

—
- 素材画像を使用しながら制作

f:id:tk3m:20140902003639j:plain

　カテゴリー同士まとめる
　素材, 文字情報の中央揃え(位置調整)
　リンク, フッターの制作

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ガラスの靴の持ち主を捜しています！</title>
<style>
html, body, h1, h2, h3, p, ul, li, div {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
}
a {
  text-decoration: none;
}
body {
  color: #333;
  font-size: 14px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.5;
  background:url(img_1caram_01/bg.gif) repeat-y center top;
}
#container {
  width: 600px;
  margin: 0 auto;
}
#header {
  margin-bottom: 30px;
  text-align: center;
}
#header h1 {
  margin-bottom: 20px;
}
#header h2 {
  margin-bottom: 10px;
}
#header p {
  text-align: left;
  margin-left: 4em;
  line-height: 1.5;
}
#content {
  margin-bottom: 20px;
  padding: 0 20px;
}
#content h3 {
  margin-bottom: 10px;
}
#content p {
  line-height: 1.5;
  text-indent: 1em;
  margin-bottom: 25px;
  margin-left: 18px;
}
#content ul {
  margin-bottom: 25px;
  padding-left: 16px;
}
#content li {
  margin: 0 0 6px 1em;
  text-indent: -1em;
  line-height: 1.5;
}
#content h2 {
  text-align: center;
  margin-bottom: 10px;
}
#content p.button {
  text-align: center;
  margin-left: -10px
}
#content p.button img.yes {
  margin-right: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img_1caram_01/main.gif" alt="ガラスの靴の持ち主を捜しています！" width="600" height="445"></h1>
<h2><img src="img_1caram_01/b_1.gif" alt="パソコンで応募する方"></h2>
<p>下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、<br>
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>
</div><!-- /#header -->

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

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

<h3>【個人情報のお取扱いについて】</h3>
<p><a href="#">（プライバシーポリシー）</a></p>

<h2><img src="img_1caram_01/b_2.gif" alt="応募しますか？"></h2>
<p class="button"><img src="img_1caram_01/b_yes.gif" alt="はい" class="yes"><img src="img_1caram_01/b_no.gif" alt="いいえ"></p>
</div><!-- /#content -->

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

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

—
- 画像の配列

f:id:tk3m:20140902003733p:plain

　<div class>で情報をまとめる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>複数画像を並べる</title>
<style>
html, body, div, p, img {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#container {
  width: 525px;
  overflow: hidden;
  margin: 30px auto;
}
.disc {
  float: left;
  width: 170px;
  margin: 0 5px 15px 0;
  font-size: 12px;
  text-align: center;
}
.disc img {
  margin-bottom: 3px;
}
</style>
</head>
<body>
<div id="container">
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>Hard Rain</p>
</div>
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>Bob Dylan</p>
</div>
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>Freewheelin</p>
</div>
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>Blood on the Tracks</p>
</div>
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>Bob Dylan's Greatest Hits</p>
</div>
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>John Wesley Harding</p>
</div>
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>Times They Are A-Changin</p>
</div>
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>Blonde on Blonde</p>
</div>
<div class="disc">
<p><img src="http://placehold.it/150x150"></p>
<p>Desire</p>
</div>
</div>
</body>
</html>

—
- メニューバーの制作

f:id:tk3m:20140902003943p:plain

　枠線でボタンを制作
　ボタンを選択すると色が変わるよう指定

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>擬似クラスを利用したナビゲーション</title>
<style>
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
#nav {
  width:250px;
  margin: 50px auto;
}
ul {
  list-style: none;
  background: #4466DB;
}
a {
   text-decoration: none;
}
li {
  font-size: 20px;
  font-weight: bold;
}
li a {
  display: block;
  padding: 20px;
  border-bottom: 2px solid #FFF;
}
li a:link { color: #FFF;}
li a:visited { color: #FFF;}
li a:hover { color: #4466DB; background: #BCEDE4}

</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</body>
</html>

—
- メニューバーの制作

f:id:tk3m:20140902004052p:plain

　線の幅の指定
　パターン変更

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>擬似クラスを利用したナビゲーション</title>
<style>
html, body, div, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
#nav {
  width:250px;
  margin: 50px auto;
}

ul {
  list-style: none;
  background: #96C632;
  border-top: #468729 solid 4px;
  border-right: #468729 solid 4px; 
  border-left: #468729 solid 4px;
}
a {
   text-decoration: none;
}
li {
  font-size: 20px;
  font-weight: bold;
}
li a {
  color:#FFF;
  display: block;
  padding: 20px;
  border-bottom: #579444 4px solid;
}
li a:link { color: #FFF;}
li a:visited { color: #FFF;}
li a:hover { background: #339DDD;}

</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</body>
</html>

でざいんとうぇぶ。｜WEB学習

WEBスクール半年間の学習過程