Web 設計入門

Size: px

Start display at page:

Download "Web 設計入門"

はすなまつかた
5 years ago
Views:

1 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1

2 HTML5 コンテンツモデル D.Mitsuhashi 2

3 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられるコンテンツモデルから要素の中に何を含んでよいかが決定される参考 W3C: HTML5 content models 参考 World Wide Web Guide:HTML5 コンテンツモデル D.Mitsuhashi 3

4 コンテンツモデル見取り図フローインタラクティブフレージングヘッディングエンベッディッドセクショニングメタデータ D.Mitsuhashi 4

5 各カテゴリに含まれる代表的タグ群 ( フローは省略 ) メタデータセクショニングヘッディングインタラクティブフレージングエンベッディッド link article a a img aside audio br audio style h1 h6 cite nav input em canvas title section menu strong iframe D.Mitsuhashi 5

6 (HTML 4.01,XHTML 1.x) ブロック要素とインライン要素 HTML 4.01 や XHTML にはコンテンツモデルという考え方はなく代わりにブロック要素とインライン要素という分類があった CSS は HTML のバージョンを選ばないため HTML5 においてもこの分類をそのまま利用可能ブロック要素タグを閉じると改行される要素例 )h1,h2 h6, p, ul, li, hr などインライン要素タグを閉じても改行されない要素例 )a, em, strong, cite, img など D.Mitsuhashi 6

7 グループ化コンテンツ中の任意の部分に対してそこがひとつのグループであることを示す以下のグループ化のタグは構造上特定の意味を持たないため CSS と組み合わせて利用されることが多い div フローコンテンツ (HTML 4.01, XHTML ではブロック要素 ) span フレージングコンテンツ (HTML 4.01,XHTML ではインライン要素 ) D.Mitsuhashi 7

8 ボックスモデル D.Mitsuhashi 8

9 ボックスモデル余白や枠線の構造はボックスモデルで定義される外側の余白 :margin 内側の余白 :padding 幅 :width コンテンツ枠線 :border 高さ :height D.Mitsuhashi 9

10 ブロックボックスとインラインボックスブロックボックスブロック要素で構成されるボックス幅 (width) と高さ (height) が設定できるインラインボックスインライン要素で構成されるボックス幅 (width) と高さ (height) を設定することはできない D.Mitsuhashi 10

11 CSS でのボックス変換 display プロパティで異なるボックスに変換することができる値 block ブロックボックス inline インラインボックス inline-block インラインブロックボックス ( 改行されないが幅と高さを決められる ) list-item 箇条書きの項目 run-in ランインボックス ( 後続のブロックボックスにインラインとして挿入される ) D.Mitsuhashi 11

12 マージンとパディング内側の余白をパディング外側の余白をマージンと呼ぶそれぞれの CSS でのプロパティ padding margin 値は px などの幅をあらわす単位を用いる値 1 つならば 4 方向同値 2 つならば上下と左右 3 つならば上左右下 4 つならば上右下左 margin と padding は 4 方向別に記述することも可能 margin-top, margin-right, margin-bottom, margin-left padding-top, padding-right, padding-bottom, padding-left D.Mitsuhashi 12

13 枠線 ( ボーダー ) 枠線の幅種類色を指定する border-width 枠線の幅 ( 値は長さ ) border-style 枠線の種類 ( 値は次ページ参照 ) border-color 枠線の色 ( 値は色 ) 一括指定する場合は border プロパティを用い値は幅種類色の順に記述する border:3px solid #ff6666; D.Mitsuhashi 13

14 border-style プロパティに用いる値 none solid dotted dashed double なし実線点線破線二重線 inset 凹 ( 全体 ) outset 凸 ( 全体 ) groove 凹 ( 枠線のみ ) ridge 凸 ( 枠線のみ ) D.Mitsuhashi 14

15 枠線の 4 方向指定枠線についても 4 方向別々に指定することができる border border-top, border-right, border-bottom, border-left border-width border-top-width, border-right-width, border-bottom-width, border-left-width border-style border-top-style, border-right-style, border-bottom-style, border-left-style border-color border-top-color, border-right-color, border-bottom-color, border-left-color D.Mitsuhashi 15

16 背景色 background-color ボックスの背景色を指定するプロパティ background-color:rgba(255,255,255,0.8); ページ全体の背景色を変更するには :root 擬似クラスを用いる :root{ background-color:#ffcccc; } D.Mitsuhashi 16

17 クラスセレクタ D.Mitsuhashi 17

18 クラスセレクタクラスセレクタを用いれば任意の要素に対してデザインを適用することが可能タグ名をセレクタにした場合タグが同じ場合にはすべて同じデザインが適用されるがクラスセレクタを用いれば場合分けをすることができる h1{ } h1.classname{ } タグ名のみのセレクタタグにクラス名が付与されたクラスセレクタ D.Mitsuhashi 18

19 クラスセレクタの記述法 CSS での記述すべての要素で利用可能なクラスセレクタの場合. クラス名 { } 特定の要素にのみ機能するクラスセレクタの場合要素名. クラス名 { } クラス名には任意の ASCII 文字列が利用可能だが数字とハイフンで始まってはいけない D.Mitsuhashi 19

20 クラスセレクタの記述法 HTML でのクラス指定 class 属性を設定し値にクラス名を記述する <h1 class=" クラス名 "> クラスが適用される見出し </h1> D.Mitsuhashi 20

21 クラスセレクタの利用例 <div class="wakusen"> 枠線がつけられるブロックボックス </div> div.wakusen{ border-style:dotted; border-color:#333333; border-width:2px; } D.Mitsuhashi 21

22 CSS3 で追加された効果 D.Mitsuhashi 22

参考資料 CSS3 のプロパティについてベンダプレフィックス各ブラウザベンダがサポートしているがブラウザのバージョンによっては対応が不完全なプロパティもある仕様が確定していないが採用されているものについては接頭辞 ( プレフィックス ) をつけて対応する講義で紹介するものについては既にプレフィックス不要ブラウザ Safari 系 (Safari,Google

23 参考資料 CSS3 のプロパティについてベンダプレフィックス各ブラウザベンダがサポートしているがブラウザのバージョンによっては対応が不完全なプロパティもある仕様が確定していないが採用されているものについては接頭辞 ( プレフィックス ) をつけて対応する講義で紹介するものについては既にプレフィックス不要ブラウザ Safari 系 (Safari,Google Chrome,Opera 等 ) Firefox 系 (Firefox 等 ) Internet Expplorer ベンダプレフィックス -webkit- -moz- -ms- そのベンダープレフィックス D.Mitsuhashi 23

24 枠線効果角丸効果 border-radius 値は半径の長さ border-radius:10px; D.Mitsuhashi 24

25 枠線効果ボックスの影効果 box-shadow 値は右方向の距離下方向の距離ぼかす範囲影の色 box-shadow:3px 3px 5px #666666; D.Mitsuhashi 25

26 文字の影効果文字の影効果 text-shadow 値は右方向の距離下方向の距離ぼかす範囲影の色 text-shadow:2px 2px 3px #999999; D.Mitsuhashi 26

27 文字の影効果文字の影効果 ( 応用 ) text-shadow:-1px -1px 1px #333333, 1px 1px 1px #ffffff; color:#666666; background-color:#cccccc; D.Mitsuhashi 27

Web10.pptx

Web10.pptx 情報処理技法 (マルチメディア)I 1 第 10 回 CSS 基礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに分けられるコンテンツモデルを採用しているコンテンツモデルから要素の中に何を含んでよいかが決定される参考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html