情報処理技法（マルチメディアと表現）Imhashi/Web09.pdffont-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'Meiryo','メイリオ',sans-serif; Web

情報処理技法（マルチメディアと表現）I

第９回 CSS（1）

©D.Mitsuhashi 1

HTML と CSS

©D.Mitsuhashi 2

HTML と CSS の役割

• HTML• ⽂書の構造を⽰すための⾔語

• CSS• ⽂書に視覚デザインを与える⾔語

HTML（構造化⽂書）が⾻組みとすると，CSS（スタイルシート）は外装にあたる

©D.Mitsuhashi 3

HTML に CSS を適⽤する

• HTML に CSS を適⽤するには 2 つの⽅法がある• 内部表記

• HTML 書類の内部に直接記述する⽅法

• 外部表記• CSS 書類を別途⽤意して，HTML 書類から

指定して読み込ませる⽅法

講義では「外部表記」を採⽤

©D.Mitsuhashi 4

CSS の外部表記

• 外部のCSS 書類を変更すれば全てのページが同時に変更できる

• サイト内のデザイン統⼀が容易

©D.Mitsuhashi 5

CSS 書類

HTML 書類

HTML 書類

HTML 書類

CSS の外部表記

• head 要素内に link 要素の記述をする• href 属性で CSS 書類の場所を参照する

©D.Mitsuhashi 6

<!DOCTYPE html><html lang="ja">

<head><meta charset="UTF-8"><title>テンプレート</title><link rel="stylesheet" href="./style.css">

</head>

<style>h1{font-size:1em;color:#ffffff;

}</style>

CSSの内部表記

• CSS を HTML 内部に記述するには、<style>タグを利⽤する。

©D.Mitsuhashi 7

CSSの記述

参考

コメントについて

• HTML, CSS にはそれぞれ下記の書式で，コメントを差し挟むことができる

• HTML のタグや CSS 記述の⼀時無効化にも利⽤できる（コメントアウト）

©D.Mitsuhashi 8

参考

<!– comment -->

/* comment */

HTML でのコメント

CSS でのコメント

CSS 記述法

©D.Mitsuhashi 9

CSS の記述法

• CSS の記述例

©D.Mitsuhashi 10

p{font-size:12px;color:#ff3333;line-height:1.5em;text-indent:1em;

}

CSS の記述法

• CSS の記述法• セレクタ(selector)

CSS を⽤いてデザインを与えたい要素（タグなど）• プロパティ(property)

適⽤されるデザインの項⽬• 値(value)

項⽬に⼊⼒される値

©D.Mitsuhashi 11

HTML と同様、改⾏やインデント、半⾓スペースは影響を与えない

コロンとセミコロンの位置に気をつける

セレクタ{プロパティ:値;}

プロパティと値の単位

• プロパティに応じてとる値は異なる• ⻑さ

cm（センチメートル）, mm（ミリメートル）in（インチ）, pt（ポイント）, pc（パイカ）px（ピクセル）…

• ⾊⼀般⾊名称（pink,red,blue…）RGB 表記（16進数カラーコード）RGBa 表記（10進数カラーコード）

• その他プロパティに応じてとる値は異なる

©D.Mitsuhashi 12

p em{color:red;

}

h1,h2,h3,h4,h5,h6{color:yellow;

}

CSS の記述法

• セレクタをカンマ（,）で区切れば同時に複数のセレクタを指定することができる

• セレクタを半⾓スペースで区切ると、特定のセレクタの組み合わせのみ指定する

©D.Mitsuhashi 13

h1 から h6 まですべて指定

p に含まれる em のみ指定

CSS の適⽤順序

• タグが⼊れ⼦になっている時のCSS の適⽤• <p> に指定されたスタイルが最初に読み込まれ、

<a> に指定されたスタイルがそれを上書き、<em> がさらに上書きする

©D.Mitsuhashi 14

<p>これは<a> <em>重要</em>なリンク</a>です。</p>

p のスタイルに a のスタイルを上書きし、更に em のスタイルで上書きしたデザイン

CSS の適⽤順序

• CSS 宣⾔の適⽤順• 後にかかれたもので上書きする

©D.Mitsuhashi 15

h1,h2,h3,h4,h5,h6{color:yellow;

}

h1{color:red;

}

h1 は先に color が yellow と指定されているが、後の表記 red に上書きされる

CSS リセット

•各ブラウザにはあらかじめデフォルトのデザインが⽤意されているため、CSS で記述をしない要素に関してはブラウザデフォルトのデザインが適⽤される

•ブラウザごとのデザインの差異を最⼩化するため、ブラウザのデザインをリセットする必要がある

©D.Mitsuhashi 16

sanitize.css

• CSS リセットを⾏うための CSS は多くのものが公開されているが、講義では sanitize.css を⽤いる

• sanitize.csshttps://github.com/csstools/sanitize.css

•ダウンロードした sanitize.css を html 書類と同じ階層に置き、meta タグ内に以下の記述を追加する

©D.Mitsuhashi 17

<head><meta charset="UTF-8" /><title>テンプレート</title><link rel="stylesheet" href="./sanitize.css" /><link rel="stylesheet" href="./style.css" />

</head>

https://github.com/csstools/sanitize.css

テキスト・フォントに関するプロパティ

©D.Mitsuhashi 18

⽂字の⼤きさ font-size

• font-size• 値には絶対単位と相対単位がある

• 絶対単位• cm, mm, in, pt, px …

• 相対単位• px ピクセル数• em 1⽂字分（アルファベット⼤⽂字 M ⼀⽂字分の⾼さ）• ex 1⽂字分（エックスハイト、アルファベット⼩⽂字 x ⼀⽂字分の⾼さ）

• :root 擬似クラスを px で指定し、以降を em で指定すると⽐率を維持したまま設計できる

©D.Mitsuhashi 19

em とは ex とは：凶悪モナド（2008/1/30)http://d.hatena.ne.jp/akumakario/20080130

http://d.hatena.ne.jp/akumakario/20080130

⽂字の太さ font-weight

• font-weight• 値は

• 100, 200, 300, 400, 500, 600, 700, 800, 900• lighter normal bolder bold

のように9段階表記，もしくは4段階表記で太さを表現できるが，現況ではほとんどのフォントが対応していない

• Windows 環境での Arial、macOS 環境での Helvetica では3段階に変化する

• macOS 環境(10.11以降）での「ヒラギノ⾓ゴシック」は9段階で表現可能

•実質、normal、bold の2値のみと考えて差し⽀えない

©D.Mitsuhashi 20

macOS Catalinaでヒラギノ角ゴPro/ProNがなくなって困ってるfont-familyの設定を考える。:note/榊原昌彦https://note.mu/rdlabo/n/nd34f8fbc8275

https://note.mu/rdlabo/n/nd34f8fbc8275

字下げ text-indent

• text-indent• 値は⻑さを表す表記を⽤いる

•段落変更時は全⾓スペースで1⽂字あけるのではなく、 text-indent で指定する

©D.Mitsuhashi 21

⾏間 line-height

• line-height• 値は⻑さを表す表記• ⾏間とは，先⾏⾏の上端と，次⾏の上端との間の⻑さなので注意する

こと

©D.Mitsuhashi 22

line-height で指定する⻑さ

フォントの種類 font-family

• font-family• 値は

• sans-serif セリフがない書体（ゴシックなど）• serif セリフ体（明朝など）• monospace 固定幅• fantasy 装飾フォント• cursive ⼿書き⾵（筆記体，草書体など）

©D.Mitsuhashi 23

あ漢 a A

あ漢 a A

サンセリフ体 sans-serif

セリフ体 serif

環境依存フォントの指定

•フォントは環境に依存するため、通常はブラウザで設定されたフォントが表⽰される

• OS に内蔵された標準フォントを優先的に読み込ませるためには、特定のフォント名を併記することで読み込ませる優先順位を決めることができる

©D.Mitsuhashi 24

⼀般的に Windows 環境では「メイリオ」、macOS環境では「ヒラギノ⾓ゴシック」が使われることが多い。指定をする際にはフォント名を正確に記述する必要がある。洋名と和名があるが環境によっていずれかが読み込まれない場合もあるので併記したほうがいいだろう。なお、OSX El Capitan から導⼊された9段階ウェイトのヒラギノ⾓ゴシックは「Hiragino-Sans」と指定する。

2018年以降はコレで決まり！Webサイトで指定するゴシック体・明朝体・等幅のfont-family 設定：CORREDORhttp://neos21.hatenablog.com/entry/2017/11/12/080000

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ',sans-serif;

http://neos21.hatenablog.com/entry/2017/11/12/080000

Web Fonts

• CSS3では、Web上にあるフォントを読み込んで、どのような環境でも同じ書体を表現することが可能になった。

• Google が提供するサービス Google Fonts を利⽤すれば、Web 上のフォントを利⽤可能

• Google Fonts• https://fonts.google.com/

© D.Mitsuhashi 25

https://fonts.google.com/

Google Web Fonts

•使いたいフォントを選び、フォント⾒本右上の＋をクリック（複数個選択可能）

•決定したら右下の "1 family selected" をクリック

© D.Mitsuhashi 26

Google Web Fonts

• 「Embed Font」に書かれているタグをコピーして HTML 書類のhead内にペーストする

• 「Specify in CSS」に書かれている記述をCSSでフォントを指定したい箇所に記⼊する

© D.Mitsuhashi 27

⽂字の⾊ color

• color• ⼀般的な⾊名

red, blue, pink, yellow, purple …

• RGB 表記⾚（Red）、緑（Green）、⻘（Blue）をそれぞれ16進数2桁ずつ6桁で指定したもの

#ffffff, #336699…

• rgba 表記（後述）

©D.Mitsuhashi 28

RGB 表記での⾊指定

• RGB 表記での⾊指定は，# ではじまり16進数で⾚2桁，緑2桁，⻘2桁の数値で記述する

• ⾊の指定は加法混⾊• #ffffff は⽩• #000000 は⿊

• 2桁ずつ同じ値の場合は3桁に省略表記が可能• #336699 と #369 は同じ

©D.Mitsuhashi 29

rgba(255, 255, 255, 0.8);

rgba 表記での⾊指定

• CSS3 から採⽤された表記法•透明度を指定できる• RGBの数値指定は10進数

©D.Mitsuhashi 30

Red Green Blue Alpha透明度を 0〜1 の割合で指定

Brackets クイック編集機能

• Brackets で CSS を編集するときには「クイック編集」機能を利⽤できる

•右クリックして「クイック編集」または Command + E• カラーパレットを選択するだけで⾊指定が可能である

©D.Mitsuhashi 31

参考

⾊の組み合わせ

•基調となる⾊は1サイト上で３〜５⾊程度が無難• 主要な SNS やポータルサイトは⾊数を制限している• ⾊数が多い Web サイトは乱雑でまとまっていない印象を与えるため、主要な⾊を選択すること

• アクセシビリティの観点から視認性が⾼い組み合わせが望ましい

• ⾊の最適な組み合わせに関しては講義の範囲を超える

©D.Mitsuhashi 32

⾊の組み合わせ選択ツール

• Adobe Color CChttps://color.adobe.com/create/color-wheel/

• Adobe による⾊の組み合わせ選択ツール

• スマートフォン版もあり

• Color Mindhttp://colormind.io

•⼈⼯知能による⾊の組み合わせ⽣成ツール

• 気に⼊った⾊をロックするとそれ以外の⾊を⽣成する

©D.Mitsuhashi 33

https://color.adobe.com/create/color-wheel/

http://colormind.io/

箇条書きに関するプロパティ

©D.Mitsuhashi 34

このスライドは講義では扱いません

list-style-type ⾏頭記号の形式

• list-style-type• ul 要素、ol 要素に指定• 値は

• none なし• disc ⿊丸• circle 丸• square 四⾓• decimal 算⽤数字• lower-roman アルファベット⼩⽂字• upper-roman アルファベット⼤⽂字• lower-alpha ローマ数字⼩⽂字• upper-alpha ローマ数字⼤⽂字

©D.Mitsuhashi 35


list-style-image ⾏頭記号を画像に

• list-style-image• 値は URL

©D.Mitsuhashi 36


ul{list-style-image:url(./listItemImage.png);

}

list-style-position ⾏頭記号の位置

• list-style-position• ⾏頭記号が，項⽬の⾏頭の外側にあるか，

内側にあるかを指定

• 値は，• outside 外側• inside 内側

©D.Mitsuhashi 37


補⾜事項

•箇条書き関連のプロパティは li 要素の左側に適切な margin （次週）を⽤意しなければ変更が確認できないので注意

©D.Mitsuhashi 38


li{margin-left:12px;list-style-type:square;list-style-position:outside;

}

Documents

情報処理技法 （マルチメディアと表現）Imhashi/Web09.pdffont-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'Meiryo','メイリオ',sans-serif; Web

情報処理技法（マルチメディアと表現）Imhashi/Web09.pdffont-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'Meiryo','メイリオ',sans-serif; Web