【第５回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。
前回は見出しや本文を作った。
今回は画像を貼り付けてさらにホームページを充実させていこうと思う。
imgタグ
画像を貼り付けるにはimgタグを使用する。パソコンに保存してある画像を使用する場合が多いと思うが、ウェブ上の画像だとURL丸ごと指定しないといけないので注意。
今回は下の画像を使っていく。キモいとか言わないで。
画像を指定するには「src属性」を使う。属性ってなんだとか気になる方はまともなブログ探してください私はimgタグは中にsrc書くことを丸暗記してるだけです。いずれ勉強しようとは思うけどホームページの完成が先決なの。
ということで
<img src="URLorファイル名">で覚えてください。imgタグは終了タグがないのでこれで表示されます。
ちなみに画像を指定する時、別フォルダに入っていると「フォルダ名/（スラッシュ）ファイル名」と全部書かなければいけないので、同じフォルダに入れておくのがおすすめ。
かくいう私は「MAKEMORE」というフォルダを作って、その中にhtmlファイルと、画像用の「MAKE_MORE_image」というフォルダを入れている。
htmlファイル目線だと、画像に辿り着くまでに、「MAKE_MORE_image」を開き、その中の「makemore.PNG」という画像を探さなければならない。
ということで
<img src="MAKE_MORE_image/makemore.PNG">と書けばお目当ての画像に辿り着いてくれる。
これをウキウキで表示したわけなんだけども…
でけえ。これibisPaintで書いたんだけどサイズを768×768ピクセルとかにしたらマジででけえ。こんなホームページ誰も見ないっての。
サイズ指定
てなわけでサイズを変えようと思う。
サイズ指定の方法は「ピクセル数の絶対値指定」と「画面の横幅に対する相対値指定」がある。
とはいえフルサイズ表示でどのくらいのピクセル数なのかいまいちわからない。Apple公式サイトには「2,560 x 1,600ピクセル標準解像度」と書いてあるが、それにしてはこの画像でかいと思うんだよなあ。
いろいろ試して、「300×300ピクセル」くらいがちょうどよかったので今回はこのサイズで指定する。
サイズ指定はimgタグの中に直接書き込む。高さは「height」、幅は「width」なので、次のようなコードを書く。
<img src="MAKE_MORE_image/makemore.PNG" height="300" width="300">ピクセル数で指定する際は数字だけ書いておけば良い。
ちなみに高さ・幅のどちらか一方だけ指定すれば縦横の比を変えずに縮めてくれるので、正方形ではない画像はそうした方がいいかもしれない。
ただピクセル数は表示してみないとサイズ感が分かりにくい。
ということで画面に対する相対値で指定してみる。（正確には画像を貼る親要素に対しての値。）
画面に対して30％のサイズにしてみる。
<img src="MAKE_MORE_image/makemore.PNG" width="30%">今度は単位として「% （パーセント）」をつける。（高さも指定したけど反映されなかったので上手くいくまで幅だけにしておきますすみません。）
そのままのサイズで画像貼るにしてもサイズ指定した方がいいみたいです。読み込みが早くなるとかなんとか。
代替テキスト
Ariは低速が何よりも嫌いです。画像表示しないで文字で済まそうとするし。
ただこの文字って読み上げ機能を使う時は大事なんですよね。画像を簡潔に説明する文を付けておいた方がいいと思うのでコード書きます。
「alt」を使って入力する。「alternative」の略なのでまさしく代替テキスト。
<img src="MAKE_MORE_image/makemore.PNG" alt="緑のカバ">まあ緑のカバとしか言いようがないので。これで画像が読み込めない時には「緑のカバ」と表示してくれるはずだが確かめる術がない。大学の快適なWi-Fiで書いているから低速にはならないし、読み上げ機能使うわけにもいかないので割愛ということでお許しくださいませ。
まとめ
今日はホームページに画像を貼り付ける方法を紹介した。
本当はtitle属性を使って、カーソルを合わせた時にテキストが表示されるようにしたかったのだが、なんか上手くいかなかったのでいずれできるようになったら追記します。ただ個人的にあのテキスト表示好きじゃないのでだいぶ先になるかもです。
次回はリンクを飛ばす方法でも紹介しようかなと思うのでぜひ読んでください。
この記事が気に入ったらサポートをしてみませんか？