ホームページで画像の左右いずれかに文字列を配置するのは、スタイルシートでいうと「回り込み」の機能によります。
ということは、画像の下に文字列がくるようにするには、この「回り込み」をしないことですね。
なお、現在、左の画像は、配置を「なし」ではなく「左」にしているのでたので、この文字列は、画像の右側に配置されています。
では、例えば、先頭の文章の一部のみを画像の右側に回り込ませて、残りは、画像の下に配置させたいときは、どうするか、です。
エンターを何度も押して、改行、改行で画像の下に文章を押しやる、という方法もありますが、ソースを見ると、改行だらけになってしまいます。
この文字列→は、私のパソコンの画面では、画像の下に配置されていますが、これは、何度もエンターキーを押して、押し下げた結果、画像の下に配置されています。
これをエンターキーを押さないで、スタイルシートの設定で画像の下に文字列を配置してみます。
回り込みの解除の書式は、「clear:値」ですので、画像のタグの下に、下記のスタイルを設定してみました。
<p style="clear: both;"> </p>
具体例
回り込みの解除をしない場合
左の画像は、配置を「左」にしたので、今この文字列は、画像の右側に配置されています。
仮に下記の文字列からは、画像の右側ではなく、画像の下に配置させたい、と考えたとしても、続けて文字列を入力していくと、文字列は、画像の右側に配置されていってしまいます。
そして、画像の高さを超えて、はじめて、文字列は、画像の下に移動していきます。
回り込みの解除をした場合
まずは、画像の右側に文字列を配置したいので、画像の配置は「左」にします。
ここから下の文章は、画像の下に配置したいので、<p style="clear: both;"> </p>を使います。
今書いている文字列は、<p style="clear: both;"> </p>を使っているので、画像の下に配置されているはずです。
なお、段落の場合には、<h3 style="clear: both;">画像の下に配置したい文字列 </h3>などとなります。
