第4章 - トップページ

集し、
示しよう
デジタルカメラなどで撮影した写真をウェブヘージに表示するには、
そのままではサイズが大きすきます。
そこで、画像編集ソフトで画像を縮小し、
必要な部分を切り抜く方法について学習します。
編集した画像をウェブベージに挿入し、
プラウザに表示させましよう。
画像サイズを変更する …………………………p89
p94
切り抜きツールを利用する ………………・‐
新たに紹介する HTMLタグ
・ lmg
画像を表示する
・lgure
本文から参照される図版 (イラスト、
図、写真、ソースコードなど)を示
す
・figcapuon
088
図版のキャプションを示す
一
つ
ウェブベージ用の画像を
作成しよ
レカメラなどで撮影した写真をウェブペ…ジに合わせて縮Jヽし、必要な部分だけを切り抜いて挿
デジタリ
入しましょう。
4‐
1‐
1
画像サイズを理解する
「3-2-3色の指定方法」(48ページ)でも解説したように、ウェブデザインの現場では PhotOShOpや Fireworksな
どのソフトでデザインや画像編集を行いますが、本書では、無料で利用できる便利なオンライン画像編集ソフト「Pix!r」
を利用して画像編集について解説します。
● Pix:r
httpi//pixlr com/
Pixlr
「Pixlr」には数種類の画像編集ソフトサービスがありますが、本書では「Pixlr Edlor」の使い方を紹介します。
「Pixlr」のトップページから、左端にある「PIXLR EDI丁 OR」のボタンをクリックすると、ソフトが起動します。
まずは、デジタルカメラなどで撮影した写真を用意し
ます。
04/ 4-1- 1 /images/sample_O
1
.jpe
:練習用の画像ファイルを用意していますのて、こ利用くたさい
デジタルカメラなどで撮影した写真は、ウェブページに挿入するにはサイズが大きすぎます。まずは、画像のサイ
ズがどのくらい大きいのか実際に確認しながら、サイズを縮小し、必要な部分を切り抜いてみましよう。
「コンピューターから画像を開く」をクリックします。
コンピュータに保存されているファイルから、
sample_01 jpgを選択し、ファイルを開きます。
縮小して画像全体を表示
「ナビゲーター」ビューに表示さ
れている「〇%」は、開いてい
る画像が何%拡大・縮小して表示
されているのかを示しています。
入力欄の数値を調整したり、ス
ライダーのつまみを左右に動かす
ことで、画像を拡大・縮小できます。
実際のサイスて表示
ｔロ
Ｋ■ ■比
入力欄に「 100」と入力すると、
画像が実寸で表示されます。「ナ
ビゲーター」ピューで拡大・縮小
しても、「 100」 %で表示されて
いるときが実際の画像の大きさで
あることを理解しましょう。
ス
:≦
こ
各
8:孝
み拡
大縮
率
小
幅 (3000ピクセル )と高さ (1993ピクセル )が、
samp!e_01.ipgの画像サイズです。
一
■一
輌
蜀さ
:="t .
ビクセル
: 1"J .
ピクセル
●K
キ
t・
ンセル
口 ■口雌0■ 産
「縦横比を固定」にチェックが入つていることを確認し、
颯:「せ, クセル
ごan比
ナビゲーターの拡大率を「 100」 %にして、実際の
サイズで表示し、縮小されていることを確認しましょう。
'
ル
￨ピ
■き:■ ′
さ,
い
に
幅を「720」ピクセルに変更し、「OK」をクリックします。
■t呈を入力すると、自動的に高さも変更されます
￨「
ム
クリック
高さを「 390」
ビクセルに変更し、「 OK」をクリッ
クします。
■ここでは、画像の上部を起点にして上から390ヒクセルま
でを切り抜きたいのて、「アンカーJは上部3つのとれかを
クリックして選択しておきます
に
富古
1′ 々●L
アンカー
。¨¨ ...
L」 L」」
□□□
画像の下部が切り抜かれ、幅720ピクセル ×高さ390
ピクセルの画像が作成されました。
]― ―
_」
ピクセル
上を起点に切り抜く
クリック
0保存場所
「マイコンピューター」を選択すると、コンピュー
タにフアイルが保存されます。
②フォーマット
ここでは「JPEG」を選択します。「JPEG」を
選択して表示される「クオリティー」のスライダー
を動かすと、保存されるファイルのサイズが変わり
ますが、クオリテイを低くすると画像が劣化するため、
標準の「80」くらいがちょうどよいでしょう。
■画像フオーマットについては、「 I解説 l画像形式 J(98ヘー
シ )て後述します
0名前
保存されるフアイル名を入力します。ここで
は、「img_01_01 jpg」という名前で保存しま
す。フォーマットに「JPEG」を選択しているので、
「 ipg」と拡張子も入力することを注意しましょう。
「portfolio」フォルダ内に、画像保存用の「images」
フォルダを作成し、フアイルを保存します。
フォルダ構成
portfolio
―□
臼
01
inrages
inre
01 ipe
4‐ 1‐
2
切り抜きツールで画像を切り抜く
sample_01.jpg以外の画像も、同じ画像サイズ (幅
720ピクセル×高さ390ビクセル)に縮小・切り抜きします。
04 / 4- 1 -2 / images / sample_02.j pg
sample_01.jpgは上から切り抜きましたが、画像に
O
よつて切り抜きたい範囲はさまざまです。そこで、「切
り抜きツール」を使つて、規定の画像サイズになるよう
に、画像の任意の範囲を切り抜く方法を紹介します。
4 / 4-
1
-2 /
images / sam ple_03. j pg
04 / 4- 1 -2 / images/sa mple_04. j pC
:練習用の画像ファイルを用意していますので、こ利用くたさい
「フアイル」 >「画像を開く」をクリックして、
sample_02.jpgを開きます。
ヽ﹁畠げなＯＤヽ最
、ヽ ‘ ■ ヾハヽヽも０﹂
一、ヽヽヽ日ヾ０﹂︵
:切り抜き範囲の比率か720390に固定されていることに)主
目してくたさい
画像が幅720ピクセル ×高さ390ピクセルに切り抜か
れました。
ヽ９ヽゝ畠ピユ●
ドラッグして表れる領域のアンカーを動かして、切り
抜き範囲を調整します。
一
■一
一、Ｘ．Ｃ ■ ヾ ‘ ︺
幅と高さの入力欄の値を、幅「720」高さ「390」
に変更します。
ヽＱヽ﹁占全 ●●
「固定化」のプルダウンリストをクリックし、
「出カサイズ」
を選択します。
前項の手順①∼0と同様に「pOrtfolio/images」フォ
ルダ内に「img_01_02 ipg」という名前で保存します。
sample_03.jpg、 sample_04 ipgも同様に作成し、
それぞれ、日mg 01_03.jpg」日mg 01_04 jpg」
という名前をつけて保存しましょう。
フォルダ構成
ビクセル (画素 )
コンピュータでは、領域をマスロで区切り、ひと
つひとつの色を変えることでさまざまな画像を表現
しています。
たとえば、「丸」を拡大すると、右図のようにマ
スロがぬり分けられています。つまり、マスロが細
かければ細かいほど、多彩な画像の表現ができます。
このひとつのマスロが「 1ビクセル (画素 )」です。
右のように、画像編集ソフトで写真を拡大してみ
ると、エツジにマスロが浮かんでくることがわかります。
◎解像度
マスロの細かさを示すのが「解像度」です。解
llnch
像度とは、 linch(2.54cm)に何個のビクセルが
あるかを数えたもので、単位は ppi(pixeソ inch)
￨
です。右の例では、解像度は 1 0ppiとなります。
以前はモニターの解像度は72ppiでしたが、技
術の進歩によリモニターが高解像度になり、現在
ではモニターによつて解像度はさまざまです。つま
レの大きさはモニターによって変わつ
り、 1ビクセリ
ているのです。
◎
1ビクセルの大きさ
これまでの解説で、文字の大きさや罫線の太さ
を指定する際にも「px」 (ビクセル )という単位を
利用してきましたが、これも画像のビクセルと同じ
大きさです。たとえば、右のように CSSを記述し
てブラウザに表示される罫線の太さが 1ビクセルの
皿
くhl>見出しく/hl>
国
hl ( border: lpx so■ id #3399FF, }
出力結果
大きさを示しており、モニターで表現できる最も細
￨
い線です。
―
― ―一―――――――一 ― ――― ―
― ―￢
見出し
◎画像サイズの縮小で注意する点
画像編集ソフトなどで画像を縮Jヽすると、元々あつたピクセルデータが失われます。そのため、一度縮
小した画像を再度拡大すると、画像が劣化してしまいます。画像を再利用する場合を考慮して、元ファイ
ルは残しておくようにしましょう。
また、画像サイズが元々小さい画像は拡大することができません。
縮小
画像形式
ウェブページで画像を表示する場合、おもに「GIF(ジフ)」「JPEG(ジェイベグ)」「PNG(ビング)」
の3つの画像形式が利用されます。
GF
」PEG
PNG
png
◎ G:F
G:Fは、256色までの色を扱うことができる圧縮画像形式で、おもにイラストやアイコン、ロゴなど、色のはつ
きりとした画像を保存する際に用いられます。
G:Fでは、使用する色数を制限することで画像のファイルサイズを小さくしており、透過 G:Fとして保存
することも可能です。また、画像を切り替えるような簡単な動画として保存することも可能であり、アニメー
ションGIFと呼ばれます。
色数が制限されているため、段階的に色が変化する写真では陰影やグラデーション部分が荒くなるため
適していません。
■本書で紹介している画像編集ソフト「Pix
GF(32色、ファイルサイス 12KB)
r」
ては、GIFに対応していません
GIF(256色、ファイルサイス96KB)
◎ 」PttG
」PEGは、フルカラーで表示できる圧縮画像形式で、おもに写真を保存する際に用いられます。
」PEGではクオリティ(圧縮率 )を設定できるようになつており、クオリティを下げるとファイルサイズを小
さくすることができます。しかし、クオリティを下げすぎると、ブロックノイズが発生するので、フアイルサ
イズとのバランスを見ながら適切に設定しましよう。
色や明るさが急激に変化するような箇所にはブロックノイズが発生しやすいため、色がはつきりしたイラ
ストなどの保存には向きません。ただし、グラデーションしたり、色調の変化が緩やかなイラストは」PEG
の方が向いています。
レサイス32KB)
」PEG(クオリテイ60、ファイリ
JPE(〕
クォプテ
160フ
ア￨サ rス
:3KB
◎ PNG
PNGは、」PEGや G:Fに代わつてウェブで広く使われることを目的として開発された優れた画像形式です。
圧縮してもGIFや」PEGのように画像が劣化せず、イラストにも写真にも利用することができます。また、
透過にも対応しています。
ウェブ上で利用される技術の標準化をすすめる団体である W3C(Wo‖ d Wide Web ConsorJum)が
推奨している画像形式となつており、今後はさらに利用される機会が増えるでしよう。
ただし、 PNGでは、 GIFのようにアニメーションをできないこと、フルカラーで保存した写真などは
」PEGよリファイルサイズが大きくなることなどから、画像の使用用途やファイルサイズに応じて GIFや
JPEGと使い分けるとよいでしよう。
PNG(32色、ファイリレサイス 1lKB)
PNG(フルカラー、フアイルサイズ270K B)
画像を挿入しよう
画像編集ソフトでウェブページ用に最適化した画像を HTMLに挿入し、ブラウザに表示しましょう。
HttMLに画像を挿入する
4-2‐ 1
portfolio/01 htmlを開きます。画像を挿入したい箇所に、下記のように追記します。
[portfolio/01 htm]
[.… 略]
くarticle c■ ass="artic■ eDetail・ >
くheader class="artic■ eDetailHead">
くhl c■ ass=・ pageTitle">cafe Debutく /hl>
く■mg src=limages/img_01_01.jpgⅢ alt=・・ width=・フ20・ height=Ⅲ 390・ >
くP>baSer cMs カフェサイト用テーマくbr>
baser CMsテーマコンテスト2012飲食店系テーマ賞受賞(受賞結果はこちら)く /p>
く/header>
くsection class="articleDetai■ Body・ >
[.… 略 .…
]
くsection>
くh3 class="heading― typeB">プラクインでInstagramと連携く/h3>
くim`∫ src=・ images/im9 01 02 jp9・ al t=・ 1最景′ た
｀
の写真もすく￨トフヘーンで1什言てて
ま,
「
'1理
・720 height=・ 390・ >
width=
￨′
くp>プラグインでlnstagram[.… 略 ...]すぐに反映されます。く/p>
く/section>
くsection>
くh3 class=・ heading― typeB・ >レスポンシフデザインでスマートフォン、タフレット表示も↑
央適く/h3>
くimO src=・ images/im9 01 03 jpg° a tt t=・スマートフンタフレトハノコンご表示を:室 :″ するとそれそイアウト
'1レ
変オ￨ます・ width=・ 720・ height=・ 390・ >
ll｀
くp>さまざまなデバイスの表示対応に[.… 略 .…
]確認できるのも嬉しい♪く/p>
く/section>
くsection>
くh3 class="heading― typeB">Webフォントだから、飾り文字やアイコンもキレイく/h3>
′
ンの l面ごt,文字とつ′
イコンの表示か絆化
`iTng src=Ⅲ lrna9es/im9 01 04・ jpg° alt=・スマートフィ
t rl=・ア
20・ height=・ 390・ >
くp>サイトのタイトルやナピゲーション[.… 略 .… ]実現できました。く/p>
く/section>
￨■
く/section>
[略
.…
]
￨′
[し
ム・
wid
<img src="images/img_01
02,pg"an=Ⅲ 撮影した料理の写真もすぐにトップページで確認できます。"width="720"height=・ 390">
l
埋め込み画像
ブラウザの出力結果
Cafo Dobut
[portfdio/01 htm旧
l
l
◎
ll
国
代替テキスト
l
団
src属性
くimg>タグでは、 src属性で表示する画像ファイル
を才
旨定します。
◎ alt属性
alt属性には、画像の代替テキストを入力します。おもに、
スクリーンリーダー (目の不自由な方のための音声読み
上げソフト)や、画像を表示しないブラウザで利用されます。
alt属性には、画像が表示されなかつた場合に、 a比の
属性値で画像が置き換わつても意味が変わらないように
記入する必要があります。
ただし、 img_01_01 jpgは本文を補足するイメージ
写真であり、代替テキストが表示されなくても本文の内
‖
容には影響がありません。このような場合には、
「a!t=‖ 」
のように空にしておくことも可能です。
｀ MIM0
5]〕
11「
:』
軽
嵯
ξ
Ml
とはできません。入力する内容がない場合は
「a忙 ="‖ 」のように値を空にしておきます。
◎ width O height偏弓
1性
Width属性には画像の幅、height属性には画像の高
さを入力します。実際の画像サイズと等しい値を入力し
ます。
LMIMO層
膚瑯濾
賃
と異なる値を入力すると、画像が拡大・縮小
して表示されます。幅と高さの比率が実際の
画像サイズと異なると、画像が伸びたり潰れ
たりするので注意しましょう。なお、 widthと
height属性は必須ではないため、省略しても
かまいません。省略した場合は画像の実寸で
表示されます。
4‐ 2‐
2
画像を図版として指定する
本文から参照される図版は、次のように <ngure>タグで囲みます。
[portfolio/01 html]
[.… 略]
くsection>
くh3 c■ ass="heading―
くigure>
くing
th=“
typeB">プラグインでInstagramと連携く/h3>
src="images/ing_01_02.」 Pg" alt=‖ 撮影した料理の写真もすぐにトップベージ確認できます。"wid
720" height="390">
く/flgure>
くp>プラグインでInstagram[.… 略 ...]すぐに反映されます。く/p>
く/section>
くsection>
くh3 class="heading_typeB">レスポンシブデザインでスマートフォン、タブレット表示も快適く/h3>
くflgtlre>
・タブレットパソコンで表示を確認すると、それぞれレイ
くimg src=“ images/ing_01_03.jPg" alt="スマートフォン
アウト
が変わります。"
く/flgtlre>
width="720" height="390">
くp>さま灘なデバイスの表示対応に〔.… 略 .… ]確認できるのも嬉しい♪く/p>
く/section>
くsection>
くh3 c■ ass="heading― typeB‖ >webフォントだから、飾り文字やアイコンもキレイく/h3>
くflg ure>
‖
くimg src="images/ing_01_04.jpg" alt="スマートフォンの画面でも文字とアイコンの表示が劣化しません。
width=“ 720" height="390">
く/flgu re>
くp>サイトのタイトルやナビゲーション[.… 略 ...]実現できました。く/P>
く/section>
く/section>
[略
.…
]
AP
0ltil
T figure
*7t=cvt<
「本文から参照される図版 (イラスト、
すべての画像を<igure>タグで囲む必要があるのではなく、
ソースコードなど)」 :こついて <lgure>で囲むことに注意しましょう。
4‐ 2‐
3
図版にキャプションを挿入する
[portfo1lo/01 html]
[.… 略]
くsection>
くh3 class=“ heading― typeB''>プラグインでInstagramと連携く/h3>
くigure>
くimg src="images/ing_01_02.jpg" alt="撮影した料理の写真もすぐにトップページ確認できます。"wid
th="720" height=・ 390">
くflgcaption>今日のランチのローストヒーフサントを撮￨′ ,く /flgcaption>
く/丘 gure>
くp>プラグインでInstagraln[.… 略 ...]すぐに反映されます。く/p>
く/section>
くsection>
くh3 class="heading― typeB">レスポンシブデザインでスマートフォン、タフレット表示も快適く/h3>
くigure>
くimg src=“ images/img_01_03.jpg" alt=“ スマートフォン
・タブレット
・パソコンで表示を確認すると、それぞれレイ
アウトが変わります。" width=“ 720“ height=・ 390">
くflgcaption>左からiPhone iPad卜 lacBook Airで表示確語く/f,caption>
く/figure>
くp>さま奏なデバイスの表示対応に[.… 略 .… ]確認できるのも嬉しい ♪く/P>
く/section>
くsection>
くflgure>
くimg src=“
images/img ol_04.jpg" alt=“ スマートフォンの画面でも文字とアイコンの表示が劣イとしません。"
width="720" height=''390">
<flgc apt ion>iPhOneの画面i二近つしても…( Д )ハ :キレイく/f19caption>
く/igure>
くh3 class="heading― typeB“ >webフォントだから、飾り文字やアイコンもキレイく/h3>
くP>サイトのタイトルやナビゲーション[.… 略 .… ]実現できました。く/p>
く/section>
く/section>
[略
.…
]
一
■一
写真にキャプションをつける場合は、 <ngcapjOn>タグを挿入します。 <ngcaplon>タグは lgure要素内で
のみ利用できることに注意しましょう。
次に、写真のキャプションであることがわかりやすいように、 CSSでキャプションの文字サイズを本文よりもひとま
わ lルさく変更しましょう。 style cssを開き、セレクタ「ngcapjOn」に font‐ sizeを指定します。
jヽ
ブラウザの出力結果
[portfdb/01 htm]
[common/css/style CSS]
[.… 略]
table caption {
font― weight: bold,
text― align: ■eft,
)
/キ
画像キャプション ★/
flgcaption {
font―
size: 12px,
}
/★
見出し ★/
.pageTitle く
font― size: 26px,
[.… 略]
,^l.t
wob7rvf
t05.
t7 7!r tEe4L t L,-, rsEfrmf arltl:r-f
aOtT?7<
j>
t< rat 1 | t'p ruj-'
7 1 > + t 1 t ) ts a 6Lll1r,
aEL..aLa?
rrr rtc
1r6+t<
ltrrtrrg@e
4. 2'; < +,
Fo.r /1 1 tlt,a
. / a. t i-t*t!!
lveo
1
t;t
), t t lFo\e o) ttFL.!.a
t Lrr.
l. tr
:ll
y:o[uM‖
画像のスライス
右図は、 Photoshopでスライスツールを使用
している例です。スライスツールでマウスドラツグ
すると、切り抜き範囲を指定することができます。
スライスは、「4‐ 1-2切り抜きツールで画像を切り
抜く」(94ページ)で紹介した「切り抜き」機能と
似ていますが、効率的にデザインファイルから画
像を管理できるようになつているのが特徴です。 1
つのデザインフアイルに複数のスライス範囲を指定
して、複数の画像パーツをまとめて保存すること
ができるようになつています。
本書では Photoshopや Fireworksの使い方
は解説しませんが、「 1‐ 1ウェブサイト制作のため
の準備」(2ページ)に示した「SttEP5:HTML/
CSSコーディング」の工程には、一般的に画像の
スライス作業も含まれます。
Photoshopのスライス機能
一
■一
本書では HTML/CSSの学習を目的としているため、まずは手軽に画像編集が行えるように無料の
「Pixlr」を利用しましたが、実際のウェブサイトの制作現場では、 HttML/CSSコーディングを行う前に、
Photoshopや Fireworksなどのソフトでデザインを詳細に作り込みます。
Photoshopゃ Fireworksのデザインファイルは1枚の大きな画像のような状態のため、HttML/CSSコー
ディングの際に、画像として必要な部分のみを抜き出す必要があります。これらのソフトには、デザインフア
イルから効率的に複数の画像パーツを切り抜くために「スライス」という機能が備わつています。
l:l
Чlμ):0[UM‖
画像素材を入手する
写真などの画像をすべて自身で撮影したものを用意できればよいですが、イメージに合つた写真が撮影
できない場合もあります。このような場合は、インターネット上で配布されているフリーの画像素材を探し
てみるとよいでしょう。
有料で写真やイラストなどの画像素材を配布しているサイトをいくつかご紹介します。
Shutterstock
(http://www.shutterstock
アマナイメージズ
com/) (http://amanaimages.com/)
'tr
- ,,";;.,.,,
￨口 ″:Or銑゛
が壼
imagenavi
(http://imagenavi jpl)
Ψ 鶴
‐
臨し甲 ■螢
誕
このようなサイトでは、画像 1点から購入することができます。また、一定期間で契約する定額プランが
用意されている場合も多いです。詳細についてはそれぞれのサイトの料金プランなどを確認してください。
また、無料で写真を配布しているサイトもあります。
PAKUTASO
足成
(httpプ /www
(http://www ashinan com/)
P,
1・
pakutaso com/)
`・
=
G、
い
‐
■
軽
E
二■よ―― ■■■■
l●
:_ヽ
_ ￨
_
このような素材配布サイトは非常に便利ですが、ライセンス (使用許諾条件 )については十分に注意する
必要があります。それぞれのサイトで提示されている規定をよく理解し、条件を守つて利用しましょう。ラ
COLUMN】アイコン画像を作るには」(185ページ)内でも、詳しく紹介しています。
イセンスについては「【

Download Report