徒然なるままに

準備通りに行かなかった件 専門学校でコマを受け持っていているんだけれども、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の隙間よりも単語が長いために、下に追いやられていたという事が判明。 おかげで、こちらも良い勉強になりましたわ。こちらの予想外のサンプルを作ってくれる学生のお