UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : http://twitter.com/hiloki : http://inkdesign.jp GitHub : https://github.com/hiloki/ URL http://www.impressjapan.jp/books/1113101128
Web 10 IT UI WebWeb HTML/CSS CSS 100% CSS 10 CSS CSS OOCSS SMACSS BEM CSS 2014 7
CONTENTS 2 3 1 CSS 7 1-1 CSS 8 CSS 8 9 CSS 10 1-2 CSS 13 HTML 13 16 18 CSS 20 21 2 CSS 23 2-1 CSS 24 24 25 29 2-2 31 31 31 33 33 37
3 41 3-1 CSS 42 42 3-2 OOCSS 45 OOCSS 46 47 51 3-3 SMACSS 53 54 63 3-4 BEM 69 MindBEMding 72 3-5 MCSS 77 CSS 77 MCSS 81 3-6 FLOCSS 87 87 FLOCSS 87 88 Foundation 88 Layout 88 Object 89 90 91 4 95 4-1 96 96 Rule of three 97 SOLID CSS 99 4-2 105 105 112 118 120 125 127 133 140
5 CSS 143 5-1 144 Sass 145 147 152 Sass 157 6 161 6-1 162 CSS 162 163 166 6-2 171 171 173 180 CSS 181 7 Web Components 187 7-1 HTML/CSS 188 HTML/CSS 188 Web Components 188 Web Components 189 7-2 193 193 my-alert 195 195 Templates Shadow DOM 196 203 209 211
CSS Web CSS WebWeb CSS Chapter 1
CHAPTER 1 1 1 CSS Web CSS CSS CSS CSS Photoshop 1 113 8
HTML5WebWeb Web CSSCSS JavaScript Web CSS Web CSS 1-1 CSS 1 B a c k b o n e. j s Knockout.js MVC Model View Controller MVVM Model View ViewModel UI MV 1 JavaScript CSS CSS 9
CHAPTER 1 CSS WebPhotoshop Web 1 CSS CSS GoogleHTML/CSS @ philwalton4 1 10
図1 CSS Architecture http://philipwalton.com/articles/css-architecture/ http://article.enja.io/articles/css-architecture.html CSS Architecture 日本語訳 これらのゴールは引用元の記事にもあるように CSS に限らずソフトウエア 開発 プログラミング言語全般においていえることであり 逆にいえば 多くの プログラミング言語の持つプラクティスのエッセンスは CSS においても生かす ことができます CSS において これらが具体的にどういう意味を持つかを説明しておきます 予測しやすい というのは期待通りに振る舞うかどうか ということです 他 のルールが影響して 記述したルール通りの振る舞いや見栄えにならない また は追加したルールが他のルールに影響を与えることがないようにするということ です 1-1 CSS 設計の重要性 予測しやすい 再利用しやすい スタイルがコピー & ペーストされて膨らみ続ける CSS にならないためにも 再利用しやすいルールを持つことは重要です 再利用しやすいルールというのは 抽象的で 機能ごとに分離されている必要があります 遭遇した UI デザインの マークアップ CSS を一度作れば 再度同じような UI に遭遇したときに わざ わざ書き直す必要がないようにするのが理想的です 11
CHAPTER 1 CSSCSS CSS 4 CSSCSS CSS CSS CSS 12
1 2 CSS CSS CSS CSS.text { color: red; redcolorred HTML CSS.selector { property: value CSS 1-2 CSS HTML HTMLHTMLJavaScript CSS HTMLCSS 13
CHAPTER 2 1 2 HTML <article> <h1></h1> <div> <p></p> </div> </article> CSS CSS article h1 { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: bold; CSS HTML <div> <h2></h2> <div> <p></p> </div> </div> 14
CSS div h2 { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: bold; class HTML <article class="entry"> <h1 class="entry-title"></h1> <div class="entry-body"> <p></p> </div> </article> CSS CSS.entry-title { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: bold; class CSS 1-2 CSS HTML <div class="entry"> <h2 class="entry-title"></h2> <div class="entry-body"> <p></p> </div> </div> HTML 15
CHAPTER 1 CSS #sidebar ul li a {... #sidebar ul li ul li a {... body#home.column1 #main {... article header p:first-child {... class CSS :first-child CSS 0 CSS none CSS.title { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10em; font-size: 24px; font-weight: bold; 16
CSS.title { border-bottom: 2px solid #000; margin-bottom: 1em; padding: 10px; font-size: 24px; font-weight: bold;.no-border { padding-bottom: 0; border-bottom: none; HTML <h2 class="title no-border"> </h2> CSS.title { margin-bottom: 0.5em; font-size:2em;.headline { padding-bottom: 10px; border-bottom: 2px solid #000; HTML <h2 class="title headline"> </h2> border:none padding:0 1 1-2 CSS 17
CHAPTER 1 Photoshop CSS Photoshop 16px 24px 3 3 CSS CSS HTML <div class="intoduction"> <p class="lead">css </p> <p>css </p> </div> 18
CSS.intoduction { line-height: 27px; font-size: 18px;.lead { margin-bottom: 0.5em; text-align: center; line-height: 54px; font-size: 36px; font-weight: bold; line-height 1.5 CSS.intoduction { line-height: 1.5; font-size: 18px;.lead { margin-bottom: 0.5em; text-align: center; /* line-height: 1.5; `.introduction` `line-height` */ font-size: 36px; font-weight: bold; 3 line-height line-heightline-height line-height 1-2 CSS 1 1.5 line-height 2 CSS 19
CHAPTER 1 color,font-size,line-height body{... color:red color 3line-height em % 4 4 line-height em CSS CSS.intoduction { line-height: 1.5em; /* line-height: 27px; */ font-size: 18px;.lead { margin-bottom: 12px; /* line-height: 27px; */ text-align: center; font-size: 36px; font-weight: bold; CSS CSS CSS 20
CSS CSS 修正しやすいCSSを書く CSS WebWeb 1-2 CSS Web 21
CHAPTER 1 CSS 2 Web UI 1HTML PNG JPEG HTML 2 UI CSS AX B Y 22
[ ] 2014 8 1 102-0075 20 TEL 03-5275-2442 http://www.impress.co.jp ISBN FAX 102-0075 20 TEL 03-5213-9295 FAX 03-5275-2443 info@impress.co.jp Copyright 2014 Hiroki Tani. All rights reserved. ISBN978-4-8443-3635-8 C3055 Printed in Japan