- PDF 無料ダウンロード

Size: px

Start display at page:

Download ""

めぐのみうら
9 years ago
Views:

16 @media screen and (max-width: 48em) { #container { width: 100%; display: -webkit-box; display: -moz-box; display: box; } #nav { -webkit-box-ordinal-group: 3; box-ordinal-group: 3; } #main { -webkit-box-ordinal-group: 1; box-ordinal-group: 1; } #sub{ -webkit-box-ordinal-group: 2; box-ordinal-group: 2; } 3 1 2

24 <ul class="banner"> <li><img src="xxx"></li> <li><img src="xxx"></li> </ul> <ul class="banner"> <li><img src="xxx"></li> <li><img src="xxx"></li> </ul> <div id="sub" > <div class="region" ></div> screen and (max-width: 48em) { ul.banner { -webkit-flow-into: banners; flow-into: banners; }.region { -webkit-flow-from: banners; flow-from: banners; }

26 <div class="page"> <div class="region" ></div> <div class="region" ></div> <div class="region" ></div> </div> <article> <p>lorem ipsum dolor sit amet, consectetur... est laborum.</p> </article> article { -webkit-flow-into: article; flow-into: article; }.region { float: left; border: 1px solid black; -webkit-flow-from: article; flow-from: article; }

30 <article> <h1>lorem ipsum dolor...</h1> <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,... occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> article { -webkit-column-count: 3; column-count: 3; } article h1 { column-span: all; }

35 <section> <header> Title </header> <nav> menu </nav> <article> Content </article> <aside> Notes </aside> <footer> Footer </footer> </section> section { display: grid; grid-columns: 150px 1fr 200px; grid-rows: 50px 1fr 50px; } section header { grid-column: 2; grid-row: 1; } section nav { grid-column: 1; grid-row: 2; } section article { grid-column: 2; grid-row: 2; } section aside { grid-column: 3; grid-row: 2; } section footer { grid-column: 2; grid-row: 3;

44 <body> <body> <header> <h1>header</h1> </header> <nav> <ul><li>...</li></ul> </nav> <header> <h1>header</h1> </header> <nav in data-in-base-after="header" data-in-standard-after="header" data-in-tablet-after="header" data-in-mobile-prepend="body"> <ul><li>...</li></ul> </nav> <body> <header> <h1>header</h1> </header> <nav> <ul><li>...</li></ul> </nav>

49 <script src="skel.min.js"> { prefix: "style", resetcss: true, boxmodel: "border", grid: { gutters: 40 }, breakpoints: { wide: { range: "1300-", containers: 1280, grid: { gutters: 60 } }, narrow: { range: "-1299", containers: "fluid", grid: { gutters: 50 } }, narrow960: { range: "-960" }, narrow740: { range: "-740" }, narrow460: { range: "-640", grid: { collapse: true } } } } </script>

第6回　CSS入門（つづき）

第6回　CSS入門（つづき） Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 ([email protected]) 1 CSS の役割 HTML に表現を与える背景色, 画像, 画像の繰り返し文字色, 種類, 太さ, 傾き, 大きさ文書整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )