【HTML入門】画像の位置を指定してテキストを回り込ませる方法

こんにちは!ライターのシホです!

みなさんは、HTMLで画像の位置を指定したいとき、

「画像を左右や中央にどうやって寄せるの?」
「テキストを画像の横に表示したいけどうまくできない!」

と悩むことはありませんか?

そこで今回は、HTMLで画像の位置を指定する方法と、テキストを画像の横に上手く表示する方法を解説していきたいと思います。

ぜひ参考にしてみてください!

目次

画像表示位置を指定する方法

左右に寄せて表示する

画像を左右に寄せる場合は、img要素にalign属性leftまたはrightを指定します。

基本構造
<img src=”画像ファイル名orURL” alt=”画像の内容” align=”leftまたはright”>

サンプルコード

<img src="かわいい犬.jpg" alt="犬" align="left">
<img src="かわいい犬.jpg" alt="犬" align="right">

ブラウザ表示

画像を左右に寄せる

中央に表示する

続いては、画像を中央に表示するやり方を解説します。

中央だからalign属性にenterを指定すればいいのでは?

と思われた方もいるかもしれませんが、実は画像に関してはimg要素のalign属性にcenterを指定しても画像を中央に表示することはできません。

画像を中央に表示するためには、divタグを使います。

divタグとは、ここからここまでが一つのくくりですよ〜という風にグループ化してくれる役割があります。

次のようにimgタグをdivタグで囲みalign属性にcenterを指定します。

サンプルコード

<div align="center">
  <img src="かわいい犬.jpg" alt="犬">
</div>

ブラウザ表示

画像を中央に寄せる

テキストの回り込み

回り込みとは

画像左文字回り込み

テキストの回り込みとは、このように画像を左に配置した場合、テキストを画像の右側に表示することです。

先ほど説明した、画像を左右に寄せて表示する方法にテキストを書くだけでできます。

では、画像を右に寄せて左側にテキストを表示する場合でやってみましょう。

サンプルコード

<img src="かわいい犬.jpg" alt="犬" align="right">ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。

ブラウザ表示

画像右回り込み

また、この文字の回り込みについてはCSSでfloatプロパティを使って画像にテキストを回り込ませることも可能です。詳しくはこちらのブログで説明しています!↓

回り込みの解除

テキストの回り込みを解除することもできます。

その場合は、回り込みをやめたい箇所に<br clear=”leftまたはrightまたはall”>を記述します。

画像が左にあるときの回り込みを解除する → 値にleftを指定する
画像が右にあるときの回り込みを解除する → 値にrightを指定する
画像が左右にあるときの回り込みを解除する → 値にallを指定する。

サンプルコード

<img src="かわいい犬.jpg" alt="犬" align="right">ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。<br clear="right">ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。ここにテキストがはいります。

ブラウザ表示

まわりこみの解除

<br clear=”right”>を挿入したところで画像への回り込みが解除されています。

プログラミングスキルを身につけ、仕事の幅を広げてみませんか?

この記事をご覧の方の中には、WEBサイトの製作や運用を仕事としている人もいるのではないでしょうか?そしてそんなあなたは、仕事の幅をさらに広げ、キャリアップやより好条件の案件を獲得したいと考えた事はないでしょうか?

HTMLやCSSなどのマークアップ言語はWEBの世界の基本ですが、例えばクラウドワークスなどでそれ単体の仕事を探しても数はある程度限られてしまいますし、単価も低価格帯になりやすかったりします。

しかし、JavaScriptやPHPなどのいわゆる「プログラミング言語」を扱えるスキルを身に付けると、一気に単価や幅が広がります。..とは言っても、プログラミング言語は習得するまでがなかなか大変ですよね。独学での挫折率は8割とも言われているほどです。

そこで、挫折せずにプログラミングスキルを身につけたいと考えている人にはスクールの利用をオススメ致します。

弊社「侍エンジニア」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。

その受講スタイルやサポートもあってか、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。

興味をお持ちの方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。

入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください!

無料カウンセリングの
予約はこちら

まとめ

いかがでしたでしょうか。

画像のテキストの回り込みを上手く操作できれば、Webページの表現の幅も広がってくると思います!

ぜひ実践してみてくださいね!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次