課題7-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作第1回の資料を参照)。
  3. デスクトップに「課題7」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「課題7」の中の「1」フォルダーの中に「index.html」という名前で保存する。

  5. 以下の囲みのものをTerapadにコピー&ペーストし、上書き保存してブラウザで開く。すると、右図のようなものが表示される。
    <!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="test.css">
    	<title>青森観光情報</title>
    </head>
    <body>
    <div id="pagebody">
    	<div id="header"><h1><a href="index.html">青森観光情報</a></h1></div>
    	<ul id="menu">
    		<li id="menu1"><a href="">観光スポット</a></li>
    		<li id="menu2"><a href="">アクセス</a></li>
    		<li id="menu3"><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>12月19日(土)にモヤヒルズスキー場がオープンしました。</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>
    </html>
    


  6. いまは順番に項目が並んでいるだけだが、このあとCSSでこれをきれいに配置する。

  7. TeraPadで「ファイル」→「新規作成」をクリックし、もう一枚エディタを開く。
  8. 新しく開いたエディタに以下のものをコピー&ペーストし、「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「課題7」の中の「1」フォルダーの中に「test.css」という名前で保存してブラウザをリロードする。すると、右図のように表示が変わる。
  9. /* 全体 */
    * {
    	margin:0; padding:0;
    	line-height:1.5;
    	color:#333333;
    
    }
    body {
    	background-color:#999999;
    	text-align:center;
    }
    div#pagebody {
    	width:796px; margin:0 auto;
    	text-align:left;
    	background-image:url("bg.jpg");
    	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;}
    

    このCSSファイルには行間の幅や一番上の文字の背景の情報などが書かれている。
    背景の設定も書いてあるが、まだ画像がないので反映されていない。

  10. 背景用の画像を適当に検索してダウンロードし、「1」フォルダーに「bg.jpg」という名前で保存してブラウザをリロードする。

    CSSの「background-size:cover;」は「背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する」という設定。小さい画像を敷き詰めたいときはこの行を削除すればよい。
    背景が暗めの画像だと文字が見にくくなる。その場合はGIMPで明るさを調整するとよい (参考 : コンピュータグラフィックス第11回の課題4)。

  11. 「test.css」の一番下に以下のものを追加してリロードする。すると、一番上にあった箇条書きが横に並んだ状態になる。
    /* トップメニュー */
    ul#menu {
    	height:42px; background-color:#eeeeee; font-weight:bold;
    }
    li#menu1,li#menu2,li#menu3 {
    	float:left;
    	display:inline;
    	list-style-type:none;
    	background-repeat:no-repeat;
    }
    
    li#menu1 {
    	width:200px; height:40px;
    	background-image:url("1_spot.gif");
    }
    li#menu2 {
    	width:200px; height:40px;
    	background-image:url("2_access.gif");
    }
    li#menu3 {
    	width:200px; height:40px;
    	background-image:url("3_link.gif");
    }
    ul#menu a {
    	display:block;
    	height:42px; padding-top:4px; text-align:center;
    	text-decoration:none;
    }
    

    「li#menu1」などには画像を使った表示が書いてあるが、まだ画像がないので文字で表示されている。
    「display:inline;」のせいで箇条書きが1行で表示される。
    「list-style:type:none;」のせいで箇条書きの前の「・」が表示されなくなる。

  12. 「観光スポット」「アクセス」「外部リンク」のボタン画像を作り、それぞれ「1_spot.gif」「2_access.gif」「3.link.gif」という名前で「1」フォルダに保存する。(第22回で使ったボタン作成サイトはここ )。そのままではボタンの文字とHTMLで表示した文字が重なってしまうので、index.htmlの12~14行目のこれらの文字を削除して上書き保存し、ブラウザをリロードする。すると、文字だったところがボタンに置きかわる。


  13. 「test.css」の一番下に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。すると、「目的地で探す」~「弘前市」の部分が左側にまとまる。
    /* サブメニュー(左) */
    div#submenu {
    	width:160px;
    	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;
    }
    

    「青森市」~「弘前市」のリンクのところにマウスカーソルをあててみると、その部分の背景の色が変わる。これは今追加したCSSの一番下の命令によるもの。

  14. 「test.css」の一番下に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。すると、「ニュース」「ピックアップ」の項目がそれぞれ中央と右のエリアに表示されるようになる。
    /* 中央・右 */
    div#content {
    	width:560px; margin:10px 20px 10px 0px;
    	float:right;
    }
    
    /* 中央 */
    div#news {
    	width:390px; 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:150px; 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;
    }
    

  15. 「test.css」の一番下に、以下の囲みのものをコピー&ペーストして上書き保存し、ブラウザをリロードする。すると、いままで崩れていた「ここは~サイトです」が一番下の中央に表示されるようになる。
    /* フッタ */
    div#footer {
    	height:42px; text-align:center;
    	clear:both;
    	background-color:#cccccc;
    }
    address {
    	font-style:normal;
    	font-size:small;
    	padding:5px 0px 5px 0px;
    }
    


課題2 inserted by FC2 system