インライン

2015.09.25

インラインとは

ラインは線または行であり、インラインとは線や行の内部、あるいは線や行の部品のことである。デジタルドキュメントにおいて、インラインという言葉は、さまざまな使われ方をする多義語である。ここではレイアウトにおけるインラインと記述方式のインラインに分けて例を挙げて説明してみる。

 

もっと詳しく!

レイアウトにおけるインライン

テキストのレイアウトにおいて、インラインとは行内ということを意味する。ただし、1つの行だけではなく、改行により複数の行にまたがることもある。

(1)インライン画像

文字コードで表したテキストの中で外字を画像で作成して埋め込むときは、画像はテキストと同じ大きさでひとつの行に配置する。このように、行の中に置く画像をインライン画像という。インライン・イメージまたはインライン・グラフィックスも同じ意味である。

(2)インライン数式

文章において、数式は、通常、適切な幅と高さをもつ領域に書き、地のテキストと別に配置する。これをブロック数式またはブロック・モードという。これに対して地のテキストの行中に数式を書く方法をインライン数式またはインライン・モードという。インライン数式を書くときは、数式自体を行内に横に広げて書くと段落内の行間が均一になり見やすい。例えば分数は、ブロック・モードでは上下に、つまり分子を上に書き、横線で区切って、分母を下に書く。インライン・モードでは、横に、つまり最初に分子を書き、区切りの「/」を置いて次に分母を書く。TeXやMathMLのような数式記述言語ではブロック数式とインライン数式を使い分けできる。数式の中で改行するとき、インライン数式は2行以上に跨る。

(3)CSSのインラインボックス

CSSはボックスモデルというレイアウト方式でコンテンツを配置する。幅と高さをもつ領域をブロックといい、その中でインラインレベルのボックスを水平に並べることをインライン・フォーマッティングという。インライン・フォーマッティングとは行を作ることである。

例えば、段落(p要素で囲った範囲)の中に、地のテキストがあり、地のテキストの一部に弱い強調(em要素で囲った範囲)、強い強調(strong要素で囲った範囲)があるとする。このとき、p要素が作る段落領域がブロックとなり、地のテキスト、em要素、strong要素がインラインボックスを作る。

インラインボックスは行を構成する。インラインボックスはボックスの幅の位置で2つの行に分割されることもある。

記述方式としてのインライン

次に挙げるいくつかの例のように、ある文脈で表したコンテンツの中に、別の文脈のコンテンツを記述することをインラインと表現する。厳密な定義によるものではなく、やや曖昧な用語のようだ。

(1)CSS(Cascading Style Sheets)のインライン・スタイル

HTML文書にレイアウトをCSSで指定するには3通りの方法がある。

イ.HTML文書に外部のCSSファイルをリンクする。
ロ.HTML文書のhead要素の子供としてstyle要素を置き、そのstyle要素の内容としてCSSを記述する。
ハ.HTMLの要素にstyle属性を置き、その値としてCSSを記述する。例えば次のように記述する。
<h1 style=”color:blue;margin-left:2em;”>見出し</h1>

ハ.のように要素にスタイル属性を持たせることをインライン・スタイルと言う。しかし、HTML5の仕様書には単に、「HTML5ではすべての要素にstyle属性の値を指定できる。これはCSSスタイル属性である。」と書かれているだけである。

(2)インラインSVG(Scalable Vector Graphics)とMathML(Mathematical Markup Language)

HTML4まではsvg要素やmath要素はHTML4で規定される要素ではなかった。このため、SVGやMathMLで記述したコンテンツは画像ファイルとして作成してHTMLとは別の対象として参照した。これに対して、HTML5ではHTMLの要素のひとつとしてsvg要素、math要素を記述できるようになった。これを「HTML5ではインラインSVGやインラインMathが使えるようになった。」という言い方で説明することが多い。但し、HTML5仕様書の中ではインライン(inline)という言葉は使われていない。

(3)インラインコメント

電子メールでは相手のメールに返信するとき、「インラインで失礼します」という言い方をすることがある。IT用語辞典やメールソフトの説明書などでは、相手のメールを引用して、そこに自分のコメントを挟むことをインラインコメントと表現している。メールの文章全体をひとつのラインとみて、相手の文脈の中に、別の文脈として自分のコメントを挟むことから由来しているようだ。失礼かどうかは別として、インラインという表現が当てはまるかどうかは曖昧である。

HTMLのインライン要素

HTMLでは長いことインライン要素、ブロック要素という区別が使われてきた。しかし、HTML5ではこの区別がなくなった。インライン要素、ブロック要素の分類は暗黙のうちにレイアウトで分類するものであるが、HTML5 ではこの区別がなくなったのはコンテキストをセマンティックスとレイアウトに分離する流れの一貫なのだろう。

(1)インライン要素とブロック要素

HTML4までは文書を構成する主な要素の種類としてブロック要素とインライン要素という区別があった。ブロック要素の代表は段落要素Pや区切り要素divである。ブロック要素の中には、他のブロック要素やインライン要素を含むとされており、インライン要素の代表例は、強調(em、strong)やインラインの範囲指定(span)などである。

このブロック要素やインライン要素という分類方法は、歴史的にはSGML(Standard Generalized Markup Language)の文書型定義に由来するもので、ブロック要素は大きめの構造を表し、インライン要素は小さ目の構造を表す。しかし、むしろ暗黙のうちにレイアウト方法にもなっていたようだ。つまり、Pは段落という領域にレイアウトし、em、strong、spanなどは行としてレイアウトするという暗黙の了解である。

(2)HTML5

HTML5では、要素はコンテンツのセマンティックスの観点から分類されており、インライン要素とブロック要素という分類はなくなった。HTML5でもp要素は段落を表すものとして定義されている。ブラウザは、CSSのdisplay:blockレイアウトをデフォルト値としてもち、p要素は段落領域を作るようにレイアウトするが、p要素で段落を区切らないで、インラインのパラグラフマーク(U+00B6 ¶)で区切って、行内に連続してレイアウトしても構わないとされている。

[小林 徳滋 アンテナハウス株式会社 20150907]