ブログを教科書風にしておしゃれにする方法 HTML,CSS復習18
この記事でわかること
画像にテキストを回りこませる方法がわかる
みなさんこんにちは。 画像と文字を縦並びに配置するよりも..教科書風にしてスタイリッシュにブログを書いてみませんか？ ということで今回は画像にテキストを回りこませる方法を紹介していきます。
なかなかここまで凝っているブログはみないのでおしゃれですよ🌸
画像にテキストを回りこませるには
画像にテキストを回りこませるには"float"というのを使うんです。
なんのことかよくわからないと思うので実際にやってみましょう。
・左に画像を置きたい場合
img.left{
float:left;
}
float:left;
}
記事中
<p><img src="画像のURL" class="left">テキスト</p>
・右に画像を置きたい場合
img.right{
float:right;
}
float:right;
}
記事中
<p><img src="画像のURL" class="right">テキスト</p>
すると次のようになります。
・右に画像を置いた場合
ある男の家に旅の坊主が泊ったのだが急死してしまう。遺言で「桜の樹の下に埋め、春に掘りだせ」といわれたのでそのとおりにすると見事な達磨の掛け軸が出てきた。 時がたち、男は傷んだ掛け軸を店に修理に出した。だが引き取りにいくと、どうしたわけか同じ掛け軸が同時に六枚も修理に出されてて、店主も男もどれが本物かわからなくなった。 困ってそのまま帰ると、男の夢にあの坊主があらわれ「達磨の目を笹の葉でこすれ」と言った。そこで全ての掛け軸の達磨の目をくすぐると、一枚だけ達磨がまばたきをしたので本物と判明した。あの死んだ坊さんは達磨大師様だったのだろう。この掛け軸の達磨をずっと見ていると、パチパチとまばたきするそうだ
左に画像を置いた場合
ある男の家に旅の坊主が泊ったのだが急死してしまう。遺言で「桜の樹の下に埋め、春に掘りだせ」といわれたのでそのとおりにすると見事な達磨の掛け軸が出てきた。 時がたち、男は傷んだ掛け軸を店に修理に出した。だが引き取りにいくと、どうしたわけか同じ掛け軸が同時に六枚も修理に出されてて、店主も男もどれが本物かわからなくなった。 困ってそのまま帰ると、男の夢にあの坊主があらわれ「達磨の目を笹の葉でこすれ」と言った。そこで全ての掛け軸の達磨の目をくすぐると、一枚だけ達磨がまばたきをしたので本物と判明した。あの死んだ坊さんは達磨大師様だったのだろう。この掛け軸の達磨をずっと見ていると、パチパチとまばたきするそうだ
また途中で回りこみを解除するのにはfloat:clear;を使います。
pタグにclearクラスを作って次にように記述します。
img.left{
float:left;
}
p.clear{
float;clear;
}
記事中
<p><img src="画像のURL" class="right">回りこませるテキスト</p>
<p class="clear">回りこみ解除後のテキスト</p>
すると次のようになります。
ある男の家に旅の坊主が泊ったのだが急死してしまう。遺言で「桜の樹の下に埋め、春に掘りだせ」といわれたのでそのとおりにすると見事な達磨の掛け軸が出てきた。 時がたち、男は傷んだ掛け軸を店に修理に出した。
だが引き取りにいくと、どうしたわけか同じ掛け軸が同時に六枚も修理に出されてて、店主も男もどれが本物かわからなくなった。 困ってそのまま帰ると、男の夢にあの坊主があらわれ「達磨の目を笹の葉でこすれ」と言った。そこで全ての掛け軸の達磨の目をくすぐると、一枚だけ達磨がまばたきをしたので本物と判明した。あの死んだ坊さんは達磨大師様だったのだろう。この掛け軸の達磨をずっと見ていると、パチパチとまばたきするそうだ
これであたなのブログもおしゃれに！
料理の写真とかにも使えそうですね☆
次回はブログなのに...文字を動いちゃいます。
すごくわかりやすく説明します。
なので↓読者登録↓よろしくお願いいたします。
