ウェブページを見ると、テキストコンテンツと画像の組み合わせが表示されます。 これらの要素の両方は、ウェブサイトの成功に不可欠な要素です。 テキストコンテンツは、サイトの訪問者が読むものと、 検索エンジンがランキングアルゴリズムの一部として使用するものです。 画像はサイトに視覚的な関心を与え、テキストコンテンツを強調するのに役立ちます。
ウェブサイトにテキストや画像を追加するのは簡単です。 テキストは段落、見出し、リストなどの標準HTMLタグで追加され、イメージは要素でページに配置されます。 ただし、イメージをWebページに追加した後は、テキストをイメージの横に並べるのではなく、イメージの横に並べる（イメージがHTMLコードに追加されるデフォルトの方法でブラウザに表示されます）場合があります。 技術的には、CSS（推奨）を使用するか、 HTMLに直接ビジュアル指示を追加する（推奨しない、ウェブサイトのスタイルと構造の分離を維持したいので）、この外観を実現するには2つの方法があります。
CSSの使用
ページのテキストとイメージのレイアウトの仕方や、ビジュアルスタイルをブラウザに表示する方法を変更する正しい方法は、 CSSを使用することです。 ページ上の視覚的な変化（イメージを囲むテキストフロー）について話しているので、これはカスケーディングスタイルシートのドメインであることを覚えておいてください。
- まず、画像をあなたのウェブページに追加します。 そのHTMLから視覚特性（幅と高さの値など）を除外することを忘れないでください。 これは重要です。特に、レスポンシブウェブサイトの場合、ブラウザに応じて画像サイズが異なります。 Adobe Dreamweaverのような特定のソフトウェアは、そのツールで挿入された画像に幅と高さの情報を追加するため、この情報をHTMLコードから削除してください。 ただし、 適切な代替テキストを含めるようにしてください。 HTMLコードの表示例を次に示します。
-
- スタイリングの目的で、イメージにクラスを追加することもできます。 このクラス値はCSSファイルで使用されます。 この特定のスタイルでは、画像をどのように整列させるかによって、左または右の値を使用する傾向がありますが、ここで使用する値は任意です。 私たちは簡単な構文がうまく動作するようになり、将来サイトを管理しなければならない人にとっては理解しやすくなりますが、あなたが望む任意のクラス値を与えることができます。
-
- それ自身では、このクラス値は何もしません。 イメージは自動的にテキストの左に揃えられません。 そのためには、CSSファイルを参照する必要があります。
-
- あなたのスタイルシートに次のスタイルを追加できるようになりました：
- .left {
- float：left;
- パディング：0 20px 20px 0;
- }
- あなたがここで行ったことは、通常のドキュメントフロー（イメージが通常は表示され、その下にテキストが配置される方法）からイメージを引き出し、コンテナの左側にそろえるCSS "float"プロパティを使用することです。 HTMLマークアップの後に来るテキストは、それを囲んでいます。 また、このテキストが画像に対して直接浮かび上がるように、いくつかのパディング値を追加しました。 代わりに、それはページのデザインで視覚的に魅力的ないくつかの素晴らしい間隔を持っています。 パディングのCSSショートカットでは、イメージの上辺と左辺に0、左と下に20ピクセルを追加しました。 左揃えの画像の右側にパディングを追加する必要があることを覚えておいてください。 右揃えの画像（これから見る）は、左側にパディングが適用されます。
- ブラウザでWebページを表示すると、画像がページの左側に揃えられ、テキストがそのページの周りをきちんとラップすることがわかります。 これを言う別の方法は、画像が "左に浮かぶ"ことです。
- この画像を右に揃えるように変更したい場合（この記事に付属の写真の例のように）、それは簡単です。 まず、クラスの値が "left"のCSSに追加したスタイルに加えて、右揃えのスタイルも持っていることを確認する必要があります。 それは次のようになります：
- 。右 {
- フロート：右。
- パディング：0 0 20px 20px;
- }
- これは私たちが書いた最初のCSSとほぼ同じであることがわかります。 唯一の違いは、私たちが使用する "float"プロパティとパディング値（右ではなく画像の左側にいくつか追加する）に使用する値です。
- 最後に、HTMLの画像クラスの値を "left"から "right"に変更します：
-
- ブラウザであなたのページを見てください。あなたのイメージは、テキストをきちんとラップして右に揃えてください。 これらのスタイルの両方を、すべてのスタイルシートに追加する傾向があり、Webページを作成するときにこれらのビジュアルスタイルを必要に応じて使用できるようにします。 これらの2つのスタイルは、イメージをスタイルで囲む必要があるときにいつでも使用できる素敵で再利用可能な機能になります。
CSSの代わりにHTMLを使う（なぜこれをしてはいけないのか）
HTMLを使用してイメージの周りにテキストをラップすることは可能ですが、Web標準では、CSS（および上に示した手順）が構造（HTML）とスタイル（CSS）の分離を維持できるようにする方法です。 これは、一部のデバイスやレイアウトでテキストが画像の周りを流れる必要がないと考えるときに特に重要です。 小さな画面の場合、レスポンシブウェブサイトのレイアウトでは、実際にテキストが画像の下に揃えられ、画像が画面の全幅に広がっている必要があります。 これは、あなたのスタイルがあなたのHTMLマークアップとは別の場合に、 メディアクエリを使って簡単に実行できます。 今日のマルチデバイスの世界では、さまざまな訪問者や異なる画面でイメージとテキストが異なるように見えるため、この分離はWebページの長期的な成功と管理に不可欠です。