Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1
HTML5 コンテンツモデル D.Mitsuhashi 2
コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models 参考 World Wide Web Guide:HTML5 コンテンツモデル http://w3g.jp/html5/content_models D.Mitsuhashi 3
コンテンツモデル見取り図 フロー インタラクティブ フレージング ヘッディング エンベッディッド セクショニング メタデータ D.Mitsuhashi 4
各カテゴリに含まれる代表的タグ群 ( フローは省略 ) メタデータ セクショニング ヘッディング インタラクティブ フレージング エンベッディッド 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
(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
グループ化 コンテンツ中の任意の部分に対して そこがひとつのグループであることを示す 以下のグループ化のタグは構造上特定の意味を持たないため CSS と組み合わせて利用されることが多い div フロー コンテンツ (HTML 4.01, XHTML ではブロック要素 ) span フレージング コンテンツ (HTML 4.01,XHTML ではインライン要素 ) D.Mitsuhashi 7
ボックスモデル D.Mitsuhashi 8
ボックスモデル 余白や枠線の構造はボックスモデルで定義される 外側の余白 :margin 内側の余白 :padding 幅 :width コンテンツ 枠線 :border 高さ :height D.Mitsuhashi 9
ブロックボックスとインラインボックス ブロックボックス ブロック要素で構成されるボックス 幅 (width) と高さ (height) が設定できる インラインボックス インライン要素で構成されるボックス 幅 (width) と高さ (height) を設定することはできない D.Mitsuhashi 10
CSS でのボックス変換 display プロパティで異なるボックスに変換することができる 値 block ブロックボックス inline インラインボックス inline-block インラインブロックボックス ( 改行されないが幅と高さを決められる ) list-item 箇条書きの項目 run-in ランインボックス ( 後続のブロックボックスにインラインとして挿入される ) D.Mitsuhashi 11
マージンとパディング 内側の余白をパディング 外側の余白をマージンと呼ぶ それぞれの 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
枠線 ( ボーダー ) 枠線の幅 種類 色を指定する border-width 枠線の幅 ( 値は長さ ) border-style 枠線の種類 ( 値は次ページ参照 ) border-color 枠線の色 ( 値は色 ) 一括指定する場合は border プロパティを用い 値は幅 種類 色の順に記述する border:3px solid #ff6666; D.Mitsuhashi 13
border-style プロパティに用いる値 none solid dotted dashed double なし実線点線破線二重線 inset 凹 ( 全体 ) outset 凸 ( 全体 ) groove 凹 ( 枠線のみ ) ridge 凸 ( 枠線のみ ) D.Mitsuhashi 14
枠線の 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
背景色 background-color ボックスの背景色を指定するプロパティ background-color:rgba(255,255,255,0.8); ページ全体の背景色を変更するには :root 擬似クラスを用いる :root{ background-color:#ffcccc; } D.Mitsuhashi 16
クラスセレクタ D.Mitsuhashi 17
クラスセレクタ クラスセレクタを用いれば任意の要素に対してデザインを適用することが可能 タグ名をセレクタにした場合 タグが同じ場合にはすべて同じデザインが適用されるが クラスセレクタを用いれば場合分けをすることができる h1{ } h1.classname{ } タグ名のみのセレクタ タグにクラス名が付与されたクラスセレクタ D.Mitsuhashi 18
クラスセレクタの記述法 CSS での記述 すべての要素で利用可能なクラスセレクタの場合. クラス名 { } 特定の要素にのみ機能するクラスセレクタの場合 要素名. クラス名 { } クラス名には任意の ASCII 文字列が利用可能だが 数字とハイフンで始まってはいけない D.Mitsuhashi 19
クラスセレクタの記述法 HTML でのクラス指定 class 属性を設定し 値にクラス名を記述する <h1 class=" クラス名 "> クラスが適用される見出し </h1> D.Mitsuhashi 20
クラスセレクタの利用例 <div class="wakusen"> 枠線がつけられるブロックボックス </div> div.wakusen{ border-style:dotted; border-color:#333333; border-width:2px; } D.Mitsuhashi 21
CSS3 で追加された効果 D.Mitsuhashi 22
参考資料 CSS3 のプロパティについて ベンダプレフィックス 各ブラウザベンダがサポートしているが ブラウザのバージョンによっては 対応が不完全なプロパティもある 仕様が確定していないが採用されているものについては接頭辞 ( プレフィックス ) をつけて対応する 講義で紹介するものについては既にプレフィックス不要 ブラウザ Safari 系 (Safari,Google Chrome,Opera 等 ) Firefox 系 (Firefox 等 ) Internet Expplorer ベンダプレフィックス -webkit- -moz- -ms- そのベンダープレフィックス いつまでつけてるの?:Qiita @amamamaou https://qiita.com/amamamaou/items/42197e443134478befaf D.Mitsuhashi 23
枠線効果 角丸効果 border-radius 値は半径の長さ border-radius:10px; D.Mitsuhashi 24
枠線効果 ボックスの影効果 box-shadow 値は右方向の距離 下方向の距離 ぼかす範囲 影の色 box-shadow:3px 3px 5px #666666; D.Mitsuhashi 25
文字の影効果 文字の影効果 text-shadow 値は右方向の距離 下方向の距離 ぼかす範囲 影の色 text-shadow:2px 2px 3px #999999; D.Mitsuhashi 26
文字の影効果 文字の影効果 ( 応用 ) text-shadow:-1px -1px 1px #333333, 1px 1px 1px #ffffff; color:#666666; background-color:#cccccc; D.Mitsuhashi 27