ウェブデザインI　第6回

投稿者:Ryo Koteraカテゴリー:Lecture、Web Design 1

●画像の配置

「index.html」、「about.html」、「style.css」をメモ帳で開いておく。

1) 画像をTeamsからDLして、imagesフォルダに保存します。
配置する画像は，あらかじめPhotoshopなどを使って最適な大きさにリサイズしておきます。今回は、画像の幅が400pixelあれば良いので、適切な大きさになるようPhotoshopで編集します。不必要に大きな画素数のまま表示させると、表示に時間がかかったり、サーバの容量を圧迫してしまいます。

▪️ウェブサイトに掲載する主な画像形式
参照：テキストp.216~217

JPEG(.jpeg または .jpg）
データ量が軽く、たくさんの色を扱える
圧縮（小さく）してしまうと元に戻せない「不可逆圧縮」のため、編集や保存を繰り返すと画質が劣化

PNG(.png)
背景を透過させたい場合に
保存を繰り返しても画質が保たれる「可逆圧縮」

GIF(.gif)
動画（ショートアニメ）

SVG(.svg)
webに適したベクターファイル
拡大しても荒れず、ラスター画像よりサイズが小さい
高画質かつ精細な画像の表示に適さない

▪️PhotoShopでの画像のリサイズ
カラーモード：RGB
解像度：72ppi

高解像度ディスプレイで表示する場合は、２倍サイズにした方がいい。
方法：PhotoShop / ファイル＞書き出し＞書き出し形式＞（左上の）サイズ：2x

【注意事項】
画像に名前をつけて保存する際は、ファイル名の中に　（スペース）を入れないように。
i.e.) 「image 01.jpg」→「image01.jpg」

拡張子（.jpg など）は小文字にすること。



2)「index.html」トップページの本文の手前に、次の一行を追加します。

<p><img src=”images/XXXX.jpg” alt=”画像の説明文” width=”400″ height=”267″ /></p>

src=”images/XXXX.jpg”の箇所のXXXX.jpgは、自分が使用する画像のファイル名に変更しておく。
alt=”画像の説明文”の箇所は、画像が表示されなかった場合に備えて、画像の説明文を記載しておく。
widthとheightで、それぞれ画像の幅と高さを指定することができる。
（img要素、src属性、alt属性については、テキストp.86-87も参照）

3)サイトのタイトルを、文字ではなく画像で表示するように変更する。
「index.html」トップページのタイトルのところを、次にように書き換えます。

<img src=”images/title.jpg” alt=”タイトルの説明文” width=”760″ height=”260″>

4)「about.html」の本文中に、写真を配置する。
「about.html」の２箇所に，次の行を追加します。（追加箇所はソースコードを参照すること）

<img src=”images/XXXX.jpg” alt=”画像の説明文” width=”250″ height=”165″ class=”photo-r” />

<img src=”images/XXXX.jpg” alt=”画像の説明文” width=”250″ height=”165″ class=”photo-l” />

5)写真が表示される位置を、「style.css」で指定する。
今回は，写真が本文の右側に表示される箇所（photo-r）と、写真が本文の左側に表示される箇所（photo-l）の2つのスタイルを、「style.css」の中に書き込みます。

右寄せの写真の配置

img.photo-r {
float: right;
margin-left: 15px;
margin-bottom: 15px;
}

左寄せの写真の配置

img.photo-l {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}

ソースコード
ファイル名：「index.html」

<!DOCTYPE html>
<html lang=”ja”>

<head>
<meta charset=”UTF-8″>

（中略）

<!– サイトの見出しとその説明 –>
<h1>
<img src=”images/title.jpg” alt=”ヘッダー画像（青空）” width=”760″ height=”260″>
<!– 2xで書き出した画像は、ファイル名に自動的に@2xが付くので注意！ –>
</h1>

<p>猫の魅力を紹介します。</p>

<!– メニューのリスト –>
<ul>
<li><a href=”index.html”>トップページ</a></li>
<li><a href=”about.html”>このページについて</a></li>
<li><a href=”campus.html”>コンテンツ１</a></li>
<li><a href=”class.html”>コンテンツ２</a></li>
</ul>

<!– トップページに写真を配置する –>
<p>
<img src=”images/cat.jpg” alt=”猫の画像” width=”400″ height=”267″ />
</p>
<p>本文</p>

<!– addressには制作者の情報を入れる –>
<address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address>

（後略）

ファイル名：「about.html」

<!DOCTYPE html>
<html lang=”ja”>

<head>
<meta charset=”UTF-8″>

（中略）

<h2>中見出し</h2>
<p>本文</p>

<h3>小見出し</h3>
<p>
<img src=”images/photo01.jpg” alt=”画像の説明文” width=”250″ height=”165″ class=”photo-r” />
本文<br/ >
本文<br/ >
本文<br/ >
本文<br/ >
<br/>
</p>

<h3>小見出し</h3>
<p>
<img src=”images/photo02.jpg” alt=”画像の説明文” width=”250″ height=”165″ class=”photo-l” />
本文<br/ >
本文<br/ >
本文<br/ >
本文<br/ >
<br/>
</p>

<br/ >
<br/ >
<address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address>

</div>
<!– div containerここまで –>

</body>
<!– bodyここまで –>

</html>

ファイル名：「style.css」

@charset “utf-8”;
/* ここからスタイルをはじめます */

body {
color: #444444;
background-color: #87cefa;
background-image: url(images/back.jpg);
background-repeat: no-repeat;
background-size: cover;
}

（中略）

h3 {
font-size: 18px;
font-family: sans-serif;
color: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 32px;
}

/* 画像の配置位置を指定する */
/* 右寄せで配置する画像はclass photo-rにする */
img.photo-r {
float: right;
margin-left: 15px;
margin-bottom: 15px;
}

/* 左寄せで配置する画像はclass photo-lにする */
img.photo-l {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}

p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}

（後略）

「ウェブデザインI　第6回」への1件のフィードバック

  1. ピンバック: ウェブデザインI　第11回 – KOTERA Ryo

コメントを残す