【お試し版】Web制作者のためのCSS設計の教科書（非売品）

Size: px

Start display at page:

Download "【お試し版】Web制作者のためのCSS設計の教科書（非売品）"

さなえわしあし
5 years ago
Views:

UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : http://twitter.

2 UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : : GitHub : URL

3 Web 10 IT UI WebWeb HTML/CSS CSS 100% CSS 10 CSS CSS OOCSS SMACSS BEM CSS

4 CONTENTS CSS CSS 8 CSS 8 9 CSS CSS 13 HTML CSS CSS CSS

5 CSS OOCSS 45 OOCSS SMACSS BEM 69 MindBEMding MCSS 77 CSS 77 MCSS FLOCSS FLOCSS Foundation 88 Layout 88 Object Rule of three 97 SOLID CSS

6 5 CSS Sass Sass CSS CSS Web Components HTML/CSS 188 HTML/CSS 188 Web Components 188 Web Components my-alert Templates Shadow DOM

7 CSS Web CSS WebWeb CSS Chapter 1

8 CHAPTER CSS Web CSS CSS CSS CSS Photoshop

9 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

10 CHAPTER 1 CSS WebPhotoshop Web 1 CSS CSS philwalton4 1 10

図1 CSS Architecture http://philipwalton.com/articles/css-architecture/ http://article.enja.io/articles/css-architecture.

11 図1 CSS Architecture CSS Architecture 日本語訳これらのゴールは引用元の記事にもあるように CSS に限らずソフトウエア開発プログラミング言語全般においていえることであり逆にいえば多くのプログラミング言語の持つプラクティスのエッセンスは CSS においても生かすことができます CSS においてこれらが具体的にどういう意味を持つかを説明しておきます予測しやすいというのは期待通りに振る舞うかどうかということです他のルールが影響して記述したルール通りの振る舞いや見栄えにならないまたは追加したルールが他のルールに影響を与えることがないようにするということです 1-1 CSS 設計の重要性予測しやすい再利用しやすいスタイルがコピー & ペーストされて膨らみ続ける CSS にならないためにも再利用しやすいルールを持つことは重要です再利用しやすいルールというのは抽象的で機能ごとに分離されている必要があります遭遇した UI デザインのマークアップ CSS を一度作れば再度同じような UI に遭遇したときにわざわざ書き直す必要がないようにするのが理想的です 11

12 CHAPTER 1 CSSCSS CSS 4 CSSCSS CSS CSS CSS 12

13 1 2 CSS CSS CSS CSS.text { color: red; redcolorred HTML CSS.selector { property: value CSS 1-2 CSS HTML HTMLHTMLJavaScript CSS HTMLCSS 13

14 CHAPTER 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

15 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

16 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

17 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: CSS 17

18 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

19 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 line-height 2 CSS 19

20 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

21 CSS CSS 修正しやすいCSSを書く CSS WebWeb 1-2 CSS Web 21

22 CHAPTER 1 CSS 2 Web UI 1HTML PNG JPEG HTML 2 UI CSS AX B Y 22

_勉強会_丸山さつき_v3

_勉強会_丸山さつき_v3 CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS