【画像を表示】サイズ・位置・リンクの設定

スポンサーリンク



画像を表示させる

画像はホームページ作成でも、ブログの記事でも出番がとても多いですよね。

ブログに関しては、ほとんどのブログ作成サイトのツールに、画像を貼り付ける機能が備わっているかもしれませんが、HTMLタグを使った画像の貼り方の基本を知っておくと、後々便利だと思います。

ただ貼り付けるだけではなく、いろいろアレンジや小細工が可能になるからです!

ホームページやブログ内に画像を表示させるには以下のタグを使用します。

<IMG src=”画像のURL”>

ホームページ作成において、画像ファイルがHTMLファイルと同じフォルダにある場合、画像URLは「画像のファイル名」(○○○.gifなど)でも良いです。(相対パス)

別のフォルダにある場合は、ファイル名だけでは表示させることができないので、URL「http://~~」を使用して下さい。(絶対パス)

画像の大きさを変える

画像を表示させたい場所によっては、元の画像サイズのままでは、
大き過ぎたり、小さ過ぎたりすることがあると思います。

そんな時は、画像を表示させるサイズを指定して、ぴったりな大きさで表示させましょう。

画像サイズの指定には、width属性、height属性を使用し、
ピクセル値または%(ブラウザの大きさに対する割合)で、横幅、高さを指定します。

<IMG>内、src属性の後に入れます。

<IMG src=”画像のURL” width=”横幅” height=”高さ”>

画像のサイズを指定する場合は、画像が崩れないように縦横比に気を付けて下さい。

例)これは、横幅100px、高さ100pxの画像を
サイズ指定なしのものです。

これは、横幅50px、高さ50pxにサイズを指定したものです。

これは、横幅80px、高さ80pxにサイズ指定したものです。

画像の表示位置を調整する

文章の途中に画像を表示させた場合、

ソース

美味しそうな<IMG src=”https://tensikaku.com/wp/wp-content/uploads/2017/04/0-53-300×300.png”>ハンバーガーですね。

表示させると

美味しそうなハンバーガーですね。

このように、文字が画像底部の位置にに入ってますね。

align属性を使うと、この文字に対する画像の位置を指定することが出来ます。

<IMG src=”画像のURL” align=”位置”>

位置はtop、middle、bottomで指定します。

・top         :  上に揃える
・middle  :  中央に揃える
・bottom  :  下に揃える

例)上に揃える

美味しそうなハンバーガー<IMG src=”画像のURL” align=”top”>ですね。

美味しそうなハンバーガーですね。

例)中央に揃える

美味しそうなハンバーガー<IMG src=”画像のURL” align=”middle”>ですね。

美味しそうなハンバーガーですね。

例)下に揃える

美味しそうなハンバーガー<IMG src=”画像のURL” align=”bottom”>ですね。

美味しそうなハンバーガーですね。

画像を自在に操作して、見やすいページを作成しましょう!




スポンサーリンク
関連コンテンツ広告