HTML：h1の扱い - Webデザインのこと、いろいろ

★h1とpについては、必ず文章を入力すること！
★画像にしてはいけない。大企業だけが、画像をいれることをしてよい。
★検索するひとは、会社名でなく、地域やサービス内容で検索する。
※サイトについて、画像と文章が一致していませんが、練習のため。

f:id:sankoblog:20160405133736p:plain
f:id:sankoblog:20160405133804p:plain

観光ガイド_復習：完成版にリンク

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

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

/*reset*/
html,body,h1,p,header {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
body {
	font-size: 16px;
	background: #FFF url(img/back.jpg);
	}
img {
	border: none;
	vertical-align: bottom;
	}
/*----------------------------------*/
/*どのような画面でも見やすい文字に自動調整する機能(モバイル対応）*/
/* 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: #9BB9AB;
}
/*---------------------------*/
#container {
	width: 760px;
	margin: 0 auto;
	padding: 20px;
	background: #FFF;
}

h1 {
	width: 730px;
	height: 170px;  /*最初は画像の高さで指定して、padding後にいらない高さを削る*/
	color: #FFF;
	text-align: right;
	padding: 150px 100px 0 0;
	background: url(img/skytree_trim.jpg) no-repeat;
}

.lead {
	line-height: 1.5;
}