学科 HTML/CSS基礎⑥【通所】　2025･10･23

m.saya

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

3限目
学科 HTML/CSS基礎⑥
Webページ制作実践

4限目
学科 HTML/CSS基礎⑥
Webページ制作実践

5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ

本日のテーマ

CSSの記述をしましょう

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <title></title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="oya">
      <div class="kodomo">
      </div>
    </div>
    <div class="test">
    </div>
  </body>
</html>

CSS

@charset "utf-8";
/* コメントアウト */

div.oya {
		width: 500px;
		height: 500px;
		background-color: #ccc;
		/*margin-left: 50px;*/
		/*padding-left: 50px;
		padding-top: 50px;*/
		/*padding: 50px 0 0 50px;*/
		/*margin: 50px 0 0 50px;*/
		/*margin: 0 0 0 auto;*/
		/*margin-top: -50px;*/
}

div.kodomo {
			width: 200px;
			height: 200px;
			background-color: red;
			/*margin-left: 50px;*/
			margin: 0 auto;
			margin-bottom: 100px;
}

div.test{
		width: 500px;
		height: 500px;
		background-color: blue;
		margin-top: 300px;
}

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>東京を楽しもう！ 東京散策倶楽部</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" href="images/favicon.ico">
</head>
<body>
	<div class="header">
		<header>
			<h1><span>東京を楽しもう！</span>東京散策倶楽部</h1>
			<p>東京散策倶楽部は、東京都内で散策に適した場所を紹介しています。<br>東京には散策に適した場所がたくさんあります。<br>風景を楽しみながら、のんびりと歩き回ってください。</p>
		</header>
	</div>
	<div class="spots">
		<section class="container">
			<h2>成田山 東京別院 深川不動堂</h2>
			<div class="spots-photo">
				<img src="images/tk-01-1.jpg" alt="成田山 東京別院 深川不動堂" width="1024" height="768">
				<img src="images/tk-01-2.jpg" alt="成田山 東京別院 深川不動堂" width="1024" height="768">
				<img src="images/tk-01-3.jpg" alt="成田山 東京別院 深川不動堂" width="1024" height="768">
				<img src="images/tk-01-4.jpg" alt="成田山 東京別院 深川不動堂" width="1024" height="768">
			</div>
			<div class="spots-text">
				<h3>紹介</h3>
				<p>成田山 東京別院 深川不動堂は、東京都江東区富岡にある真言宗智山派の寺院であり千葉県成田市にある成田山新勝寺の東京別院です。</p>
				<h3>見どころ</h3>
				<dl>
					<dt>旧本堂</dt>
					<dd>前本堂が東京大空襲で焼失した後に千葉県本埜村（現・印西市）の龍腹寺の堂を移築して本堂としたものです。1950年（昭和25年）に移築が完了し翌年に落慶法要が営まれました。現在は帆刈黌童作の丈八の「おねがい不動尊」が安置されています。</dd>
					<dt>本堂</dt>
					<dd>旧本堂の西側にある外壁に梵字（不動明王真言）を散りばめてある建物です。開創310年を機に2011年（平成23年）に完成しました。</dd>
					<dt>内仏殿</dt>
					<dd>旧本堂裏手にある4階建の建物です。開創300年を期に2000年（平成12年）に完成しました。1階には澤田政廣作の不動明王立像などの仏像、2階には四国八十八箇所の巡拝所などがあり、4階は大日如来を安置する宝蔵大日堂です。</dd>
					<dt>ご利益通り</dt>
					<dd>門前の参道は通称「人情深川ご利益通り」といい、毎月1・15・28日に縁日が開かれて賑わいます。有名な菓子店や食事処があります。</dd>
				</dl>
				<h3>アクセス</h3>
				<p>東京都江東区富岡1丁目17番13号</p>
				<ul>
					<li>東京メトロ東西線 門前仲町駅（1番出口） 徒歩2分（深川人情通りは、駅出口すぐ）</li>
					<li>都営地下鉄大江戸線 門前仲町駅（6番出口） 徒歩5分</li>
				</ul>
				<h3>参拝料・参拝時間</h3>
				<ul>
					<li>参拝料：無料</li>
					<li>開扉時間：8時～18時<br>内仏殿参拝：4階は9時～17時／1・2階は9時～17時45分</li>
				</ul>
			</div>
		</section>
	</div>
	<div class="spots">
		<section class="container">
			<h2>東京スカイツリー</h2>
			<div class="spots-photo">
				<img src="images/tk-02-1.jpg" alt="東京スカイツリー" width="1024" height="768">
				<img src="images/tk-02-2.jpg" alt="東京スカイツリー" width="1024" height="768">
				<img src="images/tk-02-3.jpg" alt="東京スカイツリー" width="1024" height="768">
				<img src="images/tk-02-4.jpg" alt="東京スカイツリー" width="1024" height="768">
			</div>
			<div class="spots-text">
				<h3>紹介</h3>
				<p>東京スカイツリー（TOKYO SKYTREE）は、東京都墨田区押上にある電波塔です。2012年2月29日に完成し、同年5月22日に電波塔・観光施設として開業しました。</p>
				<h3>見どころ</h3>
				<dl>
					<dt>電波塔</dt>
					<dd>高さは634mで、タワーとしては世界第1位です。建築物としてはブルジュ・ハリファ、ムルデカ118（PNB118）に次ぐ世界第3位になります。（記事作成時点）</dd>
					<dt>展望台</dt>
					<dd>高さ350メートルの第1展望台（東京スカイツリー天望デッキ）と、高さ450メートルの第2展望台（東京スカイツリー天望回廊）からなります。</dd>
					<dt>商業施設</dt>
					<dd>「東京ソラマチ」やオフィスビル「東京スカイツリーイーストタワー」が併設されています。とうきょうスカイツリー駅・押上駅と直結しています。</dd>
				</dl>
				<h3>アクセス</h3>
				<p>東京都墨田区押上一丁目1番1号他</p>
				<ul>
					<li>東武スカイツリーライン（東武伊勢崎線） とうきょうスカイツリー駅直結</li>
					<li>京成押上線・都営地下鉄浅草線・東武スカイツリーライン（東武伊勢崎線）・東京メトロ半蔵門線 押上駅直結</li>
				</ul>
				<h3>チケット・料金・営業時間</h3>
				<ul>
					<li>前売り券の場合（当日WEB券／団体・障害者割引もあります）<br>【平日】<br>展望デッキ：大人 2,100円／中人：1,400円／小人：850円<br>展望デッキ＋展望回廊：大人 3,100円／中人：2,150円／小人：1,300円<br>【休日】<br>展望デッキ：大人 2,300円／中人：1,500円／小人：900円<br>展望デッキ＋展望回廊：大人 3,400円／中人：2,350円／小人：1,400円</li>
					<li>営業時間：平日：10:00～22:00／休日：9:00～22:00</li>
				</ul>
			</div>
		</section>
	</div>
	<div class="spots">
		<section class="container">
			<h2>清澄庭園</h2>
			<div class="spots-photo">
				<img src="images/tk-03-1.jpg" alt="清澄庭園" width="1024" height="768">
				<img src="images/tk-03-2.jpg" alt="清澄庭園" width="1024" height="768">
				<img src="images/tk-03-3.jpg" alt="清澄庭園" width="1024" height="768">
				<img src="images/tk-03-4.jpg" alt="清澄庭園" width="1024" height="768">
			</div>
			<div class="spots-text">
				<h3>紹介</h3>
				<p>清澄庭園（きよすみていえん）は、東京都江東区清澄にある都立庭園です。池の周囲に築山や名石を配置した回遊式林泉庭園で、東京都指定名勝に指定されています。</p>
				<h3>見どころ</h3>
				<dl>
					<dt>園内</dt>
					<dd>中島を持つ広い池が中心にあり、ツツジとサツキの植えられた「つつじ山」や池の端を歩けるように石を配置した「磯渡り」などがあります。また、園内には岩崎家が全国から集めたという名石が無数に置かれています。池には人に慣れた多数のカメがおり、餌をやることができます。</dd>
					<dt>大正記念館</dt>
					<dd>大正天皇の葬儀のため新宿御苑にて用いられた葬場殿を移築しました。戦災で失われ、貞明皇后の葬場殿の材料を使って再建されました。現在は、集会施設として利用可能です。</dd>
					<dt>涼亭</dt>
					<dd>1909年（明治42年）に建てられた数寄屋造りの建物です。東京都選定歴史的建造物に選定されています。集会施設として利用可能です。</dd>
				</dl>
				<h3>アクセス</h3>
				<p>東京都江東区清澄三丁目3番地9号</p>
				<ul>
					<li>都営大江戸線・東京メトロ半蔵門線 清澄白河駅 徒歩3分</li>
				</ul>
				<h3>料金・開園時間</h3>
				<ul>
					<li>一般：150円／65歳以上：70円／小学生以下及び都内在住・在学の中学生は無料</li>
					<li>開園時間：午前9時～午後5時（入園は午後4時30分まで）</li>
				</ul>
			</div>
		</section>
	</div>
	<div class="spots">
		<section class="container">
			<h2>東京タワー</h2>
			<div class="spots-photo">
				<img src="images/tk-04-1.jpg" alt="東京タワー" width="1024" height="768">
				<img src="images/tk-04-2.jpg" alt="東京タワー" width="1024" height="768">
				<img src="images/tk-04-3.jpg" alt="東京タワー" width="1024" height="768">
				<img src="images/tk-04-4.jpg" alt="東京タワー" width="1024" height="768">
			</div>
			<div class="spots-text">
				<h3>紹介</h3>
				<p>東京タワー（Tokyo Tower）は、東京都港区芝公園にある総合電波塔です。1958年（昭和33年）12月23日に竣工しました。東京のシンボル、観光名所として知られています。</p>
				<h3>見どころ</h3>
				<dl>
					<dt>電波塔</dt>
					<dd>高さは333メートルと広報されており海抜では351メートルになります。塔脚の中心を基準とした塔脚の間隔は88.0メートルです。</dd>
					<dt>展望台</dt>
					<dd>メインデッキは地上120メートルより上に2階構造で位置しておりフットタウン1階からの昇りエレベーターは大展望台2階に到着して客を降ろします。フットタウンとメインデッキを結ぶ階段（590段）は土曜・休日・祝日に一般開放されており段の途中に段数の表記や看板が設置してあります。階段を昇り切ると、シリアルナンバー入りの「ノッポン公認 昇り階段認定証」が手渡されます。</dd>
					<dt>フットタウン</dt>
					<dd>タワーの下には、フットタウンと呼ばれる5階建ての観光・娯楽施設があります。</dd>
				</dl>
				<h3>アクセス</h3>
				<p>東京都港区芝公園4丁目2?8</p>
				<ul>
					<li>都営大江戸線 赤羽橋駅（赤羽橋口） 徒歩5分</li>
					<li>東京メトロ日比谷線 神谷町駅（1） 徒歩7分</li>
					<li>都営三田線 御成門駅（A1） 徒歩6分</li>
					<li>都営三田線 芝公園駅（A4） 徒歩10分</li>
					<li>都営浅草線 大門駅（A6） 徒歩10分</li>
					<li>JR山手線・京浜東北線 浜松町駅（北口） 徒歩15分</li>
				</ul>
				<h3>料金・開園時間</h3>
				<ul>
					<li>メインデッキ：大人 1,500円／高校生 1,200円／小中学生 900円／幼児（4歳以上）600円（団体・障害者割引あり）</li>
					<li>開園時間：午前9時～午後11時（ラストオーダー 午後10:30）</li>
				</ul>
			</div>
		</section>
	</div>
	<div class="footer">
		<footer>
			<p><small>&copy; 2025 東京散策倶楽部.</small></p>
		</footer>
	</div>

</body>
</html>

CSS

@charset "utf-8";

body {
	background-color: #ecf9fd;									/* 問題01：背景色を指定 */
	color: #333;
}

.header {
	padding: 100px 20px;
	margin-bottom: 60px;
	background-image: url("../images/hero1.jpg");									/* 問題02：背景画像を指定 */
	background-size: cover;
	background-position: center;
	text-align: center;
}

.header header h1 {
	font-size: 3.5em;												/* 問題03：文字サイズを指定 */
	padding: 0 0 40px 0;
	color: #fff;												/* 問題04：文字色を指定 */
	font-weight: bold;
	text-shadow: 0px 0px 5px #000, 0px 0px 5px #000;
}

.header header h1 span {
	padding: 0 40px 0 0;
	font-size: 0.8em;
}

.header header p {
	font-size: 1.2em;
	color: #fff;
	text-shadow: 0px 0px 5px #000, 0px 0px 5px #000;
}

.spots .container {
	width: 960px;												/* 問題05：ボックスの横幅を指定 */
	margin: 0 auto;
	padding: 20px;
}

.spots h2 {
	margin: 0 0 30px 0;												/* 問題06：マージンを指定 */
	font-size: 1.8em;
	font-weight: bold;												/* 問題07：文字の太さを指定 */
	color: #005340;
	border-bottom: 5px #005340 double;
	line-height: 1.4;												/* 問題08：行間を指定 */
}

.spots h2::before {
	content: '';
	display: inline-block;
	width: 35px;
	height: 44px;												/* 問題09：ボックスの高さを指定 */
	background-image: url(../images/walk.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.spots .spots-photo {
	padding: 0 0 20px 0;												/* 問題10：パディングを指定 */
	display: flex;
	gap: 20px;
}

.spots .spots-photo img {
	width: calc((100% - 60px) / 4);
	border-radius: 10px;												/* 問題11：角の丸みを指定 */
}

.spots .spots-text h3 {
	padding: 10px 0;
	font-size: 1.4em;
	color: #005340;
	font-weight: bold;
}

.spots .spots-text h3::before {
	content: '◆';
	margin-right: 3px;
}

.spots .spots-text p {
	margin: 0 0 0 20px;
}

.spots .spots-text dl {
	margin: 0 0 0 20px;
}

.spots .spots-text dl dt {
	float: left;
}

.spots .spots-text dl dd {
	margin-left: 120px;
}

.spots .spots-text ul {
	margin: 0 0 0 40px;
}

footer {
	padding: 100px 20px;
	margin: 60px 0 0 0;
	background-image: url('../images/hero2.jpg');
	background-size: cover;
	background-position: center;
	font-size: 0.9em;
	text-align: center;												/* 問題12：文字の配置位置を指定 */
	color: #fff;
	text-shadow: 0px 0px 5px #000, 0px 0px 5px #000;
}

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

PAGE TOP