CSS で画像を囲むテキスト

Zeeshan Afridi 2023年6月20日

CSS CSS Image

CSS で画像を囲むテキスト
まとめ

CSS を使用すると、画像の周りにテキストをラップできます。これは、HTML で視覚的に魅力的で読みやすいレイアウトを作成し、最終的にコンテンツの読みやすさを向上させる優れた方法です。画像の左側または右側に回り込むように設定することも、画像の上部または下部に回り込むように設定することもできます。

CSS で画像を囲むテキスト

HTML では、画像をテキストで囲むさまざまな方法があります。最も一般的な方法は、align 属性を使用することです。

align 属性を使用して、挿入する画像の位置を指定できます。たとえば、align 属性を使用して、テキストの段落内で画像を中央に配置できます。

CSS を使用すると、それに応じてテキストを画像の周りに折り返すことを完全に制御できます。テキストはデフォルトで画像の周りを回り込み、画像の左端または右端とフラッシュします。

ただし、CSS の float プロパティを使用して、テキストが画像をどのように折り返すかを制御できます。

{
    float: left;
}

float プロパティを left に設定すると、画像がテキストの左側に浮き、テキストが画像の周りを回り込みます。 float プロパティを right に設定すると、画像がテキストの右側に浮き、テキストが画像の周りを回り込みます。

CSS の clear プロパティを使用して、テキストが画像をどのように折り返すかを制御することもできます。

clear プロパティを left に設定すると、画像はテキストの左側に浮き、テキストは画像を囲みません。 clear プロパティを right に設定すると、画像はテキストの右側に浮き、テキストは画像を囲みません。

{
    clear: left;
}

CSS の overflow プロパティを使用して、テキストが画像をどのように折り返すかを制御することもできます。 overflow プロパティを hidden にすると、画像がテキストの左または右に浮き、テキストが画像を囲みません。

{
    overflow: auto;
}

最後に、CSS の padding プロパティを使用して、画像とテキストの間のスペースを制御できます。

padding プロパティを 0 の値に設定すると、画像はテキストと同じ高さになります。 padding プロパティを 10px の値に設定すると、画像とテキストの間に 10px のスペースができます。

{
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

コード例:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Wrapping an Image with the text
        </title>

        <style>
            body {
                margin: 20px;
                text-align: center;
            }

            h1 {
                color: green;
            }

            img {
                float: left;
                margin: 10px;
                padding-bottom: 2px;
                width: 250px;
            }

            p {
                text-align: justify;
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <h1>Wrap Text Around Image</h1>
        <b>
            The output of wrapping text around an image
        </b>
        <div class="square">
            <div>
                <img src="replaceYourImageHere.jpeg" alt="Longtail boat in Thailand" />
            </div>

            <p>
                There are a few different ways to wrap text around images in HTML; the most typical way is to use the `align` attribute. You can utilize the align attribute to specify the image position where you want to insert it.
                For instance, you can utilize the `align` attribute to center an image within a paragraph of text. With CSS, you are in full control to wrap text around an image accordingly. The text will default wrap around an image to flush
                with the image's left or right edge. However, you can use the CSS `float` property to control how text wraps around an image.
            </p>
        </div>
    </body>
</html>

まとめ

画像をテキストで囲むことも、Web サイトやブログの使いやすさを向上させるのに役立ちます。ページに多くのテキストがある場合、画像がテキストの真ん中にあると読みにくい場合がありますが、テキストの間に画像を使用すると、読みやすさと理解しやすさが向上します。

著者： Zeeshan Afridi

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.

CSS で画像を囲むテキスト

まとめ

関連記事 - CSS Image