web500/2013-01_css

## 2013-01_css
/* 画面全体 */
body{
  background-color: #ffffff;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
/* 全体を包む枠 */
div#wrap{
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
	border: 0px solid #ff0000;
}
/* ヘッダー（学習用のh1と区別するため、今だけID#imadake） */
h1#imadake{
	width: 720px;
	height: 130px;
	margin: 10px auto 0px 30px;
	padding: 0px;
	border: 0px solid #00cccc;
}
h1#imadake img{
	width: 700px;
	height: 120px;
	margin: 10px;
	padding: 0px;
	border: 0px;
}
/* 復習divの設定 */
div#fukushu{
	width: 670px;
	height: 200px;
	margin: 30px 0px 0px 30px;
	padding: 30px;
	border: 3px double #DD939C;
	background-color: #fffaf0;
	background-image: url(../img/frog_fukushu.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
}
div#fukushu h2{
	width: 500px;
	height: 20px;
	color: #cc0066;
	font-size: 16px;
	margin: 0px auto 30px 0px;
	padding-left: 5px;
	border-bottom: 2px dotted #AC586D;
}


/***** ↓↓↓ここから復習テスト↓↓↓ *****/
div#fukushu p{
	color: #ff4500;
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Osaka;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 6px;
	line-height: 100%;
	text-align: right;
	margin: 0px 0px 0px 220px;
	padding: 0px;
	border: 0px;
}
/***** ↑↑↑ここまで復習テスト↑↑↑ *****/


/* 上divの設定 */
div#ue{
	width: 670px;
	height: auto;
	margin: 50px 0px 0px 30px;
	padding: 30px;
	border: 3px double #6B9C43;
	background-color: #fffaf0;
	background-image: url(../img/frog.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
/* 中見出し（学習用のh2と区別するため、今だけID#imadake） */
h2#imadake {
	width: 500px;
	height: 20px;
	color: #336666;
	font-size: 16px;
	margin: 0px auto 30px 0px;
	padding-left: 5px;
	border-bottom: 2px dotted #6B9C43;
}
/* コンテンツ・上divの文字 */
div#ue p{
	color: #003300;
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Osaka;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0px;
	line-height: 120%;
	text-align: left;
	margin: 5px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
	border: 0px;
}
/* コンテンツ・下 */
div#shita{
	width: 720px;
	height: auto;
	margin: 40px 0px 0px 30px;
	padding: 10px;
	border: 0px solid #cc00cc;
}
/* コンテンツ・下の見出し文字（学習用のh3と区別するため、今だけID#imadake） */
h3#imadake{
	color: #444;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Osaka;
	font-size: 16px;
	margin: 20px 0px 10px 0px;
	padding: 0px;
	border: 0px;
}
/* コンテンツ・下の文字 */
div#shita p{
	color: #454545;
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Osaka;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 140%;
	text-align: left;
	margin: 9px 0px 0px 0px;
	padding: 0px;
	border: 0px;
}
/* コンテンツ・下の小文字 */
div#shita p.komoji{
	color: #454545;
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Osaka;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: 1px;
	text-align: left;
	margin: 5px 0px 7px 0px;
	padding: 0px;
	border: 0px;
}
/* フッター（コピーライト部分） */
p#footer{
	width: 740px;
	height: auto;
	color: #bbb;
	font-size: 12px;
	text-align: center;
	margin: 50px 0px 10px 30px;
	padding: 7px;
	border-top: 1px solid #D1FFA4;
	border-bottom: 1px solid #D1FFA4;
}

## 2013-01_html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
		<title>ウェブカツ！裏＜2013年1月号＞:::HTML勉強会:::</title>
		<link rel="stylesheet" href="css/0.css" type="text/css" media="screen,print" />
	</head>
	<body>
		<!-- ラップ -->
		<div id="wrap">
			<!-- ヘッダー -->
			<h1 id="imadake"><img src="img/title_0.jpg" alt="HTML勉強会" title="HTML勉強会" /></h1>
			<!-- /ヘッダー -->
			<!-- コンテンツ・上 -->
			<div id="fukushu">
				<h2>【フォントタグのテスト】&nbsp;&nbsp;段落文章&nbsp;&lt;p&gt;&nbsp;で学習したことの復習&nbsp;</h2>
<!------------- ↓ここから復習 ------------->
				<p>この文字（段落文章全体）を、CSSで見やすくしよう！<br />
				・文字の大きさ＝16ピクセル<br />
				・色＝グリーン（ヒント：#008000や#003300）<br />
				・太さ＝太く（ヒント：normalを使うか、数字を使うか…）<br />
				・位置＝左揃え（ヒント：左揃えがデフォルトです！）<br />
				・文字間＝つめる（ヒント：1pxか2pxくらいが見やすい）<br />
				・行間＝広げる（ヒント：140%くらいが見やすい）</p>
<!------------- ↑ここまで復習 ------------->
			</div>
			<div id="ue">
				<h2 id="imadake">【学習①】&nbsp;&nbsp;CSSを使わずにHTMLだけでフォントを強調するタグ</h2>
<!------------- ↓ここから本日の学習① ------------->
				<p>太字は、CSSなら「font-weight」で「bold」や「700」などを使いますが…</p>
				<p>「b」と表示は同じですが、より強調したい場合は…</p>
				<p>斜体は、CSS「font-style」で「oblique」や「italic」を使いますが…</p>
				<p>「i」と表示は同じですが、より強い斜体は…</p>
				<p>下線をつけるには、CSSなら「text-decoration」で「underline」を使いますが…</p>
				<p>打ち消し線をつけるには、CSSなら「text-decoration」で「line-through」を使いますが…</p>
<!------------- ↑ここまで本日の学習① ------------->
				<p>&nbsp;</p>
				<h2 id="imadake">【学習②】&nbsp;&nbsp;見出しタグ&nbsp;&lt;h1&gt;&nbsp;～&nbsp;&lt;h6&gt;&nbsp;</h2>
<!------------- ↓ここから本日の学習② ------------->
				<p>&lt;h1&gt;～&lt;h6&gt;は「Heading」（見出し）に使います。</p>
				<h>h1を使った見出し</h>
				<h>h2を使った見出し</h>
				<h>h3を使った見出し</h>
				<h>h4を使った見出し</h>
				<h>h5を使った見出し</h>
				<h>h6を使った見出し</h>
<!------------- ↑ここまで本日の学習② ------------->
			</div>
			<!-- /コンテンツ・上 -->
			<!-- コンテンツ・下 -->
			<div id="shita">
				<h3 id="imadake">①【HTML】だけでフォントを強調する（【CSS】は触りません！）</h3>
				<p>・太字は、&lt;b&gt;&lt;/b&gt;</p>
				<p>・太字（より強調）は、&lt;strong&gt;&lt;/strong&gt;</p>
				<p>・斜体は、&lt;i&gt;&lt;/i&gt;</p>
				<p>・斜体（より強調）は、&lt;em&gt;&lt;/em&gt;</p>
				<p>・下線は、&lt;u&gt;&lt;/u&gt;</p>
				<p>・打ち消し線は、&lt;s&gt;&lt;/s&gt;</p>

				<h3 id="imadake">②【HTML】で見出しタグを書いてみる</h3>
				<p>・それぞれの見出しを、&lt;h1&gt;&lt;/h1&gt;&nbsp;～&nbsp;&lt;h6&gt;&lt;/h6&gt;にしましょう。</p>
				<p>・【CSS】を触らなくても見出しの大きさは整えられていますが、CSSで調整したほうがカッコイイです。<br />
				たとえば、この3行上は&lt;h3&gt;が使ってありますよ！<br />
				たとえば、緑カエルの枠内タイトルや、桃カエル枠内タイトルには、&lt;h2&gt;が使ってありますよ！<br />
				たとえば、ヘッダー画像（HTML勉強会）には&lt;h1&gt;が使ってありますよ！</p>
				<p>・SEO対策として、h1から順に重要語句（検索されたいキーワード）を書いていくのがベストです。</p>

			</div>
			<!-- /コンテンツ・下 -->
			<!-- フッター -->
			<p id="footer">Copyright&nbsp;&copy;&nbsp;2013&nbsp;タグチ!ワークス（Web500）.&nbsp;All&nbsp;Rights&nbsp;Reserved.</p>
			<!-- /フッター -->
		</div>
		<!-- /ラップ -->
	</body>
</html>
	/* 画面全体 */
	body{
	background-color: #ffffff;
	text-align: left;
	margin: 0px;
	padding: 0px;
	}
	/* 全体を包む枠 */
	div#wrap{
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
	border: 0px solid #ff0000;
	}
	/* ヘッダー（学習用のh1と区別するため、今だけID#imadake） */
	h1#imadake{
	width: 720px;
	height: 130px;
	margin: 10px auto 0px 30px;
	padding: 0px;
	border: 0px solid #00cccc;
	}
	h1#imadake img{
	width: 700px;
	height: 120px;
	margin: 10px;
	padding: 0px;
	border: 0px;
	}
	/* 復習divの設定 */
	div#fukushu{
	width: 670px;
	height: 200px;
	margin: 30px 0px 0px 30px;
	padding: 30px;
	border: 3px double #DD939C;
	background-color: #fffaf0;
	background-image: url(../img/frog_fukushu.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	}
	div#fukushu h2{
	width: 500px;
	height: 20px;
	color: #cc0066;
	font-size: 16px;
	margin: 0px auto 30px 0px;
	padding-left: 5px;
	border-bottom: 2px dotted #AC586D;
	}


	/*** ↓↓↓ここから復習テスト↓↓↓ ***/
	div#fukushu p{
	color: #ff4500;
	font-family: "メイリオ","Meiryo","ＭＳＰゴシック","MS PGothic",Osaka;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 6px;
	line-height: 100%;
	text-align: right;
	margin: 0px 0px 0px 220px;
	padding: 0px;
	border: 0px;
	}
	/*** ↑↑↑ここまで復習テスト↑↑↑ ***/


	/* 上divの設定 */
	div#ue{
	width: 670px;
	height: auto;
	margin: 50px 0px 0px 30px;
	padding: 30px;
	border: 3px double #6B9C43;
	background-color: #fffaf0;
	background-image: url(../img/frog.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	}
	/* 中見出し（学習用のh2と区別するため、今だけID#imadake） */
	h2#imadake {
	width: 500px;
	height: 20px;
	color: #336666;
	font-size: 16px;
	margin: 0px auto 30px 0px;
	padding-left: 5px;
	border-bottom: 2px dotted #6B9C43;
	}
	/* コンテンツ・上divの文字 */
	div#ue p{
	color: #003300;
	font-family: "メイリオ","Meiryo","ＭＳＰゴシック","MS PGothic",Osaka;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0px;
	line-height: 120%;
	text-align: left;
	margin: 5px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
	border: 0px;
	}
	/* コンテンツ・下 */
	div#shita{
	width: 720px;
	height: auto;
	margin: 40px 0px 0px 30px;
	padding: 10px;
	border: 0px solid #cc00cc;
	}
	/* コンテンツ・下の見出し文字（学習用のh3と区別するため、今だけID#imadake） */
	h3#imadake{
	color: #444;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳＰゴシック","MS PGothic",Osaka;
	font-size: 16px;
	margin: 20px 0px 10px 0px;
	padding: 0px;
	border: 0px;
	}
	/* コンテンツ・下の文字 */
	div#shita p{
	color: #454545;
	font-family: "メイリオ","Meiryo","ＭＳＰゴシック","MS PGothic",Osaka;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 140%;
	text-align: left;
	margin: 9px 0px 0px 0px;
	padding: 0px;
	border: 0px;
	}
	/* コンテンツ・下の小文字 */
	div#shita p.komoji{
	color: #454545;
	font-family: "メイリオ","Meiryo","ＭＳＰゴシック","MS PGothic",Osaka;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: 1px;
	text-align: left;
	margin: 5px 0px 7px 0px;
	padding: 0px;
	border: 0px;
	}
	/* フッター（コピーライト部分） */
	p#footer{
	width: 740px;
	height: auto;
	color: #bbb;
	font-size: 12px;
	text-align: center;
	margin: 50px 0px 10px 30px;
	padding: 7px;
	border-top: 1px solid #D1FFA4;
	border-bottom: 1px solid #D1FFA4;
	}
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
	<title>ウェブカツ！裏＜2013年1月号＞:::HTML勉強会:::</title>
	<link rel="stylesheet" href="css/0.css" type="text/css" media="screen,print" />
	</head>
	<body>
	<!-- ラップ -->
	<div id="wrap">
	<!-- ヘッダー -->
	<h1 id="imadake"><img src="img/title_0.jpg" alt="HTML勉強会" title="HTML勉強会" /></h1>
	<!-- /ヘッダー -->
	<!-- コンテンツ・上 -->
	<div id="fukushu">
	<h2>【フォントタグのテスト】  段落文章 <p> で学習したことの復習 </h2>
	<!------------- ↓ここから復習 ------------->
	<p>この文字（段落文章全体）を、CSSで見やすくしよう！<br />
	・文字の大きさ＝16ピクセル<br />
	・色＝グリーン（ヒント：#008000や#003300）<br />
	・太さ＝太く（ヒント：normalを使うか、数字を使うか…）<br />
	・位置＝左揃え（ヒント：左揃えがデフォルトです！）<br />
	・文字間＝つめる（ヒント：1pxか2pxくらいが見やすい）<br />
	・行間＝広げる（ヒント：140%くらいが見やすい）</p>
	<!------------- ↑ここまで復習 ------------->
	</div>
	<div id="ue">
	<h2 id="imadake">【学習①】  CSSを使わずにHTMLだけでフォントを強調するタグ</h2>
	<!------------- ↓ここから本日の学習① ------------->
	<p>太字は、CSSなら「font-weight」で「bold」や「700」などを使いますが…</p>
	<p>「b」と表示は同じですが、より強調したい場合は…</p>
	<p>斜体は、CSS「font-style」で「oblique」や「italic」を使いますが…</p>
	<p>「i」と表示は同じですが、より強い斜体は…</p>
	<p>下線をつけるには、CSSなら「text-decoration」で「underline」を使いますが…</p>
	<p>打ち消し線をつけるには、CSSなら「text-decoration」で「line-through」を使いますが…</p>
	<!------------- ↑ここまで本日の学習① ------------->
	<p> </p>
	<h2 id="imadake">【学習②】  見出しタグ <h1> ～ <h6> </h2>
	<!------------- ↓ここから本日の学習② ------------->
	<p><h1>～<h6>は「Heading」（見出し）に使います。</p>
	<h>h1を使った見出し</h>
	<h>h2を使った見出し</h>
	<h>h3を使った見出し</h>
	<h>h4を使った見出し</h>
	<h>h5を使った見出し</h>
	<h>h6を使った見出し</h>
	<!------------- ↑ここまで本日の学習② ------------->
	</div>
	<!-- /コンテンツ・上 -->
	<!-- コンテンツ・下 -->
	<div id="shita">
	<h3 id="imadake">①【HTML】だけでフォントを強調する（【CSS】は触りません！）</h3>
	<p>・太字は、<b></b></p>
	<p>・太字（より強調）は、<strong></strong></p>
	<p>・斜体は、<i></i></p>
	<p>・斜体（より強調）は、<em></em></p>
	<p>・下線は、<u></u></p>
	<p>・打ち消し線は、<s></s></p>

	<h3 id="imadake">②【HTML】で見出しタグを書いてみる</h3>
	<p>・それぞれの見出しを、<h1></h1> ～ <h6></h6>にしましょう。</p>
	<p>・【CSS】を触らなくても見出しの大きさは整えられていますが、CSSで調整したほうがカッコイイです。<br />
	たとえば、この3行上は<h3>が使ってありますよ！<br />
	たとえば、緑カエルの枠内タイトルや、桃カエル枠内タイトルには、<h2>が使ってありますよ！<br />
	たとえば、ヘッダー画像（HTML勉強会）には<h1>が使ってありますよ！</p>
	<p>・SEO対策として、h1から順に重要語句（検索されたいキーワード）を書いていくのがベストです。</p>

	</div>
	<!-- /コンテンツ・下 -->
	<!-- フッター -->
	<p id="footer">Copyright © 2013 タグチ!ワークス（Web500）. All Rights Reserved.</p>
	<!-- /フッター -->
	</div>
	<!-- /ラップ -->
	</body>
	</html>