floatで異変が…

準備通りに行かなかった件

専門学校でコマを受け持っていているんだけれども、HTML+PHP+MySQLの講義で、事前の準備とは裏腹に、予想を裏切る事柄があったので、今後のためにも…。

HTMLにCSSでレイアウトの説明をするために、いくつかサンプルを提示して、動作の確認を行わせている時のこと。

図のように、ブロック要素にfloatを設定して、後述の文章が回りこませる例を説明していた。
もちろん、事前にサンプルを作成し、正しく表示されることも確認済み。
そこで、文章は短いと回り込みが分からないので、適度にコピーで構わないから、テキストを入力するよう指示を行った。
ソースは以下の様に示して練習。

<p class="box1">box-1</p>
<p class="box2">box-2</p>
<p>文章が長い場合。…… </p>

殆どの学生は、同様なソースを作成し、フムフムと…。 しかも例示しているので、「文章が長い場合。」を連続して確認している。

ところが…。

1名だけ、動作がおかしいですと…。見ると、確かに回りこみはされず、しかも、改行を入れるとそこで改行されて表示される。ソースをよく見たけど、設定に問題は無さそう。
そして、改行してみると<pre>でもないのに、改行されて表示される…。


chromeのDeveloper ToolでCSS等も確認してみたものの、何らサンプルと相違なし。もしやと思い、<p>aaaaaa…</p>を日本語に置き換えてみたら、正しく動作。

そう、サンプルが英字だけだったため問題が発生していたのだった。本来英語はスペースで単語を区切るため、スペースで回りこみを実行する。もちろんnowrap指定しない場合。
ところが、スペース無しで「a」だけを続けて入力したため、非常に長い単語と判断しているようだ…。改行を入れるとそこで、単語の区切りと認識するもののfloat指定したboxの隙間よりも単語が長いために、下に追いやられていたという事が判明。

おかげで、こちらも良い勉強になりましたわ。こちらの予想外のサンプルを作ってくれる学生のお陰で、一つ勉強になりました。まあ、実務でそんな状況は発生しないものの、こういった経験は、役に立ちます。

設定に問題がないので、一見バグでは？と思ってしまうものの、日本語と英語の相違によるものですね…。

深く心に刻み込んだのだった…。