css.pdf

(1)

情報基礎

Webページ作成 (2)

スタイルシート (CSS)

1

l

HTML

で記述したページ（タグによって

論理構造

が明示されている）を，どのように表示するか

(

視覚的構造

)

を指定するもの

l

HTML

と組み合わせて使用

l

スタイルシートとしては

CSS

が一般的

CSS = Cascading Style Sheet

W3C (World Wide Web Consortium, Webの標準化団体) によって標準化されている

スタイルシートとは

2

l

1990 Web

登場

HTML

でWebページの論理構造を記述

スタイルシートは規定されなかった

l

1993

頃以降 Webブラウザ普及

サイト製作者は見た目をよくしたい

ブラウザ独自のレイアウト用タグも登場

例）<font>, <i>, <b> など

HTML

の混乱と複雑化

HTML&CSSの歴史

3

l 1996 レイアウトを記述する枠組としてCSSが規定(CSS1) l 1997 HTML3.2：折衷的なHTML 暫定的措置としてレイアウトに関する独自要素の取り入れ l 1997 HTML4.0：論理構造とレイアウトの分離 l 1998 CSS2 l 1999 HTML4.01 l 2011 CSS2.1 l 2014 HTML5 CSS3: いくつかのモジュールに分割して策定 (詳細は省略)

HTML&CSSの歴史

4

(2)

5

l かなり自由にレイアウトを決定できる例) テキストや画像を好きな位置に配置 l 複数のページのデザインを統一 1つのスタイルシートを使って，すべてのWebページのデザインを統一 l 目的に合わせたスタイルシートが使える画面表示用，印刷用など l ユーザが定義したスタイルシートでページ表示ユーザスタイルシート機能自分が見やすいように表示を変えられる

CSS利用のメリット

l Webアクセシビリティ向上

CSS利用のメリット

6

ウェブアクセシビリティと 2 ウェブアクセシビリティと、高齢者や障害者を含め、誰もがホームページ等で提供される情報や機能を支障なく利用できることを意味します。 ○ウェブアクセシビリティ必要性インターネット普及により、健常者と同様に高齢者や障害者にとってホームページ等重要な情報源となっています。しかし、情報を提供する側がウェブアクセシビリティに配慮して適切に対応をしていないと、高齢者や障害者が、ホームページ等から情報を取得できなかったり、ウェブ上手続きができないという問題が発生し、社会生活で多大な不利益が発生したり、災害時等に必要な情報が届かない状況となれ生命危機に直面する可能性があります。 http://www.soumu.go.jp/main_content/000438394.pdf

CSS利用のメリット

7

ウェブアクセシビリティが確保されていない場合の問題事例 3 避難所等の情報や地図が画像PDF（スキャナーでスキャンしたもの等）のみで掲載され、音声読み上げソフトが使用できず、視覚障害者が避難情報を得られない。市長の会見の模様が字幕のない動画のみで掲載され、字幕やテキストの会見録がないため、聴覚障害者が内容を把握できない。ホームページがキーボードのみで操作できるように作られておらず、手の動作が不自由でマウスを使うことができない利用者がホームページを利用することができない。背景と文字の色のコントラスト比が確保されておらず、高齢者や色覚障害者が閲覧しにくい。ホームページが構造化されておらず、機械判読可能（機械やコンピューターで直接読み取って利用できる形式であること）でないため、外国人が自動翻訳ソフトを使用した際にうまく翻訳されない。 l

CSS

では，HTMLの「

どの部分

を

どのように

表現

するか」を指定

h1 { /* h1 タグの部分を */ font-size: large; /* 文字サイズ大 */ color: red; /* 赤色 */ } 行末の ; を忘れたり，全角スペースを入れるとうまくいかないので注意

CSSの基礎

セレクタ <どの部分の> プロパティ(属性) <何を> <どのように>値 /*から*/まではコメント

8

(3)

l color 文字色 l background-color 背景色 l font フォント l line-height 行の高さ l text-align 行え l text-decoration テキストの装飾 (下線など)

l width, height, margin, padding, border

幅，高さ，マージン，パディング，ボーダー

l 詳しくは参考資料参照

プロパティの例

9

l CSSファイルを用意する方法 (推奨)

HTMLの<head>部分に以下のように記述

l CSSをHTMLの<head>部分に直接埋め込む方法 <head> <style type=“text/css”> h1 { font-size: large; } </style> <title>タイトル</title> </head> l CSSをHTMLタグに直接埋め込む方法 <h1 style=“font-size: large;”>…</h1>

CSSの指定方法

10

ヘッダ部(<head>..</head>)に<link>タグを使ってCSSのURLを記述します <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

CSSを使うHTML

空白を入れること空白を入れること

11

l

public_html

ディレクトリに以下のようにファイ

ルを配置

index.html (トップページのHTMLファイル) ???.html (その他のHTMLファイル) ???.png, ???.jpg (画像ファイル) mystyle.css (CSSファイル．ファイル名は自由）

ディレクトリ構成例

12

(4)

l

タグ名による指定

body, h1, h2, p, …

/*

全ての p 要素を字下げ */

p { text-indent: 2em; } l

複数のセレクタを “,” で繋げられる

/* h1, h2, h3

のfont-familyを設定 */

h1, h2, h3 { font-family: sans-serif; }

タイプセレクタ

13

l HTMLでタグに class 属性を指定 <p class=“note”>ノートです</p> クラス名 (ここではnote) は自由に定義可能 l CSSでは class に対してプロパティを定義

.note{ font-size: small; }

“.” の後にクラス名を書く l 複数のタグで同一の class を指定可能 <p class=“note”>ノート1</p> <p class=“note”>ノート2</p>

クラスセレクタ

14

l HTMLタグで id 属性を指定 <table id=“revenue”>… id (ここではrevenue) は自由に定義可能 l CSSで id に対してプロパティを定義

#id { font-size: small; }

“#” の後にid名を書く l 複数のタグで同一の id は指定できないこの点がクラスセレクタと異なる l JavaScriptからHTMLを操作するためなどに用いる

IDセレクタ

(今回は使わなくてよい)

15

l

<p>

の中の<strong>だけを選択

HTML: <p>これは<strong>強調</strong>です</p> p strong { color: #ff0000; } pとstrongの間に別のタグがあってもOK 例) <p><span><strong>適用される</strong></span></p> など l

<p>

の直下の<strong>だけを選択

p > strong { color: #ff0000;} pとstrongの間に別のタグがあると適用されない l

クラスセレクタ等も利用可能

.note strong { … };

子孫セレクタ

16

(5)

l 全称セレクタ (全ての要素が対象) すべての要素のデフォルト値を決めたいときなどに使用 *{ font-style: italic; /* イタリック体 */ font-size: x-large; /* 文字サイズ大きめ */ }

全称セレクタ

17

l 擬似クラス a:link 未訪問のリンク a:visited 訪問済みのリンク a:hover カーソルが上に載っている要素 :first-line 1行目 :first-letter 1文字目例 p:first-letter { /* 段落の1文字目だけフォントを大きくする */ font-size: xx-large; }

擬似クラス

18

l

HTML

要素を表示する際に

使用されるセレクタは

1 つとは限らない

l

右の場合，赤字部分の

プロパティが使われる

より狭いセレクタが優先 (クラスセレクタ > タイプセレクタ > 全称セレクタ)

セレクタの優先順位

19

<p class= hello >こんにちは!</p> * { font-style: italic; font-size: large; } .hello { color: red; background-color: yellow; } p { color: blue; font-size: xx-large; } HTML CSS

20

l

Safari

の「開発」→「Web

インスペクタ」で，「要素」

パネルの右端にあるアイコン

をクリック

選択中のHTML要素に適用される

CSS

が表示される

Safari

(6)

l color: 前景色 (文字などの色) background-color: 背景色

l 色名: black, maroon, green, navy, silver, red, lime, blue, gray, purple, olive, teal, white, fuchsia, yellow, aqua など

例: color: purple

l RGBで指定

光の三原色(Red, Green, Blue)の割合を指定

各 0x00 ∼ 0xFF (256段階)

例: color: #ffa500 (Redが0xFF, Greenが 0xA5, Blueが0x00)

真っ黒は #000000, 真っ白は #ffffff 10進数でも指定可能例: color: rgb(50, 100, 200)

色の指定

21

l

font-family:

フォント名, …

使用するフォントの候補をカンマで区切って並べる先頭から利用可能なフォントが使用される l

使用可能なフォントは環境によって異なる

どの環境でも利用可能なフォントが定義されている

serif (明朝体), sans-serif (ゴシック体), cursive (手書き風),

fantasy (_{装飾), monospace (等幅, タイプライター体)}

例) font-family: “Hiragino Kaku Gothic ProN”, YuGothic, Meiryo, sans-serif

(_{リストの最後にどの環境でも利用可能なフォントを入れておく)}

フォントの指定 (1)

22

l

font-style:

スタイル

normal, italic (イタリック), oblique (斜体) l

font-weight:

太さ

normal, bold (_{太め), lighter (より細く)，bolder (より太く)} l

font-size:

サイズ

xx-small, x-small, small, medium, large, x-large, xx-large 120% (_{通常の1.2倍)}

フォントの指定 (2)

23

l CSSを用いたページでよく使われるHTMLタグ

l span インライン要素を定義

ABC<span class=“excuse”>DEF</span>GHI

(span要素の前後では改行されない)

l div ブロック要素の定義

ABC<div class=“footnote”>DEF</div>GHI (div要素の前後では改行される)

spanタグとdivタグ

ABCDEFGHI ABC DEF GHI

24

(7)

l

任意のHTML要素に

枠

と

余白

を付けられる

h1, p, div, span, …

border, margin, padding

要素の中身 padding(内側の余白) border(_枠) margin(外側の余白)

ABCD

他のHTML要素はmarginより外側に表示

25

26

l

border:

スタイル太さ色;

例) border: solid 10px #0000ff;

スタイル: Solid (実線)，double (二重線), inset (凹み), outset (隆起),

dashed (破線)など

上下左右の枠を個別指定するには

top, bottom, left,

border-right

で指定

border

l margin (外側の余白) 例) margin: 0; _{上下左右すべて0} 例) margin: 0 auto; 上下は0 左右はセンタリング(中央え) 例) margin: 10px 20px 30px 40px; _{上, 右, 下, 左}

上下左右を個別に指定するときは top, bottom, margin-left, margin-right 例) margin-left: 100px; l padding (内側の余白)も同様

margin, padding

27

l センタリング widthで幅を縮小，左右のマージンをauto，text-alignをcenterに h1{

margin: 30px auto; /* 上下30px, 左右auto*/ width: 30%; /* 幅を 30% に縮小 */ text-align: center; /* テキストを中央え */ } l 背景画像（壁紙） bodyに対してbackground-imageを指定 body { background-image: url("画像ファイル.png"); } 画像を敷き詰めるには background-repeat: などを使用

body以外の要素でも背景画像を指定できる (h1, p, div, span, etc.)

(8)

l

自分のWebページをCSSを用いるように変更

すべてのページで使うこと

CSSのプロパティを最低でも7種類使うこと

l

Safari, Firefox

で表示を確認

l

文法チェック

HTML: Another HTML LintまたはW3C HTML Validator CSS: W3C CSS Validator

l