11月28日(土)
HTML5・CSS3演習⑧
CGコンテンツ制作演習②

一次アップ。後ほど追記・修正します。

本日使用したタグ・プロパティ・ツール

CSSプロパティ

  • transititon
  • box-shadow、text-shadow
  • linear-gradient

Webで使われるアニメーション

アニメーションは、動きの面白さ、見栄えのよさなどを含めて、Webサイトとの相性のよい技術である。
基本的にはアクセント程度に使われることが多いが、凝ったアニメーションをメインにおいているサイトもある。
CSS3の登場で、今後発展して生きそうなジャンルの一つ。

gifアニメーション

gif画像では、何枚もの画像を組み合わせてアニメーションを作ることが出来る。
容量が非常に軽いのが利点。場面によっては非常に効果的に見せることができ、多様こそされないものの、今でも各所で見かける。
欠点としては、gif画像そのものの色数が少ないこと、大きい動画を作るには解像度が足りないことなどが挙げられる。

flash

一時隆盛を極めた、アニメーションやゲームを作る技術のひとつ。ActionScriptというプログラミング言語と絡めることで、非常に多彩な動きが可能だった上、他のプログラムと比べてもかなり直感的な操作が可能だったため、人気を博した。一時は全てflashで作られた、フルフラッシュのサイトも散見された。
しかし自由度が高すぎていろんな機能が盛り込まれてしまい、見にくいページが増えたこと、
大本のHTMLをほぼ使用せずにサイト構築が出来てしまうため、検索エンジンの厳格化とともに検索率が落ちたこと、
何より容量が大きく、正常に動作する為にかなりのマシンスペックを要求したことなどから、だんだんとシンプルなページに居場所を奪われていった。
そして近年、AppleがiPhoneの初期設定では閲覧できなくしたことがとどめとなり、今ではかなり数が減ってしまった。

JavaScript

Webサイトとの連携で使われる、代表的なプログラミング言語。
主にWebサイトに動作をつけるのに使われている。
この言語でも簡単なアニメーション制作は可能だが、ことアニメーションに関しては新しく登場したCSS3の方が直感的でわかりやすいため、そちらが採用されることが増えている。
どちらかというと、アニメーションの開始条件などの付加効果として利用されることが多い。

HTML5・CSS3

最新のCSS3では、簡単なアニメーションを作ることが可能になった。どちらかというと、ホバー時などのアクセントとして利用されることが多い。
要素自体を比較的簡単に動かせるため、注目される技術である。
現状では古いブラウザ(主にIE8未満)で正常な動作をしないことがある為、利用が制限されてしまう仕事もあるものの、今後利用が増え続ける技術と予想される。
また、HTML5ではcanvasと呼ばれる技術があり、こちらはかなり高度なアニメーション制作も可能だが、前述のJavaScriptとの連携が必須であり、敷居は高い。

プラスポイント

まずは、アニメーションがどんなことが出来るかを覚えた上で、デザインの幅の一つとして捕らえるといい。
使いようによっては、ワンポイントでも非常に効果的な魅せ方ができる。

ベンダープレフィックス

CSS3は、実験も踏まえて徐々に新しいプロパティを増やしてきた経緯がある。
その為、全てのブラウザが全てのプロパティに対応できなかった為、ベンダープレフィックスが登場した。
完全に対応していなくても、つけることで動くプロパティがある。
ただ、最近では正式採用されたプロパティも増えており、プレフィックスなしで動くものも増えている。少し古いが、半年前の対応状況を見つけたので、リンクしておく。CSS3は最新なので、日々対応が変わっている。
【CSS3】2015年4月3日現在 よく使うCSS3プロパティのブラウザ対応状況と書き方
また、元から対応していない古いブラウザではプレフィックスがあろうがなかろうが効かないので注意。
html5 css3 ブラウザ対応表

-webkit- Google Chrome,Safari
-moz- FireFox
-o- Opera
-ms- Internet Explorer

本日使用したタグ・プロパティ

transition
時間的変化を指定できる、CSS3で使えるようになった新プロパティ。
元のタグに指定しておくと、hover時に設定時間をかけて徐々に変化させることが出来る。
box-shadow、text-shadow
要素に影をつける、CSS3で使えるようになった新プロパティ。
box-shadowは要素自体、text-shadowは文字に対して影をつけることが出来る。
background:linear-gradient(色,色);
線形グラデーションで背景色をつけられる、CSS3で使えるようになった新プロパティ。
以前はグラデーションを使うには画像をつかったりしなければならなかったが、CSSだけで出来るようになった。
昨今はフラットデザインと呼ばれるシンプルなデザインが流行した他、IEでの対応が十分でないなどの問題はあるものの、表現の幅が広がった。

Photoshopの使いかた

リサイズ

psd112801
トップメニュー「イメージ」を開くと、「画像解像度」の設定があるので、「幅」あるいは「高さ」の数値を変更すると、
画像の大きさ自体を変更することが出来る。
下にある「縦横比を固定」にチェックすると、幅と高さのどちらかを変更すると、もう一方が自動で変わる。
また、同じイメージから「切り抜き」を選択すると、選択範囲の部分だけを切り抜くことが出来る。

レタッチ

色合いや明るさなどを変更して、写真の見栄えを調整すること。
psd112802
トップメニュー「イメージ」→「色調補正」を選ぶと、色合い・コントラストの調整用のメニューが出る。
明るさ・コントラストは大雑把だが、簡単なときに。
レベル補正・トーンカーブは詳細な変更が出来る。この二つは割りと使い手の好みによるが、どちらも直感的な操作で色合いが変更可能。
明るさ、彩度といった言葉の解説は↓のサイトが詳しいので、参考にしてください。
参考:Photoshopの色調補正(レタッチ)で画像を加工する方法

11月27日(金)
(実)HTML5・CSS3演習⑦
(実)CGコンテンツ制作演習①

本日使用したタグ・プロパティ・ツール

CSSプロパティ

  • background-size
  • rgba
  • border-radius
  • position
  • top、bottom、left、right
  • z-index

本日使用したタグ・プロパティ

CSSプロパティ

background-size
プロパティ値 効果
contain 要素の高さに対して100%になるように、画像の縦横比を保ったまま表示
cover 要素の幅に対して100%になるように、画像の縦横比を保ったまま表示
px、% pxや%での指定も可能

CSS

.bg_size{
	height:150px;
        padding:10px;
	background-image:url(images/bg_test.jpg);
	background-repeat:no-repeat;
	background-color:#DCBCBD;
	margin-bottom:10px;
}

.con{
	background-size:contain;
}
.cov{
	background-size:cover;
}
.px{
	background-size:200px;
}
.pers{
	background-size:80%;
}

HTML

<div class="bg_size">
    <h4>未指定</h4>
    <p>画像の一部を表示</p>
</div>
<div class="bg_size con">
    <h4>contain</h4>
    <p>比率を確保したまま、要素の高さに対して画像が収まる。</p>
</div>

<div class="bg_size cov">
    <h4>cover</h4>
    <p>
    比率を確保したまま、要素の幅に対して画像が収まる。
    高さが足りない部分は切れる。
    </p>
</div>
<div class="bg_size px">
    <h4>200px</h4>
    <p>比率を確保したまま、指定した幅に合わせて表示。</p>
</div>
<div class="bg_size pers">
    <h4>80%</h4>
    <p>比率を確保したまま、指定した要素から見て%に合わせて表示。</p>
</div>

表示

未指定

画像の一部を表示

contain

比率を確保したまま、要素の高さに対して画像が収まる。

cover

比率を確保したまま、要素の幅に対して画像が収まる。
高さが足りない部分は切れる。

200px

比率を確保したまま、指定した幅に合わせて表示。

80%

比率を確保したまま、指定した要素の幅を基準にした%表示。
元画像のサイズ基準ではないので注意!

常に全体を表示するというより、background-positionなどと合わせて表示位置を指定してあげると、どんな大きさでも割と綺麗に見える。
photoshopなどで、ある程度画像を加工するのも一つの手段。

background-color : rgba(赤,緑,青,透明度)
背景色を指定する方法の一つ。
要素を透明にするopacityは以前の講義でしようしたが、opacityだと、中に入っている文字や子要素も全て透明化してしまう。
rgbaは、背景色だけを透明化してくれる。
左からカンマ区切りで赤の度合い、緑の度合い、青の度合いを0~255までの値で指定し、最後に透明度を0~1までの範囲で、小数点を使って指定する。

.opc,.rgba{
   padding:10px;
   color:#FFF;
}
.opc{
  background-color:#9ED195;
  opacity:0.5;
}
.rgba{
   background-color:rgba(158,209,148,0.5);
}
opacity
rgba

透過度は同じだが、rgbaは中の文字が透過していないことが分かる。

border-radius
角を丸めるための指定。比較的新しいプロパティの一つ。
数値+pxや%で指定できる。

.kadomaru,.maru{
   padding:10px;
}
.kadomaru{
   background-color:#88D;
   border-radius:10px;
   margin-bottom:15px;
}
.maru{
   width:100px;
   height:100px;
   background-color:#BDD;
   border-radius:50%;
}

角が丸くなる
指定によっては円も書ける
position
要素の位置を任意に変更できるプロパティ。

プロパティ値 効果
position:absolute; 要素に対しての絶対位置を指定。
基本的にはbody(html)タグの左上を基準にする。
absoluteをかける要素の親要素にposition:relativeをかけておくと、その親要素の元位置が基準になる。
position:relative; 相対位置を指定。自分がもともといるはずだった位置が基準になる。
前述のように、absoluteの親要素に基準点として指定することも多い。
position:fixed; 固定位置(ディスプレイに対しての絶対位置)を指定。
スクロールしてもついてくるメニューなどに使用する。

CSS

.parent{
	height:200px;
	position:relative;
	background-color:#EEE;
	margin-bottom:15px;
}

.box{
	width:50px;
	height:50px;
}

.ab1,.ab2{
	position:absolute;
}

.ab1{
	background-color:#F90;
	top:80px; left:0;
}

.ab2{
	background-color:#CF3;
	top:105px; left:25px;
}

HTML

<div class="parent">
    <h2>absolute</h2>
    <p>
    body、htmlタグの左上が基準点(top:0; left:0;)
    </p>
    <div class="box ab1">ab1</div>
    <div class="box ab2">ab2</div>
</div>

表示

absolute

body、htmlタグの左上が基準点(top:0; left:0;)

ab1
ab2

CSS

.rel1,.rel2{
	position:relative;
}

.rel1{
	background-color:#F90;
	top:0; left:0;
}

.rel2{
	background-color:#CF3;
	top:0; left:100px;
}

HTML

<div class="parent">
    <h2>relative</h2>
    positionを指定していないときに現れた位置が基準になる。
    最初に位置指定せずに出してみて、そこから調整しよう。
    <div class="box rel1">rel1</div>
    <div class="box rel2">rel2</div>
</div>

表示

relative

positionを指定していないときに現れた位置が基準になる。
最初に位置指定せずに出してみて、そこから調整しよう。

rel1
rel2

rel2には、leftしか位置を指定していない。
今いる位置のtopが0になる。

CSS

.fix{
	width:100%;
	height:10px;
	background-color:rgba(150,225,100,0.5);
	position:fixed;
	font-size:0.5em;
	top:0;
	left:0;
}

HTML

<div class="fix"><h2>fixed</h2></div>

fixedは出すと邪魔になるので、表示はさせません。
プログラムとの絡みはありますが、当ブログ右下の、トップへ戻る矢印ボタンはfixedを利用して位置を固定しています。

プラスポイント

position:absolute;は、relativeと比べて表示位置が画面端基準になるのが難点です。
しかしabsoluteの基準点を変える方法があります。
上記のabsoluteの例でも使用しているのですが、親タグに「position:relative;」がかかっていると、
その中のabsoluteの基準点を、画面端から、親タグの左上に変更することが出来ます。

top、bottom、left、right
positionとセットのプロパティ。
positionのかかった要素にかけると、それぞれの基準位置から上下左右に要素を移動させる。
top:10px; left:-100px;
など、数値+単位で指定する。逆向きに動かすために、マイナス指定をすることも多い。
z-index
positionとセットのプロパティ
要素の表示順位を設定する。
positionを使うと要素が重なってしまうことがある。そこで優先順位をつけて、表示の順位を変更することができる。
z-index:10;
などという風に使う。なにも指定していない要素の初期値は0。数字が大きいほど前に表示する。

Webデザインの流れ

  1. クライアントから以来を受ける
  2. 仕様を確認する
    • 目的は?
    • ターゲット層は?
    • どんなページやコンテンツが必要?
    • 納期は?
    • 仕事の範囲は?(データを作成するまで?、実際に見られるまで?、保守管理は必要?)
    • 金額は?(納期、作業量、技術等色々ふまえて決定)
  3. サイトマップ(サイトの構成)を作る
  4. ワイヤーフレーム(ページの骨組み、設計図)を作る
  5. デザイン(デザインカンプの作成)
  6. 制作(コーディング+プログラミング)
  7. テスト
  8. 完成!

実際に一番大切だなぁと思うのは、仕様の確認です。
ここを適当にすると、炎上してしまう案件もちらほら。一ヶ月の仕事が二ヶ月になったり、立ち消えてしまうこともあります。
ディレクター志望の方は十分に意識して、仕様書を作成しましょう

Photoshopの使いかた その1

PhotoShopは、Adobe社制の画像編集ソフト
写真の編集だけでなく、イラストを描いたり、デザインカンプを作ったりも出来る、高性能なソフトである。

PhotoShopでやること

画像の……

  • リサイズ
  • 切り抜き
  • 色合いの調整
  • レタッチ(邪魔なものを消す作業)
  • 合成

Webの仕事に限りませんが、
画像の縦横比を変更したり、小さい画像を大きくしたりはしないこと
見栄えが極端に悪くなります。例外はあるにはありますが、これを基本としてください。

PhotoShopの基本機能・ツール

新規作成
新しいファイルを作成する。選択すると、初期のキャンバスサイズなどが変更できる。
ショートカットはCtrl + N
開く
すでにあるファイルをフォルダから選択して開く
ショートカットはCtrl + O
保存、名前をつけて保存
データを保存する。psdデータで保存する場合はこちら
上書きは Ctrl+S
別名保存名は Ctrl + Shift + S
Web及びデバイス用に保存

データをjpg、gif、pngといった、Webで使える形式で保存する。
ショートカットは Ctrl + shift + Alt + S

移動ツール
十字の矢印マーク。要素を移動させるツール
テキストツール
Tマーク。文字を入力する
選択ツール
自動選択、なげなわなど、様々なツールが用意されている

他にもいろんなツールを触りましたが、詳しく講義した日にあげていきます。

PhotoShopの保存形式

PhotoShopのデータは基本的に.psdで保存される。
他の拡張子で保存すると、レイヤーや効果が正常に保存されず、作業ファイルが失われてしまうので、編集用としてpsdデータは必ず残すようにしよう。
逆に、jpgやpngなどの、WEBで表示できるデータに保存するときは、「Webおよびデバイス用に保存」から保存する

レイヤー

画像編集ソフトには大体ある機能の一つで特に重要な概念
レイヤーは「層」という意味で、透明な層をいくつか重ねていく機能。
例えば一層だけで画像を変更していくと、一部分だけ移動したり、消したりといった編集が難しくなってしまう。
その為、作業によって層を増やし、編集作業を効率化することが出来る。
参考:レイヤーとは

選択範囲

選択範囲を設定すると、その選択されたエリアの中にだけ編集が有効になる。
一部分だけを変更したり、削除したりする際に使用する。

絶対に覚えて欲しいショートカット PhotoShop編

PhotoShopで使えるショートカットキーです。
他にもかなりたくさんあるりますが、とりあえず一部のものを抜粋しています。
全部見たい方はこちらを参照してください。

全般

機能 Windows Mac
上書き保存 Ctrl + S Command + S
名前をつけて保存 Ctrl + Shift + S Command + Shift + S
Webおよびデバイス用に保存 Ctrl + Shift + Alt + S Command + Shift + Option + S
直前の操作を元に戻す Ctrl + Z Command + Z
直前の操作をやり直す Ctrl + Shift + Z Command + Shift + Z
すべて選択解除 Ctrl + D Command + D
選択範囲と面を隠す Ctrl + H Command + H
選択範囲と内容を 1 ピクセルずつ移動する 矢印キー 矢印キー
選択範囲を 10 ピクセルずつ移動する Shift + 矢印キー Shift + 矢印キー
コピー Ctrl + C Command + C
ペースト Ctrl + V Command + V
ズームイン Ctrl + +(テンキー上のプラス)または Ctrl + ; Command + +(テンキー上のプラス)または Command + ;
ズームアウト Ctrl + -(テンキー上のマイナス)または Ctrl + -(ハイフン) Command + -(テンキー上のマイナス)または Command + -(ハイフン)
表示サイズに合わせる Ctrl +0(ゼロ)、手のひらツールをダブルクリック Command +0(ゼロ)、手のひらツールをダブルクリック
画像を 100 %で表示する ズームツールをダブルクリック ズームツールをダブルクリック
開いているドキュメントを順番に表示する Control + Tab Control + Tab
前のドキュメントに切り替える Shift + Control + Tab Shift + Command + `

ツール系

ツールの切り替えもボタン一つでできます。
全部でなくとも、よく使うのは覚えておくと便利でしょう(僕も全部は覚えてません)
環境設定でキーの変更もできるので、あくまで初期設定のものです。
全角・日本語入力時は使えないので注意しましょう。

移動ツール V
長方形選択ツール†

楕円形選択ツール

M
なげなわツール

多角形選択ツール

マグネット選択ツール

L
自動選択ツール

クイック選択ツール

W
切り抜きツール

スライスツール

スライス選択ツール

C
スポイトツール†

カラーサンプラーツール

ものさしツール

注釈ツール

カウントツール*

I
スポット修復ブラシツール

修復ブラシツール

パッチツール

赤目修正ツール

J
ブラシツール

鉛筆ツール

色の置き換えツール

混合ブラシツール

B
コピースタンプツール

パターンスタンプツール

S
ヒストリーブラシツール

アートヒストリーブラシツール

Y
消しゴムツール†

背景消しゴムツール

マジック消しゴムツール

E
グラデーションツール

塗りつぶしツール

G
覆い焼きツール

焼き込みツール

スポンジツール

O
ペンツール

フリーフォームペンツール

P
横書き文字ツール

縦書き文字ツール

横書き文字マスクツール

縦書き文字マスクツール

T
パスコンポーネント選択ツール

パス選択ツール

A
長方形ツール

角丸長方形ツール

楕円形ツール

多角形ツール

ラインツール

カスタムシェイプツール

U
3D オブジェクト回転ツール*

3D オブジェクトロールツール*

3D オブジェクトパンツール*

3D オブジェクト移動ツール*

3D オブジェクト拡大・縮小ツール*

K
3D カメラ回転ツール*

3D カメラロールツール*

3D カメラパンツール*

3D カメラドリーツール*

3D カメラズームツール*

N
手のひらツール† H
回転ビューツール R
ズームツール† Z

11月25日(水)HTML5・CSS3演習⑥ 講義内容

本日使用したタグ・プロパティ

HTMLタグ

  • address
  • video
  • audio

CSS疑似要素

  • :before
  • :after

YouTube動画の張り方

Webページには、youtubeの動画を貼り付けることも出来る。
張り方の動画がyoutubeにあったので張ってみた。

<iframe width="560" height="315" src="https://www.youtube.com/embed/kfvxmEuC7bU" frameborder="0" allowfullscreen></iframe>


リンク先:動画と再生リストを埋め込む


clearfix

clear:both の今の書き方
詳しくは以下の記事に書いています。
float、clear、そしてclearfix


HTMLタグ

<address></address>
連絡先や問い合わせ先を囲うタグ。住所を囲うだけのタグではないので注意。
メールアドレス等の、サイト制作者の連絡先を囲う。
<video></video>
videoタグはHTML5で登場した新しい要素。動画を張ることが出来る。
もともと、動画はyoutubeなどの動画サイトを経由しなければ、サイトに張ることが出来なかった。
しかしその方法だと、YouTube内の動画が削除されてしまったり、サーバーエラーで見られないときに、自分のページの動画も見られなくなってしまう。
また、企業の作った動画などは、動画サイトにアップしたくないケースも考えられる。
そこで、videoタグが登場。アップロードした動画を、タグだけで表示できるようになった。

<video controls poster="images/caption.jpg" loop>
    <source src="movies/sample.mp4">
    <source src="movies/sample.flv">
    <source src="movies/sample.ogv">
</video>


動画にはいくつかの形式があり、ブラウザによって読めるファイルが違ったりするので、sourceタグを使っていくつか指定する。
上から読んで、読めない場合は自動的に下のものを読んでいく。

videoタグの属性
controls コントロールバーを表示
poster=”画像パス” 初期表示画像を設定。パスを入れる
loop 繰り返しするかどうか。loop=”数値”でループ回数を指定できる
autoplay 自動再生
width 動画の幅
height 動画の高さ
<audio></audio>
videoタグの音楽版。こちらもHTML5から
音声ファイルの再生が出来る。使い方はvideoとほぼ同じ。

<audio controls>
    <source src="music/sample.mp3">
</audio>

音が出ます。音量に注意してください

今回のサンプルファイルは、
動画素材はこちらから、
音楽素材はこちらから、
それぞれお借りしました。他にも「動画 フリー」「音楽 フリー」などで検索すると、サンプルのダウンロードサイトが出てきます。利用規約等をよく読んで使ってみてください。
もちろん画像もですが、動画、音楽の著作権には特に気を付けましょう!
仕事で使うときにはクライアントから提供される事が多いですが、個人利用時は自己責任になります。


CSSの疑似クラス

:before
要素の直前に何かを書き加える擬似クラス。
beforeとafterは一つの要素を擬似的に出現させるので、擬似要素とも呼ばれる。

CSS

/*list横の点を無効化*/
ul.bf li{
    list-style-type:none;
}

ul.bf li:before{/*liタグそれぞれの直前に要素を追加*/
    content:"▼";/*文字を読み込むプロパティ*/
    color:#dd8fbb;
    font-size:0.8em;
}

HTML

<ul class="bf">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
</ul>

表示

  • リスト1
  • リスト2
  • リスト3
  • リスト4

リストの手前にピンクの三角形を表示させた。
見出しタグのデザインなどにもよく使われる方法の一つ。

:after
要素の直後に何かを書き加える擬似クラス。

CSS

li.pickup:after{
   content:"pickup";
   color:#f00;
   border:solid 1px #f00;
   padding:5px;
}

HTML

<ul class="bf">
    <li class="pickup">リスト1</li>
    <li>リスト2</li>
    <li class="pickup">リスト3</li>
    <li>リスト4</li>
</ul>

表示

  • リスト1
  • リスト2
  • リスト3
  • リスト4

after要素をつけたクラス、「pickup」がついた要素の後にだけ、装飾された文字が表示される。

横並びのナビメニューの作り方色々

横並びのメニュー制作には色々あります。
どちらも一例になるので、参考までに。
せっかくなので、今回は講義のものと少し違うもの2種類を用意しました。

共通設定

/*----------------------------------共通設定*/
*{/*ブラウザのデフォルト設定を解除するおまじない*/
	margin:0; padding:0;
}

#nav_wrap nav{
	width:200px;/*200pxのnavエリア*/
	margin:0 auto;/*中央寄せ*/
}

#nav_wrap nav li{
	list-style:none; /*リストタグについてる点を非表示*/
}

#nav_wrap nav li a{
	font-size:0.5em;/*フォントサイズを設定*/
	text-decoration:none;/*リンクの下線を非表示*/
}

上記は共通設定。以下に記述する2つのメニューに共通する設定です。
CSSでは共通項をまとめて、変更点だけ書き加えていくほうが、スマートで分かり易いコードが出来上がります。

floatでの横並び

floatで横並びにする方法。
aタグをブロック要素にし、範囲を持たせる事で、ボタンのようなメニューを作成することが出来る。
グローバルメニュー作成では一般的な方法の一つ。

CSS

/*----------------------------------floatでの設定*/

#nav_wrap nav.float li{
	width:25%;  /*今回リスト4つなので25%*/
	float:left; /*今回のキモ、左寄せ*/
	background-color:#5A4; /*背景色、緑っぽい色*/
	text-align:center; /*文字を要素に対して中央ぞろえ*/

	/*borderが溝っぽくなる小技*/
	border-left:solid 1px #EEE; /*左に白の線*/
	border-right:solid 1px #555; /*右に黒の線*/
	box-sizing:border-box; /*borderを要素の内側に*/
}


#nav_wrap nav.float li a{
	display:block; /*aタグに範囲を持たせるために*/
	padding:10px 0; /*内余白の設定(liだと余白がリンクにならない)*/
	color:#FFF; /*文字色変更*/
}

#nav_wrap nav.float li a:hover{/*マウスオンの設定*/
	/*背景色を変更*/
	background-color:#9C6;
}

/*ul、navタグの高さを確保する為にclearfixを設定*/
.clearfix:after{/*afterは、「要素のすぐ後ろに」という指定*/
	clear:both;
	/*以下はどんなブラウザにも対応するためのおまじない*/
	display:block;
	content:'.';
	visibility:hidden;
	height:0;
	font-size:0;
}

HTML

<div id="nav_wrap">
    <nav class="float"><!--float用メニューのクラス-->
    	<ul class="clearfix"><!--floatの浮きを解除-->
        	<li><a href="#">ページ1</a></li>
        	<li><a href="#">ページ2</a></li>
        	<li><a href="#">ページ3</a></li>
        	<li><a href="#">ページ4</a></li>
        </ul>
    </nav>
</div>

表示

かなり長いCSSですが、仕組みとしては単純です。

  1. navタグに幅を設定。グローバルナビの大きさを決める。
  2. liタグに幅を設定。項目ごとの大きさを設定し、floatで横並び
  3. floatを使ったので、clearfix(講義でやったbothでも可)を使って浮きを解除
  4. aタグにdisplay:block;を使い、リンクに範囲を持たせる

残りの装飾は好みやデザインによります。
グローバルナビは全ページ共通で表示するものなので、シンプルながらアクセントのあるボタンを作ってみましょう。

プラスポイント

*{
	margin:0; padding:0;
}

これはCSSリセットと呼ばれるものの簡易版です。
全てのタグには、ブラウザごとに、初期設定のCSSがかかっています。
見慣れない記号、*(アスタリスク)は全称セレクタと呼ばれ、全ての要素という意味。
最初からmarginやpaddingがかかっているとページが崩れてしまうことがあるので、全ての要素で0にすることで、見え方を一本化することが出来ます。
ただしこれは簡易版で、問題も孕んでいるので、勉強のときやテスト環境でのみで使用してください。
実際に使うものはもう少し複雑ですが、今後講義でやっていきます。

インラインでの横並び

display:inline;を使用した横並び。
インライン要素には範囲を設定できないので、凝ったレイアウトは出来ませんが、その分短い記述で横並びメニューが出来ます。グローバルナビでの利用より、フッターなどでサブメニューとして使われるケースが多いです

CSS

#wrap nav.inline li{
	display:inline; /*liをインライン要素に変更*/
	border-left:solid 1px #555; /*要素の左側にボーダーを設置*/
	padding:2px 5px; /*内余白設定*/
}

#wrap nav.inline li:first-child{
	border-left:none; /*最初のリストだけ左ボーダーを外す*/
}

#wrap nav.inline li a:hover{ /*マウスオン時*/
	color:#777; /*文字色変更*/
	text-decoration:underline; /*アンダーラインを表示*/
}

HTML

<h3>インラインのメニュー</h3>
<div id="nav_wrap">
    <nav class="inline"><!--インライン版-->
    	<ul>
        	<li><a href="#">ページ1</a></li>
        	<li><a href="#">ページ2</a></li>
        	<li><a href="#">ページ3</a></li>
        	<li><a href="#">ページ4</a></li>
        </ul>
    </nav>
</div>

表示

こちらだと、最低限の記述で最低限のナビメニューを作れますが、インライン要素の特性上、様々な装飾が出来ません。