２月５日授業内容

色について
・基調色（ベースカラー）
・強調色（アクセントカラー）
　　＊補色はそんなに大きくなくても大丈夫
・なじませ色（アソートカラー）
 
 


 http://zero.css-happylife.com/selectors/descendant_combinator.shtml
 
 
・rem（Ｐ６８）：モバイル対応するときにremが必要。
htmlのfont-sizeを62.5%(10px=1.0rem)設定することで最上位ルートに指定されているフォントサイズを基準に計算される。
 
  • 画面のキャプチャーの仕方（Fn + Alt + Insert(PrtSc)）・・・（カラージラーで色が採れないとき）
　　*この後スポイトツールで色を採れば良い

 

①

d.hatena.ne.jp

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/ishigaki_style.css">
<title>石垣島観光ガイド</title>
</head>

<body>
<div id="container">

<div id="header">
<h1>石垣島観光ガイド</h1>

<p id="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>
</div><!--#header-->

<div id="content">
<h2>観光スポット</h2>

<h3>「 川平（かびら）湾」</h3>
<h4>石垣港から車で約20分</h4>
<p>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p>

<h3>「宮良川（みやらがわ）のヒルギ林」</h3>
<h4>石垣港からバスで30分宮良橋で下車</h4>
<p>巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。</p>

<h3>「底地（すくじ）ビーチ 」</h3>
<h4>川平湾から車で約10分</h4>
<p>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p>

<h3>「フサキビーチ」</h3>
<h4>石垣港からバスで30分、宮良橋下車</h4>
<p>島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。</p>

<h3>「米原海岸」</h3>
<h4>石垣空港より車で約30分</h4>
<p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p>

<h3>「マエザトビーチ」</h3>
<h4>石垣空港より車で約5分</h4>
<p>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p>
</div><!-- /#content -->

<div id="footer">
<p id="shima"><small>&copy;石垣島観光局</small></p>
</div><!-- /#footer -->

 

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

 

................................................

@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,h4,p,small{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}

/* font-size */
html { font-size: 62.5%; } /* =10px */
body { font-size: 16px; font-size: 1.6rem; } /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 20px; font-size: 2.0rem; }
h4 { font-size: 18px; font-size: 1.8rem; }
p { font-size: 16px; font-size: 1.6rem; }

/*body*/
body{background:#63BDE3;}

#container{width:760px;
margin:0 auto;
padding:20px;
background:#fff;
}
#header{background:#FFF url(../img/h1_bg-1.png) no-repeat center top;
height:370px;
width:760px;
}
h1{padding:160px 0 0 490px;
color:#fff;
white-space:nowrap;/*以下３行隠し文字用*/
text-indent:100%;
overflow:hidden;}
#header>p#lead{line-height:1.5;/*もしheaderの中に設定の同じｐばかりがあるときは今回は#header pでも大丈夫
だが、要素がいっぱいあるときは分けたほうが良い*/
text-indent:16px;
padding:36px 33px;
border-bottom:20px;}

h2{border-left:10px solid #1A6DA3;
padding:8px 0 0 16px;/*ｈ２文章を少しあがっているように見せる設定*/
margin-bottom:40px;
color:#214972}
h3{background:#CFF3F8;
line-height:32px;
border-top:1px dotted #848484;
border-bottom:1px dotted #848484;
padding-left:20px;
color:#214972;
}
h4{margin:8px 0;
color:#1D6DB5;}
p{padding-left:58px;
margin-bottom:16px;
line-height:20px;}

#footer{line-height:32px;
text-align:center;
border-top:1px dashed #848484;
padding:8px 0;}
#shima{padding:16px 0;}

 

②

d.hatena.ne.jp

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/02-05-2.css">
<title>２カラムレイアウト</title>
</head>

<body>
<div id="container">
<div id="header">
<h1 lang="en">Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div><!--header-->
<div id="wrapper">
<div id="content">
<h2>コンテンツのタイトル</h2>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>

<p >コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div><!--content-->
<div id="sidebar">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
</ul>
</div><!--sidebar-->

</div><!--wrapper-->
<div id="footer">
<p><small>Copyright © AUTHOR NAME, All Rights Reserved.</small></p>
</div><!--footer-->
</div><!--container-->
</body>
</html>

..................................................................

 

@charset "utf-8";
/* CSS Document */
/*reset*/
html,h1,h2,p,ul,li,small{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}

a{text-decoration:none;}
/* font-size */
html { font-size: 62.5%; } /* =10px */
body { font-size: 16px; font-size: 1.6rem; } /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 20px; font-size: 2.0rem; }
h4 { font-size: 18px; font-size: 1.8rem; }
p { font-size: 16px; font-size: 1.6rem; }

/*body*/
body{font-size:16px;
background:#999;}

#container{width:760px;
padding:20px;
margin:0 auto;
background:#fff;}
#header{background:url(../img/header01/header01.jpg) center top no-repeat;
width:760px;
height:200px;
margin-bottom:32px;
font-family:Verdana,Geneva, sans-serif;}
h1{padding:24px 0 8px 24px;
font-size:32px;}
#header p{padding-left:24px;
font-size:12px;}
#wrapper{width:760px;
overflow:hidden;
}
#content{width:580px;}
#content h2{line-height:40px;
padding-left:24px;
background:#52DA77;
margin-bottom:32px;
font-size:20px;}

#content p{line-height:24px;
margin-bottom:32px;}


#sidebar{width:150px;
}

ul{list-style:none;}
li{font-size:14px;
}
li:first-child{border-top: 1px dotted #aaa;}
li a{line-height:40px;
display:block;
color:#333;
border-bottom:dotted 1px #333;
padding-left:16px;
}

#content{float:left;}/*#contentと#sidebarをfloat:left;のみで書くときはどちらかにmarginをつけて間を調整する。どちらにしてもwrapperでのoverflow:hidden;の設定は必須*/
#sidebar{float:right;}
#footer p{line-height:32px;
text-align:center;
border-top:1px solid #52DA77}