Web09

Size: px

Start display at page:

Download "Web09"

めぐのしもとり
4 years ago
Views:

1 情報処理技法 ( マルチメディアと表現 )I 第 9 回 CSS(1) D.Mitsuhashi 1

2 HTML と CSS D.Mitsuhashi 2

3 HTML と CSS の役割 HTML 書の構造をすための語 CSS 書に視覚デザインを与える語 HTML( 構造化書 ) が組みとすると, CSS( スタイルシート ) は外装にあたる D.Mitsuhashi 3

4 HTML に CSS を適する HTML に CSS を適するには 2 つの法がある内部表記 HTML 書類の内部に直接記述する法外部表記 CSS 書類を別途意して,HTML 書類から指定して読み込ませる法講義では外部表記を採 D.Mitsuhashi 4

5 CSS の外部表記外部の CSS 書類を変更すれば全てのページが同時に変更できるサイト内のデザイン統が容易 HTML 書類 HTML 書類 CSS 書類 HTML 書類 D.Mitsuhashi 5

6 CSS の外部表記 head 要素内に link 要素の記述をする href 属性で CSS 書類の場所を参照する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title> テンプレート </title> <link rel="stylesheet" href="./style.css" /> </head> D.Mitsuhashi 6

7 参考 CSS の内部表記 CSS を HTML 内部に記述するには <style> タグを利する <style> h1{ font-size:1em; color:#ffffff; } </style> CSS の記述 D.Mitsuhashi 7

8 参考コメントについて HTML, CSS にはそれぞれ下記の書式で, コメントを差し挟むことができる HTML のタグや CSS 記述の時無効化にも利できる ( コメントアウト ) HTML でのコメント <! comment --> CSS でのコメント /* comment */ D.Mitsuhashi 8

9 CSS 記述法 D.Mitsuhashi 9

10 CSS の記述法 CSS の記述例 p{ } font-size:12px; color:#ff3333; line-height:1.5em; text-indent:1em; D.Mitsuhashi 10

11 CSS の記述法セレクタ { プロパティ : 値 ;} CSS の記述法セレクタ (selector) CSS をいてデザインを与えたい要素 ( タグなど ) プロパティ (property) 適されるデザインの項値 (value) 項にされる値コロンとセミコロンの位置に気をつける HTML と同様改やインデント半スペースは影響を与えない D.Mitsuhashi 11

12 プロパティと値の単位プロパティに応じてとる値は異なるさ cm( センチメートル ), mm( ミリメートル ) in( インチ ), pt( ポイント ), pc( パイカ ) px( ピクセル ) 般名称 (pink,red,blue ) RGB 表記 (16 進数カラーコード ) RGBa 表記 (10 進数カラーコード ) その他プロパティに応じてとる値は異なる D.Mitsuhashi 12

13 CSS の記述法セレクタをカンマ (,) で区切れば同時に複数のセレクタを指定することができる h1,h2,h3,h4,h5,h6{ color:yellow; } h1 から h6 まですべて指定セレクタを半スペースで区切ると特定のセレクタの組み合わせのみ指定する p em{ color:red; } p に含まれる em のみ指定 D.Mitsuhashi 13

14 CSS の適順序タグがれになっている時の CSS の適 <p> に指定されたスタイルが最初に読み込まれ <a> に指定されたスタイルがそれを上書き <em> がさらに上書きする <p> これは <a> <em> 重要 </em> なリンク </a> です </p> p のスタイルに a のスタイルを上書きし更に em のスタイルで上書きしたデザイン D.Mitsuhashi 14

15 CSS の適順序 h1,h2,h3,h4,h5,h6{ color:yellow; } h1{ } color:red; h1 は先に color が yellow と指定されているが後の表記 red に上書きされる CSS 宣の適順後にかかれたもので上書きする D.Mitsuhashi 15

16 CSS リセット各ブラウザにはあらかじめデフォルトのデザインが意されているため CSS で記述をしない要素に関してはブラウザデフォルトのデザインが適されるブラウザごとのデザインの差異を最化するためブラウザのデザインをリセットする必要がある D.Mitsuhashi 16

17 sanitize.css CSS リセットをうための CSS は多くのものが公開されているが講義では sanitize.css をいる sanitize.css ダウンロードした sanitize.css を html 書類と同じ階層に置き meta タグ内に以下の記述を追加する <head> <meta charset="utf-8" /> <title> テンプレート </title> <link rel="stylesheet" href="./sanitize.css" /> <link rel="stylesheet" href="./style.css" /> </head> D.Mitsuhashi 17

18 テキストフォントに関するプロパティ D.Mitsuhashi 18

19 字のきさ font-size font-size 値には絶対単位と相対単位がある絶対単位 cm, mm, in, pt, px 相対単位 px ピクセル数 em 1 字分 ( アルファベット字 M 字分のさ ) ex 1 字分 ( エックスハイトアルファベット字 x 字分のさ ) :root 擬似クラスを px で指定し以降を em で指定すると率を維持したまま設計できる em とは ex とは : 凶悪モナド (2008/1/30) D.Mitsuhashi 19

20 字の太さ 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 値のみと考えて差しえない El Capitan からの font-family の指定法 D.Mitsuhashi 20

21 字下げ text-indent text-indent 値はさを表す表記をいる段落変更時は全スペースで 1 字あけるのではなく textindent で指定する D.Mitsuhashi 21

22 間 line-height line-height 値はさを表す表記間とは, 先の上端と, 次の上端との間のさなので注意すること line-height で指定するさ D.Mitsuhashi 22

23 フォントの種類 font-family font-family 値は sans-serif セリフがない書体 ( ゴシックなど ) serif セリフ体 ( 明朝など ) monospace 固定幅 fantasy 装飾フォント cursive 書き ( 筆記体, 草書体など ) サンセリフ体 sans-serif セリフ体 serif D.Mitsuhashi 23

24 環境依存フォントの指定フォントは環境に依存するため通常はブラウザで設定されたフォントが表される OS に内蔵された標準フォントを優先的に読み込ませるためには特定のフォント名を併記することで読み込ませる優先順位を決めることができる font-family:' ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'Meiryo',' メイリオ ',sans-serif; 般的に Windows 環境ではメイリオ macos 環境ではヒラギノゴシックが使われることが多い指定をする際にはフォント名を正確に記述する必要がある洋名と和名があるが環境によっていずれかが読み込まれない場合もあるので併記したほうがいいだろうなお OSX El Capitan から導された 9 段階ウェイトのヒラギノゴシックは Hiragino-Sans と指定する 2018 年以降はコレで決まり!Web サイトで指定するゴシック体明朝体等幅の font-family 設定 :CORREDOR D.Mitsuhashi 24

25 字の color color 般的な名 red, blue, pink, yellow, purple RGB 表記 (Red) 緑 (Green) (Blue) をそれぞれ 16 進数 2 桁ずつ 6 桁で指定したもの #ffffff, # rgba 表記 ( 後述 ) D.Mitsuhashi 25

26 RGB 表記での指定 RGB 表記での指定は,# ではじまり 16 進数で 2 桁, 緑 2 桁, 2 桁の数値で記述するの指定は加法混 #ffffff は # は 2 桁ずつ同じ値の場合は 3 桁に省略表記が可能 # と #369 は同じ D.Mitsuhashi 26

27 rgba 表記での指定 CSS3 から採された表記法透明度を指定できる RGB の数値指定は 10 進数 rgba(255, 255, 255, 0.8); Red Green Blue Alpha 透明度を 0 1 の割合で指定 D.Mitsuhashi 27

28 参考 Brackets クイック編集機能 Brackets で CSS を編集するときにはクイック編集機能を利できる右クリックしてクイック編集または Command + E カラーパレットを選択するだけで指定が可能である D.Mitsuhashi 28

29 の組み合わせ基調となるは 1 サイト上で 3 5 程度が無難主要な SNS やポータルサイトは数を制限している数が多い Web サイトは乱雑でまとまっていない印象を与えるため主要なを選択することアクセシビリティの観点から視認性がい組み合わせが望ましいの最適な組み合わせに関しては講義の範囲を超える D.Mitsuhashi 29

の組み合わせ選択ツール Adobe Color CC https://color.adobe.

スマートフォン版もあり Color Mind http://colormind.

30 の組み合わせ選択ツール Adobe Color CC ate/color-wheel/ Adobe によるの組み合わせ選択ツールスマートフォン版もあり Color Mind 知能によるの組み合わせ成ツール気にったをロックするとそれ以外のを成する D.Mitsuhashi 30

31 このスライドは講義では扱いません箇条書きに関するプロパティ D.Mitsuhashi 31

32 このスライドは講義では扱いません list-style-type 頭記号の形式 list-style-type ul 要素 ol 要素に指定値は none disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha なし丸丸四算数字アルファベット字アルファベット字ローマ数字字ローマ数字字 D.Mitsuhashi 32

33 このスライドは講義では扱いません list-style-image 頭記号を画像に list-style-image 値は URL ul{ } list-style-image:url(./listitemimage.png); D.Mitsuhashi 33

34 このスライドは講義では扱いません list-style-position 頭記号の位置 list-style-position 頭記号が, 項の頭の外側にあるか, 内側にあるかを指定値は, outside inside 外側内側 D.Mitsuhashi 34

35 このスライドは講義では扱いません補事項箇条書き関連のプロパティは li 要素の左側に適切な margin ( 次週 ) を意しなければ変更が確認できないので注意 li{ } margin-left:12px; list-style-type:square; list-style-position:outside; D.Mitsuhashi 35

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えようスタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので表示はブラウザ次第であることを強調してきましたあるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると他の環境では意味が通じにくい相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなくスタイルシートという別の機能をもちいます