2.8 CSSの基礎６（配置）
配置に関しては、CSSの仕様はとても怪奇だ。シンプルでわかり易いとはとても言えない。
最初は、positionプロパティをみっちり勉強すればよいのだろうと思っていたが、 他にも便利な指定方法、display、floatなどがあることがわかり、少々焦っている。 最近はやりのグリッドレイアウトも課題の一つだ。
| メリット | デメリット | |
| positionプロパティ | 配置の細かな指定に向いている。要素を重ねたりする場合には特に向いている。 | 画面サイズの変更による調整が難しい。設計に失敗すると画面の大きさの違いにより要素同士が重なることもある。 |
| floatプロパティ | 横並びなど単純なレイアウト作成、小さな変更などに向いている。要素の重なりなどの心配はない。 | レイアウトやページの構成に影響する複雑な配置には向かない。 |
| displayプロパティ | 横並び、縦並びなど単純なレイアウト作成、小さな変更などに向いている。floatに比べて、様々な値のオプションが用意されており、使用の幅がある。 | 複雑な配置には向かない。 |
上記の表は、Creiveというサイトの一つの記事から拝借したものだが、 たいへん参考になる。
しかし、その前に、ブロック要素（ブロックレベル要素とも言う） とインライン要素、そしてインラインブロック要素をしっかりと区別する必要がある。 そして、その属性をdisplayで設定できる。
【タグと要素】
タグとか要素とかを何気なしに使ってきたが、タグと要素は意味がまったく異なる。
タグについては開始タグ<div>、終了タグ</div>、またはタグ<div>、divタグなどと使い、 そのままの意味で間違うことはない。
しかし、要素は少し難しい。タグと混同しやすいが、全く異なる意味で使われている。
div要素とは、<div>・・・・</div>とdivタグで囲まれた内容を指す意味である。
例えば、
<html>・・・・
<body>
<header>
・・・・
</header>
・・・・
</body>
</html>
を見ながら、html要素に中にbody要素があり、その中にheader要素がある、などと説明される。
タグと要素、一時期、私自身も混同していた。 いくつかのサイトを見ても、混同して使っているように見える場合もあるので、 臨機応変に対応するのがよいだろう。あまり深く考えてもつまらない。 言葉は流動的で、時代とともにまたは周りの環境によって変化するものだからだ。 しかし、Wikipediaでは「明確に区別し、用語も明確に使い分ける必要がある。」と書かれている。 やはり、混同しないようにしていこう。
2.8.1 displayプロパティ
html要素にpositionプロパティを何も指定しない場合static指定となっている。 この場合、位置指定関連の top, right, bottom, left, z-indexは使えない。 ただし、ブロック要素においては、ボックスモデル（html5ボックスモデルを参照）が使える。
しかし、html5では、html要素のインラインやブロック要素の分類がなくなった。 なぜなら、displayプロパティで自由に設定できるからだ。
そこで、まず最初に、displayプロパティについて学ぶことにする。
しかしながら、displayの設定は数多くあり、 すべてを網羅するのはここでは避けることにする。 とりあえず、以下の５つのみに限定して話を進める。
display: block;
display: inline;
display: inline-block;
display: none;
display: flex;
他の指定も数多くあるが、ここでは割愛
ほとんどの要素は、元々、インラインもしくはブロックの属性を持っているが、 displayを設定すると、その属性を変更することができる。
2.8.2 inlineとblock
よく使われるブロック要素のdivを使って、インライン指定すると、
<div class="igreen">abc</div><div class="igreen">abc</div>
<br>
abc
abcabc
<br>
<b>abc</b>
<b>abc</b><b>abc</b>
以下のCSSを<head>内に記述
<style>.igreen {
display:inline; background-color:green;
}
</style>
と記述すると、
abc abcabc
abc abcabc
と、表示される。ここでは、参考のため、文字列だけとインライン要素の<b>も載せた。
完全に、元々のインライン要素と同じように表示が行われていることがわかる。 ここでの要素divの働きは文字の背景色を緑にするだけである。
ちなみに、私もよくわかっていなかったのだが、空白以外に改行やタブがあると、１文字分の空白が入る。
htmlコード上で長い文章を記述する場合、見やすくするために適当なところで改行していたが、そこに空白１文字分が入ることは考えていなかった。 今後は、気を付けよう。
<b class="bgreen"><p>abc</p>abc</b>
<b class="bgreen">abc<p>abc</p></b>
<b class="bgreen">abc</b>
<div class="bgreen">abc</b>
<div class="bgreen"><p>abc</p>abc</div>
<div class="bgreen">abc<p>abc</p></div>
<div class="bgreen">abc</div>
以下のCSSを<head>内の<style>に記述
.bgreen {display:block; background-color:green;
}
.green {
background-color:green;
}
と記述すると、
abcabc
abc abcabc
abcabc
abcabc
のように、完全に<div>などの元々のブロック要素と同じ表示が行われる。
ブロック要素内の先頭にパラグラフ<p>があると、そのブロックの前に一行空白行が入る。
また、末尾にパラグラフ</p>があると、そのブロックの後に一行空白行が入る。
領域の考え方に照らすと、領域内に空白行が出来たほうが自然に感じるが、これが仕様だから仕方がない。
さて、パラグラフ<p>および見出し<h1>、<h2>、・・・はブロック要素の分類だと思っていたが、果たしてどうだろう。
<p class="green">paragraph</p>
<p class="green">paragraph</p>
<section class="green"><br>section<br></section>
<section class="green">section</section>
<section class="green">section</section>
<h5 class="green"><br>heading5<br></h5>
<h5 class="green">heading5</h5>
<h2 class="green">heading2</h2>
のように、pとh要素およびsection要素で同じように記述すると、
paragraph
paragraph
paragraph
section
heading5
heading5
heading2
のようになり、pとh要素は、sectionやdivと同じブロック要素でも、空白行の挿入という点で表示が異なっている。 要素pやhは、よく使うものだけに要注意である。 また、h5とh2では、文字の大きさは異なるにもかかわらず、挿入空白行の改行幅は、 pよりも大きめではあるものの、同じ改行幅であるということも、注意しておくべき点であろう。
ところで、要素内に記述した前の<br>はブロック領域の中に表示され、後の<br>は無視されている。 改行の意味なので当然と言えば当然の表示なのだが、このように改めて見ると少し不思議な感じがする。 要素内の最後に<br>を複数追加すると１コだけ無視され、他の<br>は有効となる。
今まであまり気にせずpやhを使っていたが、ここで改めて再認識することとなった。 忘れないようにしようと思う。
2.8.3 もう少しblockについて
前節で、div要素の中にp要素やh1,h2,・・・要素を入れると、div要素ブロックの外に空白行が入ることを見たが、 borderプロパティを設定して枠線を書くようにすると、その様相が変わる。
<div class="green"><p>abc</p>abc</div>
<div class="green">abc</div>
<br>
<div class="silver_bd"><p>abc</p></div>
<div class="silver_bd"><p>abc</p>abc</div>
<div class="silver_bd">abc</div>
以下のCSSを<head>内の<style>に記述
.silver_bd {background-color:silver;
border:1px solid black;
}
paragraph
paragraph
h2
h2
paragraph
paragraph
h2
h2
上段の緑色部分と下段の灰色部分は、緑を灰色に変え、枠線を書くようにしただけであり、それ以外は全く同じである。
明らかに、borderプロパティを変更し、枠線を書くようにすると、p要素の外にあった空白行がdiv要素の領域外から領域内へと変化したのがわかる。
さらに、枠なしの場合、空白行が２重にかぶっていた場合は小さいほうが無視されていたが、枠指定にするとしっかりと考慮されるようになり、全体の行数も増えている。
要素div（その他類似要素も同様）に含まれるpやh1,h2・・・の上下に設定される空白行は、divに枠を表示するように設定するとしっかりカウントされるようになり、背景色で塗りつぶされる領域が広がる。
さて、ブロック要素については、ボックスモデルのところで説明したマージン、ボーダー、パディング、横サイズ、縦サイズなどが設定できる。
それでは、よく使うブロック要素divを使って、何気なしに文字を埋め込むと、
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccc
ここはdiv要素の後
のようになることが、よく起こる。
div要素の中に書いた文字がボックスからはみ出し、後続の文書に重なった。
CSSでwidth:300px; height:50px; overflow-wrap:normal という指定にするとこのようなことが起こる。 overflow-wrap:normalもしくはword-wrap:normalは省略時の設定なので、widthとheightを指定しただけでoverflow-wrapが初期値のままなら同様に起こる。
height指定を削除し、overflow-wrap:break-wordを指定すると、
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccc
のように、単語の途中で改行し、内容に合わせて縦幅を自動調整してくれる。
heightを指定して、あふれた分を表示しない、もしくはスクロールバーを表示するなどの選択もできる。
overflow-wrap:normalが初期値なので、うっかりすると思わぬことが起きる。
英語文書では単語の途中で改行しないのが一般的だが、日本語文章は単語に関わりなく文字単位で改行するのが一般的。
初期設定もそれを反映し、アルファベット文字の場合は空白もしくはタブや改行のところで改行し、日本語文字の場合は文字単位での改行となっている。 しかし、日本語文章中のアルファベットは英文と見なされ、その部分は英語ルールが適用されることをうっかりすることが多い。ここも要注意。
次は、インラインブロックについて記述することにする。CSSの基礎について パート７である。