5/28 webセミナー資料

Download Report

Transcript 5/28 webセミナー資料 

資料・ソフトのダウンロード
• 資料
– http://www.mineiyuki.com/sem1doc.zip
ブラウザによって表示が変わるのですが、
IEは信用できないのでChromeかFirefoxを使います。
• ブラウザ
– http://www.google.co.jp/chrome/intl/ja/landing_ch.html
• エディタ
– Windowsの方
• http://www.kashim.com/eve/get.html
– Mac
• http://www.mimikaki.net/download/index.html
1
HTML/CSSマークアップ
Chord;セミナー2011
自己紹介
MINEI YUKI
嶺井祐輝
ウェブマーケティングプロデューサー
（ウェブデザイナー・マークアップエンジニア兼職）
• 職業
– 東証一部上場の某IT系企業でウェブマーケティングを担当。
– Chord;でマーケティング戦略立案の他、
HTML/CSSコーディング・ウェブデザイン、
情報設計（IA, UXD）、SEOコンサルティング等を担当。
• 副業
– 学生（慶応義塾大学総合政策学部第１学年所属）
とは？
 社会人と大学生のホームページプロデュース事業
•
社会人が品質・納期保証、学生がデザイン・制作を担当
これまで、ホームページには高い費用がかかっていました。
時代は変わり、技術と情報はオープンになり、技術と情報の格差が無くなりました。
それにより、学生によるIT・デザインのプロフェッショナルな学生集団が
自己の能力を社会に提供することが可能となり、
費用対効果の高いホームページを作る事ができるようになりました。
そこに、社会人がマネジメントとして関わることでサービスの充実を図っております。
この仕組みが『企画→制作→運用』のトータルサポートを実現している理由です。
4
とは？
技術を持った学生の集まり。
僕らにとってのコードとは――
実績とより高い技術が手に入る場所
第１部
ソフトウェアのセットアップ
ウェブ基礎知識
資料・ソフトのダウンロード
• 資料
– http://www.mineiyuki.com/sem1doc.zip
ブラウザによって表示が変わるのですが、
IEは信用できないのでChromeかFirefoxを使います。
• ブラウザ
– http://www.google.co.jp/chrome/intl/ja/landing_ch.html
• エディタ
– Windowsの方
• http://www.kashim.com/eve/get.html
– Mac
• http://www.mimikaki.net/download/index.html
7
ホームページの仕組み
URLを呼び出す（http://www.yahoo.co.jp/）
ブラウザ
遠くで誰かが
頑張って、
ブラウザに
サーバーの
ファイルが
表示される。
サーバー
あらかじめ
アップロードしておく
ファイル
8
サーバーはレンタルするもの！
サーバー
• サーバーはたくさんの魔術師が作った魔法の箱です。
• 自分で作るのは大変なので、
魔術師に利用料を払ってレンタルしましょう。
• 魔法の箱にファイルを入れるには、
FTPを利用します。
– http://www.forest.impress.co.jp/lib/inet/servernt/ftp/ffftp.html
9
URLについて
URLとは？
ファイルが置いてあるサーバーの住所
URLの例
http://www.mineiyuki.com/works/2010/index.html
ファイルが置かれているサーバーには便宜上名前が付けられています。
この部分をドメインと呼びます。
10
URLの構造
URLの例
http://www.mineiyuki.com/works/2010/index.html
ファイル自体の名称
ドメインの続きは"パス"を利用して書きます
パスとは？
自分が今いる場所からの道順
11
パス表記のルール
パスの例
./01_演習/01_HTMLタグのサンプル/index.html
「自分が今いる場所」という意味
つまり「自分がいる場所を起点にしますよ！」
の意味です
HTML・CSSセミナー
この中に居るファイルに自分がなったつもりで
12
パス表記のルール
パスの例
./01_演習/01_HTMLタグのサンプル/index.html
Chapter.2
スラッシュで下の階層へ
どんどん潜っていきます
01_演習
01_HT…
13
パス表記のルール
パスの例
HTML・CSSセミナー
../
Chapter.2
ドットを２つにすると、
今いる場所から上の階層へ
戻ることもできます。
01_演習
01_HT…
14
フォルダ分け
• 自分のPCで作業をするときから、あらかじめフォルダを分け、ディレクトリ構成を決めておきましょう。
15
サイトを構成するファイル
サーバーに置くためのファイルを作るのが
ウェブ制作に関わる人のお仕事！
HTML
プログラム
ファイル
CSS
動画やPDF等のファイル
画像
16
ファイルの種類をPCで判別するには？
• ファイルの「拡張子」を見れば分かります。
• ウィンドウズでは拡張子を表示するよう
設定を変えねばならない場合があります。
17
画像ファイルの拡張子について
• PNG形式（.png）
– ウェブ用に作られた画像形式です。素材は通常この形式を用います。
– 背景を透過したり、半透明にしたりできます。
• 旧いIE（バージョン6以前）では透過pngがうまく表示できないので、魔法を使う必要があります。
• JPEG形式（.jpg）
– 写真によく用いられる形式です。
– ボタンなどのパーツに使うとノイズが入ります。
• GIF形式（.gif）
– ひとつのファイルで256色まで表現できる形式です。
– うち１色を透過させることができます。
• 旧いIE（バージョン6以前）でもちゃんと表示できます。
18
ファイルは誰がどうやって作るか？
• HTML、CSSファイル
– コーダー（マークアップエンジニア）が作成。
– メモ帳やDreamweaverといった「テキストエディタ」を用いて作成。
• 画像ファイル
– デザイナーが作成（コーダーがパーツ毎に切り出す）
– PhotoshopやIllustrater、Fireworksなどを用いて作成。
• やろうと思えばPowerpointでも作れます（Windows版、2007以降推奨）。
• プログラムファイル
– プログラマーが作成します
– これもメモ帳で作れますが、コンパイルしたりサーバー上で動かしたりと、奥が深いので割愛。
• その他のファイル
– クライアントに用意してもらいます。
– 動画やFLASH等のファイルを用意することもあります。
19
ウェブ制作のワークフロー
サイト設計・要件定義
デザインのドラフト画像を作成
HTML・CSSでコーディング
ブラウザチェック
ドラフト画像をパーツ毎に切り出し
CMSへ実装
このセミナーはこの部分を担当できるようになることを目指します
20
HTML
CSS
文字列で構成されたファイルです
ちなみに文字列のことをソースコードと呼びます。
これを書く事を「コーディング」と言います。
プログラミング言語っぽいけど
それほど難しくないです
21
演習1
コードを実際に見てみよう
ブラウザでいつも見ているサイトの中身を見てみましょう。
Firebugや要素を検証といった
ソースコードを表示する機能を使いこなすことが重要です。
HTML
CSS
22
大まかな役割
HTML
表示したい内容と、文章に意味を付けるタグを書く
CSS
簡単なデザインとレイアウトを書く
23
演習
HTMLファイルの開き方
• HTMLファイルの表示を確認するために開く
– ダブルクリックするとブラウザで開きます。
• 設定でダブルクリック時に動作を変えられます。
• HTMLファイルを編集するために開く
– ファイルを右クリックし
「プログラムから開く」を選ぶ(右図)と、
開発用のソフトウェアで開くことができます。
– Dreamweaverを使う人が多いです。
– 今日はさっきDLしたCrescent Eveを使いましょう。
– ちなみにメモ帳でも大丈夫です。
24
分からないことがあったら？
• まずは隣の人に聞きましょう。
– せっかく複数人でやっているのですから、とりあえず聞くのが一番良いです。
• 聞きづらかったらGoogle先生に聞きましょう。
– 例：
• タグ名、プロパティ名などで検索する
• 「CSS 表示 ズレ float」など自分の状況を適当に半角スペースで区切って放り投げる
• エラー文をそのまま検索する
– たいていの困ったことはほとんど全てウェブ上に落ちています。
とりあえずGoogle先生に聞いてみる癖をつけることが大事です。
25
第二部
HTMLの書き方・考え方
第二部 その１
HTMLの文法
復習
HTMLの大まかな役割
表示したい内容と、文章に意味を付けるタグを書く
HTMLの例
<h1>タグの使い方</h1>
<p>例えばこの文章を囲んで
いるのはpタグです。</p>
※内容に意味や文章構造を与えるタグを
書き加えることをマークアップといいます。
タグを"要素"と呼んだりもします。
タグには開始タグと終了タグがあります。
28
要素と属性
HTMLの例
<a href="http://twitter.com/">aタグでリンクをはれます</a>
この部分は"要素"（element）
例えばこれは"a要素のタグ"です。
29
要素と属性
HTMLの例
<a href="http://twitter.com/">aタグでリンクをはれます</a>
この部分は"属性"
属性は要素ごとに多数あります。
また、複数の属性を付けることもできます。
30
要素と属性
HTMLの例
<a href="http://twitter.com/">aタグでリンクをはれます</a>
この部分は"属性値"
a要素に用意されたhref属性は、URLを属性値に取り、
ここではTwitterのURLが指定されています。
31
HTMLの考え方のコツ
HTMLの例
<h1>タグの使い方</h1>
<p>
例えばこの文章を
囲んでいるのはpタグです。
</p>
タグが箱を作っていると考える
32
HTMLファイルの大まかな構造
HTMLの例
<html>
<head>
～
</head>
大体どのHTMLファイルも
この３種類の箱が必ずあります。
※<html>タグと<head>タグは
とりあえず必要な大きな箱だと把握しておいてください。
<body>タグ
<body>
～
</body>
</html>
この中に"内容"があるよ！という意味のタグ
つまり
bodyタグの中に内容を記述していきます
33
ブロックレベル要素とインラインレベル要素
• bodyの中に書けるHTMLタグは、大きく分けて２種類あります。
– ブロックレベル要素
• 上下に改行が入る
• 箱の幅が画面いっぱいに広がる（親要素の幅と同じになる）。
– インラインレベル要素
• 改行は入らない
• 箱の幅は中身の量・大きさと同じになる。
• ルール
– インライン要素の中にブロック要素を入れることはできない
– インライン要素はbody直下におけない（何らかのブロック要素で囲われている必要がある）。
34
第二部 その２
基本的なHTMLタグの使い方
35
HTMLのサンプルファイルを開こう！
./01_演習/01_HTMLタグのサンプル/index.html
• このファイルで利用されているHTMLタグを順に解説していきます。
• 先程からHTMLファイルのファイル名は全て「index」となっています。
Q.さて、これはなぜでしょう？
A.
URLでファイル名を省略しディレクトリにアクセスしたとき
最初に読み込まれるのがindex.htmlだから。
36
ブロック要素
h要素 見出しタグ
HTMLの例
<h1>マークアップの仕方</h1>
<h2>最重要ブロックレベル要素</h2>
<h3>見出しタグ</h3>
hタグは見出しタグです。 h1はそのページ全体のタイトルを表すように付けることが多いです。
最初のうちはh1といえばページのタイトルだと考えて間違いはありません。
h2以下h3、h4、h5と数字を増やして小小見出し、小小小見出し、と無限に続けることができます。
37
ブロック要素
p要素 段落タグ
HTMLの例
<p>
二つ目の重要なブロックレベル要素の説明に移ります。
先程から使われている「pタグ」は段落を意味します。
国語的に一段落だと思った時がpタグの使いどきです。
英語で言うとパラグラフですね。
</p>
38
ブロック要素
ul要素・li要素 順不同リストタグ・リスト項目タグ
HTMLの例
<ul>
<!-- ulタグは「中にリストがあるよー」を示します。書き忘れないように注意しましょう。 -->
<li>順不同な項目</li>
<li>順不同な項目</li>
<li>順不同な項目</li>
</ul>
※ul要素はブロック要素ですが中にはli要素しか入れてはなりません。
39
TIPS
コメントの入れ方
HTMLの例
<!-- コメントを書き入れることができます -->
コメントはブラウザ上には表示されません。
つまり、マークアップエンジニアがHTMLにメモ書きをしたいときなどに使います。
40
ブロック要素
ol要素 番号順リストタグ
HTMLの例
<ol>
<li>順序のある項目</li>
<li>順序のある項目</li>
</ol>
※ol要素はブロック要素ですが中にはli要素しか入れてはなりません。
41
ブロック要素
dl要素 定義リストタグ
HTMLの例
<dl>
<dt>定義のタイトル</dt>
<dd>定義の内容</dd>
</dl>
※dl要素はブロック要素ですが中にはdtとddしか入れてはなりません。
42
演習
マークアップ演習１
./01_演習/02_マークアップ演習1/index.html
問題
• bodyタグの中になにもマークアップされていない、ただのテキストが放り込んであります。
• これをこれまでに習ったHTMLで文法的に正しくマークアップしてみましょう！
• もちろん今までのスライドをカンニングして大丈夫ですよ！
43
演習
答え
44
TIPS
HTML上のスペースと改行
みなさん気づいてるかもしれませんが…
HTMLに書いたスペースや改行は、
ブラウザでは表示されません！
45
インライン要素
br要素 改行タグ
HTMLの例
<ｂｒ />
今までタグは２つで１セットでしたが、改行タグは１つで大丈夫です。
１つで大丈夫なタグは最後にスラッシュを入れるのがXHTMLのルールです。
別に従わなくてもいいんですが、統一しないとコードが読みづらいのでこれで統一します。
※brタグは連打厳禁です。理由は最後のセクションで。
46
インライン要素
a要素 アンカーリンクタグ
HTMLの例
<a href="http://www.google.co.jp/">
aタグでリンクを貼ることができます。</a>
href属性の値にサイトのURLを入れるとそのURLにリンクできます。
「target="_blank"」という属性を付けると、リンク先を新しいウィンドウで開けます。
47
インライン要素
img要素 画像タグ
HTMLの例
<img src="./図1.jpg" alt="Chord;のロゴ"
width="944" height="254" />
色々属性が指定されてますね！
逆から説明します！
48
インライン要素
img要素 画像タグ
HTMLの例
<img src="./図1.jpg" alt="Chord;のロゴ"
width="944" height="254" />
画像の幅と高さです！
これを書かない場合、ブラウザの読み込みにかかる時間が少し増える他、
最悪デザインが崩れることがあります。
トラブルは未然に防ぐのがコーディングのコツです。
49
インライン要素
img要素 画像タグ
HTMLの例
<img src="./図1.jpg" alt="Chord;のロゴ"
width="944" height="254" />
画像の内容を示す短い文です！
altの中身は表示されませんが、画像の中身が読めない検索エンジンさんに読んでもらうため、書く必要があります。
ちなみに、画像と全く別になるような属性値をaltに指定すると検索エンジンさんに嫌われるので注意しましょう。
50
インライン要素
img要素 画像タグ
HTMLの例
<img src="./図1.jpg" alt="Chord;のロゴ"
width="944" height="254" />
src属性には画像のURLが入ります
51
TIPS
絶対URL・相対URL
URLの書き方は２種類あります。
絶対URLの例
http://www.mineiyuki.com/works/2010/index.html
相対URLの例
./works/2010/index.html
52
演習
相対URL・絶対URL
index.htmlから画
像を
読み込む
相対URLを
４つ書いてください
index.html
about
1
top.png
profile
3
logo.png
2
img
4
new
title.png
news.png
53
答え
相対URL・絶対URL
index.htmlから画
像を
読み込む
相対URLを
４つ書いてください
1
./top.png
3
2
../logo.png
./img/title.png
4
../../new/news.png
さあ元の講義に戻りましょう！
いよいよSection.2も終盤です！
54
ブロック要素
address要素 アドレスタグ
HTMLの例
<address>
[email protected]
</address>
アドレスタグは連絡先やコピーライト情報を書くときなどによく利用されているのが見られます。
55
ブロック要素
hr要素 水平線タグ
HTMLの例
<hr />
最近では意味的なセクションの区切りとして使われるようになり、HTML５ではそういうタグとして仕様変更されました。
ブロック要素では珍しい、単体で使うタグです。
56
インライン要素
em,strong要素 強調タグタグ
HTMLの例
<em>emは強調タグです。</em>
<strong>strongはさらに強い強調です。</strong>
おめでとうございます！タグの羅列はこれで終わり！
57
TIPS
記号のブラウザ上での表示
htmlタグをブラウザ上で表示するにはどうすればよいのでしょう？
"<"や">"を文字で書くと、ブラウザがタグと間違えてしまいます。
このように、特殊な記号をブラウザで表記する際には「文字参照」という方法を使います。
例えば、コピーライトで"©"を書きたい時、「&copy;」と書きます。
ファイル
./03_配布補足資料/01_文字参照レファレンス.pdf
58
HTMLにおける表組
この部分です
HTMLで表（テーブルと呼びます）を
作るには、少々コツが必要です。
HTML特有の考え方で
テーブルは作られています。
※ブラウザで表示すると、
枠線が表示されずに見辛いですが、
見た目はCSSで作れることをお忘れなく！
59
HTMLにおける表組
HTMLの考え方のコツ
タグが箱を作っていると考える
HTMLにおけるテーブルは
いくつかの箱を組み合わせ入れ子にした
構造になっています。
60
HTMLにおける表組
実際の画面
HTMLの例
<table>
<caption>～</caption>
<thead>～</thead>
<tbody>～</tbody>
</table>
<table>は箱全体をくくるタグです。
61
HTMLにおける表組
実際の画面
HTMLの例
<table>
<caption>～</caption>
<thead>～</thead>
<tbody>～</tbody>
</table>
<caption>はテーブルの見出しを書きいれるタグです。
<table>タグの直後に一回だけ使うことができます。
62
HTMLにおける表組
実際の画面
HTMLの例
<table>
<caption>～</caption>
<thead>～</thead>
<tbody>～</tbody>
</table>
<thead>はテーブルの項目名を書く箱を作るときに利用します。
63
HTMLにおける表組
実際の画面
HTMLの例
<table>
<caption>～</caption>
<thead>～</thead>
<tbody>～</tbody>
</table>
<tbody>はテーブルの項目を書く箱を作るときに利用します。
ちなみに、<tfoot>というのもありますが、このセミナーでは省略します。
64
HTMLにおける表組
実際の画面
HTMLの例
<table>
<caption>～</caption>
<thead>～</thead>
<tbody>～</tbody>
</table>
この２つの箱の中には、さらに箱が入っています。
65
HTMLにおける表組
実際の画面
HTMLの例
<thead>
<tr><th>名前</th>～</tr>
</thead>
<tbody>
<tr><td>～</td>～</tr>
<tr><td>～</td>～</tr>
</tbody>
66
HTMLにおける表組
実際の画面
HTMLの例
<thead>
<tr><th>名前</th>～</tr>
</thead>
<tbody>
<tr><td>～</td>～</tr>
<tr><td>～</td>～</tr>
</tbody>
<tr>は行を表します。
「表」という札の付いた箱の中に、「thead」や「tbody」があって、その中に「tr」という行が入っているわけです。
67
HTMLにおける表組
実際の画面
HTMLの例
<thead>
<tr><th>名前</th>～</tr>
</thead>
<tbody>
<tr><td>～</td>～</tr>
<tr><td>～</td>～</tr>
</tbody>
<td>が１つのブロックです。エクセルで言う「セル」ですね。
「table」の中に、「thead」や「tbody」があって、その中の「tr」という行に「td」というブロックがあって、
その中にようやく内容が記述されます。
68
colspan
• 隣接するセルを横に結合させる属性です
結合する側
結合される側
<td colspan="2">
69
rowspan
• 隣接するセルを縦に結合させる属性です
結合する側
結合される側
<td rowspan="2">
70
第二部 その３
<head>タグの中身について
HTMLの標準化
• HTMLで書く→タグの内容に合わせてブラウザが表示
– 中身重視・コンテンツ重視・意味重視のHTML
– 視覚に頼ってマークアップを行わないこと。
– 情報と装飾の分離
– CSSの利用によって良いことがある
• HTMLの標準化
– ブラウザは独自に発展してきた
– W3C
• 標準的なコーディングを策定
• HTMLを書くときには標準に従っていることを明記する必要があります
72
文書型宣言
HTMLの例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
73
HTML4→XHTML→HTML5
• SGML
– HTMLやXMLの元祖であるマークアップ言語。
• XML
– ウェブに限らず広く使われるマークアップ言語。
• HTML 1～4.01
– 論文をネットで情報共有する目的で作られた言語。
ネットの商業利用が開放されたのち、いわゆるサイトを作る言語になった。
• XHTML 1.0 （現行HTML）
– ２０１０年現在広く使われる。HTMLにXMLの考え方を適用した。
• HTML5 （次期HTML）
– 論文ではなくサイトを作る言語として大幅に定義のし直しがなされている。
– サイト構造の論理化や、動きのある要素の作り込みができる
– IE9のHTML5対応によって、これから５年後くらいにはこっちが主流になってるかも
74
文字コードの明示的宣言
HTMLの例
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
• ファイルの文字形式と違わないように注意しましょう。
• 文字化けが起こった場合、ファイルの保存形式かこの明示的宣言に問題がある場合が多いです。
75
TIPS
UTF-8を使う理由
• Chordでの理由
– WordpressがUTF-8だから！
– みんなで使うものを統一したほうがトラブルが少ない。
• 業界でよく使われている理由
– ローカルなエンコードでないグローバルな文字コード
英語が基本のITの世界ではグローバル基準に従うのが最善
76
CSSの読み込み
HTMLの例
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="./style.css" type="text/css" />
• CSSを使うことを明示的に宣言します
• Link要素で外部ファイルを読み込みます。
• 読み込むファイルはパスで記述。
77
サイトを検索エンジンロボットに説明する
HTMLの例
<meta name="keyword" content="キーワード１,キーワード２" />
<meta name="description" content="サイトの説明文" />
<title>サイトのタイトル</title>
• キーワードは少なめで
– 多くすると付与されるポイントが分散すると言われている
→１ページ・１テーマがSEOを考慮したサイトでは基本です
78
サイトをロボットに説明する
HTMLの例
<meta name="keyword" content="キーワード１,キーワード２" />
<meta name="description" content="サイトの説明文" />
<title>サイトのタイトル</title>
• 40-80字が妥当
• キャッチかつ正確に！
79
サイトをロボットに説明する
HTMLの例
<meta name="keyword" content="キーワード１,キーワード２" />
<meta name="description" content="サイトの説明文" />
<title>サイトのタイトル</title>
• ３０文字程度
• 検索クエリは太字で表示される
• ユーザの印象を考慮すべし
80
演習
マークアップ演習２
ファイルパス
./01_演習/03_マークアップ演習2/原稿.doc
問題
• クライアントさんから上記ファイルのような原稿が届きました。
• これをHTML化してみましょう！
– 以前作ったHTMLファイルをコピーして内容を差し替えれば、面倒なヘッダーや文字コードの話をスルーできます。
– 必要な画像素材はimgというフォルダに入れてあります
– Wordの原稿は若干デザインが入っていますが、見た目に関しては気にしなくて良いです
81
演習
パンくずリストについて
• パンくずリスト？
– ユーザーが迷子になるのを防ぐ
– ユーザビリティ向上
ユーザビリティの高いサイトは
検索エンジンにも評価されやすい
傾向があります。
82
演習
パンくずリストについて
HTMLの例
<ul>
<li><a href="#">Webデザイン・パソコンスクール</a>&gt;</li>
<li><a href="#">コース紹介</a>&gt;</li>
<li><a href="#">コースを探す</a>&gt;</li>
<li>Webデザイナーコース</li>
</ul>
• パンくずリストには書き方がたくさんあります。
• ここではリストと文字参照による特殊文字表示で作りました。
– 特殊文字は見た目の要素なのでCSSで書くのが望ましいですが、
そんなことに大事な作業時間をたくさん使うくらいでしたら
サクっと文字参照を使ってしまっても構いません。
– 縦に並んでますが、横に並べるのはCSSでできます。
83
第三部
CSSの使い方
第三部 その１
CSSでの文字装飾
演習
CSSコピペ演習
ファイルパス
./01_演習/04_編集用HTMLタグのサンプル/style.css
問題
• まずはHTMLファイルをブラウザで開いて確認しましょう
• つぎにCSSファイルをメモ帳などで開いてください
86
TIPS
デフォルトCSSについて
87
CSSの文字コード宣言
CSSの例
@charset "utf-8";
CSSもHTMLと同じで
文字コードの宣言が必要です！
Charset：キャラクターセットの略＝文字コード宣言
プログラミング言語のもととなっている英語で文字は"キャラクター"ですね
88
演習
CSSコピペ演習
さあ先の演習の続きです！
ファイルパス
./01_演習/04_編集用HTMLタグのサンプル/style.css
問題
• 右のソースコードを
今開いたCSSに追記してください
• ブラウザで表示を確認しましょう。
CSS
h1 {
font-size:55px;
color:#aa0000;
}
89
演習
CSSコピペ演習
ブラウザでの表示は？
CSS
h1 {
font-size:55px;
color:#aa0000;
}
90
セレクタ
CSS
h1 {
font-size:55px;
color:#aa0000;
}
• HTMLタグなどを
セレクタとして指定することで、
どのデザインを変更するのか
記述することができます。
セレクタ
デザインを変更する場所を示す
91
重要
プロパティ
CSS
h1 {
font-size:55px;
color:#aa0000;
}
プロパティ
• ここでは"font-size"と
"color"というプロパティ名の
スタイルを指示しています。
–プロパティはすごくたくさんあります。
–代表的な物だけ覚えましょう。
変更するデザインの種類（スタイル）を示す
92
バリュー
CSS
h1 {
font-size:55px;
color:#aa0000;
}
• 「◯を△にする」の
△にあたる部分です。
• ここではfont-sizeに55pxを、
colorに#aa0000を
指定しています
バリュー
プロパティに指定したい値を書きます
93
TIPS
数値の単位
• px
– "ピクセル"と読みます。画面の1ドット分です。
• em
– 相対指定です。文字サイズを参照して比例した数値になります。
• Ex)1.5em→文字1.5文字分のピクセル。
– ちなみに、デフォルトで1emは16pxです。
• %
– 相対指定です。
親要素の内容領域や同じ要素の別プロパティが参照先になります。
他にも色々ありますがウェブで使うのはこのくらいです。
94
TIPS
カラーコード
color:#aa0000;
カラーコード
左から赤・緑・青の強さです。
00～ffで記述します。「カラーチャート」で検索すると色見本があります。
95
TIPS
３文字のカラーコードとCSSのコメント
CSSの例
color:#ccc; /* カラーコードは３文字でも指定できるよ */
CSSの例
/* スラッシュとアスタリスクでコメント */
96
区切り
CSS
h1 {
font-size:55px;
color:#aa0000;
}
:
プロパティとバリューの間は
；
一行ごとに
（コロン）で区切り、
（セミコロン）で区切ります。
97
TIPS
CSSのスペース・改行の書き方
• 書き方は自由ですが、
プロパティ毎に改行を入れた方が読みやすいです。
– 読みにくいCSSはミスの元です。
CSSの例
h1{f o n t - s i z e : 5 5 p x ; }
h1{
font-size:55px;}
h1
{
font-size:5 5 p x ;
}
98
CSSをHTMLに直接書く
CSS
h1 {
font-size:55px;
color:#aa0000;
}
html
<h1>
マークアップの仕方
</h1>
html
<h1 style="font-size:55px; color:#aa0000; ">
マークアップの仕方
</h1>
99
プロパティ紹介
フォント関連のプロパティ
• font-size
– 文字サイズを値に指定できる。
• color
– 文字色を値に指定できる
• font-style
– Italic（斜体）、normal（スタイルなし）などを値に指定できる
• font-weight
– 文字の太さ（boldで太字、100～900の数字で相対指定も可能）を値に指定できる
• font-family
– 文字の表示フォントを値に指定できる
例えばMS P ゴシックとかヒラギノとか
100
TIPS
Font-familyについて補足
• font-familyの指定にはかなり注意が必要です。
– 閲覧マシンにそのフォントが入っていなければ指定は反映されません。
– 先に書くか、あとに書くかによってどちらが優先されるか変わります。
– 日本語で書いた時に反映されるブラウザ、英語で書いたときに反映されるブラウザの両方があります。
– IEには指定されたフォントに一字一句一致していなくても、適当に似ていると思われるフォントを反映させる機能があります。
– MacOSではfont-familyを指定しないとすべて明朝体になります。
– font-familyの一番最初に日本語で日本語フォントを指定しておかないとあとで困ります。
IEには、文字コードがUTF-8でかつ日本語フォントが指定されていない場合、
フォントサイズ11pxの文字を12pxで表示させるバグがあります。
• 注意点が多いので、皆が使っているコードを例としてコピペするのが賢いです。
CSSの例
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',
'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
101
セレクタの入れ子構造
CSSの例
p strong a {
color:#008080;
}
半角スペースで区切って並べて
子要素を指定できます。
ここでは、p要素の子要素のstrongの子要素のa要素にのみスタイルを指定しています。
102
演習
演習：文字装飾１
ファイルパス
./01_演習/04_編集用HTMLタグのサンプル/style.css
問題
• 入れ子になっているリストの子要素の文字色を
貴方が思うセンスの良い色に変えてください。
この部分だけ色を変えましょう！
103
演習
演習：文字装飾１
答え
ul li ul li{
color:#777777;
}
• ちなみに、文字色を#444444や#777777など、
少し明るめの黒や灰色で指定してあげると、洗練された印象を与えることができます。
– 完全なる黒（#000000）だと、文字色にしてはちょっと印象が重たいためです。
– もちろん、文字色が薄すぎると視認性を損なうので注意が必要です。
104
プロパティ紹介
テキスト関連のプロパティ
• text-align
– 文字の中央寄せ、左寄せ、右寄せの指定ができる
• text-decoration
– 文字に下線を加えたり点滅させたりできる。
• ちなみにa要素のテキストに下線が入るのは、
デフォルトCSSでtext-decoration:underline;が指定されてるからです。
• 文字の点滅は閲覧者によっては不快感を与えることになりますので、
使用を控えましょう。
105
プロパティ紹介
背景に関するプロパティ
• background-color
– 背景色を指定することができます。
• background-image
– 背景画像を読み込むことができます。
• background-position
– 背景画像の表示位置の始点をずらすことができます。
– 数値ではなく"bottom"などで指定することもできます。
（IEで表示が狂うことがあるため、注意が必要です）
• background-repeat
– 背景画像はタイル状に繰り返して表示される仕様ですが、
縦方向のみ（repeat-x）・横方向のみ（repeat-y）の繰り返しや、
繰り返しなし（no-repeat）をここで指定できます
106
プロパティ紹介
まとめて指定する
CSSの例
background:#000000 url(./図1.jpg) 10% 10% no-repeat;
• 背景関連のプロパティは一括で指定できます。
• 画像ファイルの指定の仕方がHTMLと違うことに注意してください。
107
演習
演習：文字装飾２
ファイルパス
./01_演習/04_編集用HTMLタグのサンプル/style.css
問題
• em要素はデフォルトで斜体表記になりますが、斜体を外した上で、太字・赤色にフォントを変えてください
• strong要素の文字サイズを1.41倍にし、背景を黄色にして目立たせてください。
108
演習
演習：文字装飾２
答え
情報商材の
サイトみたいですね。
でも、この色調だと
本当にクリック率が
上がるらしいですよ！
109
ロールオーバー時のスタイル
• ロールオーバー時（マウスをのせたとき）のスタイルを
下記のように:hoverセレクタを用いて指定することができます。
CSSの例
a:hover {
font-weight:bold;
}
•
古いIEではロールオーバー時のスタイル指定が、
a要素に対してしかできないというバグがあります。
110
演習
演習：文字装飾３
ファイルパス
./01_演習/04_編集用HTMLタグのサンプル/style.css
問題
• ロールオーバーしたときにだけ、 a要素に背景色#eeeeeeをつけてみましょう。
リンクに限らず、マウスをのせたときにその部分だけ色が変わる動作を最近よく見かけます。
111
プロパティ紹介
行や文字のプロパティ
• line-height
– 行間を数値で指定します。単位でemを使うと分かりやすいよ！
• letter-spacing
– 字間を数値で指定します。文字と文字の間隔になります。
単位はpxを使うと分かりやすいよ！
• text-indent
– 文章に"インデント"を入れることができます。
例えば、国語の教科書のように行の先頭に
1文字スペースを入れたいときは、
text-indent:1em;と指定してあげると良いですね！
112
TIPS
読み易い文章のデザイン
• 行間
– 行がギッチリ詰まってるとかなり読みづらいです。
フォントサイズや画面の幅にもよりますが
1.4～1.6emくらいがちょうどよいです。
• 文字間
– 0pxでも構いませんが、1px～3pxくらいで調整するとより良くなります。
• 画面の幅
– 今はコントロールできませんが、
幅が広すぎると文章が横に伸びすぎて読みづらいですよね。
113
TIPS
フィボナッチ数列と黄金比
• 黄金比
– 黄金比でサイトのレイアウトや幅などを決めると美しくなります。
• 最近ではTwitterが黄金比を元にしてリニューアルしましたね。
– 二つだけ比率を覚えて気が向いたときに使ってみましょう。
ウェブデザインに慣れないうちはかなり頼りになります。
• 1:1.61
• 1:1.41
• 1,2,3,5,8,13,21,34,55,89,144,233,377…
– フィボナッチ数列をフォントサイズや字間、
その他周囲の余白などに使うと楽に黄金比が使えます。
114
HTMLの入れ子による値の継承
• 面倒なことに、一部のプロパティでは親要素の値が子要素に継承されます。
– 継承されるプロパティの一覧
http://css.eweb-design.com/0108_bsc.html
• 継承とはつまり、親要素のプロパティ値が子要素にコピペされるということ。
– たとえば、li要素の文字色を緑にしたとする。
– li要素内のp要素やa要素の色が指定されていなかった場合、値が継承されてそれらの要素も文字色が緑になる。
– 値の継承がなかった場合子要素の文字色だけ黒のままで逆に不自然。
115
演習
演習：文字装飾４
ファイルパス
./01_演習/04_編集用HTMLタグのサンプル/style.css
問題
• すべての見出しタグの文字色を#444に指定し、それ以外の文字色を#777にしましょう。
116
演習
演習：文字装飾４
CSSの例
• bodyの指定
body{
– 値の継承で全要素がそのサイズに。
color:#777;
}
• 見出しタグに個別で指定
– 全体を指定し、例外だけ指定しなおしてます
h2,h3,h4,h5,h6{
color:#444;
}
117
第三部 その２
グルーピングと命名による区別
118
実際のサイトを見てみよう
• 適当なサイトのソースコードを見てみましょう。
• まだ知らない英数字がたくさん書かれているはずです。
• このセクションの話をテキトーに聞いておけば、ほとんど全部読めるようになります。
• 例としてTwitterの新デザインを見てみます。
119
見出しだろうな
見出し？データ定義リスト？
メニューは
リストだっけ
見出し？データ定義リスト？
ここはリストだろうな
この辺りはpだろうな
そうそう
a要素もあった！
水平線もある！
120
コードを見ると
• "div"がすごくたくさんあります。
このdivの中を開き続けると、
ようやく見覚えのあるタグが見えます。
• また、それぞれのdivにはidやclassが
属性として指定されていますね
• これらはいったいなんの目的で付けられたのでしょうか？
121
divタグとspanタグ
div
空箱を作るブロックレベル要素
span
空箱を作るインラインレベル要素
• レイアウトのために使われています
– CSSでデザインされたサイトは100%divやspanは使ってます。
• 作らざるをえないんです。
– 本当は意味のない空箱なんて作りたくない！
• だから空箱の数少なめでコーディングできるとかっこいいですね。
• コードの読みやすさを考えても空箱は少なくなるように工夫しましょう。
– グルーピングや構造の定義のような、情報として意味のある使い方を心がけましょう。
• 実際にTwitterでの使用例を見てみましょう。
122
上部の要素をまとめる箱
123
それぞれ、複合的な項目を
箱でまとめてあげるとバラバラにならずにすみますね
124
右の領域と左の領域も
箱で全体をくくって分けています
125
同じリストでも、デザインやレイアウトが違います。
それぞれ名前をつけて区別する必要があります。
126
id属性とclass属性
id
class
HTMLに名前をつけられる属性（1サイトに1個）
HTMLに名前をつけられる属性
HTMLの例
<要素名 id="名前"> </要素名>
<要素名 class="名前"> </要素名>
CSSの例
h1#idの名前{ }
#idの名前{ }
h1.classの名前{ }
.classの名前{ }
←「idの名前」が指定されたh1
←「idの名前」が指定された要素全て
←「classの名前」が指定されたh1
←「classの名前」が指定された要素全て
• 内容か構造を示す
名前をつけましょう
– 例：main, content, sub,
navigation, container …
127
利用例
HTMLの例
<div id="ob-message">文章</div>
<div class="course-data">文章</div>
CSSの例
div#ob-message{ color:#0a0 }
div.course-data{ color:#a00 }
表示例
文章
文章
128
TIPS
閉じタグにはコメントを
• レイアウトに入ると複雑性がましてきます。
• 分かりやすさのために、HTMLの閉じタグにコメントをつけるようにしましょう！
HTMLの例
.....
</div><!-- /course-data -->
<div class="ob-message">
.....
129
TIPS
スタイル適用の優先順位
• セレクタの詳細度
– セレクタにはいろいろな指定の方法がありました。
– 同じCSSの中で同一のセレクタにプロパティを指定したとき、何が優先されるのでしょうか？
– 実はセレクタにはそれぞれ優先ポイントが割り当てられていて、
そのポイントによって優先順位が変わります。
– ざっくり言ってしまえば、丁寧に指定すればするほど優先順位が高くなります。
HTMLの例
h1#idの名前{ /* こっちが優先される */ }
#idの名前{ }
130
ページ内リンクの方法
• idをリンク先としてhrefに指定することで、ページ内リンクに利用することができます。
HTMLの例
<a href="index.html#header">ページ上部へ </a>
131
プロパティ紹介
リストに関するプロパティ
• list-style-type
– バリューには、disc（黒丸）,circle（白丸）,decimal（数字）を良く使います。
– noneを指定するとリストマークを消せます。
• list-style-image
– リストマークに画像を使うこともできます。
• list-style-position
– 箱の内側（inside）か、箱の外側（outside）の二つの値を取ります。
– ブラウザによって、デフォルトがinsideなのかoutsideか違います。
– ケアレスミスを防ぐため、最初ですべてのul要素に、list-style-position:inside;などを指定しましょう。
132
プロパティ紹介
まとめて指定する
CSSの例
list-style: disc url(img/example.png) inside;
• リスト関連のプロパティは一括で指定できます。
• 順番は上に限らず、バラバラでも構いません。
• すべての値を指定する必要はありません。
– その場合、デフォルトの値が適用されます。
133
演習
アイコンをつけよう
ファイルパス
./01_演習/05_編集用インターネットアカデミー/
問題
• 「こんな人にオススメ」の部分にリストアイコンをつけてみてください
134
演習
アイコンをつけよう
CSSの答え
/*
アイコンをつけよう
*/
.osusume li{
list-style:none;
background:url(img/course_icon.png) 0 2px no-repeat;
padding-left:15px;
margin:10px 0;
}
135
displayプロパティ
• display:block;
– ブロックレベル要素として表示します
• display:inline;
– インラインレベル要素として表示します
• display:none;
– 要素を表示しません
– 手を抜きたい時に使うことがあります。
ただし、検索エンジンに嫌われるおそれがあります。
136
復習
ブロックレベル要素とインラインレベル要素
• bodyの中に書けるHTMLタグは、大きく分けて２種類あります。
– ブロックレベル要素
• 上下に改行が入る
• 箱の幅が画面いっぱいに広がる（親要素の幅と同じになる）。
– インラインレベル要素
• 改行は入らない
• 箱の幅は中身の量・大きさと同じになる。
• ルール
– インライン要素の中にブロック要素を入れることはできない
– インライン要素はbody直下におけない（何らかのブロック要素で囲われている必要がある）。
137
演習
パンくずリストの装飾
ファイルパス
./01_演習/05_編集用インターネットアカデミー/
問題
• パンくずリストの黒丸を消し、横並びに変えてください。
– これは簡単ですね！
• パンくずリストのHTMLにclassが付けられ、個別に区別できるようになっています。
138
演習
パンくずリストの装飾
• display:inline；を指定すれば、
CSSの答え
list-style:none;の指定はいりません。
/*
パンくずリストの装飾
*/
.breadcrumb li{
display:inline;
}
139
第三部 その３
ボックスモデルによる余白デザイン
140
CSSのボックスモデル
• あるpタグがあるとします。HTMLは箱で考えるんでしたね！
• CSSで箱には枠線をつけることができ、それをborderと呼びます。
border
タイトル
文章ああああああああああああああああああああ中身だよあああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
141
1
borderプロパティ
• border-style
– solid（直線）, dashed（破線）, dotted（点線）など
– 「border-top-style」のような書き方もできます。
• border-color
– 値にカラーコードを取ります。
• border-width
– 値に数値を取り、枠線の幅（太さ）を指定できます。
142
プロパティ紹介
まとめて指定する
• borderは次のように一括で指定できます。
CSSの例
border:solid 1px #ccc;
border-top:dashed 1px #aaa;
143
演習
aタグの装飾
ファイルパス
./01_演習/05_編集用インターネットアカデミー/
問題
– borderを応用して下のようにaタグを装飾してみましょう。
色：#0099cc
マウスオーバー後
下線は点線
144
演習
aタグの装飾
CSSの答え
/*
aタグの装飾
*/
a{
text-decoration:none;
color:#09c;
border-bottom:dotted 1px #09c;
}
a:hover{
border-bottom:solid 2px #09c;
}
145
CSSのボックスモデル
• 箱の"幅"や"高さ"が何を表すかが間違えやすいポイント
width
タイトル
文章ああああああああああああああああああああ中身だよあああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
height
146
1
CSSのボックスモデル
文章ああああああああああああああああああああ中身だよあああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
padding
margin
タイトル
147
1
CSSのボックスモデル
border
文章ああああああああああああああああああああ中身だよあああ
width
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああ
padding
height
margin
タイトル
148
1
復習
ブロックレベル要素とインラインレベル要素
• bodyの中に書けるHTMLタグは、大きく分けて２種類あります。
– ブロックレベル要素
• 上下に改行が入る
• 箱の幅が画面いっぱいに広がる（親要素の幅と同じになる）。
– インラインレベル要素
• 改行は入らない
• 箱の幅は中身の量・大きさと同じになる。
• marginがうまく効かない
• ルール
– インライン要素の中にブロック要素を入れることはできない
– インライン要素はbody直下におけない（何らかのブロック要素で囲われている必要がある）。
149
CSSでの指定の仕方
• 値に数値を取ることが多いプロパティです
– margin-top
– margin-bottom
– margin-right
– margin-left
• 左右には値だけでなく、「auto」も指定できます。
• 「auto」を指定すると（IE5以下を除き）、ボックスが中央になるよう左右の幅が調整されます。
150
プロパティ紹介
まとめて指定する
• marginやpaddingは次のように一括で指定できます。
CSSの例
margin:10px;
/* 全部10pxに */
margin:10px auto;
/* 上下10px、左右auto */
margin:10px 20px 5px; /* 上10px、左右20px、下5px */
margin:10px 20px 30px 40px; /* 上、右、下、左 */
151
marginの相殺
• http://blog.webcreativepark.net/2008/07/09-001153.html
152
演習
１カラム中央寄せレイアウト
ファイルパス
./01_演習/05_編集用インターネットアカデミー/
問題
幅：780px
153
演習
1カラム中央寄せレイアウト
CSSの答え
/*
１カラム中央寄せレイアウト
*/
.main-contents{
width:780px;
margin:0 auto;
}
154
演習
imgタグの装飾
ファイルパス
./01_演習/05_編集用インターネットアカデミー/
問題
#f8f8f8
#ccc
155
演習
imgタグの装飾
CSSの答え
/*
imgタグの装飾
*/
img.pict{
border:solid #ccc 1px;
background:#f8f8f8;
padding:10px;
display:block;
margin:0 auto;
}
156
リセットCSS
• そろそろ演習に入っていこうと思うのですが、
marginやpaddingにデフォルトで値が入っていると
問題が生じやすいのであらかじめリセットしちゃいます。
CSSの例
*{
margin:0;
padding:0;
• セレクタにアスタリスクをいれると、
"全ての要素"を表せます。
• ユニバーサルセレクタと言います。
}
157
例
特殊なborderの例
• せっかくborderを習ったので、テーブルに枠線を表示してみましょう！
CSSの例
*{
margin:0;
padding:0;
}
table td{
border:solid 1px #eee;
}
158
例
特殊なborderの例
• tdとtdの間に余白ができてます。
marginとpaddingはゼロのはずなのに！
CSSの例
*{
margin:0;
padding:0;
}
table td{
border:solid 1px #eee;
}
159
テーブルの余白
• テーブルの余白はborder-spacingプロパティを使ってコントロールします。
• ここでは枠線が２重になってますが、
border-collapseにcollapseを指定すると枠線を重ねることができます。
CSSの例
table{
border-spacing:0px;
}
table td{
border:solid 1px #eee;
}
160
演習
テーブルのデザイン
ファイルパス
./01_演習/06_テーブルのデザイン/
問題
161
第三部 その４
Floatと段組レイアウト
162
floatプロパティ
• float:left;
– 要素を左側のブロックとして配置する。後続の要素は右側に回りこむ。
• float:right;
– 要素を右側のブロックとして配置する。後続の要素は右側に回りこむ。
※floatを用いるにはwidthの指定が必須です
※floatをかけた要素はdisplay:block;が掛かった状態になります。
（IE6以前をのぞく）
※下記サイトがfloatの仕様について詳しいです
http://www.ibm.com/developerworks/jp/web/library/wa-css/index.html
163
例
CSS
img{
float:left;
}
164
例
CSS
img{
float:right;
}
165
例
必ずwidthの指定が必要です
http://www.css-designsample.com/beginner/hp/float-base.html より引用
166
演習
floatで横並びメニューを作る
ファイルパス
./01_演習/07_横並びメニュー/
問題
※ http://css-style.jp/notebook/xhtml_css/menu02_a.html のサンプルぱくりました（てへ
167
clearプロパティ
• clear:
– left
• 生成されるボックスの上ボーダー辺が、この前にあるソース要素から生成された任意の左 float ボックスの下マージ
ン辺よりも下に来るように、生成されるボックスの上マージンを増加します。
– right
• 生成されるボックスの上ボーダー辺が、この前にあるソース要素から生成された任意の右 float ボックスの下マージ
ン辺よりも下に来るように、生成されるボックスの上マージンを増加します。
– both
• 生成されるボックスを、この前にあるソース要素から生成されたすべての float ボックスの下に位置するようにします。
参考サイト ： http://www.ibm.com/developerworks/jp/web/library/wa-css/index.html
168
例
• floatをかけたらできるだけclearする
http://www.css-designsample.com/beginner/hp/float-base.html より引用
169
clearしないと困ること
• 親要素の背景が消える！
•
子要素の全てがfloatされている場合、
親要素の高さはゼロになります（heightが指定されてない場合）。
170
Clearfixハック
• 親要素の高さがゼロになる仕様を回避する方法
• このソースをそのままコピーし、親要素に「clearfix」クラスを付けるだけ！
html .clearfix { display: block; }
* html .clearfix { height: 1%; }
.clearfix:after {
content: "."; display: block; clear: both;
visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
171
TIPS
vertical-alignについて
• floatを使えばimgを横に並べた写真集を作れますね！
• でも困ったことがあります。
こんなの
172
TIPS
vertical-alignについて
• 普通にやると、marginをゼロにしても
画像の下に変な隙間ができちゃうんです！
173
TIPS
vertical-alignについて
• これはバグではなく仕様です。
– アルファベットのyみたいな下に飛び出している部分用の隙間なんです。
• なので、画像の表示位置を垂直方向一番下にしてあげればOK
CSS
img {
vertical-align:bottom
}
174
演習
写真集
ファイルパス
./01_演習/08_写真集/
問題
横３列の写真集を作りましょう。
画像に微妙についているborderも再現してください。
（以前作りましたよね♪）
175
Floatで段組を作る手順
• ①並べる箱の幅を決めます
– 例）250pxと600px
• ②全体の幅を決めます
– 例）850px (250+600)
• ③CSSでそれぞれの箱に幅を指定します
• ④CSSでfloatを並べる箱全部につけます
• ⑤clear:both;やclearfixで表示崩れを防ぎます
176
演習
2カラムレイアウト
ファイルパス
./01_演習/09_カラムレイアウト/
問題
177
演習
3カラムレイアウト
ファイルパス
./01_演習/09_カラムレイアウト/
問題
178
第三部 その５
より自由にレイアウトを行う
全然段組じゃない！
箱と箱を重ねてる！
タ
イト
ル
タイトル
1
180
positionプロパティ
• ４つの値を取ります
セレクタ{
position:
}
ただし、単純に
positionプロパティを指定しただけでは、
何も起こりません！
;
absolute
relative
fixed
positionはあくまでも、
要素の配置方法を指定するプロパティです
181
positionプロパティ
セレクタ{
top:数値;
left:数値;
right:数値;
bottom:数値;
}
タイトル
182
1
positionプロパティ
セレクタ{
position: 配置方法;
}
タイトル
セレクタ{
top:数値;
left:数値;
right:数値;
bottom:数値;
}
183
1
positionプロパティ
absolute
絶対配置
タイトル
184
1
positionプロパティ
header
#main{
position:absolute;
top:10px;
left:10px;
}
タイトル
sub
main
185
1
positionプロパティ
absolute
存在が空気に
なるってこと！
絶対配置
タイトル
186
1
positionプロパティ
header
main
#main{
position:absolute;
}
タイトル
sub
187
1
positionプロパティ
header
sub
#main{
position:absolute;
}
タイトル
188
1
こいつ空気に
なっています！
そして、topとleftで
場所を指定してます！
上の要素が空気になったなので
下にいるこいつらは気づかずに
そのまま上に詰めてるわけです
タイトル
189
1
positionプロパティ
relative
相対配置
タイトル
190
1
positionプロパティ
header
sub
main
#main{
position:relative;
top:10px;
left:10px;
}
タイトル
191
1
positionプロパティ
#main{
position:relative;
}
header
main
sub
タイトル
192
1
positionプロパティ
#main{
position:relative;
header
}
main
sub
タイトル
193
1
positionプロパティ
#main{
position:relative;
header
}
#main{
position:relative;
main
}
sub
タイトル
194
1
演習
バナーを重ねる変則レイアウト
ファイルパス
./01_演習/10_バナーを重ねる/
問題
195
positionプロパティ
fixed
固定配置
タイトル
196
1
positionプロパティ
fixed
• http://calendar.chords.jp/
にアクセスしてみてください
197
ここは動かない！
これが固定配置！
※IE６では動く
固定配置できない
198
positionプロパティ
fixed
タイトル
199
1
z-indexプロパティ
• 箱と箱が重ねあうような場合、重ね合わせの順序を指定したい時があります。
• z-indexプロパティを利用すれば可能です。数値が大きい物が前面に表示されます。
• ただし、positionプロパティが指定されている時にしか反映されない事に注意してください
• デフォルトでは後に書いたものほど前面に表示されます。
セレクタ{
z-index:数値（マイナスも可能）;
}
タイトル
200
1
ネガティブマージンとは？
201
1
演習
サイト全体を上下左右中央表示
ファイルパス
./01_演習/11_上下左右中央表示/
問題
発想勝負！
Img要素に4行のCSSをつけるだけ！
202
overflowプロパティ
セレクタ{
overflow:
}
visible
;
hidden
auto
scroll
タイトル
203
1
overflowプロパティ
visible
そいやああああああ
あああああああああ
あああああああああ
あああああああああ
あああああああああ
あああああああああ
あああああ
タイトル
204
1
overflowプロパティ
hidden
そいやああああああ
あああああああああ
あああああああああ
ああああああああ
タイトル
205
1
overflowプロパティ
auto
そいやああああああ
あああああああああ
あああああああああ
ああああああああ
タイトル
206
1
overflowプロパティ
scroll
そいやああああああ
あああああああああ
はみ出してないよ！
タイトル
207
1
演習
演習12:CSSスプライトによるメニュー
ファイルパス
./01_演習/12_CSSスプライトによるメニュー/
問題
• CSSのみを編集して下記のようなヘッダーを作ってください。
208
プログレッシブ・エンハンスメント
CSS
/* 影表示 */
-webkit-box-shadow: 0px 0px 2px #aaa;
-moz-box-shadow: 0px 0px 2px #aaa;
box-shadow: 0px 0px 2px #aaa;
/* 角丸表示 */
border-radius: 6px;
/* CSS3 */
-moz-border-radius: 6px; /* Firefox */
-webkit-border-radius: 6px; /* Safari,Chrome */
209
第四部
実際にホームページを作る
210
見本
ウェブ制作のワークフロー
サイト設計・要件定義
デザインのドラフト画像を作成
HTML・CSSでコーディング
ブラウザチェック
ドラフト画像をパーツ毎に切り出し
CMSへ実装
このセミナーはこの部分を担当できるようになることを目指します
212
コーディングの手順
• 過去に作ったサイトを丸ごとコピーして自分の作業用フォルダを用意する
– （演習ではフォルダが最初から用意されているので気にしなくて良いです。）
– （今後自分でやるときは、いちいちゼロから作るようなメンドクサイことは避けましょう）
• デザイナーから貰ったPSDファイルやPNGファイルを見ながら、実際にどうコーディングするか考える。
– どこまでヘッダーに入れるか？
– 段組レイアウトはどうするか？
– marginやpaddingはどう付けるか？
– コードを共通化して楽できないか？
• CSSのセレクタは , (カンマ)で区切れば複数指定できます。
• class属性は半角スペースで区切ると複数指定できます。
• 共通化できる部分は因数分解して楽しましょう。
コードを共通化して楽するコツ
• OOCSS
– コンテナ（内包する箱）とコンテンツ（内容）を分けて考える。
– 例えば…
• 外側の箱(#sidebar)にpaddingを付ければ、
内側の要素ひとつひとつにmarginを付ける必要はない
• セレクタはできるだけクラス名を利用する
– 例えば…
• #sidebar ul.columnだと、ulにしか効かないが、
#sidebar .column なら、olやdlにも使える。
• h1.sitetitleなら、h1にしか効かないが、
.sitetitleのみにしておけば、ページごとに見出しレベルを変えられる。
214
その他コーディングのコツ
• 縦方向の余白をデザインするときは、下方向のみにmarginを付ける
– 上下両方に付けるとmarginの相殺が起こって調整に手間がかかる
• できるだけheightは使わない
– 原則、文字数は変動するものと考えて、テキストが増えた時にデザインが崩れないようにする。
• ブロックレベル要素の幅は一番外側の箱にのみ指定する
– ブロックレベル要素の幅は親要素に合わせて100%となるため、
一番外側に指定すれば、内側に指定する必要はない。
• floatを用いる際にはwidthを一緒に指定する（必須）
• position:absolute; を利用するときは、親要素にposition:relativeを付けておく（必須）
215
演習
実際に作ってみる
ファイルパス
./01_演習/13_最終演習/
問題
• CSSファイルのみ編集し、完成見本図.pngのデザインを再現して下さい。
• 必要な画像は切り出し済みで、HTMLも既に書いてあります。
• CSSスプライトなど応用技術をメニュー部分で使うので、考えても分からなかったら質問しましょう。
• おまけ（それぞれ今後有効に活用して下さい）
– 演習用CSSにはリセット系のCSSや、今までの講義で出てきたハックが既に書かれています。
– HTMLにはIEの場合にのみie.cssを読み込む記述を追加しています。
216