１５．その他いろいろ１

(1) まずは、「Homepage資料」フォルダにある base1.html を TeraPad で開き、「ファイル」→「名前を付けて保存」をクリックし、midashi.html とでもいう名前を付け「Homepage資料」フォルダの中に保存します。そして、下図のように打ち込み上書き保存します。これをEdgeで見ると、上の「海外旅行」の文字が表示されます。

(2) 文字を青色にしましょう。CSSに、color:#00f; を指定します。

(3) 背景に色を付けてみましょう。色は、lightcyan にします。

(4) 背景に色は、付きましたが、バランスが悪いですね。上方に4px、下方に2px、左に12pxの padding を入れてみましょう。

(5) バランスがよくなりました。しかし、何となくメリハリがないですね。左側に青の太線（6px）を入れてみましょう。

このパターンは、よく見かけます。私もときどき使っています。「１４．ナビゲーションの作り方」の中でも使いました。

(6) 境界がぼけているので、上下、右に薄い青線を入れてみましょう。

上、右、下に1pxの線が入りました。どんか感じを受けますか。
ところで、上では、左、上、右、下と1本1本線を指定しました。コンピュータは、機械ですから書かれた順に実行します。ならば、まずは、border:solid 1px #bbbbfe とし4辺に線を引き、次に左の線を6pxに指定します。これを下図に示します。これで結果は同じです。CSSは、2行すくなくなりました。

(7) 右側も太線にしてみましょう。

(8) 少し感じが変わりました。
幅広の修飾は、これぐらいにして、文字回りを修飾してみましょう。それには、width を指定して幅を狭くします。<h3> の文字サイズは、おおよそ19px ですから width を 19×4 = 76px に指定し、左右に 12px の padding をとりましょう。左右に太線ありとなしを下に示します。

(9) 「１２．スタイルシートのいろいろな使い方」で説明しましたが、角に丸みを付けてみましょう。

(10) これも「１２．スタイルシートのいろいろな使い方」で説明しましたが、影を付けてみましょう。

(a) それでは、サンプル文の一部を適当に切って括弧付番号を付けてみましょう。<p> を使って並べます。括弧付番号は、半角で (1) と打ち続いて半角スペース入れた後に文字を打ち込みます。CSS と HTML は、下図です。

(b) Edge表示は、下図です。改行された文字は、括弧付番号のすぐ下に来ているため恰好が悪いです。これでは、使えません。

(c) それでは、括弧付番号のみを頭に出すようにしましょう。そのためには、text-indent プロパティを使います。text-indent は、字下げですが、値にマイナスを指定すると字上げになります。(1) は、半角が3ヶでその後に半角スペースを入れていますので、2em 字上げすればよさそうです。そこで、括弧付番号を略して .kakkoban というclassセレクタを設定し、text-indent:-2em; を指定します。しかし、これで実行すると、括弧付番号が、wrapper の左境界を出てしまいます。wrapper の左境界より 2em 右に入った枠を作りその中に入れます。下にHTML と CSS を示します。

(d) Edge表示は、下図で括弧付番号のみが前に出ました。

(e) ほゞOKですが、よく見ると改行した文字がほんの少し後へさがっています。この原因は、半角文字にあります。メイリオの全角文字は、等幅フォントですが、半角文字は、プロポーショナルフォントです。したがって、半角の文字やスペースは、全角の半分ではなく、文字により異なります。よって、2em の文字上げは、多すぎるので、1.9em としてみましょう。結果を下に示します。きれいに揃いました。少し細かすぎますか。いえいえ、明確にしておいた方がすっきりします。

(f) 上では、<p> のmargin を 0 にしましたので、(1)群と(2)群の間は空いていません。margin : 0; を削除すれば、上下に１行空きます。半行空けたいときは、margin : 0.5em 0; と指定すれば、上下に半行空きます。参考までに半行空きのEdge表示を下図に示しておきます。

(a) <ul> を使うときは、<li> にマイナス text-indent を指定します。
<ul> は、あちこちで使い使用頻度の高いタグですから、classセレクタを使い括弧付専用<ul> として使用した方が安全です。よって、ここでの説明も、classセレクタを使います。CSSは、下図のように打ち込みます。classセレクタ名は、上と同じくしkakkobanとしました。text-indent は、上で結論が出ていますので、-1.9em を指定します。

(b) Edge表示は、下図で括弧の数値が前に出ており完成です。

(c) 上の場合は、(1)群と(2)群の間は空いていません。空けたいときは、li に margin-bottom を指定します。文字高さの半分を空けたいときは、li に margin-bottom : 0.5em; を指定します。このEdge表示は、下図となります。

(1) それでは、イメージマップの作成に取り掛かりましょう。イメージマップの画像は、上の画像を使います。この画像は、21535.gifというファイル名で表示していますが、イメージマップ用画像として、別に image-map.gif という名前を付けることにします。そして、マップデータ名が必要なので、「homepage-map」というデータ名を付けます。

(2) 記述は、下記です。

<img src="image-map.gif" width="600" height="450" usemap="#homepage-map">
<map name="homepage-map">
<area いろいろな属性>
</map>

<img>タグの中に usemap属性でマップデータ名を指定します。記述は、usemap="#homepage-map"のようにマップデータ名の前にシャープ(#)を付けます。
マップデータは、<map> と </map> で挟まれた <area> タグの中の属性で指定します。

(3) この項で使用する <area> の属性を下表に示します。

　(注) rect は、rectangle(長方形)の略、poly は、polygon(多角形)の略です。
　　　coords は、coordinates(座標)の略です。

(4) 長方形の領域指定
長方形の領域を指定するには、sharp 属性で rect を指定し、coords 属性で長方形の左上と右下の座標を指定し、href 属性でリンク先を指定します。記述において、x座標とy座標の間は、コンマ(,)で区切り、座標間は、半角スペースを入れます。

「自己紹介」部の記述は、下記となります。座標の数値は、下の図を見てください。

<map name="homepage-map">
<area shape="rect" coords="80,53 183,124" href="jiko_shokai.html">
</map>

(5) 座標は、このページの最初に説明したHiRulerで計測することができます。下の図を見てください。x座標は、80px、y座標は、HiRulerを移動して計測します。座標や半径は、概略数値で十分です。

(6) windowsのペイントソフトを使うと座標は、簡単に知ることができます。windowsXp、Vista、7 では、「スタート」→「すべてのプログラム」→「アクセサリ」→「ペイント」をクリックして「ペイント」ソフトを立ち上げます。立ち上げたら上で決めたimage-map.gif を読み込みます。
自己紹介の長方形の左上をポイントすると、その座標は、左下のバーに表示されす。下の画像を見てください。以後のために他の図形の頂点の座標を表示しておきます。

(7) 円の領域指定
円の領域を指定するには、shape 属性で circle を指定し、coords属性で円の中心の座標と半径を指定し、href 属性でリンク先を指定します。

「趣味」部の記述は、下記となります。

<map name="homepage-map">
<area shape="circle" coords="460,90 47" href="shumi.html">
</map>

(8) 多角形の領域指定
三角形も五角形も多角形なので、ここでは、五角形で説明します。
五角形の領域を指定するには、shape 属性で poly を指定し、coords 属性で各頂点の座標を指定し、href 属性でリンク先を指定します。

「国内旅行」「海外旅行」部の記述は、下記となります。

<map name="homepage-map">
<area shape="poly" coords=122,302 176,393 67,393" href="kokunai.html">
<area shape="poly" coords="464,293 517,333 496,396 431,396 410,332" href="kaigai.html">
</map>

(8) shape の値に default がありますが、これは指定以外の領域を示すものであり、よほど特殊な使い方でないと使わないと思います。もし、使うなら記述は、下記となります。

<area shape="default" href="url">

(9) 以上で個別説明は終了です。上記をHTMLにまとめると下図となります。

(9) 上記を実際に動作させてみましょう。下記をクリックしてください。

イメージマップページへ

(1) この説明には、数人の人が集まった写真が必要ですが、新聞や雑誌の写真を使うと著作権侵害になるので使えません。知人が数人写った写真を使おうとしましたが、どうも気が引けます。顔をぼかしてみましたが、やはり気になります。ネットでフリーのイラスト画像を探したところ、ようやく見つけました。下の画像でモノクロですが、我慢してください。写真名は、shugo_shashin.gif とします。氏名は、適当な仮名を使います。

(2) 顔をポイントすると氏名を表示させるので、顔に円のリンク領域を作成します。そのためには、顔の中心の座標を知る必要があるので、「ペイント」を立ち上げ上の写真を読み込み座標を確認します。結果を下の図に示します。

(3) 記述は、イメージマップとほとんど同じですが、href="url" の代わりに title="氏名" を記載します。マップ名は、shimei_hyoji としておきます。

<map name="shimei_hyoji">
<area shape="circle" coords="x,y r" title="氏名">
</map>

(4) それでは、実際に記述してみましょう。「homepage資料」フォルダにある base1.html を TeraPad で開きます。「ファイル」→「名前を付けて保存」をクリックし、shimei_hyoji.html という名前を付けて「Homepage資料」フォルダに保存します。そして、下図を打ち込んで上書き保存します。円の半径は、概略でよいので、すべて20pxにしています。

(5) 上記を実際に動作させてみましょう。下記をクリックしてください。

氏名表示ページへ

(5) <area>の属性として title を使いましたが、上記イメージマップの(3)の<area>の属性の中に入っていません。title 属性は、HTML4.01規格の時代からすべてのタグで使用できる属性となっていました。HTML5規格でも、すべてのタグで使用できますが、「グローバル属性」と名付けられています。

(6) title 属性は、使われたタグをポイントすると、その値が表示されます。上では、<area>に使用したので、ポイントで氏名が表示されました。
例えば、<p>タグに使用してみましょう。下記を記述します。

<p title="夜ですよ！">お早うございます。</p>

上記を記述し表示したものが、下記です。「お早うございます」をポイントしてみてください。

　お早うございます。

このようなお遊びもできますが、ルビ（ふりがな）に使うことができます。例えば、下記を記述します。

彼は、その行動に<span title="ちゅうちょ">躊躇</span>しなかった。

上記を記述し表示したものが下記です。躊躇をポイントしてみてください。

彼は、その行動に躊躇しなかった。

ルビについては、次の項で説明します。

今までに使用してきたグローバル属性は、style、id、class があり、そして今度の title です。全部で14ヶありますが、他は使うことはないので紹介しません。

(1) <iframe>の属性を下表に示します。

srcdoc、seamless、sandbox属性は、HTML5規格で新設されたものです。
HTML4.01規格にあったframeborder、marginheight、marginwidth、scrolling、longdesc、align属性は廃止されました。
我々が、通常使う属性は、src、width、height、name の4ヶです。srcdocは、フレーム内の文書を別ファイルにする必要がないので使いたい属性ですが、残念ながらインターネットエクスプローラが対応していないので使えません。seamlessは、旧規格のframeborder="0"に相当するもののようですが、どのブラウザも対応していません。sandbox属性は、悪意あるコンテンツから被害を受けるのを避けるために、フレーム内コンテンツの表示に制限を加える際に使用するとあり、われわれのホームページでは、考慮する必要はありません。

(2) 使い方としては、長い文章とか箇条書き文とか縦長の表とかをウインドの中に全部載せないで、ある寸法のフレームの中に納めたいときに使います。
例えば、下のような表があったとき、この表をウインドウに全部載せないで、あるフレーム枠の中に表示させてみましょう。そのためには、下の表を一つのHTMLファイルにし、ファイル名をsanpai.htmlとします。

(3) それでは、<iframe>を使ってみましょう。下記のように記述します。

　<iframe src="sanpai.html"></iframe>

実際に表示させると下のようになります。フレームの幅は、300px、高さは、150pxになっていますが、これは、ブラウザのdefaultです。スクロールバーを動かしてみてください。

(4) フレームの幅を220px、高さを120pxとしてみましょう。記述は、下記です。

　<iframe src="sanpai.html" width="220" height="120"></iframe>

実際に表示させると下のようになります。フレームサイズが小さくなり表が恰好よく収まっています。

(4) 枠線を消したいときは、seamlessを記載することになりますが、残念ながら対応しているブラウザがありません。ならばどうするか、HTML4.01の属性 frameborder="0" を使いますか、いや、スタイルシートで指定します。iframe {border:none}、または iframe {border:0} で指定します。タグの中に指定すると、下記となります。

　<iframe src="sanpai.html" width="220" height="120" style="border:none"></iframe>

実際に表示させると下のようになります。スクロールバーだけ残り枠線が消えています。

(1) name属性は、ほとんど使うことはないと思いますが、下のような画面を作ると name属性が必要になります。下の3つの方法をクリックしてみてください。

東京駅から松江駅までの費用は？

• 飛行機を利用すると
• 新幹線を利用すると
• バスを利用すると

(2) 上のHTML文を下に示します。name をkeihi(経費)としています。リンクの<a>の中では、target="keihi" を指定しています。

(1) <form>タグ
　<form>タグの属性は、8種ありますが、通常は、下記のようにactionとmethodが使われます。

<form acition="formmail.cgi" method="post">

actionには、CGI や Webアプリケーションの URL を指定します。methodは、送信方式の指定で、getとpostがあります。詳しい説明はしませんが、通常は、postを指定します。

(2) 「名前」の欄「１行テキストボックス」

<input type="text" name="name" size="40">

と入力しています。size="40"は、枠幅の長さで、半角の文字数です。sizeを指定しないときは、20がdefaultです。maxlength（最大入力文字数）を指定することができます。半角、全角に関係なく文字数です。
枠幅は、ブラウザによって異なります。上の枠幅は、Internet Explorerだと236pxですが、firefoxだと267px、chromeだと311pxです。ブラウザによって半角文字の指定が異なるためのようです。どのブラウザで見ても同じ幅にするには、スタイルシートで指定します。style="width:240px" のように。

(3) 「血液型」の欄「セレクトボックス」

<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>

と入力しています。上の図では、1行のみ表示していますが、2行表示させるときは、下のようにsize=2を追加します。

<select name="blood" size=2 >

(4) 「性別」の欄「ラジオボタン」

<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女

と入力しています。

(5) 「趣味」の欄「チェックボックス」

<input type="checkbox" name="hobby" value="sports">スポーツ
<input type="checkbox" name="hobby" value="reading">読書
<input type="checkbox" name="hobby" value="music">音楽
<input type="checkbox" name="hobby" value="travel">旅行

と入力しています。ラジオボックスまたはチェックボックスは、下のようにcheckedを入れておくと選択状態（ON状態）にしておくことができます。

<input type="radio" name="sex" value="male" checked>男

(6) 「コメント」の欄「テキストボックス」

<textarea name="comments" rows="4" cols="40"></textarea>

と入力しています。rowsは、行数、colsは、半角文字数です。記入欄にあらかじめ文字を表示しておきたいときは、<textarea>と</textarea>の間に文字を入れます。

(7) 「送信」「リセット」

<input type="submit" value="送信"><input type="reset" value="リセット">

と入力しています。type="submit"で送信ボタンを作成し、type="reset"でリセットボタンを作成します。

(8) 以上をHTML文にしたものを下に示します。<label>タグを使っていますが、これは、フォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を明確に関連付けるための要素です。これによりチェックボックスやラジオボタンでは、 関連付けられたテキスト部分をクリックしてもチェックを付けることができるようになります。