６搬
CHAPTER
リンク
定 し、
ナビゲーションを作り込もう
外書5サ イトやウエブヘージ内の他 ヘージヘリンクを設定します。
ウェブヘージ内に設定したリンクは「グローバルナビ」や「ローカルナビ」として、
旨定方法を使つてデザインを作り込みます
さまざまな CSSフ ロハテイやオ
また、ユーザがサイト内で操作に迷わないよう
「バ ンくずナ ビ」や「ヘー ジの先頭へ 戻る」を設置します。
.
新たに紹介する HttMLタ グ
リンクを設定する
●
a
紹介する疑似クラス
Jink
未訪間のリンク
:hOVer
:aCIVe
要素をクリックしているとき
要素にカーソルが重なっているとき
:vigted すでに訪問済みのリンク
・fOCus
要素 にフォーカスしてい るとき (tab
キーで移動)
1絶 対 ハ スや相対 ハス を理解 します
新たに紹介する CSSプ ロパティ
リス隋己
号を画像にする
list-style-image
・background‐
image
・background―
repeat
背景画像を指定する
背景画 像 の繰返 し方
法を指定する
background―
pOstion 背景画像 の開始位 置
を指定する
新たに紹介する CSSプ ロバティ
.box-sizing
ボツクスの横幅と高さに罫
線とパ ディングを含むか否
かを設定する
・text‐ decoration
背景画像を指定する
紹介する疑似クラス
:first―
Jast―
inth―
child
ある要素内で最初の要素
ch‖ d
ある要素内で最後の要素
child(n)
ある要素内で最初からn番
目の要素
・:nthlast― chiid(n)あ る要素内で最後からn番
目の要素
ヘ ー シ 内 リンク
:
l
リンクを
外部サイトや他のページヘ のリンクなど、ブラウザでページ間を移動する基本的なリンク方法について
学習します。また、設定したリンクのリンク色を CSSで 変更します。
外部サイトヘリンクする
6‐ 1‐ 1
テキストにリンクを設定し、インターネット上に公開されているさまざまなウェブサイトにアクセスします。
⇒
r
Q
*\vh .tsi
k
!.re. t
―
――
01 htmlを 開き、「受賞結果はこちら」 というテキストにリンクを設定します。 リンクしたい部分を <a>∼ </a>
のように囲み、aタ グには「<a href=‖ リンク先の∪RL‖ >」 のようにhref属 性を追加して、∪RLを 入力します。
リンク先の∪RLは 、ここでは 「httpノ /contest basercms net/」 と設定します。
[po「 tfolio/01
htm]
[.… 略]
くheader c■ ass="artic■ eDetai■ Head">
くhl c■ ass=‖ pageTit■ e・ >cafe Debutく /hl>
くing src=“ inages/img_01_01.jpg" alt=""
くp>baser CMsカ フェサイト用テーマくbr>
width="720" height="390">
baser cMsテ ーマコンテスト2012飲 食店系テーマ賞受賞
(く
a href=Ⅲ htし p://cOntest.basercms.net/・ >受 賞結果はこちらく/a>)く /P>
く/header>
[略
.… ]
ブラウザで表示すると、aタ グを設定 した部分 の文字色が青に変わり、 下線が付きます。 クリックして指定 した
URLに アクセスできるか、 確認してみましょう。
J2r+, Afrt#Ft
lportfolio/o1 html]
EETO
baser CMSカ フェ サイ ト用テーマ
baser CMSテ ーマ コンテス ト20]2飲 食店系テ ーマ 賞受賞
同様に、「関連リンク」 と「撮影協力」部分のテキストもaタ グで囲み、それぞれアクセスしたい URLに リンクを
設定します。
[portfolio/01 html]
[.… 略
くfooter c■ ass="artic■
]
eDetailFoot">
<sectaon>
<h2 class= "heading― typeC">FIl連 リンクく/h2>
<ul>
<1i>< r
<
I i->':
e
<Ii>.: r
<ri>. :
href=・
http://basercms.net/themes/archives/14・ >Cafe Debutの タウンロギ ベージく/a>く /1i>
http://cafedebut.cat― speak.net/・ >cafe DebutO)デ tペ ージく/a>く /1i>
href=・
href=・
href=・
http://basercms net/・ >baser CMS公 式サイトく/a>く /1i>
http://instagram cOm/・ >ェ nstagram公 式サイトく/a>く /■ i>
</ul>
<,/section>
くaside c■ ass=“ creditunit">
くp>撮 影協力く/p>
くh2 class=“ heading― typec・ >kitchen nestく /h2>
くp>北 海道札幌市中央区南3条西 8丁 目 大洋ビル2階 く/p>
くul>
くli>く a href=Ⅲ http://、 ,、 マrle S t― kitchen ョp・ >http://― 。
nest― kitchen.〕 pく /a>く /■ i>
くli>・ (a href=・ http://w、 N facebook.cOm/KitchenNost・ >Facebook ′ヾ
―ジく/a>く /■ i>
v、
V
く/u■ >
くp>Cafe
Debutテ ーマのイメージ撮影にご協力いただきました。とっても素敵なお店です。く/P>
く/aside>
く/footer>
[略
.…
]
ブラウザの出力結果
[portfdio/01 htm]
, I [i]L7
,horeoldrnJ,,{r
Lrut
I QteIa.@72>a:tsy,
. cigcsrtt-a)
e.!!s 1ai!
[4a@-r4
'. !ry
リンク先を新しいタブで開くtarget属 性
target属 性 に属性値を設定すると、新 しいタブで開きます 。target属
性の属性値 は任意 の半角英数字
を指定します。
皿
くul>
1=諄 糊 爛
蹴
誦 嵐庶「
el翠
僻 蠣蔚 路
>
偲
く/u■ >
ブラウザの出力結果
C
1
i
1
新 しく開いたタブには、属性値で指定 したフレー
ム名 が付きます 。 そのため、 上のように複数 のリ
ンク先に同じ属性 値 を指定 している場合 、続 けて
リンクをクリツクすると、後からクリツクしたリンクが、
先 にクリツクして開いたタブで、 ペ ージを切 り替え
て表示されます。
つねに新しいタブで表示 したい場合は、属性値を「target="blank‖ 」 とします。
呵
くul>
くli>く a href="http://m.nest― kitchen.jp・ し
arget=・ _blankⅢ >http://― .nest― kitchen.jpく /a>く /■ i>
くli>く a href="http://― .facebookocom/KitchenNest" target=・
bla nk・ >Facebook ペーンく/a>く /1i>
く/u■ >
ブラウザ の 出力結 果
0、
「
三
￨
ただ し、 通 常の リンクでも、 リンクテキス トを
右クリックして表 示されるメニューから「新 しいタ
プを開 く」 を選択 すれば、 新 しいタブで 開 くこと
ができます。 リンクを新しいタブで開くかどうかは、
ユーザの選択に委ねるべ きという考え方があるため、
￨
l target属 性 (と くに「target=‖ blank“ 」)は むや
￨ みに設定しないようにしましょう。
リンク色 を変 更する
リンクの文 字色はプラウザ標準値では青になっていま
すが、サイトのデザインに合わせて柔らかい色に変更します。また、
テキストにマウスを乗せたときの文字色も変更します。
関連 リンク
関連 リン ク
ロ caFe Debutの ダウンロー ドペ
_=
のデ モペニ ジ
・ い
ロoase・ cMsaこ ■サィ ト
・
Lヒ ∝ュmを 試
撮影撻 ヵ
⇒
,ダ 上
撮影にカ
style cssを 開き、 ページ全体のリンク(a要 素 )の 文字色をすべ て変更するため、 セレクタを 「a」 として color
プロバティを指定します。
ブラウザの 出力結 果 [portfolb/01 html]
[common/css/style css]
eimport ur■ (http://fonts.googleapis.com/cs
s?family=Antic+Didone),
body ( C。 10r: #333333, }
田■ リンク
/★
リンク ★/
a { CO10r: ″999966, }
[略
.…
]
リンクテキストにカーソルを重ねるとカーツルが矢印から指マークに変わるので、どのリンクを選択中なのかわかりますが、
さらに変化があつたほうが選択中のリンクがよりわかりやすくなります。
右下のように、セレクタを「aihoVer」 と記述すると、カーソルを重ねたときの装飾が変わります 。 ここでは、文
字色を変更 しました。
ブラウザの 出力結 果
[po「 tfO110/01 html]
[common/css/style csS]
[.… 略]
関連 リンク
/★
リンク ★/
a { C。 ■。r: #999966, }
a:hover { co10r:
[略
.…
]
″996600,
)
リンクの装飾 と疑 似クラス
サンプルサイトでは、 セレクタ「 a:hover」 と
記述 してリンク(a要 素 )に カーツルが重なつている
ときの文 字色を変更 しましたが、 このようなセレク
タを「疑似クラス」 と呼びます。
リンクには他にも、右表に示す疑似クラスのセレ
クタが用意されています。
すべてのリンク
aJink
未訪間のリンク
a:hover
リンクにカーソルが重なつているとき
a:active
リンクをクリックしているとき
a:visited
すでに訪問済みのリンク
a:focus
リンクにフォーカスしているとき (tab
キーで移動)
疑似 クラスによる a要 素の装飾
aJlnk{c010r i999966i}
nut>t
aivisited l colori=666666:}
￨1連 リン ク
a:hover{CO10r:_・
9966001}
a:active{cO10ri‐
・
339999:}
田ヨ リンク
a:focus { color: 1996600
1
田連 リンク
■tabキ ー て フォー カスが移 動 します
冬 nM[ M0
フオーカス時は、 ブラウザの標準値で 「ou‖ ine」 プロノヽティが指定され
ているため、点線で囲まれます。 ou‖ ineは ほとんど borderと 同じように
値を指定できますが、 上下左右別々に指定することはできません。
6‐ 1‐
3
他の ベー ジヘ リンクする
サイトの主要なナビゲーションとなる□―カルナビとグローバルナビを作成し、サイト内の他の HttMLフ アイルヘ リ
ンクします。
kolllorikol:,ls 10
konlorlkol〕 ,osllo
Cafo Dobut
◎ ローカル ナビ
ローカルナビには、現在表示している「Cafe Debut」 以外の他の作品ヘアクセスできるようにリンクを設定します。
サブカラム (#pageBodySub)内 の「おしらせ」 の上に、ローカルナビとなるテキストをリスト形式で挿入します。
ブラウザの出力結果
komorlk(〕 11lasha
Cafo Debut
[portfolb/01 html]
[portfolio/01 html]
[.… 略]
くdiv id="pageBodySub">
く tl l>
くli>ハ タ￨ なりたしヽ
FFi l去 イ
1い く/1i>
くli>ヽ lordPressテ サインワークフ ,く /1i>
くli>Cafe Debutく /11>
く/ul>
くsection c■ ass="newsList">
くh2>お しらせく/h2>
[.… 略 .…
く/section>
く/div>
[略
.…
]
]
「2-3-1セ クションタグを挿入する」(27ペ ージ)で 解
説したように、サイトの主要なナビゲーションは <nav>
タグで囲む必要があります。グローバルナビと区別する
ために、クラス「localNavi」 を追加しておきます。
[portfolio/01 htm]
[.… 略 ]
くdiv id="pageBodySub">
くnav
class=・ localNavl・ >
くul>
くli>バ ン
タになりたヽヽ
魔法使tヽ く/1i>
くli>wordPressデ ザインワークブックく/1i>
く■i>cafe Debutく /1i>
く/ul>
く/nav>
くsection class=・ newsList">
くh2>お しらせく/h2>
[.… 略 .…
く/section>
]
く/div>
[略 .…
]
テキストにリンクを設 定 します。 href属 性 に他 の HttMLフ ァイリ
レのフアイル名をオ
旨定 します。
[portfo lo/01 htm]
[.… 略 ]
くdiv
id="pageBodysub">
class="localNavi">
くnav
くu■ >
<li> :
<li>:t:
<Ii>:,r
</uI>
-r
hrof=・ 03 html・ >′ ｀ン
タになりたい魔法使いく/a>く /1i>
hrof=・ 02 html・ ,WordPressデ ザインワークブックて/a>く /1i>
href=・ 01 html・ >Cafe Debutく /a>く /1i>
</nav>
くsection c■ ass="newsList">
くh2>お しらせく/h2>
[.… 略 .…
く/section>
]
く/div>
[略
.… 〕
まだ他のHttMLフ ァイルがないため、リンクをクリックしても「このウェブページは見つかりません」と表示されます。
ブラウザの出力結果
[portfo io/01 html]
ヽo1lor kO‖ la、 ぃ
Cafe Debut
0●・・
I}→>← ,
El
このウェプページは見つかりません
リンク動作を確認するため、01.htmlを 複製して02.htmiと いうファイル名に変更し、「po「 tfolio」 フォルダ内に
配置します。
。
ｉ
︲
ｏ
臼 ¨臼 ｆ
ｔ
ｒ
ｏ
ｐ
ｗ
ｗ
臼ｗ
フォルダ構成
01
lmages
02.htmlを テキストエディタで開き、01.htmlと の違いがわかるように、 ページタイトルを変更します。
[portfolio/02 html]
[.… 略]
くartic■ e class="artic■ eDetai■ “
>
くheader c■ ass="artic■ eDeta■ ■Head“ >
くhl c■ ass="pageTitle">wordPressデ ザインワークフラクく/hl>
くing src="images/ing_01_01.jpg" a■ t=“ " width="720"
[略
.…
]
height="390''>
02 htmlに リンクしたテキスト
「WordPressデ ザインワークブック」をクリックすると、02 htmlに移動します。同様に、
01 htmlに リンクしたテキスト「Cafe Debut」 をクリックすると、01 htmlに 移動します。01 htmlと 02 htmlの 2
つのフアイル間をお互いに行き来できるようになりました。
ブラウザ の 出力結 果 [portfdio/01 html][portfolio/02 html]
01 ninl
Cd€
tuM
￨
￨
02 htnl
WordPra$7Vi >2
-, a, t
リンク動作を確認したら、 作成したファイル02 htmlは いったん削除しておきます。 01 htmlに グローバルナビな
どを挿入してから02 htmlを コピーすると、効率的な作業を行うことができます。 02 htmiは 、「7‐ 1ペ ージを複製
しよう」(216ペ ージ)で 、再度01.htmlを 複製して追加します。
◎グローバルナビ
レダ階層にあるファイルにもアクセスできるようにリンクを設定します。
グローノツレナビには、他のフォリ
ページヘッダー (#pageHead)内 に、グローバルナビとなるテキストをリスト形式で挿入します。
)r,+f Ofrrfift
lportfolio/o l .html]
[portfo1lo/01 html]
[.… 略
くheader id="pageHead">
くhl id="siteTitle">komorikomashaく /hl>
くp id="catchcopy">1人 じゃできない[...略 ...]楽 し
いものづくり。く/p>
]
く ul>
くli>ホ ームく/1i>
くli>′ t́し た1=￨ クし｀こく/1i>
くli>つ く /:も のく/1i>
くli>お といあわ￨く /1i>
く/ul>
く/header>
[略
.…
]
グローバルナビはサイトの主要なナビゲーションのた
め、 <nav>タ グでリスト全体を囲みます。 ローカルナ
ビと区別するために、クラス「globalNavi」 を追加し
ておきます。
[portfollo/01 html]
[.… 略]
くheader id="pageHead">
くhl id=“ siteTitle">komorikomashaく /hl>
くp id="catchcopy">1人 じゃできない[...略 ...]楽 し
いものづくり。く/p>
くnav c]ass=・ 91oballlavi・ >
くul>
くli>ホ ームく/1i>
くli>わ たしたちにつヽヽ
てく/■ i>
くli>つ くったもの く/■ i>
く■i>お といあわせく/1i>
く/u■ >
くプnav>
く/header>
[略
.…
]
テキストにリンクを設定します。ローカルナビの href属 性にはフアイル名を指定しただけでしたが、グローバルナビでは、
同じフォルダに配置される 「つくつたもの」以外は、他のフォルダ階層にあるフアイルにリンクするため、「ホーム」
のリンク先は 「 /index html」 と記述し、「わたしたちについて」 と「おといあわせ」 は 「 /フ オルダ名 /index
と記述します。
html」
[portfo io/01 html]
[.… 略
くheader id=‖ pageHead">
くhl id="siteTitle">komorikomashaく /hl>
くp id="catchcopy">1人 じゃできない[...略 ...]楽 しいものづくり。く/p>
くnav c■ ass="g■ obalNavュ ">
くu■ >
くli>く a href=・ ../index.html・ >ホ ームく/a>く /■ i>
くli>く a href=・ ../abot,t/index.html・ >わ たしたちについてく/a>く /■ i>
くli>く a href=・ index.html・ >つ くったもの く/a>く /■ i>
くli>く a href=・ . /contact/index.html・ >お といあわせく/a>く /■ i>
く/u■ >
く/nav>
く/header>
]
[略
.…
]
この段階では、リンクをクリックしても、まだ「このウェブページは見つかりません」 と表示されます。
ブラウザの出力結果
konlo「
[portfo1lo/01 html]
kornasln
0●
Cafe Debut
□
このウェプページは見つかりません
―
=
01 htmiを 複製して「index htm」 というファイル名に変更し、「portfo!,o」 フォリ
レダ内に配置します。
フォルダ構成
臼
□
｀
コ
︲
ｍ
油
ｔ
帆 ｄ
ｎ
ｉ
SEl〕
M[MO
K子
lfl[肌 llle斗
ンター ネット上 に公 開 した ときに、 URLか ら
HttMLフ ァイル名を省略して参照することがで
きます。
http://example.com/portfolio/index.html
↓
http://example.com/portfolio/
index htmlを テキストェディタで開き、メインカラム (#pageBodyMain)の 内容を削除します。
[portfolio/index html]
[.‥ 略]
くdiv id=''pageBodyMain“ >
<article
class="articleDetaiI">
亡:誕 idll詈 s:」 雄祖:I:]ttttlHead">
Iを
回
くhl c■ ass=‖ pageTitle">cafe Debutく /hl>
[.… 略 .‥
くp>cafe Debutテ ーマのイメージ撮影にご協力いただきました。とっても素敵なお店です。く/p>
く/as■ de>
]
く/footer>
く/artic■ e>
く/div>
[略
.… ]
メインカラムに、 削除した内容の代わりに見出し(pagettitle)を 入力します。
ブラウザで表示し、 グローノウレナビの 「つくつたもの」 とローカルナビの 「Cafe Debut」
をクリックすると、お
互いのフアイル間を行き来できるようになつていることが確認できます。
[portfo io/index html]
[.… 略〕
くdiv id="pageBody">
くdiv
id="pageBodyMain">
くhl class=・ pageTitle・ >つ く[た もυ
つく/hl>
く/div>
[略
くdiv
.…
id="pageBodySub・ >
]
ブラウザの出力結果 [portfdio/mdex html][portfolb/01 html]
01 hinl
rndex ntrr
…
中
フォルダ構成
曰 曰 臼曰
︲
。
臼 ¨臼 ｆ
ｔ
ｒ
ｏ
ｐ
ｗ
ｗ
臼ｗ
「わたしたちについて」 ペ ージ用に「about」 フォ
ル ダを作 成 し、「portfolio」 フォル ダ内の「index
html」 をコピーして配置します。
「about」 フォルダ内の index htmlを テキストエディタで開き、ページタイトリ
レ(pageTiJe)を 「つくつたもの」か
ら「わたしたちについて」 に変更します。
また、「サンプルサイトについて」(ixペ ージ)で 見たように、「わたしたちについて」 のページはローカルナビを
持たないので、 ローカルナビ部分を削除します。
[about/index html]
[.¨ 略]
くdiv id=“
くdiv
pageBody">
id="PageBodyMain‖ >
くhl class=・ pageTitle">わ たしたち(こ つtヽ てく/hl>
く/div>
くdiv
id="
<nav class=
class="IocalNavj-">
<ur>
fu. fi+ l
r E!'|?
く■i>く a href="03.htm■ ">バ ッタになりたい1巨 法イ
吏いく/a>く /■ ■>
く■i>く a href="02.htm■ ">WordPressう 言
ザインワークブックく/a>く
くli>く a href="01.html">Cafe Debutく /a>く /■ i>
|
/1i>
く/ul>
く/nav>
くsection class="newsList“ >
くh2>お しらせく/h2>
くul>
く■i>く time datetime="2013-10-01">2013.10.01く /time>
コモモとモリコで、書籍「HTML/CSSの 教科書 (仮 題)」 を執筆中です。お楽しみに。く/■ i>
く■i>く time datetime=“ 2013-10¨ 01">2013.10.01く /time>
コモモ。
モリコ。
「komOrikomasha」 をオープンしました。く/1i>
ひろましゃ3人 のサイト
く/ul>
く/section>
く/div>
く/div>
[略
.…
]
「わたしたちについて」のページでは、「つくつたもの」ページが他の階層にあるフアイルヘのリンクです。また、「わ
たしたちについて」 は、 自分自身のフアイルヘのリンクです。そのため、下記のようにリンクを修正します。
[about/index html]
[.… 略
くheader id="pageHead“ >
くhl id=''siteTit■ e">komorikomashaく /hl>
くp id=“ catchcopy">1人 じゃできない[.… 略 ...]楽 しいものづぐり
。く/p>
くnav c■ ass="g■ oba■ Navユ ">
くu■ >
くli>く a href="../index.htm■・ >ホ ームく/a>く /■ i>
く■i>く a href="index.html">わ たしたちにつもヽ
てく/a>く /■ i>
く■i>く a href="../portfolio/index.htm■ ">つ くったもの く/a>く /■ i>
く■i>く a href="../contact/index.html・ >お といあわせく/a>く /■ i>
く/ul>
く/nav>
く/header>
]
[略
168
.…
]
レダ内の index.htmlを 開いて、 グローバルナビの 「つ くつたもの」 をクリックし、正
フォリ
しく動作していることを確認してみましょう。
ブラウザで 「about」
ブラウザの 出 力結 果 [abOut/index html]
komorlkomasha
わたしたちについて
一
□一
レダ内の 「index htmuを コピーし
「おといあわせ」 ページ用に「contact」 フォルダを作成し、「about」 フォリ
て配置します。
。 一 一
ｎ ｉ
。
︲
。
ｍ
ｆ
日ｏ
臼
ｔ
ｍ
ｒ臼鋼臼
ｏ
ｐ
ｃ
一
ｗ
□ｗ
ｗ
フォル ダ構成
製
複
ｍ ｍ
曰
﹁Ｉ Ｊ
曰
contact
ページタイトル (.pageTiJe)を 「わたしたちについて」 から「おといあわせ」 に変更します。
[contact/index html]
[.… 略]
くdiv id="pageBody''>
くdiv
id="PageBodyMain">
くhl c■ ass="pageTit■ e">お としヽ
あわせく/hl>
く/div>
[略
.…
]
「おといあわせ」のページでは、
「わたしたちについて」ページが他の階層にあるファイルヘのリンクです。また、「お
といあわせ」 は、自分自身のファイルヘのリンクです。そのため、下記のようにリンクを修正します。
[Contact/index html]
[.… 略]
くheader ■d=“ pageHead“ >
くhl id="siteTit■e">komorikomashaく /hl>
くP id=“ CatchcoPy“ >1人 じゃできない[...略 ...]楽 しいものづくり。く/p>
くnav c■ ass="91oba■ Nav工 ">
くol>
く■i>く a href="../index.htm■ “
>ホ ームく/a>く /■ i>
く■i>く a href=''../abOut/index.htm■ ''>わ たしたちについてくノa>く /1i>
く■i>く a href=‖ ../Portfo■ io/index.html">つ くったもの く/a>く /1i>
くli>く a href=“ index.h trr■ “>お といあわせく/a>く /■ i>
く/ul>
く/nav>
く/header>
.… ]
[略
ブラウザで「contact」 フォルダ内の index.htmiを 開いて、グローバルナビの「わたしたちについて」をクリックし、
正しく動作していることを確認してみましょう。
ブラウザの出力結果
[Contact/index htm旧
l komorikOmasha
l
1
。 け
・
‐‐
,,
', F'
おといあわせ
ブラウザで、グローバルナビの「わたしたちについて」
「つくつたもの」
「おといあわせ」をそれぞれクリックしてみましょ
う。3つ のファイル間で、お互いに行き来できるようになつていることが確認できます。
ブラウザの出力結果
[abOut力 ndex html]
komorlkomasha
わた したちについて
l
「about」 フォルダ内の「index.htm」 をコピーして、いちばん上の階層の「www」 フォルダ内に配置します。
ｘ
ｅ
ｄ
ｎ
。
ｔ
ｎ ｉ
ｃ
ｔ
。
︲
ｕ
ａ
。
Ｄ ｍ
ｔ
ｆ
ｏ
臼
臼
臼
臼
ｔ
ｎ
ｍ
ｂ
ｒ
ｏ
ｏ
ａ
ｏ
ｃ
ｐ
ｃ
フォル ダ構成
一
口一
一
トップページ「ホーム」は2段 組みレイアウトではないので、トップページ用の index htmlを テキストエディタで開き、
メインカラム (#pageBodyMain)と サブカラム (#pageBodySub)を 要素の内容 (次 のソースコードで囲つている範
囲)ご と削除します。
[index htm旧
[.… 略]
くdiv id="pageBody">
<div id="pageBodyMain
<hl class= " pageTitle
</div>
くdiv
"
>
btUt;blJlrt-(
<
/
h!>
削除
id="PageBodysub">
くsection class="newsList''>
くh2>お しらせく/h2>
くul>
くli>く time datetime="2013-10-01">2013.10.01く /time>
コモモとモリコで、書籍「HTML/CSSの 教科書 (仮 題)」 を執筆中です。お楽しみに。く/1i>
く■i>く time datetime=・ 2013-10-01''>2013.10.01く /time>
・モリコ
コモモ
・ひろましゃ3人のサイト
「ko■ orikomasha」 をオープンしました。く/■ i>
く/u■ >
く/section>
く/div>
く/div>
[略
.¨ ]
ここで、ブラウザでトップページの表示を確認すると、 CSSが 適用されておらず、グローバルナビに設置したリン
クも動作していません。
ブラウザの出力結果
Dndex htm旧
korlor:komasha
<head>内 に記 述 した くlink>タ グの href属 性 値 から「 ./」 を削 除 し、「 common/css/normalize css」
と修正すると、 トップページにもCSSが 適用されます。
「 common/css/style css」
llndex html]
く!DOCTYPE htm■ >
くhtml ■ang=“ ja“ >
くhead>
くmeta charset="utf-8">
くtitle>ベ ージのタイトリ
レく/title>
くlink rel=''stylesheet" href=“ c oIIlmo n/css/normalize.css''>
くlink rel="sty■ esheet" href=“ common/css/style.css">
く/head>
くbody>
[略
.… ]
ブラウザの出力結果 [ndex html]
グ ローバ ル ナ ビの <a>タ グの href属 性値 から「¨/」 を削 除 し、「わた したちにつ いて 」 も「about/index.
と指定すると、 トツプページのグローバルナピからも各 ページヘ正 しくリンクするようになります。
html」
lndex htm旧
[.… 略]
くheader id=‖ pageHead">
くhl id=''siteTit■ e">komorikomashaく /hl>
くp id="catchcoPy">1人 じゃできない[.… 略 ...]楽 しいものづくり。く/P>
くnav class="91obalNav■ ">
一
■一
くul>
く■i>く a href="index.htm■ ">ホ ームく/a>く /■ ■>
くli>く a href=''about/index.html''>わ たしたちについてく/a>く /■ i>
くli>く a href=''portfolio/index.htm■ ">つ くったも0く /a>く /■ i>
く■i>く a href="about/index.html">お といあわせく/a>く /1i>
くノu■ >
く/nav>
く/header>
[略
.… ]
「ホーム」
「わたしたちについて」
「つくつたもの」
「おといあわせ」のどのベージからも、グローバルナビのリンクをクリッ
クするとお互いのファイル間を自由に行き来できるようになつていることを確認しましょう。
ブラウザの出力結果
■ホーム [index
html]
■わたしたちについて [about/index htm]
□
わたしたちについて
■つくつたもの [portfolio/index htm]
■おといあわせ [contact/ndex html]
●し
3ヒ
鵬宣ョ絶対バスと相対バスを理解しよう
リンクを設定する際、a要 素の href属 性に指定しているフアイルの場所の記述を「バス」 と呼びます。
くa
href="index.html">リ ンクく/a>
:..¨
¨……….… ………
・¨¨・¨¨¨¨¨¨・¨¨・…………・¨・ HTMLフ アイルの場所 を示 す ハ ス
・¨¨¨¨
a要 素で HTMLフ ァイルの場所を示す場合だけでなく、img要 素で画像ファイルの場所を指定する場合や、
link要 素で CSSフ アイルの場所を指定する場合など、ファイルの場所はすべて「バス」 で記述されます。
<ing src="images/1m9 01 01.jp9" alt="" $ridth="?20" height="390">
<link rel=
◎絶対 バ ス
レにアクセスするには、「http://example.com/portfolio/01.
インターネット上にあるHttMLフ ァイリ
htm」 のように URLを 指定します。このように、「httpプ /∼ ∼」「https://∼ ∼」 ではじまるフアイルの
指定を「絶対バス」 と呼びます。
くa href=“ http:/′ xample.com/Portfolio/01.h trr l">リ ンクく/a>
(〕
:.........・ ・・・・・・・
・・・・・・・・
・・・
・・・・・・・・・・・・・・・
・・・・ イ(1文 寸ハ ラ2(
◎相対 バ ス
相対パスは、現在のページから見て、アクセスしたいファイルがどこにあるのかを相対的に示 します。
レダにフアイリ
レがあるとき
同 じフォリ
01.htmlか ら02.htmlに リンクするには、「 フア
イル名」 を指定します。
01 html
くa href=“ 02.html・ >リ ンクく/a>
01 htmlか ら02 htmlに リンクする場合も同様に、
「フアイル名」 を指定します。
くa href=・ 01 html“ >リ ンクく/a>
02 html
1つ 下のフォルダにフアイルがあるとき
01.htmlか ら02 htmlに リンクするには、「フオ
ル ダ名 /フ ァイリ
レ名」 のように 「/(ス ラツシュ)」
区切りで指定します。
01 html
くa href="about/02.h tln■
“>リ ンクく/a>
02.htm:か ら01.htmlに リンクするには、「
aboul
./フ ァ
イル名」 のように指定 します。「 ../」 は1つ上の階
層を表しています。
02 htm!
くa href="../01.htlnl">リ ンクく/a>
2つ 下のフォルダにフアイルがあるとき
01 htmlか ら02 htmlに リンクするには、「フォ
ルダ名 /フ ォルダ名 /フ ァイル名」のように、「/(ス
ラツシュ)」 区切りで指定します
01.htmi
くa href="about/concept/02.html''>リ ンクく/a>
concept
02 html
02.htmlか ら01.htm:に リンクするには、「 .ノ ../
ファイル名」 のように指定します。 1つ 上の階層を
表す 「 ../」 を、上る階層分だけ追加 します。
02 htm:
くa
レダにフアイリ
レがあるとき
異なるフォリ
href="../../01.htm■・ >リ ンクく/a>
01.htmlか ら02 htm!:こ リンクするには、「 ../フ ォ
ル ダ名 /フ ァイル名」 のように 「 ./」 で 1つ 上の
階層へ上つたあと、フォルダとファイルを指定します。
01 htm!
くa href="../about/02.html''>リ ンクく/a>
02.htmlか ら01.htm!に リンクする場合 も同様 に、
「../フ ォルダ名 /フ ァイル名」 と指定します。
02.html
くa
href="../news/01.html">リ ンクく/a>
ナビゲーションを作り込もう
CSSで 「口…カルナビ」や「グロー′ツレナビ」のデザインを調整し、ベージの主要なナビゲーションと
して見やすくします。
また、ユーザがサイト内で操作に迷わないよう「バンくずナビ」や「ページの先頭へ戻る」リンクを設置
します。
6-2¨ 1
ローカJレ ナビをデザインする
ローカルナビのリスト記号をアイコン画像に変更し、 デザインを調整します。
■
おしらせ
おしらせ
style cssを 開き、サブカラムのローカリ
レナビのリスト
「#pageBOdySub localNavi ul li」
￨
`こ
対 して、 文
Icommon/css/style css]
rdl
字サイズと高さを指定します。
#pageBodysub .newslist uI Ii
ブラウザ の 出 力結 果 [portfolb/01 html]
)
font-r,reight: bold;
display: block;
time {
/+ E-r)Vtc */
fpdgFBodysJD ..ocrl\lv-
u-t li
font-size:14px;
Line-height:1.429;
i
/* ----- t1>h-L6A*Ffr ----- */
p{
#pageBodyMain
tffi...1
{
リストとリストの間が詰まつているので、適切な余白を追加して見やすくします。
ブラウザ の 出力結 果 [portfolio/01 html]
[common/css/sty e Css]
f@l
{-r1_
/* E_h)vrc */
#pageBodysub .localNavi
font-size:14px;
Iine-height:
uI li
{
1.429;
margin-bottom:12px;
tr ri vLcrs
!haa.r, E
)
fd
l
アイコン画像はサイト内で共通して利用します。「common」 フォルダ内に 「images」 フォルダを作成して、ア
コン
レを配置します。
イ
画像ファイリ
サンプルサイト用のアイコン画像ファイリ
レ(ico_arrOw png)を 用意していますので、ダウンロードして imagesフ ォ
ルダに配置してください。
フォルダ構成
臼 丁目
WWW
hd以
06/6-2-1/images/ico_arrow png
‖
耐
画像サイズ :4×
I
L_
。
ｔ
ｃ
ｔ
︲
ｕ
。
ａ
ｔ
Ｏ
臼ｆ
□
ｔ
臼
ｎ
ｂ
ｒ
ｏ
ｏ
ａ
ｃ
ｐ
2コ
一
Ｌ
﹂
Ｉ ＩＩ ︲ ︲︱ ︲ ︲ ︲ ︲
ln3ages
ー[cO
arro、 v plng
4px
style― image」 プロパ ティの値 に、 アイコン画像 ファイルのパ スを指 定 し、 リスト記号 をアイコンにします。
■画像ファイルのハスIJ、 CSSフ ァイル (sty e css)か ら見て、相対ハスで指定していることに注意しましょう
「 list―
) r,
+t
Afrtff; t
[Portfolio/o
t
Icommon/css/style css]
html]
fdl
/* E-h)Vtc */
#pageBodysub .localNavi uI li
font-size:14px;
Iine-height: 1.429;
margin-bottom:12px;
urf
list-sty]e-image:
arrow.png" );
("
{
.. / )-maqes/ tco,
)
tffi...1
「list― style image」 プロパテイでリスト記号を画像にしましたが、アイコンの位置が少し下にずれてしまつています。
アイコンの位置を調整したいところですが、list― Style― imageプ ロパティでは画像の位置を調整することができません。
そのため、リスト記号を画像にしたい場合は、「backgrOund― image」 プロバテイを利用するのが一般的です。
「list― style― image」 の代わりに「list― style― typeinonei」 を指定して、 リスト記号を非表示にします。
旨定すると、 ‖要素内には画像が繰
次に、「backgrOund― image」 プロバテイにアイコン画像ファイルの∪RLを 手
り返して敷き詰められます。
ブラウザの出力結果
lcommon/css/style cssl
[portfdio/01 html]
籠
t...ffi]
/* E-r)V)-t */
#pageBodysub .localNavi uf Ii
{
font-size: 14Pxi
Iine-height:1.429;
margin-bottom: 12Px;
:籠 ::::籠 :￨:::￨:::::l:
お しらせ
Iist-styLe-type:
none;
background-lmage: ur1(' .. /images,/ico-
arrow.png );
)
fdl
「background― repeatno― repeat」
を追記して、背景画像の繰り返し表示を禁止します。
ブラウザの 出力結 果 [pOrtfo io/01 htm]
Icommon/css/style.css]
t...ts1
/* E-h)t/rC */
#pageBodysub .localNavi ul Ii
お しらせ
^rr^u
hh^"
\.
background-repeat ; no-repeat;
)
tffi. ..1
「backgrOund― position」 ブロバティには、画像の開始位置を指定します。1番 目に、横に移動したい距離、2番 目に、
縦に移動したい距離を指定します。
ここでは、「background― positioni 0 8px」 と指定し、横位置は移動せず、縦位置を上から「8px」 移動します。
) 2t
「
V
Afrfi#Et
―
lportf olio/o 1 .htmi]
―
Ico
m
mo
n
/c ss/ sty
t...ffi1
/*
E-h)V+c
le. c
ss]
*/
#pageBodysub .IocatNavi uI Ii
20pl
WordPress;
ブ
Lン
{
font-size:14px;
Iine-height:1.429;
margin-bottom: 12px;
list-style-type:
nonei
background-image: url( ".. /images/ico_
arrow.Png"
);
background-repeat : no-repeat i
ク
background-position: 0 Bpx;
[略
.…
]
一
□一
i
font-size:14px;
Iine-height:1.429;
margin-bottom:12px;
List-style-type3 nonei
background-image: url( "..,/inages,/ico_
アイコンが文字と重なつているため、「padding― left」 プロパテイを指定して、文字に10pxの 左バディングを指
定して字下げします。
) 2,
V
Afr/alffi*
[portfolio/O
1
.html]
lcommon/css/style.cssl
r...
/*
ffil
tr-h)v+c */
#pageBodysub .IocalNavi ul li
{
font-size:14pxi
Iine-height:1.429;
margin-bottom:12px;
none;
Iist-style-type!
background-imager url( ". . /images/ico-
お しらせ
arrow. png"
);
background-repeat: no-rePeati
background-position: 0 8Px;
padding-1eft: 10px;
i
fdl
u!要 素には、ブラウザの標準値で上下マージンと、左 バデイングが設定されています。
上マージンは 「0」 に、下マージンは 「おしらせ」 との余白をもう少し増やしたいので、「30px」 とします。
左 パディングは、 ブラウザ標準値ではリスト記号が配置されるため 「40px」 となつていますが、 ここではリスト
記号 (liSt― sty!e)で はなく背景画像としてアイコン表示しているので、「0」 とします。
ブラウザの出力結果
[portfolio/01 html]
Icom mo n /css/sty le.css]
1... ffil
/* a-h)ttc
+/
#pageBodysub ,localNavi u1
{
margin: 0 0 30px;
padding-left: 0;
)
#pageBodysub .local.Navi ul Ii
{
font-sizer l4pxi
line-heights 1.429;
margin-bottom: 12px;
Iist-style-type : none;
background-image: url ( " . . / inages / icoarrow.Png" );
background-repeat: no-rePeat;
background-position: 0 8Px;
padding-Ieft:10px;
)
tB6...l
q票
当POI‖ T ul要 素0検 証
ブラウザの 出力結 果 [portfolb/01 html]
Google Chromeで ローカルナビの ul要 素につ
いて、「要素の検証」 をすると、 <ul>タ グには上
下マージンと左バディングが、ブラウザ標準値で
￨
1
、
シ、
11.1, t:欝 :+イ ￨
戸●￨ザ 「,1■ ,ザ イ ノ・F―
t｀
指定されていることがわかります (要 素の検証につ
いては「【
POINT】 Google Chromeの 開発者ツー
ル」 111ペ ージ参照)。
￨
u1 220
104
■
■鰤 ;コ 背景画像 を指定 する
◎
background‐ image
background― imageプ ロバティで bOdy要 素に画像を指定すると、 ブラウザの表 示領域全面に繰 り返
して表示されます。
下のような継ぎ目の目立たない画像を用意することで、 自然な背景を作ることができます。
一
´
￨
￨
06/6-2-1/images/bgl png
画像サイズ :100× 100px
ブラウザの出力結果
body {
background― image: url(・ ../images/
bgl.png"),
)
LM[MO繋 慮[ゃ 貧亀酵選i玉曇場
;ヂ
「槙
L
嵩
工
覆
[琲 ↓
ン画像素材がいくつか付属しています。 また継ぎ目のないように、 自分で画像を加工する場合も
あります。 なお、 インターネット上でフリーで配布されているものも多いので、「 ICOL∪ MN】
画像素材を入手する」(106ベ ージ)で 紹介 しているサイトなどで探 してみてもよいでしょう。
⊂)background¨ repeat
background‐ repeatプ ロバティは、 backgroundlmageプ ロバティで指定 した画像の繰 り返 し方法
を指定することができます。
下のような画像で background― repeatプ ロバティの値を変えた際の表示を確認してみましょう。
06/6‐ 2‐ 1/images/bg2
画像サイズ :5×
png
5px
値に「no― repeat」 を指定すると、画像を1回 だけ表示して繰り返しません。
ブラウザの出力結果
komorlkomasha
・
ら tし た 三
・
′
oつ
,「
it:
く ■ tt'
` 'う
body {
background-inage: url ( ". . /inages/
b92.png" );
background-repeat
: no-rePeat i
)
な 1・
Cafe Debut
値 に 「repeat‐ x」 と指定すると、横方向にのみ画像を繰り返して表示します。
ブラウザの出力結果
komorlkomasha
body {
background― image: ur■
(・
../images/
b92.png"),
background― repeat: repeat― x;
・
う it´ た ちに
・ ラ く tt,
lt
。 ● こ・
_‐
'_f
tr
Cafe Debut
}
値に「repeat‐ y」 と指定すると、縦方向にのみ画像を繰り返して表示します。
ブラウザの出力結果
body {
backgrou nd・・image: ur■
bg2.png"),
("../images/
background・ ‐
repeat: repeat― y,
}
一
■
C)background¨ position
backgrOund‐ posniOnプ ロバティは、 background‐ imageプ ロバティで指定 した画像 の開始位置を
指定することができます。
次のように、横方向・縦方向の順でスペース区切りで値を指定します。
ブラウザの出力結果
komorikOmasha
ヽ
人 じゃできないことII. 方を合ゎせれ:が できる.0っ てみた●
そカタチにする
l
body {
background-image: url( ". . /inages/
3人
bg2.png" ) ;
￨
background-repeat: no-repeati
background-position: 1opx 2Opx;
)
Cafe Debut
ヽ
―
「6-2-4ベ ージ内リンクを設置する」(204ペ ージ)で 後述するように、値を「%」 で指定することも可能です。
また、「left,center,nght」 のように、キーワードで指定することも可能です。次の例では、
繰り返した画像に対して「bottom」 を指定しています。
ブラウザの出力結果
body {
口彫●カ
background-funage:
b92.png" ) t
kltchen no"
Jヒ
background-repeat
湾コ軋,市 中央区南3^● ar目 大澪ピル2●
FaC9り oΩ ヒヘ■2
・ …
/ images/
: repeat-xi
)
ヽ
ただきました.と
C“ o Oobutテ ーマのイメージ■影にこ■力も
COpy"hte 20i3 0komlkomas■
.
background-position: bottomi
螢 じКitChe¨
・
url( ".
NI R●
っても
鷹s Re"rved
C)background
backgroundプ ロノヽティは、 次 のように background関 連 のプロノヽティの値 をまとめて指 定できます 。
スペ ース 区切 りで順不 同で指 定 し、 値 を省略することも可能です。
body {
background: #FFFFFF ur■
}
:
:
・/11nages/bg2.pngl')no― repeat 10Px 20px,
(''・
:
bac kgro
:
u
nd-i mage
bac kground -position
::l
コ
:0[UM‖
アイコン画像を作るには
ウェブデザインの現場では、アイコン画像はおもに、 Photoshopや F:reworks、
または Ⅲustratorな
どのソフトを使つて制作します。
第4章 で紹介した画像編集ソフト「 Pixlr」 は、写真編集が主機能になつているので、アイコンやイラス
トなどの制作にはあまり向いていませんが、 アイコン画像 はインターネット上でフリーで配布されているも
のも多く、 学習の初期段階ではこれらを利用してみるのもよいでしょう。
本書では、アイコンの配布先の一例として、 lcoMoonと いうサイトを紹 介します。
● :coMoon
htto://icomoon io/
lcoMoonの トップページで「lcoMoon App」 をクリックし、「Start the App」 ボタンをクリックしましょう。
:coMoon
icoMoonで は、 アイコンのセットを購入することもできますが、 lcoMcon Appの 初期状態で表示され
ているアイコンは、 フリーで利用できます
O lcoMoon Appの 利用 方法
‐
●
●
●
呻
・ⅢⅢ Ⅲ
… に
……
CD … …Ⅲ ヤ
…
v
"●
口
―
・
・
ぉ
X∞ 1,日
■
/
、
6-´ 0ア イコンをクリックして選択
"・
￨
,
を入 力
Ⅲ
Iヽ
・
‐
‐ ‐ クリック て
. c l キ｀
し
・ ρ
…
。
「
②クリ´ク
106桁 のカラーコートを入力
オサイス (12‐ 512p×
10画 イ
タウンロート
レを解凍すると、
ダウンロー ドしたzip形 式のフアイリ
:coMoon Appの アイコンの利用例
「PNG」 フォルダの中に、 選択 したアイコン画像
―式が入つています。
ただし、 このように、 インターネット上でフリー
で酉己布されている画像を利用する際には、「ライセ
'
二 uつ た し 魔 i■ tL.
,ヽ
ンス (使 用許諾条件 )」 について酉己慮する必要があ
ります。
lcoMoon Appで 配布されているアイコンは、
アイコンセットによつて制作者が異なるのでそれぞ
れライセンスが違 いますが、 いちばん上に表 示さ
れているアイコンセットの 「lcoMoon― Free」 は、
クリエイティブ・コモンズ・ライセンス (CCラ イセンス)
で配布されています。
CCラ イセンスの場合、 サイト上のどこかにアイ
｀こ]fe E● こJt
アイコンは C,LttiC"を 利用 しています
■ヘ ーシの随所に使っている場合は、フツターなとにク
、う
レシットを記述してもよいてして
コンの著作者がわかるように、著作権者のクレジッ
トを記述 しておかなければなりません。
○クリエイティブ・コモンズ 0ラ イセンス (CCラ イセンス)と は
インターネット上にあるフリーの写真やイラスト、アイコンなどの多くは、CCラ イセンスで配布されています。
CCラ イセンスとは、著作者によつて著作物の再利用許可の意思表示を手軽に行えるようにするためのラ
イセンスです。
以下の4つ の条件のうち、「 1.著 作権者のクレジット表記義務」 だけは必須であり、他の3つ は著作者の
意思によって採否が決定されています。
1著 作権者 のクレジット表記義務
2非 営利の場合のみ使用許可
3改 変の禁止
4同 一条件 の継承義務
キlcoMoon― Freeは 、「1著 作権者のクレジット表記義務Jの みです
CCラ イセンスに限らず、 インターネット上で配布されている素材などを利用する際には、それぞれの著
作者が提示しているライセンスを守つて利用しましよう。
CCラ イセンスの著作物は、 学習の初期段階や個人サイトの利用で上記の条件を守つて利用する場合に
は便利ですが、 これらの制約があるため、仕事としてウエブサイト制作を請け負う場合などには利用できな
いことが多いです。最終的には、デザインソフトなどを利用して自作するのがよいでしょう。
グローバJレ ナビをデザインする
グローバルナビを横並びになるよう調整し、現在のページには背景色をつ けるなど、わかりやすいデザインにします。
一
■
⇒
style cssを 開き、ヘツダーのグローバルナビ「#pageHead
ブラウザの 出力結 果
[portfolio/01 html]
komorlkomasha
l人
Icommon/css/style.r:ssJ
t...
一
ｔ く と
・
一
小 わ ・
つ 量一
∴i■
,[フ い こ
,「 :の
t｀
3,■
t
ffil
#pagetlead #catchcopy {
font-size:1zpx;
Iine-height: I.5;
margin-top: ipx;
じゃできないことも 力を合わせればできる。や ってみたいをカタナにする
t´
globalNavi」 に、上下の罫線を追加します。
)
/* )E-llt'/C
*/
spageHead .qloba Navi
border: soli(l
border-w i dth
Cafe Debut
)
/* ^-))yt-
#pageFoot {
tB6...1
*/
{
#CCCccC;
I
px 0;
グローバルナビのリスト「#pageHead.giobalNavi uHi」
ブラウザの 出力結果
[portfo io/01 html]
[common/css/style css]
[.… 略]
kol■ orlkomasha
l人
/★
じゃできないことも、力を合わせればできる。やってみたいをカタチにすZ
爪
から、リスト記号をりに
表示にします。
グローバルナビ ★/
#pageHead .globalNavi (
border: solid チccCCCC,
border― width: lpx O,
こ￨
)
1)itた ちぃ つ 、 こ
つく :t tJの
イpa9eHead .910balllavi
list― style: none,
よ￨と いうわ せ
ul li {
)
Cafe Debut
[略
.…
]
<ul>タ グには、ブラウザ標準値で上下マージンと左パディングが設定されているので、これらの余白をなくすため、
marginプ ロパティとpaddingプ ロバティの値を 「O」 にします。
ブラウザの出力結果 [portfolb/01
html]
[common/css/style css]
[.… 略]
kolnorlkolnasha
/十
l人 じゃで き な い こ と も、 力 を合 わ せ れ ば で き る 。 や って み た い を カ タ ナ にす 沼
#pageHead .91obalNavi {
グローバルナビ ★/
border: so■ id #ccCCCC,
border― width: lPx O,
ー
ホ
￨
ム
わた したちに つい こ
つ く ,た もの
お といわ つヒ
Cafe Debut
ヽ
}
￨
#pa9ettead .91obalNavi ul (
margin: 0,
padding: 0,
}
#pageHead .globalNavi u■
list― style= none,
}
[略
ko11,()rikll l〕
IS,[1
11 (
.…
]
Google Chromeで ul要 素を検証すると、 ブラウザ
標準のマージンとパ ディングを確認できます。
リストの横幅を固定し、横並びにします。コンテンツ全体の横幅は980pxの ため、 リストのwidthブ ロバティを
245px(980//5=245)と し、loatプ ロパティでリストをすべて左に寄せ、1順 番に並べます。
ブラウザの出力結果
[portfolb/01 html]
[common/css/style css]
980千 )x
[.… 略]
グローバルナビ ★/
/☆
Cafe Debut
ヽ ■■■
LEJ
#pageHead .91obュ lNavi {
border: sol id #ccCCCC,
border― width: lpx O,
}
儡
#pageHead .g■ obalNavi u■ {
margin: 0,
padding: o;
)
#pageHead .glok,a■ Navi ul ll (
list― style:
none,
width: 2451,x,
nOat: left
}
[略
.…
]
リストをloatし たため、リストの親要素のボックスの高さが0と なり、セレク タ「#pageHead globalNavi」 に
追加した上下のボーダーがくっついた状態になつてしまいました。
セレクタ「#pageHead globalNavi ul」 :こ 対して、右下のようにclearfi)((141ペ ージ参照)を 適用して、リス
トの親要素であるul要 素のボックスが高さを持つようにします。
ブラウザの出力結果
[portfolio/01 html]
Icommon/css/style.css]
komorlkomasha
t...
l人 じゃで きな しヽ
ことも、力を合わせればできる。や ってみた
#pageHead .gl,>balNavi {
/1N「
A
ゎたし上ち
border: s)Iid
border-wilth:
#CCCCCC;
lpx 0;
￨
Cafe Debut
変更 後
ffil
/* t1-tvttc t /
)
#pageHead .glcbalNavi ul {
margin: 0;
畢
padding:0;
komorlkomasha
)
+pagellead .globafNavi uI:after
content: ' ';
clear: b(,th;
dlsplay: block;
l人 じ ゃ で き な しヽこ と も 、 力 を 合 わ せ れ ば で き る 。 や って み た
ホー ム
わ た した ち
￨
)
#pageHead .g.-obalNavi uI li
list-sty Le3 nonei
Cafe Debut
width: 2 l5px;
float: leEt;
)
fdl
{
{
リストの左側に罫線を追加 し、 ナビゲーションの区切りがわかるようにします。また、左右にバディングを追加し、
罫線に文字がくつつかないようにしまり。
ブラウザの出力結果
[portfdio/01 html]
. . ,
css]
/* t1-l\)v+t */
‐
'
￨
Cafe Debut
com mo n/cs s/sty le.
t...ffi]
k()111()rikolll:is li:
・
I
￨―
r
・
・
.
#pageHead .globalNavi {
border: solid #Cccccc;
border-width: lpx 0;
)
#pageBead .globalNavi uI {
nargin:0;
paddingr 0;
)
#pageHead .globalNavi ul3after
content: "";
a]arp
{
hn+h.
display: block;
)
#pageHead .globalNavi uI Ii
none;
Iist-style:
width:245px;
float: Ieft;
border-teft: solid lpx
padding:0 1()px;
{
#CCCCCC;
)
tdl
リスト全体の横幅は、手‖
原0で 指定した横幅の245pxに 、右罫線lpxと 左右バディング20pxを 加えて、266px
となつています。そのため、コンテンツ全体の横幅980pxに 、5つ 目のリスト「おといあわせ」が収まりきらなくなり、
「おといあわせ」 は下に落ちてしまつた状態です。
Google Chromeで li要 素を検証すると、現在の li要 素のボックスサイズを確認することができます。
kol■ orlkomasha
cafe nehl■
このように、罫線やパディングの値は widthプ ロバティの値に加算されて全体の横幅が決まるため、widthプ ロパテイ
の値を224px(245-20-1=224px)と してもよいのですが、毎回計算をしなければならないのは面倒です。
Icommon/css/style css]
そこで、「box― sizing」 プロノヽ
ティの値に「border―
box」 と指定し、widthプ ロバティで指定した値に、罫
線とバ ディングの値も含めます。詳しくは、「 I解 説】
box― sizingプ ロバティとボックス」(197ペ ージ)で 後述
します。
なお、 box― sizingブ ロバティは CSS3で 新 しく追加
されたため、現在のところ、 Firefoxで も対応させるた
めには、「―
moz‐ box― sizingi border‐ box:」 を追カ
ロし
ておく必要があります。詳しくは「 【
解説】CSS3と ベ
Etl
/* )E-t\)rt. */
#pageHead .globalNavi {
border: solid #cccccc;
border-width: 1px 0;
)
#pageHead .globalNavi- uI {
margin: 0;
padding:0;
)
#pageHead .globalNavi ul:after
content: "";
^la^r.
ブラウザの 出力結 果
{
h^fh.
display: block;
[portfo lo/01 html]
)
#pageHead .globalNavi uI li
ko llorikolllas11(1
I i c+-c+r'l
a.
{
n^^a.
width:245px;
float: Ieft;
border-Ieft3 solid lpx #Cccccc;
padding:0 1Opx;
-:roz-bor-s i z j r. j: bo: cer-ooxi
box-sizing : bordcr-box;
Cぎe Debut
)
tffi.. .l
text― alignプ
ロバティで文字をセンター寄せにします。 [COmmOn/css/sty e css]
同時に、 文字サイズと高さを指定 して、本文部分のテ
キストの大きさと設定を揃えています。
ブラウザの出力結果
t...
#pageHead .globalNavi {
border: soLad #CCCCCC;
border-vridth: lpx 0;
[portfolb/01 html]
kolllorikonlasha
ffil
/* ,E-t\)rtC */
)
#pageHead .globalNavi ul {
margj-n: O;
paddj-ng: 0 ;
)
#pageHead .globalNavi ul:after
" ";
h^+h.
content:
^l
6r-.
{
display: block;
)
#pageHead .globalNavi uI Ii
{
Iist-style:
none;
width:245px;
float: left;
border-Ieft: solid lpx #cccccc;
padding:0 10px;
-moz-box-sizing : border-box;
box-sizing: border-box;
人じやできないことも 充を合わせればできる。
L,Yt-:l
inn.
a,.ntar.
font-srzc: 14px;
Iine-height: 1.,:129;
)
t@l
一■一
ンダープレフィックス」(197ペ ージ)で 後述します。
t...
リストに設定した左罫線とグローバルナビ全体に設定した上下罫線の間に余白を設定して、余裕のあるデザインに
します。
右下のように、セレクタ「#pageHead globalNavi」 に10pxの 上下パデイングをオ
旨定します。
ブラウザの 出力結果
[portfo io/01 html]
Icommon/css/style css]
t..
komorlkol■ asha
.
ffil
/* ,E-t\)vlc */
#pageaead .globalNavi {
border: solid #CCCCCCt
border-width: lpx 0;
paddlng: l0px 0;
CaFe Debut
)
#pageHead .globalNavi ul
{
margin:0;
padding:0;
)
tffi...1
すべてのリストに左罫線を追加していますが、デザインのバランス上、「ホーム」では左罫線は不要です。そこで
疑似クラス「:first― child」 を利用して、最初のリストの罫線を非表示にします。「ifirst― child」 の詳細は、「 【
解説
n番 目の要素を数えて CSSを 指定する」(199ペ ージ)で 後述します。
l
ブラウザの出力結果
[portfdio/01 html]
Icommon/css/style css]
t...
komorlkomasha
ffil
#pageHead .globalNavi ul Ii
list-style:
none;
width:245px;
l人 じ ゃ で き な い こ と も 、 力 を 合 わ せ れ ば で き る 。 や って み 去
€^a+.
畢
komorlkomasha
)
",^-^-tr-.i
PoYclcou
力一
ム
^l ^Ha-
border-1eft:
l人 じ ゃ で き な い こ と も 、 力 を 合 わ せ れ ば で き る 。 や っ て み 去
T―
I af+.
border-left: solid lpx #CCCCCC;
padding:0 10px;
-moz-box-sizing: border-boxi
box-sizing: border-boxi
text-align3 center;
font-size:14pxi
line-height:1.429;
,31
変更後
{
)
Tdl
rrr!.:
none.
rr'l
I i .fircf
_.hi
ld
l
リンクには文字色と下線がついていますが、グローバルナビは配置場所からも― 目でナビゲーションとわかりますし、
リンク色や下線がついていないデザインの方がスッキリします。
そこで、グローバルナビの a要 素に限定して、文章部分の文字色と同じ濃いグレーにします。値に「inhern」 と
指定すると、親要素のプ ロバテイの値を強制的に引き継ぎます。 つ まり、 aの 親要素は liで すから、 li要 素の文字色
「#333333」 となります。
解説】
また、リンクの下線を消すには「text― decoralon」 ブロバテイを「none」 に指定します。詳しくは「【
ロバティ」(200ペ ージ)で 後述します。
text― decorationプ
ブラウザの出力結果
[oOrtfdio/01 html]
Icommon/css/style css]
t... ffil
#pageHead .globalNavi ul Ii
ko11lorik()[llas 1 1
{
none;
Iist-styIe:
width:245px;
float: left;
border-leftr solid lpx #ccCCCC;
padding:0 10px;
-moz-box-sizing: border-boxi
box-sizing: border-box;
text-align: centeri
font-size: 14px;
Iine-height:1.429;
)
#pagettead .globalNavi ul li:first-child
border-Ieft3
M[MO胃 :了 :1ユ [品
ヽ〕
とカラーコー ドを指定しても同じ結果になります。
none;
)
#pageHead .globalNavi ul 1i a{
color: inherir-;
text-decoration:
none;
)
ページ全体のリンクでは、マウスが重なつたときは文字色を変更していますが、グローバルナビでは背景色を変更します。
セレクタに「:hover」 を追加して、background― colorプ ロバティで背景色を変更します。
ブラウザの出力結果
[portfo110/01 html]
lcommon/css/style,cssl
t...
〕
ha
tstl
uI lirfirst-child
#pageHead .globalllavi
border-left:
ヽをカタナにする、3人 の交 しいものづ
lれ ばで きる。や つてみたし
いて
たヽ
わたし
Fつ
none;
)
#pageHead .globalNavi
aal
ar.
i nhari
u■
■iaく
i.
text-decoration
!
none,
)
t'pageFlead . globa I l'la\'1 t11 li a:hover (
″F2F2E5,
background-coIor:
J
tdl
{
a要 素は、lme要 素などと同様にインライン要素 (152ペ ージ参照)の ため、a要 素のボックスは文字の範囲のみ
です。そのため、文字から外れた部分はクリックできませんが、グローバルナビでは文字の部分だけではなく、リス
ト全体にリンク範囲を広げ、ナビゲーションをクリックしやすくしましょう。
「displayiblocki」 と指定してブロックレベル要素に変更すると、マウスが重なつたときの背景色がリスト全体に広がり、
リスト全体がクリックできるようになります。
) 2t
V
Ofrtffi*
lportfotio/O 1 .htmt]
Icommon/css/style cssl
t...Gl
sha
菫ればできる。やってみたいをカタチにする、3人 の 資
わた した ちにつ いて
#pageHead .globalNavi ul li:first-child
border-left: none.
しい も の づ
)
#pageHead .global.Navi uI Ii
む
{
color: inherit;
text-decoration:
display: block;
a {
nonel
)
#pageHead ,globalNavi
uI Ii a:hover
background-coLor. #r'2F2E5 i
{
)
tts...1
ナビゲーションの上下に余自を追加してクリック範囲を広げ、よリクリックしやすいデザインにするため、a要 素に
上下バディングを追加します。
ブラウザの 出力結果
[portfo io/01 html]
ha
、
Icom mo n/css/style. css]
l
lれ ばで きる。や ってみた いをカ タチにする、3人 の発 ししヽ
ものう
わた した ちについて
r...
ffil
#pageHead .globalNavi uI li:first-child
border-Ieft: nonei
)
#pageHead . globalNavi ul li a(
color: inherit;
text-decoration
display: block;
padding: 5px 0;
も
3
none,
)
#pageHead .gl-obalNavi
background-coIor:
)
tffi...1
u■
li a:hOver
#F2F2E5,
{
ユーザが現在どのベージにいるのか迷わないように、グローノツレナビのうち現在のページをわかるようにしておく
と親切です。ここでは、現在のページ「つくつたもの」 のナビゲーシ∃ンに、マウスが重なつたときと同じように背
景色をつけます。
まず、01 htmlを 開き、グローバルナビのうち、「つくつたもの」 の <li>タ グについて、 クラス「current」 を
追加します。
[portfolio/01 html]
[.… 略〕
くheader id="pageHead・ >
くhl id=“ siteTitle・ >komorikomashaく /hl>
くp id="catchcopy">1人 じゃできない[.… 略 ...]楽 しいものづくり。く/p>
くnav class="9■ obalNavi‖ >
くul>
くli>く a href="../index.html・ >ホ ームく/a>く /1i>
くli>く a href="../about/index.html">わ たしたち ついてく/a>く /■ i>
`こ
く■i class=・ current・ >く a href="index.htm■ ">つ
くったものく/a>く /■ i>
くli>く a href="../contact/index.html“ >お といあわせく/a>く /1i>
く/ul>
く/nav>
く/header>
[略
...]
次に、style cssに 戻り、マウスオーバー時の指定とカンマ「 で区切り、クラス「current」 のついたリスト
一時と同じ背景色が表示されるようにします。
のa要 素には、 マウスオーノヽ
,」
).rvovlh#et
,.".,.:''f .,:.1:,\1..,-
[portfo io/01 htm]
Icommon/css/style css]
tdt
#pageHead .globalNavi uI Ij. a {
^^1 ^r.
i nhari
+.
text-decoration:
display: block;
padding: 5px 0;
Cafe Debut
none;
)
#pageHead .globalNavi ul Ii
a:hover,
lpageHead .gfobalNavi 0l li.current
background-coLor. #F2F2E5 i
)
fdt
a {
その他のベージのグローバルナビでも現在のページの背景色が変わるように、該当する<!i>タ グにクラス「current」
を追加します。
ホーム
わたしたちについて
lndex.htm旧
￨ 1霊 1兜雲.… … …
l komorlkomasha
__」
くli class="current">く a href=''index.htm■
ホームくノa>く /1i>
つくつたもの
komorikomasha
[aboutヵ ndex.htm旧
''>
・れのヽ
,く
くli
―
―― ‐
――
class="current">く a href="index.htm■ ">わ
たしたちについてく/a>く ノ■i>
おといあわせ
[portfdb力 ndex htm旧
,l J^。
[______一
… 仏
￨
くli c■ ass="current">く a href='lindex.htm■ ">つ
くったものく′a>く /1i>
￨￨:■
911?理 晶
:摯 ,…
[contactヵ ndex.htm旧
,マ ..い
,,t,`ム・
´
い
臥
・
・メ
く■i class=''current“ >く a
といあわせく/a>く /■ ■>
href="indexohtml">お
‖銅itt
box口 sizingプ ロバ ティとボックス
ボックスにwidthプ ロパティとheightプ ロ
バティの値を指定した場合、その値は右図の
抽直]box‐ SiZing:content‐
H刀 則
box;
margin
一
■一
一
ように「要素の内容」 部分の横幅と縦幅を
表しています。
これは、 ブラウザの標準値では、「box―
ヽ
sizing」 プロノ
ティのイ
直に「content‐ box」
が指定されているためです。
「box― sizing」 :プ ロノヽ
ティσ)イ 直に「border―
box」 を指 定 す る と、widthプ ロバ テ ィ
とheightプ ロバティに指定した値 の中に、
paddingと borderの 値を含めます。
なお、box‐ sizingは CsS3で 新しく追加さ
moz―
れたプロパティのため、Firefoxで は「―
box― sizing」 のようにベンダープレフイツクス
をつけた記述をしておく必要があります。厳
box-sizing: border-box;
margln
密には、対応するブラウザによつて、他の
ベンダープレフイツクスの記述も必要 になる
解説】
場合がありますが、詳しくは次の「 【
CSS3と ベンダープレフイツクス」で解説します。
また、IE7以 下 の古 い ブ ラウザ で は、
「boxJzing」 プロバテイに対応していませ
ん。 IE7以 下のブラウザにも対応する場合に
是に
は、「box― sizing:content― box」 を,河 ま
考えておきましょう。
CSS3と ベンダープレフイックス
◎ CSSの バージョン
現在、 勧告されて いるCSSの 最新バージョンは CSS2 1で す。 そのため、 ここまでの解説では、
COLUMN】 新しい段組みレイアウト「フレキシブルボックスレイアウト」」
「box― sizing」 「display:flex」 (「 【
テイや値について紹介してきました。
145ペ ージ)以 外は、CSS2 1で 定義されているプロノヽ
CSSの 新しいバージヨンであるCSS3は 、「boxJzing」 のように便利なプロバテイや値が新しく追加
されています。CSS3は 現在、仕様策定中ではありますが、最新のブラウザではCSS3の 機能の一部を
先行して実装し、利用できるようにしています。
◎ベンダープレフィックス
ベ ンダープレフィックスとは、 このように各ブラ
ウザが草案段階の CSSを 先行して利用できるように、
プロパテイや値につける識別子のことです。
主要なブラウザのベ ンダープレフィックスを右表
に示 します。
主要なブラウザのベンダープレフィックス
‐
vvebkit‐
は外すことが推奨 されているため、 ベ ンダープレ
フイックスをつけないプロパ ティの指定は必ず記述
するようにしましょう。ブラウザによっては、ベンダー
プレフィックスをタトしてプロバティを正式にサポート
すると、 ベ ンダープレフィックス付 きのプロバティ
I
￢
口
L=_
これらのベ ンダープレフィックスは、 それぞれ右
のように記述 します。 ただし、 CSS3の 勧告候補
になつたら、 ブラウザ側のベ ンダープレフィックス
Google Chrome. Safari. (Opera)
亜 垂亜
E
2望?_______」
@
section {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-boxi
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
)
は動かなくなる場合もあります。
なお、box― sizingの 場 合、 現 時 点 で Firefox
以外の主要な最 新ブラウザはベ ンダープレフィック
スなしで動作 します。 そのため、 Firefox以 外の
ベンタープレフィックスは外した方がよいでしょう。
◎
I*il
section {
-moz-box-sizing: border-box;
box-sizing: border-box;
)
CSS3の ブラウザ サポ ー ト状況 を確 認する
本書では、「 1-2代 表的なプラウザ」 で紹介 したブラウザのうち、 現時点でベ ンダープレフィックスが
必要なものについてのみ追加 していますが、 プロバティによつてサポート状況はさまざまです。また、 将来
的にブラウザのバージ⇒功い
た開 こは、∧ンタニブレフィックス付きの記述は最初力ち不要になるでしょう。
そのため、 ベ ンダープレフィックスが必要かとうかを、利用 したいプロパティなどを実装する時点で各ブ
ラウザの対応状況を確認することが望ましいです。そこで、「Can l use」 というサイトを紹介しましょう。
● Can:use...
httpsi//caniuse com/
「Can l use¨ 」 のトップベ ージに表示されている
テキストボックスに、利用したい CSSの プロバティ名
を入力します。 すると、ブラウザの対応状況や、 と
のブラウザとバージョンでベンダープレフィックスが必
要なのかが一目瞭然でわかるようになつています。
右の結果が示すように、「current(現 行バージョ
ン)」 欄を見ると、「box― sizing」 では、 Firefox
のみ 「―
moz― 」 のベ ンダープレフィックスが必 要な
ことがわかります。
.CSS,L… … … …
二躍
…
″ ″ =‐ ・ ―
_■ 9
・…
= …=“
……
"― ―・ い“
=「
n番 目の要素を数えて CSSを 指定する
「 :lrst― child」 のような疑 似 クラスを利用 すると、
ある要素の中の任意の要素に対 してのみ、 CSSを
:last―
指定できるようになります。
chi d
lあ る要素内で最初の要素
child
lあ
first‐
る要素内で最後の要素
:nth child(n) ￨あ る要素内で最初からn番 目の要素
nthJast― ch同 (n)￨あ る要素内で最後から n番 目の要素
皿
くu■ >
くli>項 目1く /1i>
くli>巧 貢目2く /■ i>
く■i>項 目3く /■ i>
くli>項 目4く /1i>
くli>1貢 目5く /■ i>
右下のように CSSを 記述すると、 最初の ‖要素
は黄色、 最初から3番 目の ‖要素 はピンク、 最後
の li要 素は水色の背景色に変わります。
なお、「first― child」
は 「:nth‐ child(1)」 、
「:last― child」 「:nth‐ last― child(1)」
一
■一
例として、右のようなリストに疑似クラスを利用して、
CSSを 指定してみましょう。
く/ul>
と言
己述 して
もかまいません。
国
li:flrst― child
(
background― color: #FFFF99, /★
ブ ラウザ の 出 力 結 果
・ 項 目1
・ 項 目2
0項 目3
0項 目4
,議
色 ★/
)
1i:nth― chi■ d(3){
background― c01or: #FFCCCC, /★ ピンク★/
}
1i:■ ast― chi■ d
background―
{
co■ or:
#99ccFF, /★ オく
色 ★/
}
・ 項 目5
「 nth― child(n)」 は、数式を記述することも可能です。右下のように記述すると、偶数番目の‖要素は黄色、
奇数番目のリストはビンクの背景色にすることができます。
ブラウザ の 出力結 果
・ 項 目1
0項 目2
0項 目3
0項 目4
・ 項 目5
なお、偶数と奇数については特別に、偶数番目は
「
と記述することも可能です。
国
li:nth― chi■ d(2n){
background― cO■ 。r: #FFFF99, /★
色 ★/
'等
}
1i:nth― child(2n+1)く
background― color: #FFCCCC,
/☆ ピンク★/
}
nth― child(even)」
、奇数番目は「inth― child(odd)」
text‐ decorationプ ロバ ティ
text― decorationプ
ヽ
ロノ
ティは、おもにテキスト textⅢ decoration:こ オ
旨定できる値
に下線 を表示するために使用 しますが、 他にも右
表に示す値を指定することができます。
underline
テキストに下線をつける
overline
テキストに上線をつける
line-through
テキストに打ち消し線をつける
テキストの線を消す
り消 し線 などを自由に設 定 できます 。
次 の ように text― decoralonプ ロパ ティを指 定 すると、下 線 や 上 線 、取 ι
呵
くp
くp
くp
くp
こ下線をつけます。く/p>
class=“ underline">テ キスト
ι
class="oVer■ ine">テ キストに」二
線をつけます。く/p>
class="■ ine― through">テ キストに打ち消し線をつけます。く/p>
class="none">テ キストの線を,肖 します。おもにくa href=‖ #">リ ンクく/a>の 下線を,肖 します。く/p>
国
.under■ ine { text― decOration: under■ ine, }
.over■ ine { text― decoration: overline, }
.■ ine― through { teXt― decoration: ■
ine― throughi
}
.none a { text― decoration: none, }
ブラウザの出力結果
￨テ キ ス
トに 下 線 を つ け ま す ^
￨
￨
テキス トの線を消 します。主に リンクの下線を消 します。
下線については、一般的に下線がついているとリンクするというイメージがあるため、 リンク以外のテキ
ストに下線を指定すると、 ユーザを混乱させる可能性があります。
リンクは下線がなくても、文字色やアイコンなどのデザインでリンクと認識できる場合も多いため、 リン
クの下線を消す 「none」 はよく利用されます。
6‐ 2‐
3
バンくずナビを設置する
ユーザが現在とのページにいるのか迷わないように、「バンくずナビ」 を設置して、現在のベージから上位のペー
ジをたどることができるようにしておくと親切です。
k(,ll,(,rヽ
(り
111:,ヽ
llを
1
⇒
ンくずナビ用のテキストをp要 素として入力します。バン
01 htmlを 開き、ページヘッダーとページボディの間にノヽ
くずナビであることがわかりやすいように、p要 素のクラス名は 「topicPath」 としています。
T
rrV Ofrtf;Et
kolnoriko[1losha
[portfolio/0 1 html]
Iportfolio/01 html]
t...
Etl
1/nav>
</header>
Cafe Debut
<p cLass= topicPath'>i
Cafe DLrbut</p>
,1.
&9t; )< i:+)'J) &qti
<div id="pageBody',>
<div id="pageBodyMain">
tffi...1
M[M0
文章中に「>」 と表示したい場合は、「>」 と入力します (「 【
解説】特殊文字」
122ペ ージ参照)。
!
‐‐
――-1
201
「ホーム」 と「つくつたもの」 に、それぞれのページヘのリンクを設定します。
[portfolio/01 html]
[.… 略]
く/nav>
く/header>
くp c■ ass="topicPath">く a
href= ../index.html・ >ホ ームく/a> >, くa href=・ index.htrn■・>つ くったもの く/a>
>, Cafe Dubutく /p>
くdiv
id="pageBody">
id="pageBodyMain">
くdiv
[略
.…
]
ブラウザの出力結果
[portfo1lo/01 html]
kol■ orikolnasha
わた したちについて
>
: >Cafe Dubut
CaFe Debut
style cssを 開き、バンくずナビのセレクタ「 topicPath」
ブラウザの出力結果
[portfo io/01 htm]
[common/css/sty e css]
[.… 略]
kol■ orlkoIIlasha
ホーム
に対して、文字サイズを12pxに 指定します。
a:hover { co10r: #996600, }
わたしたちについて
/★
/★
Cafe Deb耐
バンくずリスト ★/
.topicPath ( font― SiZe: 12px, }
ページ ★/
#page (
width: 980px,
margin: O auto,
}
[略
.… 〕
「ホーム」ページ以外は、その他のページにもそれぞれバンくずナビが必要です。手順0∼ ②と同様に、それぞれのペー
ジに次のように追加します。
わたしたちについて
komorlkomasha
l人
l
?< ?/i$0)
a(, -trACt
くP C■ aSS="topicPath">く a href="../index.htm■ ">
ホームく/a> こgt,わ たしたちについてく/p>
<p class=" topicPath "><a href ="
X-1^</
[contact/1ndex htm旧
komorlkomasha
l人 じゃ で きな い こ と も、 力 を 合 わ せ れ ば で き る 。 やつてみたいをカタ
=
わたしたちに
ホーム
>
わた した ちに
■―ム>お といあわせ
_
くp c■ ass="topicPath">く a href=・ ../index.html° >
ホームく/a> Ggt,お といあわせく/p>
a> agt 1 z(chbA
</
p>
..
/index. html ">
一
口一
ホ ーム
tit:
お お 1,お ち に つ Lヽ で
お と hあ わ せ
l人 じゃで きな い こ と も、 力 を 合 わ せ れ ば で き る 。 やってみたいをカタ:
わた したちに
ム>わ たしたちについて
おといあわせ
[portfdb力 ndex html]
komorlkomasha
じゃできないことも.力 を合わせればできる。やってみたいをカタ=
ホ ーム
'―
つくつたもの
[abOutヵ ndex html]
6‐ 2‐
4
ベー ジ内リンクを設置する
メインカラムに入力した内容が長くなつてくると、 ページの最後からナビゲーションまでスクロールバーを操作して
戻るのは、ユーザにとつて意外と面倒な作業です。 リンクをクリックしてページの先頭へ戻ることができるように、ペー
ジ内リンクを設置 します。
一 南
一
Ӭ
⇒
￨
I I
01.htm!を 開き、 ページフッターの上にp要 素として 「ページの先頭へ戻る」 と入力します。 p要 素のクラス名は、
「ページの先頭へ戻る」 リンクであることがわかりやすいように、「pagetop」 としています。
) t,
V
Afr/|ifl"t
lportf olio/o 1 .html]
[portfolio/01 htm旧
[.¨ 略]
く/div>
く/div>
lvah
kitchen nest
I ltt.Efl,tit +*gt3*6a rE
. 1ll,,,r.r..vjl.'.
. fra:or,ar-,,,
ute Dea^- -
a
/
I
^*c)t2E
-.
oI I - jrNzli Jb,
i\t ti - *
L
t!, t r< €*tta6tE?t,
^r-YOftf^86
.
くp
くfooter id="pageFoot">
くp id=''coPyright''>く Sma■ ■>CopyrightacoP
y, 2013 0komorikolllasha A■ ■ Rights Rese
rved.く /small>く /p>
く/footer>
[略
6ryr9htc 2013 @komdikomasha All Rights Reservod
class="pagetop">ヘ ージの先頭へ戻るく/p>
.… ]
「ページの先頭へ 戻る」 を くa>タ グで囲み、 href属 性には「#page」 と入力します。
[portfo:io/01 html]
[。
‥ 略]
く/div>
く/div>
くP
ClaSS="Pagetop">く a href="≠ page">ベ ージの先頭へ戻るく/a>く /P>
[略
/sntall>く
/P>
.… ]
ここでhref属 性に入力した「#page」 は、ページ全体を囲んでいるdiv要 素のid属 性として指定した「page」 です。
href属 性に「#id名 」と入力しておくと、リンクをクリックした際、指定したid名 の付いた要素の先頭へ移動します。
ここでは、id属 性「page」 のついた要素の先頭、すなわち「ベージの先頭」 へ移動します。
ブラウザの出力結果
二page
[portfdb/01 htm旧
一
□一
くfooter ■d=“ PageFoot''>
くP id=“ COpyright">く slnall>Copyrightacopy, 2013 0komorikomasha All Rights Reserved.く
く/footer>
ティを指定して、テ
セレクタ「 pagetop」 に、文字サイズを1 2pxと 指定します。また、「text― a!ign」 プロノヽ
キストを右寄せにします。
ブラウザの出力結果
[portfolb/01 html]
[common/css/style css]
[.… 略]
/十
バンくずリスト ナ/
.topicPath { font― SiZe: 12px, }
/十
ページの先頭へ戻る キ/
.pagetop {
font― size: 12Px,
text― a■ ign: right,
)
/★
ページ ★/
#page {
width: 980px,
margin: O auto,
}
[略
.… ]
上マージンを指定し、 ペ ージボディとの間に適切な余白を設けます。
) r,
V
Afr/|,f'+
[portf olio/O
1
.html]
[common/css/style css]
[.… 略]
/カ
ベージの先頭へ戻る ★/
.pagetop {
font― size: 12px,
text― align: right,
margin― top: 30px,
}
[略
206
.…
]
「 ペ ージの 先 頭 へ 戻 る」 リンクは、 サイト内で共 通
して利 用 す るた め、 ロー カル ナ ビの アイコンと同 じ
「common/images」
フォルダに、 アイコン画像 ファ
イルを配置 します。
レダ構成
フォリ
臼 ― 曰 h“
x htm
サ ンプ ル サ イ ト用 の ア イコン画 像 ファイル (ico
pagetop png)を 用意 していますので、 ダウンロードし
て imagesフ ォルダに配置 してください。
臼
1首 ar° Wpng
06/6-2-4/images/ico_pagetop png
ico pagetop png
セレクタを「 pagetop a」 として、クラス「pagetop」 を指定した要素内のa要 素に限定し、
「background― image」
プロバティに、手順0で 配置した画像ファイルのパスを指定します。また、背景画像が繰り返して表示されないよう
「background― repeat」 プロノヽ
ティに「no‐ repeat」 を指定して、アイコン画像を1回 のみ表示します。
) r,
V
OfrtfEF
[portfolio/o
1
.html]
[common/css/style css]
[.… 略]
/■
ページの先頭へ戻る ★/
.pagetoP {
font― size3 12Px,
text― align: right,
margin― top: 30px,
)
.pagetop a {
backgrOund― ■mage:
pagetop.png・ ),
background― repeat:
}
[略
.…
]
ur11"../images/ico
no-repeat;
「backgrOund― posttion」 プロパテイで、アイコン画像の位置を調整します。
ここでは、「backgrOund― poslion:050%:」 と指定し、横位置は移動せず、縦位置はa要 素のボツクスのちよ
うど真ん中になるように「50%」 としています。
ブラウザの出力結果
[portfdio/01 html]
[common/css/style CSs]
[.… 略]
/★
ページの先頭 へ戻る ★/
.pagetop {
font― size: 12px,
text― a■ ign: right,
margin― top: 30px,
}
.Pagetop a {
background― image: url(・ ../images/ico_
pagetoP.png“ )'
background― repeat: no― repeat,
background― position: 0 502,
}
[略
.…
]
アイコンが文字と重なつているため、「padding‐ left」 プ ロパ テイを指定して、 アイコン画像を 10pxほ ど左に移
動します。
) 2,
V Afr/al#,R
[Portfolio/O1 .html]
[common/css/style CSs]
[.… 略]
/tベ ージの先頭へ戻る
★/
.pagetop {
font― size: 12Px,
text― align3 right,
margin― toP: 30Px,
}
.pagetop a {
background― image8 ur■ ("../images/ico_
pagetop.png"),
background― repeat: no― repeat,
background― position: 0 501,
padding― left: 10px,
}
[略
。‥ ]
他 のペ ージにもペ ージ内リンクがあつた方が便利です。手順 0∼ 0と 同様 に、 すべ てのペ ージのペ ージフツター
の上に 「ベ ージの先頭へ 戻る」 リンクを追加 しておきましょう。
203
ペ ー ジ内リンクの利用例 と id属 性
「【
解説 】CSSの 記述 ルール 」(44ペ ージ)で解説 したように、 id属 性はベ ージ内の固有 の要 素を示すも
のであるため、 1つ の HTMLペ ージ内に同じid名 は1度 しか使えず、何度も使うことはできません。 ld属
性がこのようなルールを持 つているのは、 CSSの idセ レクタで装飾するためだけではなく、 ペ ージ内リン
クなどにも id属 性が利用されるためです。
ページ内リンクは、 サンプルサイトで紹介 したような 「ペ ージの先頭 へ戻る」 リンクの他、 ペ ージ内の
目次としてもよく利用されます。
日次として利用した例を見てみましょう。目次のリンクリストをクリックすると、ページ内の該当するセクショ
ンに移動します。
このとき、 ペ ージ内に同じid名 の要素があると、 クリックしてもどちらに移動すればよいのかわからなく
なるため、 同じid名 は1度 しか使うことができないのです。
ブ ラウザ の 出 力 結 果
皿
くul>
くli>● href=“ 7a_ol・ >魔 法使いくんく/aK/1)
く■iXa href="″ a-02・ >お 月さまく/″ く/1)
くlЁxa href=“ ぬ -03">り ぼんちゃんく/aX/■ i>
く/u■ >
=a-02
お月きま
>
くsection id="a― ol・
くhl>魔 法使いくんく/hl>
くp>魔 法使いくんは、いつもひとり[.… 略 .… ]く /P>
く/section>
>
くsection id=・ a_o2・
くhl>お 月さまく/hl>
くp>ど うしてみんな仲良しになれる[.… 略 ...]く /p>
く/section>
>
くsection id=・ a-03・
くhl>り ばんちゃんく/hl>
くp>「 こんばんは」くbr>振 返ると[.… 略 ...]く /p>
く/section>
`り
id属 性は、 ペ ージ内リンクの他にも、 」avaScttptな どのプログラムを実装 した際、 固有の要素を特定
する場合にも用 いられます。 そのため、 CSSを 適用するためだけに id属 性を多用するのは避 けた方がよ
いでしよう。
一般的に、 ベ ージのブロック分けやサイト名など、 ペ ージ内に1つ しか存在 しない要素であることを明確
にする際に id属 性を用 います。 その他の要素には、 クラス属性を指定しておくとよいでしよう。
インライン要 素 のボ ックスの特徴
インライン要素のボックスは、ブロックレベ ル要素のボックスとは違った特徴を持つています。
CSSの 出力結果を見てみましょう。 ブロックレベ ル要素である pと 、 イン
下のように記述 した HttMLと
ライン要素である aの 、 どちらにも似たような CSSを 設定しています。
インライン要素にも罫線や背景を指定することができますが、ボックスの形状はまつたく異なります。
皿
くp>p要 素 はブロノクレベル 要 素 です。くa
href="チ ">a要 素 く/a>は インライン要 素 です。インライン要 素 は widthと heightを オ旨定
できません。インライン要 素 の上 下 マージンは有 効 になりません。く/p>
ブラウザの 出力結果
iDI薫 こヲ6"疎
￨イ
JbI蕪 魂 111
ン ラ イ ン 要 素 で す。 イ ン ラ イ ン
1 ■
lhtl
;tfiETe :l€/v" I > t I >}*O tT v -
trltrlrsD*'-tu.
1
y > lt
@
P{
E;
background-color:
border: solid;
#FFFF99 i
paddj-ng:1Opx;
i
nargin:20px;
width:40opxi
height:150px;
)
background-color:
h^rdar.
c^l
#FFCCcc;
i i.
padding:2opx;
mrrain.
"An-.
width:400px;
hai
^h+.
1
<nhv.
)
以下に、 おもな特徴をまとめます。
・インライン要 素 には、widthや heightプ ロパ ティを設 定することができません。 インライン要素 に
widthや heightを 指定しても無視されます。
・インライン要素のボックスは文 字部分のみのため、 paddingプ ロバティを指定すると、文字部分の周
りに余 自を追加 します。上下左右すべ てに paddingを 設けることができますが、上下 paddingで 広
げたボツクスの領域は次に続 く内容と重なります。 そのため、 罫線や背景が指定されていない場合は、
上下の paddingは 有効になつていないように見えてしまいます。
・インライン要素には、左右 marginは 設定することができますが、 上下 marginは 設定できません。 イ
ンライン要素に上下 marginを 指定しても無視されます。
また、インライン要素が複数行にわたる場合、ボックスの形状は中身のテキストに合わせた形になります。
インライン要素である spanタ グに背景色を指定して、ボックスの範囲を確認 してみましょう。
ブラウザの出力結果
インライン要素が複数行 にわたる場合、ポ ック
スの形状 は中身のテキス トに合わせた形 にな り
ます.
皿
くSPan>イ ンライン要素が複数行にわたる場合、
ボックスの形状
は中身のテキスト
に合わせた形になります。く/span>
国
Span ( background― color: #FFCCCC, }
｀
将]〕
M[MO
TR%鷲
れ自体には意味はなく、 範囲を定義する汎用的なタグとし
甦1:子
同じように、意味を持たない divタ グはブロックレベ ル要素であるのに対 して、 spanタ グはイン
ライン要素としてマークアップする場合に用います。
サンプルサイトでは、このようなインライン要素のボックスの特徴をふまえた上で、「ベージの先頭へ戻る」
リンクにアイコン画像を表示しています。
ブラウザの出力結果
pagetop { text-alignj right;
l
© Copyright 2024 Paperzz
