- PDF 無料ダウンロード

Size: px

Start display at page:

Download ""

めぐのみうら
7 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>

Web 設計入門

Web 設計入門情報処理技法 ( マルチメディアと表現 )I 第 11 回 CSS によるレイアウトデザイン (1) D.Mitsuhashi 1 擬似クラスと疑似要素 D.Mitsuhashi 2 擬似クラス要素名のセレクタだけでは指定できない特定の状況下でのデザインを指定するには擬似クラスを用いるポインタが重なった時クリックした時 N 番目の小要素 a:hover li:last-child :root