Close
「新着情報」の３つの情報ブロックにも、それぞれ画像を表示させてみましょう。
index に以下の記述を追加してください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <title>ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"> <h1><a href="index "><img src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index ">ホーム</a></li> <li><a href="product ">製品紹介</a></li> <li><a href="profile ">会社概要</a></li> <li><a href="contact ">お問合せ</a></li> </ul> <!-- ヘッダ画像 --> <div id="img_index"> <img src="./images/img_index.png" alt="あしたをみつめるウェブサンプル株式会社"> </div> <!-- インフォメーション --> <h2>新着情報</h2> <h3>新商品のご案内</h3> <p> <img src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/index0001.png" alt="新商品のイメージ画像"> あいうえおかきくけこさしすせそ（中略） </p> <h3>展示会への出展</h3> <p> <img src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/index0002.png" alt="展示会への出展のイメージ画像"> あいうえおかきくけこさしすせそ（中略） </p> <h3>環境への取り組み</h3> <p> <img src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/index0003.png" alt="環境への取り組みのイメージ画像"> あいうえおかきくけこさしすせそ（中略） </p> <!-- フッタ --> <small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small> </div> </body> </html>
保存をしたらブラウザで表示してみましょう。
「新着情報」の部分に３枚の画像が表示されれば成功です。
上記のHTMLソースでは、p要素の中にimg要素を配置しています。
これは、画像を段落の一部としてマークアップしたことになります。
画像は行の一部となるため、画像とテキストが下揃えされて表示されています。
次回、CSSで表示スタイルを調整します。
ウェブページに使用する画像形式には、GIF・JPEG・PNGが一般的に利用されています。
それぞれ特徴があるので、写真・イラスト・ロゴ・壁紙など、どのような目的で画像を制作するかによって、画像形式を使い分けます。
GIFは「ジフ」と読みます。
GIFは最大8ビット（256色）までの色を扱うことのできる圧縮画像形式です。
256色以上必要ないロゴ、リンクボタン、アイコン、アニメ調のイラストなど、特に単色ベタ面を多く含む平坦な画像に向いています。
逆に写真やスケッチなどの多くの色数を必要とする画像には不向きです。
JPEGは「ジェイペグ」と読みます。
JPEGは圧縮画像形式ですが、24ビット（1670万色）まで扱うことができます。
このため、多くの色数を必要とする写真などの表現に向いています。
反対にアイコンやアニメ調の平坦なイラストなどをJPEGで保存すると、にじんだように汚くなります。
これはJPEGのファイル圧縮の仕組みによるもので、圧縮率を上げるほどファイルサイズは小さくなりますが、トーンジャンプ（色抜け）が増えて画質は劣化していきます。
PNGは｢ピング｣と読みます。
PNGは比較的新しく開発された優れた画像形式で、フルカラーにも8bitカラーにもできる長所があります。
ただし、すべての面においてPNGが勝っているというわけではありません。
画像の内容やサイズに応じてGIF・JPEG等と使い分けます。
特に写真画像をPNG形式にすると、データ容量が大きくなりがちです。
このため、面積の大きな写真画像をウェブページに掲載する場合には、JPEGが利用されることが多いようです。
ここまでの制作段階で、サンプルサイトは以下の状態となっています。
| <前へ | 目次へ | 次へ> |
どのカジノが自分に最適か分からないですか?
