03 はじめてのホームページ HTMLとCSS
前回は、HTMLにCSSを追加するところまで行いました。(02はじめてのホームページ)
動画で学ぶWebデザイン教室 Fuku…
02 はじめてのホームページ HTMLとCSS | 動画で学ぶWebデザイン教室 Fukuokamiyako
01のはじめてのホームページHTMLとCSS編では、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素のh1を、文章には段落要素の
をマー…
今回は、画像を設置してみます。
目次
今回使うHTMLコードの確認
前回同様、03のフォルダを作成して、そのフォルダにindex.htmlを作成しておきましょう。フォルダの作成、ファイルの作成は02はじめてのホームページを参照ください。
それでは、下記のコードをコピー、もしくは模写してHTMLファイルを作成しましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>エコロジー＆環境問題 </title> </head> <body> <h1>ECOLOGY 【エコロジーへの取り組み】</h1> <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p> <p>また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p> <p><small>Copyright (C) Computer Technology Groups. All rights reserved</small></p> </body> </html>
index.htmlファイル（基本のマークアップファイル）が作成できたら、そのHTML内に画像が表示するように追加していきます。画像はimg要素を使います。
ホームページはネットの回線を使うことから、index.htmlの中に画像を埋め込む方法ではなく、画像は別ファイルでフォルダに設置し、リンク呼び出しをします。そのためimg要素には、src属性というファイルを読み込む属性を入力し、イコールの右側にファイルを指定します。そのファイルは、「green.jpg」のように拡張子をつけて記述します。
<p><img src=”ファイル名”></p>
画像はインライン要素ですので、今回の動画はp要素の中に書いています。
HTMLファイルから見て下の階層のフォルダに画像が置いてある場合は、<img src=”フォルダ名/ファイル名”> となります。
下記のコードを追加します。
<p>
<img src="img.jpeg" alt="エコロジー 森林">
</p>
画像は下記の画像の上で右クリック＞名前をつけてファイルを保存しましょう。ファイル名は「img.jpg」とします。ファイルは、ホームページ練習の03のフォルダに設置しておきます。
アクセシビリティでは推奨となっているalt 属性
また 動画では、アクセシビリティでは推奨となっているalt 属性は、画像の説明文の入力する部分です。
画像の説明文を代替テキストと呼びます。
<p><img src="ファイル名" alt="画像の説明文"></p>
alt属性に、極力画像に、代替テキストを入力するように心がけましょう。
alt属性の効果・メリット
alt属性に画像の代替テキストを入力することで、検索エンジンに画像の説明文を伝えることができます。
またユーザーに優しいホームページの観点から、alt属性に入力される代替テキストは、画像の読み上げソフト「スクリーンリーダー」に利用されたり、ネットワーク回線が低速な場合、表示される文字列として補助機能となります。そのため推奨属性になっています。
続きは、動画を確認しながら進めてみましょう。
03HTMLとCSS 画像を設定するマークアップ動画
