1
課題 14 ホームページを作る（発展）
top 目次 1. 画像ファイルを縮小して表示する 教材 A01，A02 ... 1 2. 文字の書式を設定する（フォント，サイズ，行間） 教材 A03 ... 3 3. 文章表示の横幅を指定する，テキストを右寄せにする 教材 A04 ... 5 4. 見出しに背景色を付けて白抜きで表示する 教材 A05 ... 7 5. ページの背景色を設定する 教材 A06 ... 9 6. 個条書きリストを横方向に配置する 教材 A07 ... 11 7. リンクの下線を表示しない 教材 A08 ... 13 8. リンクの文字色と背景色を使い分ける（未訪問，訪問済，マウスオーバー） 教材 A09 ... 14 9. Google の地図を埋め込む（インラインフレームを使う） 教材 A10 ... 15 10. 参考書籍 ... 171.
画像ファイルを縮小して表示する 教材 A01，A02 top
(1) <img>タグで表示を縮小する
例として「ホームページ教材」の「教材 A01」がある。これは「横 1600 ピクセル×縦 1200 ピクセル」の画像 を，横と縦とをともに 30%に縮小して表示したものである。HTML の記述としては次のようにする。 ──────────────────────────────────────── 教材 A01 <img src="pict.jpg" alt="サンプル画像" width="480" height="360">──────────────────────────────────────── width と height の値は，もとの画像ファイルの横と縦のビクセル数に 0.3 を掛けて計算しなければならない。 HTML には，30%と指定して自動的に縮小する機能はない。
(2) 画像ファイルのサイズそのものを縮小する top
Windows アクセサリのペイントを使ってファイルサイズを縮小できる。次のようにする。 1. 「ホームページ教材」の「教材 A01」を右クリック → メニュー「名前を付けて画像を保存」→ X:ドライ ブの www ディレクトリの中にそのまま pict.jpg というファイル名で保存する。 2. ファイルエクスプローラで X:¥www を開く → 図像ファイル pict.jpg を右クリック → メニュー「プログ ラムから開く」→ を選択する → ペイントが起動する。 3. ペイントのステータスバーを見ると， とある。これは読み込んだ画像ファイルの横と縦の サイズをビクセル単位（px）で示したものである。2 変更のパネルが表示される →「パーセント」をチェック → 「縦横比 を維持する」をチェック → 水平方向ボックスに 30 と入力する → 垂直方向ボックスも自動的に 30 になる → OK クリック。 5. 画像ファイルが縮小されたらすぐ → ファイル → 名前を付けて保存 → X:www に pict-30.jpg という名前に変えて保存する（もとのファイ ルをそのまま残すため）。 6. 縮小したファイルを表示したものが「教材 A02」である。 このように，ファイルのサイズを変更するだけなら Windows ペイントとい う安価なツールでもいける。
3
2.
文字の書式を設定する（フォント，サイズ，行間） 教材 A03 top
(1) こう書くと
─────────────────────────────────────────────────── 教材 A03 <head> ･･････ <title>私の自己紹介</title> <style>h1 {font-family:"メイリオ"; font-size:24px; font-weight:bold; line-height:36px;} h2 {font-family:"メイリオ"; font-size:20px; font-weight:bold; line-height:30px;} p {font-family:"メイリオ"; font-size:18px; font-weight:normal; line-height:30px;} li {font-family:"メイリオ"; font-size:14px; font-weight:normal; line-height:21px;} </style>
</head>
───────────────────────────────────────────────────
(2) こうなる
4 はじめに作成したホームページでは，文章の行間が ほとんどない，<h1>，<h2>，<p>のタグの文字の大き さのバランスがよくない，などのため文章全体が調和 のとれた表現ではなかった。そこで，ホームページの 各要素について，フォント種類，文字サイズ，行間， 色，背景色，などの書式を指定することのできる言語 として CSS（Cascading Style Sheets）がある。スイ タルシートともいう。「教材 A03」はその例を示してい る。 CSS は，次の 3 通りの方法で記述できる。 1. <head>･･･</head>の中で，<style>･･･</style>の間 に書く。 2. ホームページの本文（<body>･･･</body>）のタグ に style 属性として，style="･･･"のように書く。 3. css ファイルとして独立して書く。 ここでは，<style>･･･</style>の間に書く方法を扱う。 CSS は次のように書く。 ──────────────────────── セレクタ { プロパティ:値; ･･･（くりかえし）･･･} ──────────────────────── {･･･} が書式で，セレクタはその書式が適用される ホームページの要素を指定する記述である。 セレクタにはタグ名が使われる。つまり，h1，p な どのタグを指定して，書式を適用することになる。 書式は，「プロパティ : 値 ;」を列挙したものであ る。 これらはすべて半角で書く。 プロパティと値は大文字でも小文字でもよい。 フォント種類の名称を指定するとき，値の一部に日 本語の全角文字を使うことがある。 以下，「教材 A03」で挙げたプロパティごとに，その意 味，指定する値の例を挙げる。 font-family フォントの種類を指定する。 フォント名が空白を含まないときは，arial のよう にそのまま書く。 フォント名が空白を含むときは，"Courier New"の ように，半角の空白を含めて "･･･" または '･･･' の ようにダブルクォートまたはクォートをつけて書 く。 「ＭＳ Ｐ明朝」の場合は， "ＭＳ Ｐ明朝" のよう にダブルクォートをつける。「ＭＳ」と「Ｐ」の文 字は全角とし，その間の空白は半角スペースで書 く。 「HG」で始まるフォントは，「HG」などを半角で 書く。 font-size 文字サイズを指定する。 値には「単位付き数値」を指定する。 18px（ピクセル），12pt（ポイント）などを指定す る。 font-weight 文字の太さを指定する。 normal（標準の太さ），bold（太字）を指定する。 そのほかに太さの数値も使用できることがあるが略 する。 line-height 行間の高さを指定する。 値には「単位付き数値」として 30px（ピクセル）， 20pt（ポイント）などを指定できる。また「単位な し数値」として，1.5，2.0 のように文字の高さに 対する倍率を指定できる。
5
3.
文章表示の横幅を指定する，テキストを右寄せにする 教材 A04 top
(1) こう書くと
─────────────────────────────────────────────────── 教材 A04 <title> ･･････</title> <style> ･･････p {font-family:"メイリオ"; font-size:18px; font-weight:normal; line-height:30px; width:600px; } ･･････ </style> </head> <body> ･･････ <h1>私の４つのポイント</h1> <p style="text-align:right;"> 1194519999 千葉麗子（ちばれいこ） </p> ────────────────────────────────────────────────────
(2) こうなる
6 ホームページ上で文章の横の長さと縦の長さ（枠領 域を）を指定することができる。また枠領域に境界線 をひくこともできる。枠領域は，<h1>･･･</h1>， <p>･･･</p>，<div>･･･</div>など，タグの始まりと終 わりで構成される範囲である。これらのタグに次のプ ロパティを指定することができる。 width 枠領域の横サイズを指定する。 「単位付き数値」で指定する。600px など。 文章はこの横サイズに合わせて自動的に折り返され る。 height 枠領域の縦サイズを指定する。 「単位付き数値」で指定する。400px など。 これを指定しないときは，自動的に文章があるだけ 縦サイズが伸びる。逆に縦サイズを設定したとき， 文章が収まらなければあふれて表示される。 text-align テキストの位置揃えを指定する。 left（左揃え），right（右揃え），center（中央揃 え）。
7
4.
見出しに背景色を付けて白抜きで表示する 教材 A05 top
(1) こう書くと
─────────────────────────────────────────────────── 教材 A05 <title>私の自己紹介</title> <style> ･･････h1 {font-family:"メイリオ"; font-size:24px; font-weight:bold; line-height:36px; background-color:#4b0082; color:#ffffff; padding:6px; width:600px;}
h2 {font-family:"メイリオ"; font-size:20px; font-weight:bold; line-height:30px;
background-color:#556b2f; color:#ffffff; padding:6px; width:600px;} ･･････
･･････ </style> </head>
───────────────────────────────────────────────────
(2) こうなる
8 background-color 背景色を指定する。 「#」をつけて RGB 値の 16 進数を指定する。詳し くは「5.ページの背景色を設定する」を参照。 color 文字色を指定する。 「#」をつけて RGB 値の 16 進数を指定する。 padding 内部余白を指定する。 「単位付き数値」を指定する。6px など。 margin 外部余白を指定する。 「単位付き数値」を指定する。6px など。 枠領域の要素は次のとおりである。 margin（外部余白） padding（内部余白） width（横幅） height（高さ） border（枠線）
9
5.
ページの背景色を設定する 教材 A06 top
(1) こう書くと
─────────────────────────────────────────────────── 教材 A06 <title>私の自己紹介</title> <style> ･･････ body {background-color:#f5f5dc;} ･･････ </style> </head> ───────────────────────────────────────────────────(2) こうなる
10 background-color 背景色を指定する。 「#」をつけて RGB 値の 16 進数を指定する。下記 参照。 PC のディスプレイに表示される色は「光の 3 原色」 からなる。つまり赤（Red），緑（Green），青（Blue） を組み合わせたものである。それぞれの色は，0（暗 い）～255（明るい）という明るさの階調で 256 通り に区分される。よって全部の組合せにより，256×256 ×256＝約 1,678 万色を表現することができる。 CSS における色の指定，つまり color などの色プロ パティの値は，「#ff0099」のように「#」＋「6 桁記 号」で行う。「#」は以降が 16 進数であることを示 す。「ff」（左 2 桁），「00」（中 2 桁），「99」（右 2 桁）はそれぞれ赤，緑，青の階調を 16 進数で表して いる。これを RGB 値という。 0～15 までの 10 進数の数値は，0～f までの 16 進数 の数値で表される。 10 進数 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 進数 0 1 2 3 4 5 6 7 8 9 a b c d e f 0～255 の 10 進数の数値 N を 16 進数に変換するには 次のようにする。 N÷16 → Q あまり M Q，M をそれぞれ上の表から 16 進数に変換して，q， m とする。 よって，10 進数 N の 16 進数表示は qm となる。 16 進数の数値 qm を 10 進数の数値 N に変換するには 次のように計算する。 q，m を 10 進数の数値で Q，M と変換する。 Q×16＋M → N
11
6.
個条書きリストを横方向に配置する 教材 A07 top
(1) こう書くと
─────────────────────────────────────────────────── 教材 A07 <title>私の自己紹介</title> <style> ･･････li {font-family:"メイリオ"; font-size:14px; font-weight:normal; line-height:21px;} nav ul {list-style-type:none;}
nav li {float:left; margin-right:20px; } ･･････ </style> </head> <body> <nav> <ul> <li><a href="./jimoto.html">地元紹介</a></li> <li><a href="http://www.reitaku-u.ac.jp/">麗澤大学</a></li> <li><a href="http://www.cs.reitaku-u.ac.jp/~tak/index.html">千葉次郎</a></li> </ul> <br style="clear:both;"> </nav> <hr> ───────────────────────────────────────────────────
(2) こうなる
(3) 解説
縦方向の個条書きリストを横方向にする基本的な発 想は，<li>タグに回り込みのプロパティ float を指定す ることにある。 1 番目の<li>に「float:left;」を指定すると 2 番目の<li>が右に回り込む。 2 番目の<li>に「float:left;」を指定すると 3 番目の<li>が右に回り込む。 3 番目の<li>が終わったところで，回り込み解除の ため「clear:both;」を指定する。問題は<li>への float の指定方法にある。<li>タグ一 般に float を指定すると，他の個所で縦方向のリスト にしたいところまで全部横方向リストになってしま う。一方，横方向リストにしたい<li>だけに class 名を 指定する方法もあるが，いちいち<li>タグに class を指 定するのは煩瑣であるし，HTML 的にも美しくない。 そこで次のようにする。<ul>･･･</ul>を<nav>タグで 囲って，<nav><ul>･･･</ul></nav>とする。すると 「<nav>タグの中に<li>タグがある」という関係にな る。これを簡単に「nav△li」（△は半角空白）と表し て，これをセレクタに使うことができる。つまり 「nav の下の li」に書式を設定せよとできる。「子孫セ レクタ」という。
12 個条書きのマーカーの種類を指定する。 none（マーカーなし），disc（黒丸），circle（白 丸），square（黒い四角）。 float 対象を右寄せにするか左寄せにするか指定する。 right（右寄せ），left（左寄せ）。 margin-right 対象の右余白のサイズを指定する。 「単位付き数値」で指定する。20px など。 margin-left 対象の左余白のサイズを指定する。 「単位付き数値」で指定する。20px など。
13
7.
リンクの下線を表示しない 教材 A08 top
(1) こう書くと
─────────────────────────────────────────────────── 教材 A08 <title>私の自己紹介</title> <style> ･･････ a {text-decoration:none; } ･･････ </style> </head> <body> ───────────────────────────────────────────────────(2) こうなる
(3) 解説
text-decoration 文字の装飾を指定する。 none（装飾なし），underline（文字の下に線を引 く），overline（文字の上に線を引く），line-through（文字の中央に線を引く，取り消し線），14
(1) こう書くと
─────────────────────────────────────────────────── 教材 A09 <title>私の自己紹介</title> <style> ･･････a:link {color:#0000ab; text-decoration:none; } a:visited {color:#7a006d;}
a:hover {color:#000088; background-color:#d0d0f6} ･･････ </style> </head> ───────────────────────────────────────────────────
(2) こうなる
(3) 解説
リンクが設定されている文字にマウスでアクセスす るとき，リンク先が未訪問のとき，訪問済のとき，リ ンクの文字にマウスがかかったとき，のそれぞれに応 じて文字の色（color），背景色（background-color）， 装飾（text-decoration）を変える。 a:link リンク先が未訪問のとき。 a:visited リンク先が訪問済のとき a:hover リンクの文字にマウスがかかったとき15
9.
Google の地図を埋め込む（インラインフレームを使う） 教材 A10 top
(1) こう書くと
─────────────────────────────────────────────────── 教材 A10 むろんちゃんとにぎったものです。 </p> <h2>GoogleMap</h2> <p> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d25880.434492473014!2d139.9 4695324999998!3d35.82314315!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp !4v1562556186254!5m2!1sja!2sjp" width="600" height="450" frameborder="0"style="border:0" allowfullscreen></iframe> </p>
<p>以上</p>
───────────────────────────────────────────────────
(2) こうなる
16 GoogleMap の地図をホームページに埋め込むことが できる。インラインフレーム（iframe）を使う。 <iframe>タグの属性値はすべて GoogleMap で用意され るので，それをコピーして HTML の記述に貼り付けれ ばよい。 手順は以下のとおりである。 ① GoogleMap にアクセスする 次の URL にアクセスして GoogleMap を開く。 https://maps.google.co.jp/ ② メニューボタンをクリックする 自分の目的とする場所を地図で開く → メニューボタンをクリックする。 ③ 「地図を共有または埋め込む」をクリックする ④ 「地図を埋め込む」をクリックする ⑤ 「HTML をコピー」をクリックする 「HTML をコピー」をクリックする → 左に表示され ている<iframe･･･></iframe>タグと属性値がコピーさ れる。 ⑥ <iframe>タグと属性値を貼り込む 地元紹介ページ（jimoto.html）の末尾の<p>以上</p> のすぐ上に，<p></p>を作成する。 → <p></p>の間に上でコピーした<iframe>タグと属性 値を貼り付ける（Ctrl＋V）。 以上
17
