list-style-image.box-sizing

(1)

CHAPTER

ナビゲーションを作り込もう

外書5サイトやウエブヘージ内の他ヘージヘリンクを設定します。ウェブヘージ内に設定したリンクは「グローバルナビ」や「ローカルナビ」として、さまざまな

CSSフ

ロハテイやオ旨定方法を使つてデザインを作り込みます. また、ユーザがサイト内で操作に迷わないよう「バンくずナビ」や「ヘージの先頭へ戻る」を設置します。

６ 搬

定し、

リンク

(2)

新たに紹介する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―child ある要素内で最初の要素 Jast―ch‖d ある要素内で最後の要素 inth―child(n) _{ある要素内で最初から}n番目の要素・:nthlast―chiid(n)ある要素内で最後からn番目の要素ヘーシ内リンク

: l

(3)

リンクを

外部サイトや他のページヘのリンクなど、ブラウザでページ間を移動する基本的なリンク方法について学習します。また、設定したリンクのリンク色を

CSSで

変更します。

―― ―

6‐

1‐

1 外部サイトヘリンクする

テキストにリンクを設定し、インターネット上に公開されているさまざまなウェブサイトにアクセスします。 r Q *\vh .tsi k !.re. t

⇒

(4)

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="" width="720" height="390"> くp>baser CMsカフェサイト用テーマくbr>

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= <ul> <1i>< r < I i->': e <Ii>.: r

<ri>.

:

</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://、,、v、マ rle S t―kitchen _ョp・>http://―_。nest―kitchen.〕pく/a>く/■i>

くli>・(a href=・ http://w、N facebook.cOm/KitchenNost・ >Facebook ′ヾ―ジく/a>く/■i>

V

"heading― typeC">FIl連リンクく/h2>

href=・http://basercms.net/themes/archives/14・ >Cafe Debutの_{タウンロギベージく}/a>く/1i>

href=・http://cafedebut.cat―speak.net/・ >cafe DebutO)デtページく/a>く/1i> href=・http://basercms net/・ >baser CMS公式サイトく/a>く/1i>

(5)

く/u■> くp>Cafe Debutテーマのイメージ撮影にご協力いただきました。とっても素敵なお店です。く/P> く/aside> く/footer> [略.…]

ブラウザの出力結果

[portfdio/01 htm] ,horeoldrnJ,,{r , I [i]L7 Lrut I QteIa.@72>a:tsy, . cigcsrtt-a) ' !ry e.!!s 1ai! . [4a@-r4

リンク先を新しいタブで開くtarget属性

target属性に属性値を設定すると、新しいタブで開きます。target属性の属性値は任意の半角英数字を指定します。皿くul>

1=諄

糊爛蹴

誦嵐庶「

el翠

僻蠣蔚路

偲

> く/u■>

ブラウザの出力結果

C

1

新しく開いたタブには、属性値で指定したフレー

i

ム名が付きます。そのため、上のように複数のリンク先に同じ属性値を指定している場合、続けてリンクをクリツクすると、後からクリツクしたリンクが、

1

先にクリツクして開いたタブで、ページを切り替えて表示されます。

(6)

つねに新しいタブで表示したい場合は、属性値を「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を試 ,ダ上撮影撻ヵ

⇒

リンクの装飾と疑似クラス

サンプルサイトでは、セレクタ「a:hover」と記述してリンク(a要素)にカーツルが重なつているときの文字色を変更しましたが、このようなセレクタを「疑似クラス」と呼びます。リンクには他にも、右表に示す疑似クラスのセレクタが用意されています。疑似クラスによる

a要

素の装飾

aJlnk{c010r i999966i} a:hover{CO10r:_・ _9966001}

すべてのリンク aJink 未訪間のリンク a:hover リンクにカーソルが重なつているとき a:active リンクをクリックしているとき a:visited すでに訪問済みのリンク a:focus リンクにフォーカスしているとき(tab キーで移動)

nut>t

aivisited l colori=666666:} ￨1連リンク田ヨリンク a:focus { color: 1996600 1 田連リンク ■tabキーてフォーカスが移動します a:active{cO10ri‐・ 339999:}

冬

nM[

M0

フオーカス時は、ブラウザの標準値で「ou‖ine」プロノヽティが指定され

ているため、点線で囲まれます。ou‖ineはほとんどborderと同じように

上下左右別々に指定することはできません。値を指定できますが、

(9)

6‐

1‐

3 他のベージヘリンクする

サイトの主要なナビゲーションとなる□―カルナビとグローバルナビを作成し、サイト内の他のHttMLフアイルヘリンクします。 konlorlkol〕 ,osllo

◎ローカルナビ

ローカルナビには、現在表示している「Cafe Debut」以外の他の作品ヘアクセスできるようにリンクを設定します。 kolllorikol:,ls 10 Cafo Dobut サブカラム

(#pageBodySub)内

の「おしらせ」の上に、ローカルナビとなるテキストをリスト形式で挿入します。ブラウザの出力結果 [portfolb/01 html] komorlk(〕11lasha Cafo Debut [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> [略.…]

(10)

「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"> くnav class="localNavi"> くu■>

hrof=・03 html・>′｀ンタになりたい魔法使いく/a>く/1i>

hrof=・02 html・,WordPressデザインワークブックて/a>く/1i> href=・01 html・>Cafe Debutく/a>く/1i>

I}→

>←

_,

<li> : -r <li>:t: <Ii>:,r </uI> </nav> くsection c■ass="newsList"> くh2>おしらせく/h2> [.… 略 .…] く/section> く/div> [略.… 〕まだ他のHttMLファイルがないため、リンクをクリックしても「このウェブページは見つかりません」と表示されます。

ブラウザの出力結果

[portfo io/01 html]

ヽo1lor kO‖la、ぃ

Cafe Debut

0●

・・

El

(11)

臼

ｗｗｗ

リンク動作を確認するため、01.htmlを複製して02.htmiというファイル名に変更し、「po「tfolio」フォルダ内に

配置します。

フォルダ構成

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''>

[略.…]

臼

¨

臼

(12)

02 htmlにリンクしたテキスト「

WordPressデ

ザインワークブック」 01 htmlにリンクしたテキスト「Cafe Debut」をクリックすると、つのフアイル間をお互いに行き来できるようになりました。ブラウザの出力結果 [portfdio/01 html][portfolio/02 html] 01 ninl リンク動作を確認したら、作成したファイル02 htmlはいったん削除しておきます。01 htmlにグローバルナビなどを挿入してから02 htmlをコピーすると、効率的な作業を行うことができます。02 htmiは、「7‐

1ペ

ージを複製しよう」(216ページ)で、再度01.htmlを複製して追加します。

◎グローバルナビ

グローノツレナビには、他のフォリレダ階層にあるファイルにもアクセスできるようにリンクを設定します。ページヘッダー

(#pageHead)内

に、グローバルナビとなるテキストをリスト形式で挿入します。

)r,+f Ofrrfift

lportfolio/o l .html] をクリックすると、02 htmlに移動します。同様に、 01 htmlに移動します。01 htmlと 02 htmlの

2

Cd€ tuM ￨￨ 02 htnl WordPra$7Vi >2 -, a, t [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> [略.…]

(13)

グローバルナビはサイトの主要なナビゲーションのため、

<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> [略.…] この段階では、リンクをクリックしても、まだ「このウェブページは見つかりません」と表示されます。ブラウザの出力結果 [portfo1lo/01 html] konlo「 kornasln □ このウェプページは見つかりません

0●

― ₌ Cafe Debut

(14)

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">

亡

Iを:誕idll詈s:」

雄祖

:I:]ttttlHead">

回

くhl c■ ass=‖pageTitle">cafe Debutく /hl>

[.… 略 .‥] くp>cafe Debutテーマのイメージ撮影にご協力いただきました。とっても素敵なお店です。く/p> く/as■de> く/footer> く/artic■e> く/div> [略.…]

(15)

メインカラムに、削除した内容の代わりに見出し(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」をコピーして配置します。

曰

臼

曰

臼

¨

臼

ｐ

ｏ

ｒ

ｔ

ｆ

_。

︲

(16)

「about」フォルダ内のindex htmlをテキストエディタで開き、ら「わたしたちについて」に変更します。また、「サンプルサイトについて」(ixページ)で見たように、持たないので、ローカルナビ部分を削除します。 [about/index html] [.¨略]

くdiv id=“pageBody">

くdiv id="PageBodyMain‖> くhl class=・pageTitle">わたしたち(こつtヽてく/hl> く/div> ページタイトリレ(pageTiJe)を「つくつたもの」か「わたしたちについて」のページはローカルナビをくdiv id="

<nav class=class="IocalNavj-"> _fu._{fi+ l}

<ur> r E!'|? |

く■i>くa href="03.htm■ ">バッタになりたい1巨法イ吏いく/a>く/■■>

く■i>くa href="02.htm■ ">WordPressう言ザインワークブックく/a>く/1i> くli>くa href="01.html">Cafe Debutく /a>く/■i>

く/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> コモモ。モリコ。ひろましゃ3人のサイト「komOrikomasha」をオープンしました。く/1i> く/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>

[略.…]

(17)

ブラウザで「about」フォリレダ内のindex.htmlを開いて、しく動作していることを確認してみましょう。ブラウザの出力結果 [abOut/index html] komorlkomasha わたしたちについてグローバルナビの「つくつたもの」をクリックし、正

一

□

一

□

ｗｗｗ

「おといあわせ」ページ用に「contact」フォルダを作成し、「about」フォリレダ内の「

index htmuを

コピーし

て配置します。フォルダ構成 contact 製複

﹁

Ｉ

Ｊ

ｍｍ

曰

一

日

ｃ

ｏ

ｍ

。

ｎ

臼

ｐ

ｏ

ｒ

ｔ

ｆ

。

︲

ｉ

。

臼

鋼

臼

一

ページタイトル (.pageTiJe)を「わたしたちについて」から「おといあわせ」に変更します。 [contact/index html] [.…略] くdiv id="pageBody''> くdiv id="PageBodyMain"> くhl c■ass="pageTit■e">おとしヽあわせく/hl> く/div> [略.…]

(18)

「おといあわせ」のページでは、「わたしたちについて」ページが他の階層にあるファイルヘのリンクです。また、「おといあわせ」は、自分自身のファイルヘのリンクです。そのため、下記のようにリンクを修正します。 [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

わたしたちについて

(19)

「about」フォルダ内の「index.htm」をコピーして、いちばん上の階層の「

www」

フォルダ内に配置します。フォルダ構成トップページ「ホーム」は2段組みレイアウトではないので、トップページ用の index htmlをテキストエディタで開き、メインカラム

(#pageBodyMain)と

サブカラム

(#pageBodySub)を

要素の内容(次のソースコードで囲つている範囲)ごと削除します。 [index htm旧 [.… 略] くdiv id="pageBody"> <div id="pageBodyMain

<hl class= " pageTitle " > btUt;blJlrt-( < / h!>

</div> 削除くdiv 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> [略.¨] ｎｄｅｘ一

Ｄ

臼

ｃ

ｏ

ｍ

。

ｎ

臼

ｐ

ｏ

ｒ

ｔ

ｆ

。

︲

ｉ

。

臼

ａ

ｂ

ｏ

ｕ

ｔ

臼

ｃ

ｏ

ｎ

ｔ

ａ

ｃ

ｔ

一

口

一

(20)

ここで、ブラウザでトップページの表示を確認すると、クも動作していません。

ブラウザの出力結果

Dndex htm旧

korlor:komasha

CSSが

適用されておらず、グローバルナビに設置したリン

<head>内

に記述したくlink>タグの href属性値から「./」を削除し、「common/css/normalize css」

「common/css/style css」と修正すると、トップページにも

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>

[略.…]

(21)

グローバルナビの

<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][about/index htm]

わたしたちについて ●し3ヒ ■つくつたもの[portfolio/index htm] ■おといあわせ[contact/ndex html]

一

■

一

□

(22)

鵬宣ョ絶対バスと相対バスを理解しよう

リンクを設定する際、a要素のhref属性に指定しているフアイルの場所の記述を「バス」と呼びます。くa href="index.html">リンクく/a> :..¨_¨……….…_………_・¨¨¨¨_{・¨¨・¨¨¨¨¨¨・¨¨・…………・¨・}HTMLフ_{アイルの場所を示すハス} a要素で

HTMLフ

ァイルの場所を示す場合だけでなく、img要素で画像ファイルの場所を指定する場合や、 link要素で

CSSフ

アイルの場所を指定する場合など、ファイルの場所はすべて「バス」で記述されます。

<link

rel=

◎絶対バス

インターネット上にあるHttMLファイリレにアクセスするには、「http://example.com/portfolio/01.

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にリンクする場合も同様に、「フアイル名」を指定します。 02 html くa href=・ 01 html“>リンクく/a>

(23)

aboul

2つ

下のフォルダにフアイルがあるとき

異なるフォリ

レダにフアイリ

レがあるとき

concept 02 html

1つ

下のフォルダにフアイルがあるとき

01.htmlから02 htmlにリンクするには、「フオルダ名/ファイリレ名」のように「/(スラツシュ)」区切りで指定します。 01 html くa href="about/02.h tln■ “>リンクく/a> 02.htm:から01.htmlにリンクするには、「./ファイル名」のように指定します。「../」は1つ上の階層を表しています。 02 htm! くa href="../01.htlnl">リンクく/a> 01 htmlから02 htmlにリンクするには、「フォルダ名/フォルダ名/ファイル名」のように、「/(スラツシュ)」区切りで指定します 01.htmi くa href="about/concept/02.html''>リンクく/a> 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

(24)

ナビゲーションを作り込もう

CSSで

「口…カルナビ」や「グロー′ツレナビ」のデザインを調整し、ベージの主要なナビゲーションと

して見やすくします。

また、ユーザがサイト内で操作に迷わないよう「バンくずナビ」や「ページの先頭へ戻る」リンクを設置

します。

6-2¨

1 ローカ

Jレ

ナビをデザインする

ローカルナビのリスト記号をアイコン画像に変更し、デザインを調整します。おしらせおしらせ ■ ￨ style cssを開き、サブカラムのローカリレナビのリスト

「#pageBOdySub localNavi ul li」 `こ対して、文字サイズと高さを指定します。

ブラウザの出力結果 [portfolb/01 html]

Icommon/css/style css]

rdl

#pageBodysub .newslist uI Ii time { font-r,reight: bold;

display: block; )

/+ E-r)Vtc */

fpdgFBodysJD ..ocrl\lv- u-t li {

font-size:14px; Line-height:1.429;

i

/* ---

t1>h-L6A*Ffr

_{--- */}

#pageBodyMain

p

{

tffi...1

(25)

リストとリストの間が詰まつているので、適切な余白を追加して見やすくします。ブラウザの出力結果 [portfolio/01 html] [common/css/sty e Css] f@l

{-r1_

_/*

E_h)vrc

*/

#pageBodysub

.localNavi

uI li

{

font-size:14px;

Iine-height:

1.429; margin-bottom:12px; tr ri vLcrs ) !haa.r, E fd l アイコン画像はサイト内で共通して利用します。「common」フォルダ内に「images」フォルダを作成して、アイコン画像ファイリレを配置します。サンプルサイト用のアイコン画像ファイリレ(ico_arrOw png)を用意していますので、ダウンロードしてimagesフォルダに配置してください。フォルダ構成

臼

ｐｏｒｔｆ。︲︲。

□

ａｂＯｕｔ

臼

ｃｏｎｔａｃｔ

ＩＬＩＩ︲︲︱一︲︲︲︲﹂ 06/6-2-1/images/ico_arrow png 画像サイズ :4×

4px

WWW I L_

臼丁目

hd以

‖

耐

2コ

ー

[cO

ln3ages arro、v plng

(26)

「list―style―image」プロパティの値に、アイコン画像ファイルのパスを指定し、リスト記号をアイコンにします。

■画像ファイルのハスIJ、 CSSファイル(sty e css)から見て、相対ハスで指定していることに注意しましょう

)

r,

+t

Afrtff;

t

_[Portfolio/o

_t

html] Icommon/css/style css]

fdl /* E-h)Vtc */ #pageBodysub .localNavi uI li { font-size:14px; Iine-height: 1.429; margin-bottom:12px;

list-sty]e-image: urf ( " .. / )-maqes/ tco,

arrow.png" ); )

tffi...1

「list―style image」プロパテイでリスト記号を画像にしましたが、アイコンの位置が少し下にずれてしまつています。

アイコンの位置を調整したいところですが、list―Style―imageプロパティでは画像の位置を調整することができません。

そのため、リスト記号を画像にしたい場合は、「backgrOund―image」プロバテイを利用するのが一般的です。

「list―style―image」の代わりに「list―style―typeinonei」を指定して、リスト記号を非表示にします。

次に、「backgrOund―image」プロバテイにアイコン画像ファイルの∪RLを手旨定すると、‖要素内には画像が繰り返して敷き詰められます。

ブラウザの出力結果

[portfdio/01 html]

籠

:籠 ::::籠 :￨:::￨:::::l: おしらせ lcommon/css/style cssl

t...ffi]

/*

E-r)V)-t

*/

#pageBodysub .localNavi uf Ii { font-size: 14Pxi Iine-height:1.429; margin-bottom: 12Px; Iist-styLe-type: none;

background-lmage: ur1(' ..

/images,/ico-arrow.png ); )

(27)

「background― repeatno―repeat」 _{を追記して、背景画像の繰り返し表示を禁止します。}

ブラウザの出力結果 [pOrtfo io/01 htm] Icommon/css/style.css]

t...ts1

/* E-h)t/rC */ #pageBodysub _{.localNavi ul Ii i} font-size:14px; Iine-height:1.429; margin-bottom:12px; List-style-type3 nonei

^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]

「

―

20pl

ブ

Lン

ク

Ico m mo n /c ss/ sty le. c ss]

t...ffi1

/*

E-h)V+c

*/

#pageBodysub .IocatNavi uI Ii { font-size:14px; Iine-height:1.429; margin-bottom: 12px; list-style-type: nonei

arrow.Png" ) ;

background-repeat : no-repeat i background-position: 0 Bpx;

[略.…]

(28)

アイコンが文字と重なつているため、「padding―left」プロパテイを指定して、文字に

10pxの

左バディングを指定して字下げします。

) 2,

V

Afr/alffi*

[portfolio/O 1 .html] おしらせ

ブラウザの出力結果

[portfolio/01 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; Iist-style-type! none;

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」とします。

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;

ico-arrow.Png" ); background-repeat: no-rePeat; background-position: 0 8Px; padding-Ieft:10px; ) tB6...l

(29)

q票

_当

_POI‖

_{T ul要}

_素

_0検

_証

Google Chromeで

ローカルナビのul要素につ

いて、「要素の検証」をすると、<ul>タグには上下マージンと左バディングが、ブラウザ標準値で

指定されていることがわかります(要素の検証につ

いては「【POINT】

Google Chromeの

開発者ツール」111ページ参照)。ブラウザの出力結果 [portfolb/01 html] 1 シ、、11.1, t:欝:+イ￨戸●￨ザt｀「,1■,ザイノ・F― 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ベ

ージ)で_{紹介しているサイトなどで探してみてもよいでしょう。}

(30)

⊂

)background¨repeat

background‐ repeatプロバティは、

backgroundlmageプ

ロバティで指定した画像の繰り返し方法を指定することができます。下のような画像で background― repeatプロバティの値を変えた際の表示を確認してみましょう。 06/6‐2‐1/images/bg2 png 画像サイズ :5×

5px

値に「

no―repeat」

を指定すると、画像を

1回

だけ表示して繰り返しません。

ブラウザの出力結果

値に「repeat‐x」と指定すると、横方向にのみ画像を繰り返して表示します。

ブラウザの出力結果

komorlkomasha

・らtした三,「it: oつく ■tt' ・ ′ ` 'うな1・

Cafe Debut

komorlkomasha

・うit´たちに '_f ・ラく tt, 。 ●こ・_‐lt tr

Cafe Debut

body {

background-inage:

url

( ". .

/inages/

b92.png" );

background-repeat

:

no-rePeat i )

body {

background― image: ur■(・../images/

b92.png"),

background―repeat: repeat―x;

(31)

値に「repeat‐y」と指定すると、縦方向にのみ画像を繰り返して表示します。

ブラウザの出力結果

body {

backgrou nd・・image: ur■("../images/ bg2.png"),

background・‐repeat: repeat―y,

}

C)background¨

position

backgrOund‐posniOnプロバティは、 background‐imageプロバティで指定した画像の開始位置を

指定することができます。次のように、横方向・縦方向の順でスペース区切りで値を指定します。

ブラウザの出力結果

komorikOmasha l

人じゃできないことII. _{方を合ゎせれ}:ができる.0ってみた●ヽそカタチにする 3人￨

Cafe Debut

ヽ ― 「6-2-4ベージ内リンクを設置する」(204ページ)で後述するように、値を「%」で指定することも可能です。

一

■

body {

bg2.png" ) ;

background-repeat: no-repeati background-position: 1opx 2Opx; )

(32)

また、「

left,center,nght」

のように、キーワードで指定することも可能です。次の例では、

繰り返した画像に対して「

bottom」

を指定しています。

ブラウザの出力結果

口彫●カ kltchen no" Jヒ湾コ軋,市中央区南3^● ar目大澪ピル2● ・ … 螢じКitChe¨ ・ FaC9り oΩヒヘ■2 C“ o Oobutテーマのイメージ■影にこ■力もヽただきました.とっても

COpy"hte 20i3 0komlkomas■ NI R●鷹s Re"rved

body {

background-funage:

url(

". . / images/ b92.png" ) t background-repeat

:

repeat-xi

background-position: bottomi )

C)background

backgroundプ

ロノヽティは、次のように

background関

連のプロノヽティの値をまとめて指定できます。スペース区切りで順不同で指定し、値を省略することも可能です。 body {

background: #FFFFFF ur■ (''・・/11nages/bg2.pngl')no―repeat 10Px 20px,

} : : : :

(33)

::l

コ

:0[UM‖

アイコン画像を作るには

ウェブデザインの現場では、アイコン画像はおもに、

Photoshopや

F:reworks、または Ⅲustratorな

どのソフトを使つて制作します。第4章で紹介した画像編集ソフト「Pixlr」は、写真編集が主機能になつているので、アイコンやイラストなどの制作にはあまり向いていませんが、アイコン画像はインターネット上でフリーで配布されているものも多く、学習の初期段階ではこれらを利用してみるのもよいでしょう。本書では、アイコンの配布先の一例として、lcoMoonというサイトを紹介します。 ●

:coMoon

htto://icomoon io/

lcoMoonのトップページで「lcoMoon App」をクリックし、「Start the App」ボタンをクリックしましょう。

:coMoon

lcoMcon Appの

初期状態で表示され icoMoonでは、アイコンのセットを購入することもできますが、ているアイコンは、フリーで利用できます

O lcoMoon Appの

利用方法

― 口・・ぉ X∞ 1,日■/ 、

6-´

0ア

イコンをクリックして選択 "●‐●●●……… に・ⅢⅢ

Ⅲ呻

106桁

のカラーコートを入力 … CD …"・…Ⅲヤ

10画

イオサイス(12‐512p×,

v

_{を入力} ￨ … Ⅲ Iヽ・ ‐ 。

「 . c l キ｀‐・‐ρ クリックしてタウンロート ②クリ´ク

(34)

ダウンロードしたzip形式のフアイリレを解凍すると、「PNG」フォルダの中に、選択したアイコン画像 ―式が入つています。ただし、このように、インターネット上でフリーで酉己布されている画像を利用する際には、「ライセンス(使用許諾条件)」について酉己慮する必要があります。

lcoMoon Appで

配布されているアイコンは、アイコンセットによつて制作者が異なるのでそれぞれライセンスが違いますが、いちばん上に表示されているアイコンセットの「lcoMoon― Free」は、クリエイティブ・コモンズ・ライセンス(CCライセンス) で配布されています。

CCラ

イセンスの場合、サイト上のどこかにアイコンの著作者がわかるように、著作権者のクレジットを記述しておかなければなりません。

:coMoon Appの

アイコンの利用例

'

二

uつ

たし,ヽ魔i■tL. ｀_{こ]fe E● こJt} アイコンは C,LttiC"を利用しています ■ヘーシの随所に使っている場合は、フツターなとにクレシットを記述してもよいてして、う

○クリエイティブ・コモンズ

0ラ

イセンス

(CCラ

イセンス

)と

は

インターネット上にあるフリーの写真やイラスト、アイコンなどの多くは、

CCラ

イセンスで配布されています。

CCラ

イセンスとは、著作者によつて著作物の再利用許可の意思表示を手軽に行えるようにするためのライセンスです。以下の4つの条件のうち、「1.著作権者のクレジット表記義務」だけは必須であり、他の3つは著作者の意思によって採否が決定されています。

1著

作権者のクレジット表記義務

2非

営利の場合のみ使用許可

3改

変の禁止

4同

一条件の継承義務キlcoMoon― Freeは、「1著作権者のクレジット表記義務Jのみです

CCラ

イセンスに限らず、インターネット上で配布されている素材などを利用する際には、それぞれの著作者が提示しているライセンスを守つて利用しましよう。

CCラ

イセンスの著作物は、学習の初期段階や個人サイトの利用で上記の条件を守つて利用する場合には便利ですが、これらの制約があるため、仕事としてウエブサイト制作を請け負う場合などには利用できないことが多いです。最終的には、デザインソフトなどを利用して自作するのがよいでしょう。

(35)

グローバ

Jレ

ナビをデザインする

グローバルナビを横並びになるよう調整し、現在のページには背景色をつけるなど、わかりやすいデザインにします。

⇒

一

■

style cssを開き、ヘツダーのグローバルナビ「#pageHead globalNavi」に、上下の罫線を追加します。

ブラウザの出力結果 [portfolio/01 html]

komorlkomasha

l人じゃできないことも力を合わせればできる。やってみたいをカタナにする t´∴i■,[フいこ ,「:の t｀3,■t

Cafe Debut

Icommon/css/style.r:ssJ

t...

ffil #pagetlead #catchcopy { font-size:1zpx; Iine-height: I.5; margin-top: ipx; ) /* )E-llt'/C */

spageHead .qloba Navi {

border: soli(l #CCCccC; border-w i dth I px 0; ) /* ^-))yt- */ #pageFoot { tB6...1 一・_ｔくと一小わ・つ量一

(36)

グローバルナビのリスト「#pageHead.giobalNavi uHi」から、リスト記号をりに表示にします。ブラウザの出力結果 [portfo io/01 html]

kol■

orlkomasha

l人_{じゃできないことも、力を合わせればできる。やってみたいをカタチにす}Z [common/css/style css] [.…略] /★ グローバルナビ★/ #pageHead .globalNavi ( border: solid チccCCCC, border―width: lpx O, ) イpa9eHead .910balllavi ul li { list―style: none, ) [略.…] 爪こ￨ 1)itたちぃつ、こつく:t tJのよ￨というわせ

Cafe Debut

ブラウザの出力結果

[portfolb/01 html]

kolnorlkolnasha

l人じゃできないことも、力を合わせればできる。やってみたいをカタナにす沼ホーム￨わたしたちについこつく,たものおといわつヒ

￨

Cafe Debut

ヽ

[common/css/style css] [.… 略] /十グローバルナビ★/ #pageHead .91obalNavi { border: so■id #ccCCCC, border―width: lPx O, } #pa9ettead .91obalNavi ul ( margin: 0, padding: 0, }

#pageHead .globalNavi u■ 11 ( list―style= none,

}

[略.…]

Google Chromeで

ul要素を検証すると、ブラウザ

標準のマージンとパディングを確認できます。

<ul>タ_{グには、ブラウザ標準値で上下マージンと左パディングが設定されているので、これらの余白をなくすため、}

marginプロパティとpaddingプロバティの値を「O」にします。

(37)

リストの横幅を固定し、横並びにします。コンテンツ全体の横幅は

980pxの

ため、リストのwidthブロバティを

245px(980//5=245)と

し、loatプロパティでリストをすべて左に寄せ、1順番に並べます。

ブラウザの出力結果

[portfolb/01 html] 980千)x [common/css/style css] [.…略] /☆ グローバルナビ★/

#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 } [略.…]

儡

Cafe Debut

ヽ ■ ■ ■

LEJ

ブラウザの出力結果 [portfolio/01 html]

komorlkomasha

l人じゃできなしヽことも、力を合わせればできる。やってみた /1N「

A

_{ゎたし上ち}

￨

Cafe Debut

変更後

畢

komorlkomasha

l人じゃできなしヽことも、力を合わせればできる。やってみたホーム

リストをloatしたため、リストの親要素のボックスの高さが0となり、セレクタ「#pageHead globalNavi」に

追加した上下のボーダーがくっついた状態になつてしまいました。

セレクタ「#pageHead globalNavi ul」 :こ対して、右下のようにclearfi)((141ページ参照)を適用して、リス

トの親要素であるul要素のボックスが高さを持つようにします。 Icommon/css/style.css]

t...

ffil

/* t1-tvttc

t

_/

#pageHead .gl,>balNavi { border: s)Iid #CCCCCC; border-wilth: lpx 0; ) #pageHead .glcbalNavi ul { margin: 0; padding:0; )

+pagellead _{.globafNavi uI:after} _{

content: ' '; clear: b(,th;

dlsplay: block; )

#pageHead .g.-obalNavi uI li { list-sty Le3 nonei

width: 2 l5px; float: leEt; ) fdl

Cafe Debut

わたしたち￨

(38)

リストの左側に罫線を追加し、ナビゲーションの区切りがわかるようにします。また、左右にバディングを追加し、罫線に文字がくつつかないようにしまり。

ブラウザの出力結果

[portfdio/01 html] k()111()rikolll:is li: ・ . . , ‐ ￨￨― ' Cafe Debut r ・_・ .

I com mo n/cs s/sty le. css]

t...ffi]

/*

t1-l\)v+t

*/

#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 { Iist-style: none; width:245px; float: Ieft; border-teft: solid lpx #CCCCCC; padding:0 1()px; ) tdl リスト全体の横幅は、手‖原

0で

指定した横幅の

245pxに

、右罫線lpxと左右バディング

20pxを

加えて、

266px

となつています。そのため、コンテンツ全体の横幅

980pxに

、5つ目のリスト「おといあわせ」が収まりきらなくなり、「おといあわせ」は下に落ちてしまつた状態です。

Google Chromeで

li要素を検証すると、現在のli要素のボックスサイズを確認することができます。

kol■

orlkomasha

cafe nehl■

このように、罫線やパディングの値はwidthプロバティの値に加算されて全体の横幅が決まるため、widthプロパテイ

(39)

そこで、「box― sizing」プロノヽティの値に「border― box」と指定し、widthプロバティで指定した値に、罫線とバディングの値も含めます。詳しくは、「I解説】 box―sizingプロバティとボックス」(197ページ)で後述します。なお、box―sizingブロバティは

CSS3で

新しく追加されたため、現在のところ、Firefoxでも対応させるためには、「―moz‐box―sizingi border‐ box:」を追カロし

ておく必要があります。詳しくは「【解説】

CSS3と

ベンダープレフィックス」(197ページ)で後述します。ブラウザの出力結果 [portfo lo/01 html] ko llorikolllas11(1 Cぎe Debut Icommon/css/style css]

t...

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; ) #pageHead .globalNavi uI li { 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; )

tffi..

.l

t...

ffil

/*

,E-t\)rtC */

#pageHead .globalNavi { border: soLad #CCCCCC; border-vridth: lpx 0; ) #pageHead .globalNavi ul { margj-n: O; paddj-ng: 0 ; )

#pageHead .globalNavi ul:after { content: " "; ^l 6r-. h^+h. 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

一■

一

text―alignプロバティで文字をセンター寄せにします。 [COmmOn/css/sty e css]

同時に、文字サイズと高さを指定して、本文部分のテキストの大きさと設定を揃えています。

ブラウザの出力結果

[portfolb/01 html]

kolllorikonlasha

(40)

リストに設定した左罫線とグローバルナビ全体に設定した上下罫線の間に余白を設定して、余裕のあるデザインにします。

右下のように、セレクタ「#pageHead globalNavi」に

10pxの

上下パデイングをオ旨定します。

CaFe Debut

すべてのリストに左罫線を追加していますが、デザインのバランス上、「ホーム」では左罫線は不要です。そこで疑似クラス「:first―child」を利用して、最初のリストの罫線を非表示にします。「ifirst―child」の詳細は、「【解説l

n番目の要素を数えて

CSSを

指定する」(199ページ)で後述します。ブラウザの出力結果 [portfo io/01 html]

komorlkol■

asha

ブラウザの出力結果

[portfdio/01 html]

komorlkomasha

l人じゃできないことも、力を合わせればできる。やってみ去 ,31 変更後

畢

komorlkomasha

l人じゃできないことも、力を合わせればできる。やってみ去 Icommon/css/style css]

t..

. ffil

/*

,E-t\)vlc

*/

#pageaead .globalNavi { border: solid #CCCCCCt border-width: lpx 0; paddlng: l0px 0; ) #pageHead .globalNavi ul { margin:0; padding:0; )

tffi...1

Icommon/css/style css]

t...

ffil #pageHead .globalNavi ul Ii { list-style: none; width:245px; €^a+. 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; )

,^-^-tr-.i _{^l ^Ha-}rrr!.: _rr'l _{I i .fircf} _.hi ld l

" PoYclcou border-1eft: none. ) Tdl T― ム力一

(41)

リンクには文字色と下線がついていますが、グローバルナビは配置場所からも― 目でナビゲーションとわかりますし、リンク色や下線がついていないデザインの方がスッキリします。

そこで、グローバルナビの a要素に限定して、文章部分の文字色と同じ濃いグレーにします。値に「inhern」と

指定すると、親要素のプロバテイの値を強制的に引き継ぎます。つまり、aの親要素はliですから、li要素の文字色

「#333333」となります。

また、リンクの下線を消すには「text―decoralon」ブロバテイを「none」に指定します。詳しくは「【解説】

text―decorationプロバティ」(200ページ)で後述します。ブラウザの出力結果 [oOrtfdio/01 html] ko11lorik()[llas 1 1 Icommon/css/style css]

t...

ffil #pageHead .globalNavi ul Ii { Iist-styIe: none; 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 none; ) #pageHead .globalNavi ul 1i color: inherir-; text-decoration: none; ) a{

ヽ〕

M[MO胃

:了

:1ユ

[品

ページ全体のリンクでは、マウスが重なつたときは文字色を変更していますが、グローバルナビでは背景色を変更します。

セレクタに「:hover」を追加して、background― colorプロバティで背景色を変更します。

とカラーコードを指定しても同じ結果になります。

ブラウザの出力結果

[portfo110/01 html]

〕

ha

lればできる。やつてみたしヽをカタナにする、3人の交しいものづ lcommon/css/style,cssl

t...

tstl

#pageHead .globalllavi uI lirfirst-child { border-left: none;

)

#pageHead .globalNavi

aal ar. i nhari i.

text-decoration !

)

t'pageFlead . globa I l'la\'1 background-coIor: J tdl u■ ■

iaく

none, t11 li a:hover ( ″F2F2E5,

わたし

_たヽ

Fつ

いて

(42)

a要素は、

lme要

素などと同様にインライン要素(152ページ参照)のため、a要素のボックスは文字の範囲のみです。そのため、文字から外れた部分はクリックできませんが、グローバルナビでは文字の部分だけではなく、リスト全体にリンク範囲を広げ、ナビゲーションをクリックしやすくしましょう。

「displayiblocki」 _{と指定してブロックレベル要素に変更すると、マウスが重なつたときの背景色がリスト全体に広がり、} リスト全体がクリックできるようになります。

)

2t

V

Ofrtffi*

lportfotio/O 1 .htmt] _{Icommon/css/style cssl}

t...Gl

#pageHead .globalNavi ul li:first-child { border-left: none. ) #pageHead .global.Navi uI Ii a { color: inherit; text-decoration: nonel display: block; )

#pageHead

,globalNavi

uI Ii

a:hover

{ background-coLor. #r'2F2E5 i )

tts...1

わたしたちについてナビゲーションの上下に余自を追加してクリック範囲を広げ、よリクリックしやすいデザインにするため、a要素に上下バディングを追加します。

sha

菫ればできる。やってみたいをカタチにする、3人の資しいものづ

む

ブラウザの出力結果 [portfo io/01 html]

、

ha l

lればできる。やってみたいをカタチにする、3人の発ししヽものうわたしたちについても Icom mo n/css/style. css]

r...

ffil

#pageHead .globalNavi uI li:first-child { border-Ieft: nonei ) #pageHead . globalNavi color: inherit; text-decoration 3 display: block; padding: 5px 0; ) #pageHead .gl-obalNavi background-coIor: )

tffi...1

ul li a( none, u■ li a:hOver #F2F2E5,

(43)

ユーザが現在どのベージにいるのか迷わないように、グローノツレナビのうち現在のページをわかるようにしておくと親切です。ここでは、現在のページ「つくつたもの」のナビゲーシ∃ンに、マウスが重なつたときと同じように背景色をつけます。まず、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..,-Cafe Debut

[portfo io/01 htm] Icommon/css/style css]

tdt

#pageHead .globalNavi uI Ij. a {

^^1 ^r. i nhari +.

text-decoration: none; display: block; padding: 5px 0; )

#pageHead .globalNavi ul Ii a:hover,

lpageHead .gfobalNavi 0l li.current a { background-coLor. #F2F2E5 i

)

(44)

その他のベージのグローバルナビでも現在のページの背景色が変わるように、該当する<!i>タグにクラス「current」を追加します。

ホーム

lndex.htm旧 l komorlkomasha

わたしたちについて

[aboutヵndex.htm旧

￨ 1霊

1兜

_{雲.… … … … 仏}

くli class="current">くa href=''index.htm■''> ホームくノa>く/1i>

つくつたもの

[portfdb力 ndex htm旧 komorikomasha くli class="current">くa たしたちについてく/a>くノ■i> く■i class=''current“>くa href="indexohtml">おといあわせく/a>く/■■> __」

[______一

―

_{―― ‐}

_――

href="index.htm■">わ

おといあわせ

[contactヵndex.htm旧 ,l J^。

・れの

,く

ヽ

￨￨￨:■

911?理

晶

:摯,…,マ..い

い

,,t,`ム

・臥

´

・

・メ

くli c■ass="current">くa href='lindex.htm■">つくったものく′a>く/1i>

(45)

‖銅

itt box口

sizingプ

ロバティとボックス

ボックスにwidthプロパティとheightプロバティの値を指定した場合、その値は右図のように「要素の内容」部分の横幅と縦幅を表しています。これは、ブラウザの標準値では、「box―

sizing」プロノヽティのイ直に「content‐ box」が指定されているためです。

「box― sizing」 :プロノヽティσ)イ直に「border―

box」を指定すると、widthプロバティとheightプロバティに指定した値の中に、 paddingと borderの値を含めます。なお、box‐sizingは

CsS3で

新しく追加されたプロパティのため、Firefoxでは「―moz― box― sizing」のようにベンダープレフイツクスをつけた記述をしておく必要があります。厳密には、対応するブラウザによつて、他のベンダープレフイツクスの記述も必要になる場合がありますが、詳しくは次の「【解説】

CSS3と

ベンダープレフイツクス」で解説します。また、IE7以下の古いブラウザでは、「boxJzing」プロバテイに対応していません。IE7以下のブラウザにも対応する場合には、「box―sizing:content― box」を,河ま是に

考えておきましょう。 H刀

則抽直

]box‐SiZing:content‐

box;

margin

box-sizing: border-box;

一

■

一

CSS3と

ベンダープレフイックス

◎

CSSの

バージョン

現在、勧告されている

CSSの

CSS2 1で

す。そのため、ここまでの解説では、

「box― sizing」「display:flex」 (「【

COLUMN】

新しい段組みレイアウト「フレキシブルボックスレイアウト」」

145ページ)以外は、CSS2 1で定義されているプロノヽテイや値について紹介してきました。

CSSの

新しいバージヨンである

CSS3は

、「boxJzing」のように便利なプロバテイや値が新しく追加

されています。

CSS3は

現在、仕様策定中ではありますが、最新のブラウザでは

CSS3の

機能の一部を

先行して実装し、利用できるようにしています。

list-style-image.box-sizing

CHAPTER

ナビゲーションを作り込もう

CSSフ

６

搬

定 し、

リンク

Jink

fOCus

CSSプ

image

repeat

CSSプ

: l

リンクを

CSSで

6‐

1‐

1

外部サイトヘリンクする

⇒

<a>∼

</a>

RLは

URLに

J2r+,

Afrt#Ft

URLに

<ri>.

:

V

ブラウザの出力結果

リンク先を新しいタブで開くtarget属 性

1=諄

糊 爛 蹴

誦 嵐庶「

el翠

僻 蠣蔚 路

偲

ブラウザの出力結果

1

i

1

￨

￨

l target属

￨

リンク色を変更する

⇒

リンクの装飾と疑似クラス

a要

nut>t

冬

nM[

M0

6‐

1‐

3

他のベージヘ リンクする

◎ローカルナビ

(#pageBodySub)内

<nav>

I}→

,

ブラウザの出力結果

0●

臼

ｗｗｗ

フォルダ構成

臼

¨

臼

WordPressデ

1ペ

◎グローバルナビ

(#pageHead)内

)r,+f Ofrrfift

2

<nav>タ

定し、

リンク先を新しいタブで開くtarget属性

糊爛蹴

誦嵐庶「

僻蠣蔚路

他のベージヘリンクする

_,

_lfl[肌

_。