【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歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

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


自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

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

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

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

最新情報をお届けします

書いた人

シホ

シホ

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