投稿の小技>画像の左側に文章が配置されてしまう>画像の下に文章がくるようにしたい

ホームページで画像の左右いずれかに文字列を配置するのは、スタイルシートでいうと「回り込み」の機能によります。

20151227-04

ということは、画像の下に文字列がくるようにするには、この「回り込み」をしないことですね。

なお、現在、左の画像は、配置を「なし」ではなく「左」にしているのでたので、この文字列は、画像の右側に配置されています。

では、例えば、先頭の文章の一部のみを画像の右側に回り込ませて、残りは、画像の下に配置させたいときは、どうするか、です。

年賀状のサンプル

エンターを何度も押して、改行、改行で画像の下に文章を押しやる、という方法もありますが、ソースを見ると、改行だらけになってしまいます。

この文字列→は、私のパソコンの画面では、画像の下に配置されていますが、これは、何度もエンターキーを押して、押し下げた結果、画像の下に配置されています。

これをエンターキーを押さないで、スタイルシートの設定で画像の下に文字列を配置してみます。

回り込みの解除の書式は、「clear:値」ですので、画像のタグの下に、下記のスタイルを設定してみました。

<p style="clear: both;"> </p>

具体例

回り込みの解除をしない場合

年賀状のサンプル左の画像は、配置を「左」にしたので、今この文字列は、画像の右側に配置されています。

仮に下記の文字列からは、画像の右側ではなく、画像の下に配置させたい、と考えたとしても、続けて文字列を入力していくと、文字列は、画像の右側に配置されていってしまいます。

そして、画像の高さを超えて、はじめて、文字列は、画像の下に移動していきます。

回り込みの解除をした場合

年賀状のサンプル

まずは、画像の右側に文字列を配置したいので、画像の配置は「左」にします。

ここから下の文章は、画像の下に配置したいので、<p style="clear: both;"> </p>を使います。

今書いている文字列は、<p style="clear: both;"> </p>を使っているので、画像の下に配置されているはずです。

なお、段落の場合には、<h3 style="clear: both;">画像の下に配置したい文字列 </h3>などとなります。

  • このエントリーをはてなブックマークに追加
ログイン