【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割とも言われているほどです。

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

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

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

「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年11月5日

興味をお持ちの方は、まずはお気軽に弊社の無料体験レッスンを利用してみてください。

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

無料体験レッスンの
予約はこちら

まとめ

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー