Web制作

【CSS】画像に文字を回り込ませる方法【コピペOK】

画像に文字を回り込ませたい人「画像に文字を回り込ませたいけど、どうすればいいんだ・・・まじでわからない。CSSとか理解不能だし、困る。いったいどうすればいいの?」

 

こんな疑問に答えます。

 この記事の内容

・画像に文字を回り込ませる方法【コピペOK】

・参考書籍を紹介

というわけで、画像に文字を回り込ませる方法について解説していきます。

よろしくです(/・ω・)/

※この記事は大体2分ほどで読めます。

画像に文字を回り込ませる方法【コピペOK】


では、実際にどのような手段で行っていくのか紹介していきます。

style.cssに記述するべき内容

以下のコードをstyle.cssに記述しましょう。

style.cssの記述に関してはこれで大丈夫ですね。

画像を左に回り込ませたい場合

以下のように使えば大丈夫です。

imgタグやpタグの部分には任意の画像や文章を入れてください。

画像を右に回り込ませたい場合

以下のように使いましょう。

具体例を紹介

実は冒頭の文も画像に文字を回り込ませています。

具体的には以下の画像の部分ですね。

上記の部分のソースコードを以下に記します。

こんな感じで使えば大丈夫です。

参考書籍を紹介


というわけで、今回の記事を書くにあたって参考にした書籍を紹介します。

デザインを学びたい方はやってみるのも良いかなと。

いちばんよくわかるHTML5&CSS3デザインきちんと入門

HTML・CSSの基本的な使い方やフレックスボックスについて学べる本です。

デザインの基本的な部分について学びたい方にはおすすめしたい1冊ですね。

ポップなデザインで書かれている本なのでやりやすいと思います。

おわり

では、この記事はここで終わりとなります。

ありがとうございました。

RELATED POST