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

シホ
書いた人 シホ
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

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

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

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

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

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

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

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

左右に寄せて表示する

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

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

サンプルコード

ブラウザ表示

画像を左右に寄せる

中央に表示する

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

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

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

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

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

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

サンプルコード

ブラウザ表示

画像を中央に寄せる

テキストの回り込み

回り込みとは

画像左文字回り込み

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

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

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

サンプルコード

ブラウザ表示

画像右回り込み

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

回り込みの解除

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

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

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

サンプルコード

ブラウザ表示

まわりこみの解除

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

まとめ

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

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

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


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーランスをされている市川友哉さん。33歳で、プログラミングを学び始め、4ヶ月という短い期間でフリーランスエンジニアとして独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

シホ

シホ

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