１１．その他のタグなど
前節までに出て来たタグやスタイルシートで通常のHTML文書は、作成できますが、まだ出て来ていないものをあと少し知るとより作成しやすくなるので以下に紹介します。
「Homepages資料」フォルダに入っているbase1.htmlファイルをTeraPadで開いてください。そして、「ファイル」→「名前を付けて保存」をクリックし、tag_etc.html などという名前を付けて「Homepage資料」フォルダの中に保存してください。今までの文字と同一の方がよいので、body に {font-family : "メイリオ"}を記載して上書き保存してください。以降、このファイルを使って以下のタグなどを打ち込んで勉強してください。
1. 強調タグと太字タグ
強調タグは、<strong> です。太字タグは、<b> です。b は、bold の b です。base1.htmlに下の左のように打ち込んでください。そして、これをEdge表示させると下の右のように表示されます。
強調と太字は、異なるとのことですが、表示は、共に同じ太字です。「強調するところに<b>を使わないで、<strong> を使いなさい。」などとあちこちに書いてありますが、私は、気にしていません。<b>の方が打ち込みが楽なので、私は、いつも<b>を使っています。
2. 上付き文字と下付き文字
上付き文字にするときは、<sup> タグを使い、下付き文字にするときは、<sub> タグを使います。下図を見てください。
3. テキストを斜体（イタリック）にする
テキストを斜体にするには、HTML4.01では、<i>と</i>で囲みましたが、単にテキストの見栄えを指定するだけのときは、スタイルシートの使用が推奨されていました。スタイルシート記述の1例を下に示します。
<span style="font-style: italic">～</span>
ところが、HTML5規格では、<i>タグは、声や心の中で思ったことなど、他と区別したいテキストを表す際に使用することになっています。 こう言われてもピンときません。表示は、斜体です。
アルファベットの斜体には、違和感はありませんが、日本語を斜体にすると違和感があり、筆者は使っていません。そもそも日本語には、楷書とか行書とかの区別はありますが、斜体という概念はありません。ＭＳ ゴシックには、斜体文字が用意されていないので、ブラウザが斜体にして表示しているとのことです。ところで、メイリオで日本語に斜体を指定しても斜体になりません。メイリオには、「イタリック」というスタイルが用意されているけれども、斜体になっていないそうです。ただし、アルファベットは、斜体になります。 <i>日本語、windows</i> を表示させると下のようになります。
日本語、windows
日本語は、メイリオでは、斜体にならないので、「ＭＳ Ｐゴシック」を使って斜体なしと斜体を表示してみましょう。表示を下に示します。
日本語の斜体、Windows
日本語の斜体、Windows
4. <span>タグ
<span>タグはそれ自身は特に意味を持っていませんが、 <span>～</span>で囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。例えば、文章中の特定の文字に色を付けたり、文字サイズを大きくしたりするときに使います。
5. <hr>タグ
<hr> タグは、旧規格では、水平線として使っていました。ところが、html5になると様子が変わり、「HTMLクイックリファレンス」によると、「<hr>タグは、段落レベルのテーマの区切り、セクション内における話題の区切りを表す際に使用します。 例えば、物語におけるシーンの変わり目や、参考書のセクション内で別の話題に移る箇所などです。
また、hr要素は、HTML 4.01では水平線（horizontal rule）が描画されると定義されていますが、 HTML5ではテーマ・話題の区切りを表す要素であり、水平線の定義はありません。 ただし、一般的なブラウザではHTML5の文書でhr要素を使用した場合にも、当面は今まで通り水平線が描画されると思われます。」となっています。「当面は今まで通り水平線が描画される」とありますが、私は、一般的なブラウザでは、ほゞ永久に水平線が描画されると考えています。旧規格では、タグにいろいろな属性がありましたが、html5では、廃止になるようです。いろいろなオプションは、cssによることになります。そこでどのようなことができるかやってみました。下図を見てください。widthで線の長さを変えることができるか、heightで線の幅を変えることができるか。線の長さがわかるよにwrapper にwidth:600px; を指定しています。
ブラウザの表示は、下の画面を見てください。Firefoxが他のブラウザと少々異なります。
6. 引用タグ <blockquote>
<blockquote>タグは、他の情報源からの引用・転載セクションであることを表す際に使用します。よい例がないので、「HTMLクイックリファレンス」の例を使わせてもらいました。HTML文は、下図を見てください。
Edge表示は、下図です。引用文の上下左右に空きができています。
7. <small> タグ
旧規格HTML4.01では、文字サイズをワンランク上の大きさにするとき、<big></big>で挟み、文字サイズをワンランク下の大きさにするとき、<small></small> で挟みました。要するに textの文字サイズを変えるのが目的でした。
HTML5では、<big>が廃止され、<small>は、「免責・警告・著作権などの注釈や細目を表す」タグになりました。ただし、textの文字を小さくするのは、変わりありません。「HTMLクイックリファレンス」には、「<small>を複数の段落、複数のリスト、複数のセクションなどの長いテキストに対して使用するべきではありません。」とのコメントがありました。指定状況は、下図を見てください。参考までに、指定なし(16px表示になります)、文字サイズ14px、12pxの指定を入れておきました。
表示結果をみると、<small> で指定した文字サイズは、13pxです。
8. アンダーラインの引き方
旧規格HTML4.01では、文字を<u></u>で挟めば、アンダーラインが引けました。ただし、非推奨で、css指定を推奨していました。HTML5では、<u>タグは、廃止されますので、スタイルシート指定のみとなります。指定は、<span style="text-decoration:underline"></span> で、少々長いです。指定状況は、下図を見てください。参考までに、<u></u>指定も載せておきます。
9. 打消し線の引き方
旧規格HTML4.01では、打消し線は、<strike></strike>と<s></s>の２つがありましたが、いずれも非推奨で、推奨は、スタイルシート指定でした。HTML5では、当然スタイルシート指定です。指定は、<span style="text-decoration:line-through"></span> で、これも少々長いです。指定状況は、下図を見てください。参考までに、<strike></strike> と<s></s>指定も載せておきます。
10. 特殊文字
「<」 や 「>」 は、タグに使われているので使用できません。特殊文字は、特別な記述が必要です。よく使う特殊文字を下表に示します。
| 空白コード(半角スペース) | |
| < | < |
| > | > |
| & | & |
| " | " |
| ¥ | ¥ |
| © | © |
| ® | ® |
上表以外の特殊文字は、ココを見てください。
11. ブロックレベル要素とインライン要素
HTML関係の資料を見ていると、ブロックレベル要素とかインライン要素という言葉が出てきます。これらの言葉を知らないと書いてあることが理解できなくなるので、ここで紹介しておきます。画像以外は、ほとんど「HTMLクイックリファレンス」内の文章の転載です。
HTMLで定義されている要素のうち、<body>～</body>の中で使用される要素の多くは、 ブロックレベル要素（Block-Level Elements）か、インライン要素（Inline Elements）に分類されます。 この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められています。
ブロックレベル要素（Block-Level Elements）
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。
ブロックレベル要素には、今まで出て来たものでは、以下のものがあります。
文章だけでは、ピンと来ないでしょうから画像にしてみましょう。下図の上側のHTMLは、ブロックレベル要素の <h3>、<p>、<ul>、<table>、<p> 使って記述しています。わかり易くするために背景を灰色に指定しました。これをEdge表示したものが、下側の画像です。それぞれは、前後に空き行が入り、横に並ぶものはなく、すべて縦に並んでいます。ブロックを積み上げたようです。ですから、ブロックレベルと言うのではないでしょうか。
インライン要素（Inline Elements）
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
インライン要素には、今まで出て来たものでは、以下のものがあります。
これも画像にしてみましょう。下図の上側のHTMLは、ライン要素の<b>、<span>、<img>を使っています。わかり易くするためこれにも背景に灰色を指定しました。これをEdge表示したものが、下側の画像です。縦に並ぶものはなく、すべて横に並んでいます。要するにラインになっています。
以上でブロックレベル要素とライン要素の違いが理解できたと思います。
配置ルール
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。
正：ブロックレベル要素の中にインライン要素を配置
<p><strong>段落となります。</strong></p>誤：インライン要素の中にブロックレベル要素を配置
<strong><p>段落となります。</p></strong>複雑なHTML文になると、タグの中にタグを入れる（いわゆる入れ子）使い方をしますが、そのルールを知っておかないとトラブルになります。このサイトは、入れ子についてよくまとめてあります。わからなくなったときは、見てください。
この項目終了に当たって
以上で「ブロックレベル要素とインライン要素」の説明を終りますが、実は、「ブロックレベル要素とインライン要素」は、HTML5規格ではなく、HTML4.01規格で定義されたものです。ここの内容が理解できていないと、HTML文が正しく作成できませんので、内容をよく把握しておいてください。
HTML5規格では、「ブロックレベル要素」と「インライン要素」の区別はなくなり、「コンテンツ・モデル」というものが登場します。「コンテンツ・モデル」については、ココに載っていますが、いくら読んでもよくわかりません。今後、勉強し理解できたところで、この下に掲載します。
12. display プロパティについて
displayプロパティは、ブロックレベル・インライン等の、要素の表示形式を指定する際に使用されます。値は、「HTMLクイックリファレンス」によると17ヶもありますが、使えそうな inline、block、inline-block、inline-table について説明します。
値 inline
inline は、ブロックレベル要素をインライン要素にするとき使います。
例えば、<h1>神社参拝</h1>として使うと<h1>は、ブロックレベル要素のため改行されるので、見出しの後に文字を入れることができません。ならば、<h1>にdisplay:inline指定してみましょう。下図を見てください。神社参拝の見出しの後に文字が入っています。<h1> がインライン要素になったからです。
値 block
blockは、インライン要素のものをブロックレベル要素にするとき使います。<img>は、インライン要素なので、横に並びます。そこで、ブロックレベルに指定してみましょう。下の図を見てください。blockを指定すると、文字、画像、文字が縦に並びます。ブロックレベル要素になったからです。どんなところに応用できるでしょうか。
値 inline-block
inline-blockは、ブロックレベル要素をインライン要素にしますが、内部は、ブロックレベル要素の機能が保持され幅や高さ、margin や padding を指定することがでいます。
display ; inline-block; は、第６節で <li> に適用しました。 <li> は、ブロックレベル要素ですから、縦にしか並びませんが、インライン要素になったので、横に並ぶようになりました。また幅寸法が指定できました。第６節を思い出してください。第６節で作成したものを下に示しておきます。
上の図のCSSで、値の inline-block を inline に変更してみましょう。すると、<br>を使って改行しているので、下図のように縦方向に並びます。
そこで、<br>を削除すると、inline ですから横にきれいに並びます。
値 inline-table
HTML文を作っていると表を横に並べたいときがあますが、<table> は、ブロックレベル要素ですから横には並びません。そこで、inline-table を適用すると横並べができそうです。やってみましょう。まずは、通常の記述です。下図を見てください。縦並びです。
次に display : inline-table;を指定しますと、下のように横並びになりました。
表間には、5pxの空きができています。２番目の表に margin-left:-5px;とマイナス margin 指定すると表を接続することができます。下図をみてください。
13. 中途の文字の頭を揃える
（ 全面的に見直しました。'15/11/22 ）色々な文章を作っていると、例えば、下記のようなケースに出くわします。文字を書いてその後に空白を置いて日付を書くというようなときです。空白に、スペースを使うと、文字がプロポーショナルフォントの場合は、日付の頭は、簡単には揃いません。
白山比咩神社参拝 2012.11.27浅間神社参拝 2012.08.03
以下に二つの方法について説明します。
【<span>にinline-blockを適用して頭を揃える】
<span>に inline-block を適用すると幅を設定できます。白山比咩神社参拝は、8字ですが、空白を4字追加して全体を12字にしてみます。CSSとHTMLは、下図となります。スペースは、使っていません。
<span> は、インライン要素ですから幅を指定することはできませんが、inline-blockを指定しましたので、幅の指定が可能になりました。指定幅の後に次の文字が来るので、頭が揃います。
<span>は、ここだけで使用するならこれで問題ありませんが、<span>は、通常、同じページ内であちこちで使うことが多いです。このようなときは、<span>専用のclassセレクタ―、例えば .atama を設定し下図のように指定します。
上の例は、2行ですが、10行とか20行になるといちいち<span class="atama">と記述するのは、面白くありません。これを解消するためには、id または classセレクタの枠を作ってその中に入れ、spanは、枠の中での働きとして指定します。このように書いてもよくわからないと思います。むしろCSSを見た方が理解できるでしょう。それでは、枠は、idセレクタにし#nakawakuとします。これでCSSとHTMLを記述すると下のようになります。#nakawaku と span の間に半角スペースを入れます。#nakawaku span は、「中枠の中にあるspanは、」と解釈すれば、わかり易いです。中枠外にあるspanには、適用されません。
行数が多いときは、これだとスッキリします。なお、上では、#nakawaku としましたが、classセレクタにし .nakawaka でもOKです。
セレクタの間に半角スペースを入れたものは、子孫セレクタと呼ばれます。子孫セレクタについては、12節「スタイルシートのいろいろな使い方」で説明していますので、読んでいただくと理解が深まります。
【定義リストを使って頭を揃える】
(1) 定義リストは、<dl><dt></dt><dd></dd></dl> です。<dt></dt> と <dd></dd> は、行が異なり２列になってますが、この両方に float:left:を指定して一列にします。float は、「８．地図の挿入」のところで学びました。定義リストは、同じページで他にも使うと考え、ここでは、「区分け」と考えclassセレクタを .kuwake とします。CSSを下に示します。dl.kuwakeには、何も指定するものがないので、指定していません。dtの幅は、12文字の12emを指定し、ddには、7emを指定しました。では、これをEdgeで表示させてみしょう。
(2) 「浅間神社参拝」が「2012.11.27」の後に回り込んでいます。この原因は、「白山比咩神社参拝」の行の float:left がクリアされていないためです。クリアするには、セレクタ dl.kuwake dt に clear:both; を追加します。追加すると下のようになります。
(3) 文字の並びは、正常になりましたが、文字は、wrapperの枠から外れています。この原因は、「浅間神社」の行の float がクリアされていなからです。クリアするには、通常は、次のタグで指定しますが、ここでは、次がないので、
<p style="clear:both"></p>（または、<div style="clear:both"></div>）を追加します。
(4) これでwrapperの枠の中に文章が入りました。<dl>は、通常上下に空き行が入りますが、float属性を使ったため下部の空き行はなくなっています。上部の空き行をなくしたいときは、dl に margin:0 を指定します。
これで完成のはずですが、画面をよく見てください。dt には、12em(12字)を指定していますが、12字よりかなり後に日付が出て来ています。これは、何故でしょうか。これは、dd が、defaultで字下げされているからです。「５．リスト（箇条書き）」の中の定義リストのところを見ればわかります。
それでは、どのようになっているか、dt と dd に灰色の背景色を付けてみましょう。CSS と Edge表示を下に示します。
(5) dt と dd の間に40pxの空きがあります。これは、ddには、defaultでmargin-left:40px;が設定されているからです。それでは、この空きをなくしましょう。それには、dd に margin-left:0; を指定します。下にCSSとEdge表示を示します。
(6) これで指定どおり12emの後に日付が出現しています。それでは、最終のCSSとEdge表示を下に示します。これで完成です。
(7) ところで、下のように３列の場合は、どうすればよいでしょうか。
白山比咩神社参拝 2012.11.27 加賀国一宮浅間神社参拝 2012.08.03 甲斐国一宮
<dt></dt> の下には、<dd></dd>は、１組だけではなく複数組使用することができますので、これを追加します。幅（width）を変えないときは、<dd></dd> をそのまま使用できます。
(8) 出来ました。ところで、３列目の加賀国一宮のところの文章が長いため幅を広くしたいときは、どうすればよいでしょうか。そのときは、CSSは、下のように記述します。
セレクタは、dl.kuwake dd.tsuika という記述になります。dl.kuwake と dd.tsuika との間に半角スペースを入れます。.tsuikaとしましたが、好きな名前にしてください。詳細説明はしませんが、じっくり見ていただければ、理解できると思います。なお、文章が長くなりwrapperの幅に入らなくなるので、dt の width は、12em を 10em に変更しています。
(9) 出来ました。以上で終わりにしたいところですが、いろいろ考えるといろいろな方法が浮かんできます。上で説明した span を dt の中で使うとスッキリしそうです。やってみましょう。CSSを見れば、わかると思いますので、CSSを下に示します。
(10) できました。CSSもHTMLもスッキリしています。
別な方法として、.kuwake という枠を作り dl、dt、dd、span は、子孫セレクタとする方法もあります。CSSを下に示します。
出来ました。これもスッキリしています。どの方法を採用するかは、制作する画面の状況により決めてください。
以上で「中途の文字の頭揃え」を終了します。
14. vertical-align プロパティについて
(1) vertical-align とは、縦方向配置です。インライン要素とテーブルセルには、vertical-align プロパティを指定することができます。まずは、<img> について説明します。値は、９種ありますが、使えそうな値は、baseline、top、middle、bottom、「数値＋単位」です。baseline は、defaultです。「数値＋単位」を除いて一回で説明するために、トップに配置するclassセレクタを .ver_top とし、中間に配置する classセレクタを .ver_middle とし、下端に配置する classセレクタを.ver_bottom としてCSSを下のように記述します。
(2) Edge表示は、下の画像です。top 配置とmiddle 配置は、理解できると思います。baseline 配置は、文字の下側より少し上に配置されており、一方、bottom配置は、文字の下側より少し下に配置されています。これは、「HTMLクイックリファレンス」をじっくり見ていただければ、理解できると思います。baseline は、日本語文字の下側より少し上方にあり、bottom ラインは、日本語文字の下側より少し下方にあるからです。
(3) 皆さんは、baseline と bottom のうちどちらを指定しますか。画像の下側と日本語文字の下側を一致させるには、値として「数値＋単位」を使えば実現できます。数値がプラスなら画像は、上方に移動し、マイナスならば、下方に移動します。baseline 配置では、画像が 2px 程度上方に上がっていますので、「数値＋単位」として -2px を指定してみましょう。CSSとEdge表示を下に示します。
「数値＋単位」で画像の下側と日本語文字の下側を一致させることができました。
(4) 「６．画像の横並べ」のところで、画像と説明文の間隔を margin-botom:-4px;と指定ましたが、vertical-align:-4px; と指定しても実現できます。
(5) ところで、top配置やmiddle配置を使うことは非常に少ないと思います。私は、第１１節の2.2(2)で middle 配置を使いました。第１１節のページを開き右クリックしてソースを見てください。
(6) 以上は、インライン要素である<img> の vertical-align ですが、テキストの vertical-align は、かなり複雑です。使うことは少ないと思いますので、ここでは、解説は、省略します。興味のある方は、「HTMLクイックリファレンス」を見てください。
(7) 次は、テーブルのセルの vertical-align 指定です。下のテーブルで考えてみましょう。「あいう」の後に<br>を入れて改行し２行にしています。「いろは」は、上下中央配置になっています。
| 1 | 2 |
|---|---|
| いろは | あいう かきく |
(8) それでは、「いろは」のセルのvertical-alignに top、middle、bottom、baselineを指定してみましょう。CSSは、下表に示しますが、タグの中にstyleで指定しました。
(7) Edge表示を下に示します。
| 指定なし | top指定 | middle指定 | bottom指定 | baseline指定 | 2 |
| いろは | いろは | いろは | いろは | いろは | あいう かきく |
(9) 表を見れば、top、middle、bottom の指定は、理解できると思います。ところが、baseline 指定が、top 指定と同じになっています。これは、セルの本来のbaselineは、ここよということだと思います。また、無指定は、middleと同じになっていますが、これは、ただフロートしているだけと考えるべきと思います。
15. 画像の下に謎の空白ができる
(1) 下に示す枠付き文章の下に画像を入れたHTML文を作成してみましょう。こういう画面は、よく作ると思います。
(2) これを実現するHTML文は、下記です。
(3) 上記をEdge表示すると下図のようになりますが、よく見ると下の画像の下に空きができています。これが謎の空白です。
これは、謎でもなんでもなくHTML5規格の仕様によるものです。HTML4.01以前の規格では、この空きは、発生しませんでした。HTML文の最初に <!doctype html> を記載しますが、これは、HTML5規格に従って表示してくださいということを表しています。HTML4.01規格に従うなら、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">と記載します。何も記載しないと更に古い規格によることになります。
(4) HTML5の仕様とは、文字列がなくても文字列があるとして、そのbaselineに画像の下端を合わせるのです。それでは、実際に文字列を表示してみましょう。現在、枠の幅は、600pxですが、620pxに変更し画像の後にgとyを入れてみます。gとyは、baselineより下に文字の一部が出ています。下の図を見てください。画像の下端は、文字列のbaselineに一致していることがわかります
(5) それでは、空きをなくすには、どうすればよいでしょうか。それには、画像に vertical-align:bottom を指定することです。CSSの中で imgセレクタに指定すると画像と説明文字間の空きもなくなるので、下部に挿入した画像に直接指定します。下の画面をみてください。
(6) 上書き保存しEdgeを開くと空きがなくなっています。
以上で謎の空白の説明を終りますが、画像を扱っているといろいろな問題が出て来ます。そのときは、十分熟慮して処理してください。
16. 同じページの特定のところへ飛ぶ
現在見ているこのページのトップの方に「特殊文字」という文字がありますが、これをクリックすると「特殊文字」が説明してあるところへ飛びます。どのようにすれば、これができるか説明します。
(1) 到達点（リンク先）にある任意の要素に、ID（識別名）を付けておきます。「特殊文字」の場合は、リンク先は、「■特殊文字」 という見出し文字のところです。ここには、見出しタグ <h2> を使っていますので、この中に <h2 id="abc"> のように id="abc" を記入します。abcが識別名です。識別名は、大文字小文字が区別され、数値が先行してはいけないことになっています。例えば、a1 は、よいけれども 1a は、ダメということです。
(2) リンクの出発点（リンク元）は、「特殊文字」ですから、
<a href="#abc"> 特殊文字 </a>
のように記述します。abc の前には、必ずシャープ(#)を付けてください。
17. 他のページの特定のところへ飛ぶ
例を使って説明します。「５．リスト（箇条書き）」の中に「番号付リスト」という項目があります。今見ているこのページから「番号付リスト」に飛ぶようにします。
(1) 「５．リスト（箇条書き）」のファイルは、html205フォルダの中にhtml205.htmlという名前で入っています。このファイルをTeraPadで開きます。「番号付リスト」のところは、
<h2>番号付リスト</h2>
となっています。これに識別名 abc を下のように入れます。
<h2 id="abc">番号付リスト</h2>
(2) 次にこのページのどこかにリンクを記載しますが、このページは、html205フォルダと同じ階層のhtml210フォルダに入っていますので、リンクは、下のように記載します。
<a href="../html205/html205.html#abc">番号付リストへ</a>
abcの前に # を付けます。リンクを張った「番号付リストへ」の文字をクリックすれば、「５．リスト（箇条書き）」ページの番号付リスト画面が表示されます。
18. ページのトップへ戻る
ページが縦に長い場合、下からまたスクロールして上へ戻るのは少々面倒です。このようなとき、同じページのトップに移動するリンクがあれば便利です。
しばらく前までは、ページのトップの方に識別名を付ける必要がありましたが、最近のブラウザでは、下の記述のみでトップページへ戻ります。topという識別名を付けていませんが、リンク元に#topを使います。
<a href="#top">ページのトップへ</a>
私の例を紹介します。文字を一回り小さくし右配置にしました。そのためには、gotop というclass名を付け、下のようにCSSを記述します。
.gotop{font-size:14px;text-align:right}
そして、必要なところに下のようにリンク元を記述します。
<p class="gotop"><a href="#top">▲ページのトップへ</a></p>