課題5　スタイルシート

課題5-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作初回の資料を参照)。
    3. (自宅で作業したことがある場合は設定が残っているはずなのでこの工程は飛ばしてよい)
  3. デスクトップに「課題5」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. 文字コード「UTF-8N」で、「1」フォルダーの中に「index.html」というファイルを作る。
  5. 以下のコードを記入 (コピー＆ペーストでよい) して上書き保存し、ブラウザで開く。
    6. (6行目の「<link rel="stylesheet" href="pc.css">」はスタイルシート (項目ごとのお約束をまとめたファイル) を読み込む命令だが、まだ「pc.css」が存在しないので無効になっている) 
    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="pc.css">
	<title>青森観光情報</title>
</head>
<body>
<div id="pagebody">
	<div id="header"><h1>青森観光情報</h1></div>
	<ul id="menu">
		<li id="menu"><a href="">観光スポット</a></li>
		<li id="menu"><a href="">アクセス</a></li>
		<li id="menu"><a href="">イベント</a></li>
		<li id="menu"><a href="">外部リンク</a></li>
	</ul>
	<div id="submenu">
		<div id="submenu_header">目的地で探す</div>
		<ul id="submenu_body">
			<li><a href="">青森市</a></li>
			<li><a href="">弘前市</a></li>
			<li><a href="">八戸市</a></li>
		</ul>
	</div>
	<div id="content">
		<div id="news">
			<h2>ニュース</h2>
			<h3>弘前さくらまつり開催</h3>
			<p>4/23(金)～5/5(水)に弘前公園でさくらまつりが開催されました。</p>
			<hr>
		</div>
		<div id="pickup">
			<h2>ピックアップ</h2>
			<ul>
				<li><a href="">穴場情報</a></li>
				<li><a href="">コロナ情報</a></li>
			</ul>
		</div>
	</div>
	<div id="footer"><address>ここは青森県の観光案内サイトです。</address></div>
</div>
</body>


  6. 文字コード「UTF-8N」で、「1」フォルダーの中に「pc.css」というファイルを作る。
  7. 以下のコードを「pc.css」に記入 (コピー＆ペーストでよい) して上書き保存し、ブラウザを更新する。
    8. (ブラウザで見るのはさっき開いた「index.html」のページ。ブラウザで「pc.css」を開いてもコードが見えるだけ)
    (12～14行目は「画像の横幅を最大でもブラウザと同じにする (広いときは勝手に縮小する)」という命令。これまではhtmlファイルのヘッダ部に直接書いていたが、今回はこうして別ファイルに記述している)
    (赤・青・緑・紫・濃い青の部分でそれぞれメニュー・左側・中央・右・フッタ部の書式を設定している)
    * {
	margin:0; padding:0;
	line-height:1.5;
	color:#333333;
}

body {
	background-color:#999999;
	text-align:center;
}

img {
	max-width: 100%;
}

div#pagebody {
	width:769px; margin:0 auto;
	text-align:left;
	background-size:cover;
	background-color:#ffffff;
}

div#header {
	height:77px;
	background-color:#cccccc;
}

h1 {
	padding:20px 0px 0px 30px;
	font-family:Arial, Helvetica, sans-serif;
}

h1 a {text-decoration:none;}

ul#menu {
	height:42px; background-color:#eeeeee; font-weight:bold;
	padding:10px 0px 5px 0px;
}

li#menu {
	float:left;
	display:inline;
	width:190px; height:40px;
	list-style-type:none;
	background-repeat:no-repeat;
}

ul#menu a {
	display:block;
	height:42px; padding-top:4px; text-align:center;
	text-decoration:none;
}

/* サブメニュー(左) */
div#submenu {
	width:150px;
	margin:10px 10px 10px 25px;
	display:inline;
	float:left;
}

div#submenu_header {
	height:26px; padding:4px 0px 0px 0px;
	background-color:#cccccc;
	font-size:90%; font-weight:bold; text-align:center;
}

ul#submenu_body {
	padding-bottom:6px;
	background-color:#cccccc;
}

ul#submenu_body li {
	font-size:90%;
	list-style-type:none;
	display:inline;
}

ul#submenu_body li a {
	display:block;
	margin:0px 4px 0px 4px;
	padding:2px 0px 2px 20px;
	background-color:#eeeeee;
	text-decoration:none;
}

ul#submenu_body li a:hover {
	background-color:#ffffff;
}

/* ニュース・ピックアップ */
div#content {
	width:530px; margin:10px 20px 10px 0px;
	float:right;
}

/* ニュース */
div#news {
	width:370px; margin-right:5px; padding-top:10px;
	float:left;
}

/* 見出し */
h2 {
	font-size:100%; margin-bottom:10px; padding-left:25px;
	font-size:95%; border-bottom:solid 1px #cccccc;
}
h3 {font-size:90%; margin-left:5px;}
/* 段落 */
p {font-size:90%; margin:10px 0px 10px 10px; text-indent:10px;}
/* 区切り線 */
hr {height:1px; border:solid 1px #cccccc; margin-bottom:30px;}

/* ピックアップ */
div#pickup {
	width:140px; padding-top:10px;
	float:right;
}
div#pickup ul {
	margin-left:10px;
	font-size:90%;
}
div#pickup li {
	list-style-type:none;
	line-height:1.8;
}

/* フッタ */
div#footer {
	height:42px; text-align:center;
	clear:both;
	background-color:#cccccc;
}
address {
	font-style:normal;
	font-size:small;
	padding:5px 0px 5px 0px;
}

    このように、さっきとは全く異なった表示になる。
    表示する部分の幅を指定しているので、意図した通りのデザインで表示されるが、ブラウザの横幅を小さくすると画面に情報が収まりきらなくなってしまう。
    これではスマホで表示させるのに都合が悪い。

  8. index.htmlに赤枠の部分を追加する。
    9. (この図に入っていない部分はそのままにする。変えるのは赤枠のところだけ)
    (こうすると、ブラウザの横幅が769ピクセル以上のときは「pc.css」、768ピクセル以下のときは「sp.css」を読み込んで使うことになる)


  9. 「1」フォルダの中に「pc.css」のコピーを作り、その名前を「sp.css」に変更する。
    10. (sp は smartpphone、つまりスマホのこと。スマホで表示するとき用のお約束をこのファイルに書く)


  10. 以下のコードを「sp.css」に記入 (コピー＆ペーストでよい) して上書き保存し、ブラウザを更新する。
    11. * {
	margin:0; padding:0;
	line-height:1.5;
	color:#333333;
	float:none;
}

body {
	background-color:#999999;
	text-align:center;
}

img {
	max-width: 100%;
}

div#pagebody {
	margin:0 auto;
	text-align:center;
	background-size:cover;
	background-color:#ffffff;
}

div#header {
	background-color:#cccccc;
}

h1 {
	padding:20px 0px 20px 0px;
	font-family:Arial, Helvetica, sans-serif;
}

h1 a {text-decoration:none;}

ul#menu {
	margin: 0px;
	padding:10px 0px 10px 0px;
	background-color:#eeeeee;
	font-weight:bold;
}

li#menu {
	padding:5px 0px 5px 0px;
	list-style-type:none;
	background-repeat:no-repeat;
}

ul#menu a {
}

/* サブメニュー(左) */
div#submenu {
	margin: 0px;
}

div#submenu_header {
	padding:20px 0px 10px 0px;
	background-color:#cccccc;
	font-weight:bold; text-align:center;
}

ul#submenu_body {
	padding:10px 0px 0px 0px;
	background-color:#cccccc;
}

ul#submenu_body li {
	list-style-type:none;
	padding-left: 0px;
}

ul#submenu_body li a {
	display:block;
	margin:0px 0px 0px 0px;
	padding:5px 0px 5px 0px;
	background-color:#eeeeee;
	text-decoration:none;
}

ul#submenu_body li a:hover {
}

/* ニュース・ピックアップ */
div#content {
	margin:10px 0px 10px 0px;
}

/* ニュース */
div#news {
	padding-top:10px;
}

/* 見出し */
h2 {
	margin-bottom:10px;
	border-bottom:solid 1px #cccccc;
}
h3 {margin-left:5px;}

p {margin:10px 0px 10px 10px; text-indent:10px;}

hr {height:1px; border:solid 1px #cccccc; margin-bottom:30px;}

/* ピックアップ */
div#pickup {
	padding-top:10px;
}
div#pickup ul {
	margin-left:10px;
}
div#pickup li {
	list-style-type:none;
	line-height:1.8;
}

/* フッタ */
div#footer {
	text-align:center;
	clear:both;
	background-color:#cccccc;
}
address {
	font-style:normal;
	font-size:small;
	padding:5px 0px 5px 0px;
}

    このように、ブラウザの横幅を縮めると情報が縦に並んだ状態になる。
    このようにパソコンとスマホ用で別の表示になるようにすることをレスポンシブデザインという。
    「pc.css」との大きな違いは「float」による位置の指定 (上・左・右・下) をなくしていること。
    そのおかげでそれぞれの項目が順番に並んだ状態になっている。
    (ほかにもバランスをとるために隙間の幅などを調整している)

課題5-2

  1. 課題5-1の結果表示用のChromeのタブ、すべてのTeraPadを閉じる (今回もファイルが多く、間違いが起こりがちなので必ずやること)。
  2. 「課題5」フォルダの中に「2」フォルダを作る。
  3. 「2」フォルダの中にhtmlファイル、cssファイルを作る。
    4. (新しく作ってもよいし、課題5-1で作ったものをコピーしてもよい)
    (スマホでも特に問題のないデザインなら、cssファイルは1つだけでもよい)
  4. それらのファイルを編集し、オリジナルのページを作る。
課題の条件
注意 (この課題限定ではなく、Webページ全般について)

提出

inserted by FC2 system