CSS設計の理想と現実
- 1. Hiroki Tani 2015.02.07CSS Nite LP39
- 2. Frontend Developer, CSS Architect Hiroki Tani
- 13. “ ”Yuya Saito a.k.a. CSSRadar
- 18. <div class="speaker"> <div class="avatar"> <img src="tani.jpg"> </div> <div class="inner"> <p class="name">…</p> <div class="biography"> <p>...</p> </div> </div> </div>
- 19. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .avatar { float: left; margin-right: 15px; } .speaker .avatar > img { border-radius: 50%; } .speaker .inner { overflow: hidden; } …
- 20. <div class="book"> <div class="cover"> <img src="book.jpg"> </div> <div class="inner"> <p class="title">...</p> <p class="info"> ... </p> <div class="intro"> <p>...</p> </div> <ul class="shop"> <li>...</li> </ul> </div> </div>
- 21. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
- 22. <div class="event"> <a href="event.html"> <div class="thumbnail"> <img src="event.jpg"> </div> <div class="inner"> <p class="event__name"> … </p> </div> </a> </div>
- 23. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
- 26. <div class="media speaker"> <div class="image avatar"> <img src="tani.jpg"> </div> <div class="body inner"> <p class="name">…</p> <div class="biography"> <p>...</p> </div> </div> </div>
- 27. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media > .image { float: left; } .media > .body { overflow: hidden; }
- 28. <div class="media book"> <div class="image cover"> <img src="book.jpg"> </div> <div class="body inner"> <p class="title">...</p> <p class="info"> ... </p> <div class="intro"> <p>...</p> </div> <ul class="shop"> <li>...</li> </ul> </div> </div>
- 29. <div class="media event"> <a href="event.html"> <div class="image thumbnail"> <img src="event.jpg"> </div> <div class="body inner"> <p class="event__name"> … </p> </div> </a> </div>
- 30. .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .avatar { float: left; margin-right: 15px; } .speaker .avatar > img { border-radius: 60px; } .speaker .inner { overflow: hidden; } … .speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .avatar { float: left; margin-right: 15px; } .speaker .avatar > img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
- 31. .book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
- 32. .event > a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
- 33. Rule of Three
- 34. 3 , 6 , _ , _ , _ , …
- 35. 3 , 6 , 9 , 12 , 15 , …
- 36. 3 , 6 , 12 , 24 , 48 , …
- 37. 3 , 6 , 9 , _ , _ , …
- 38. 3 , 6 , 9 , 12 , 15 , …
- 39. by Yandex BEM
- 41. /* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; } .media__body { overflow: hidden; }
- 42. <div class="media speaker"> <div class="media__image avatar"> <img src="tani.jpg"> </div> <div class="media__body inner"> <p class="name">…</p> <div class="biography"> <p>...</p> </div> </div> </div>
- 43. <div class="media speaker"> <div class=" media__image speaker__avatar"> <img src="tani.jpg"> </div> <div class=" media__body speaker__inner"> <p class="speaker__name">…</p> <div class=" speaker__biography"> <p>...</p> </div> </div> </div>
- 47. .grid { /* Clearfix code */ } .grid--4 .grid__cell { width: 25%; } .grid--5 .grid__cell { width: 20%; } .grid__cell { box-sizing: border-box; float: left; padding-left: 10px; padding-right: 10px; } @media (max-width: 640px) { .grid--4 .grid__cell, .grid--5 .grid__cell { width: 100%; } .grid__cell { float: none; } }
- 48. @media (max-width: 640px) { .text-large, .text-huge { font-size: 18px; } } .text-large { font-size: 24px; } .text-huge { font-size: 48px; }
- 49. .text-24 { font-size: 24px; } .text-48 { font-size: 48px; } ! @media (max-width: 640px) { .text-24, .text-48 { font-size: 18px; } }
- 54. .speaker__book { padding: 20px; background-color: #E9EFE8; } .speaker__book__image { margin-right: 20px; } .speaker__book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; } .speaker__book__info { margin-bottom: 10px; font-size: 0.875em; color: #666; }
- 55. .speaker__book { padding: 20px; background-color: #E9EFE8; } .speaker__bookImage { margin-right: 20px; } .speaker__bookName { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; } .speaker__bookInfo { margin-bottom: 10px; font-size: 0.875em; color: #666; }
- 56. .book { padding: 20px; background-color: #E9EFE8; } .book__image { margin-right: 20px; } .book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; } .book__info { margin-bottom: 10px; font-size: 0.875em; color: #666; }
- 57. <div class="media speaker"> <div class=" media__image speaker__avatar avatar"> <img src="tani.jpg"> </div> <div class=" media__body speaker__inner"> <p class="speaker__name">…</p> <div class=" speaker__biography"> <p>...</p> </div> </div> </div>
- 58. Nicolas Gallagher, About HTML semantics and front-end architecture “ ”
- 60. CSS Preprocessor
- 61. %media { overflow: hidden; /* Clearfix */ } %media__image { float: left; margin-right: 15px; } %media__body { overflow: hidden; } ! %avatar { > img { border-radius: 50%; } }
- 62. .speaker { @extend %media; } .speaker-avatar { @extend %media__image; @extend %avatar; }
- 63. <div class="speaker"> <div class="speaker-avatar"> <img src="..."> </div> <div class="speaker-info"> <p class="speaker-name">...</p> <div class="speaker-bio"> <p>...</p> </div> </div> </div>
- 64. .speaker { @extend %media; } .speaker-avatar { @extend %media__image; @extend %avatar; } ! .book { @extend %media; } ! .event { @extend %media; }
- 66. %media .speaker .book .event .event { @extend .book; }
- 67. %media .speaker .book .event .event { // error @extend .book; }
- 68. rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8 ul{background- color:#fff;border:1px solid #c3c3c3;overflow:hidden;border-radius: 12px}.mod_listType1 ul li,.mod_listType3 ul li,.mod_listType4 ul li,.mo ul li,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1px solid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1 u child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod ul li:first-child a.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul li:first-child a.disable,.mod_listType5 ul child a.disable,.mod_listType7 ul li:first-child a.disable,.mod_listTyp li:last-child a.disable,.mod_listType8 ul li:first-child a.disable,.mod ul li:last-child a.disable{border-radius:12px}.mod_listType1 ul li a,.m ul li a,.mod_listType4 ul li a,.mod_listType5 ul li a,.mod_listType7 ul a,.mod_listType8 ul li a{display:block;width:100%;padding:.75em .7em;bo sizing:border-box;-webkit-text-shadow:1px 1px 2px rgba(0,0,0,.25);text- 1px 2px rgba(0,0,0,.25);position:relative}.mod_listType1 ul li a::after,.mod_listType11 ul li a::after,.mod_listType12 ul li
- 69. rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8 ul{background- color:#fff;border:1px solid #c3c3c3;overflow:hidden;border-radius: 12px}.mod_listType1 ul li,.mod_listType3 ul li,.mod_listType4 ul li,.mo ul li,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1px solid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1 u child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod ul li:first-child a.disable,.mod_listType4 ul li:last-child a.disable,.mod_listType5 ul li:first-child a.disable,.mod_listType5 ul child a.disable,.mod_listType7 ul li:first-child a.disable,.mod_listTyp li:last-child a.disable,.mod_listType8 ul li:first-child a.disable,.mod ul li:last-child a.disable{border-radius:12px}.mod_listType1 ul li a,.m ul li a,.mod_listType4 ul li a,.mod_listType5 ul li a,.mod_listType7 ul a,.mod_listType8 ul li a{display:block;width:100%;padding:.75em .7em;bo sizing:border-box;-webkit-text-shadow:1px 1px 2px rgba(0,0,0,.25);text- 1px 2px rgba(0,0,0,.25);position:relative}.mod_listType1 ul li a::after,.mod_listType11 ul li a::after,.mod_listType12 ul li 440kbgzinpped
- 72. #1 #2 #3 #4 #5
- 73. #1
- 74. #main .feature h2 { border-bottom: 2px solid #F30; padding: 0.5em 0.2em; font-size: 1.2em; } ! #main .feature .body { padding: 0 1em; font-size: 1em; }
- 75. #main .feature h2 { border-bottom: 2px solid #F30; padding: 0.5em 0.2em; font-size: 1.2em; } ! #main .feature .body { padding: 0 1em; font-size: 1em; }
- 77. <div id="content"> <div id="main"> <div class="feature"> <h2>Heading</h2> <div class="body"> <p>Lorem ipsum...</p> </div> </div> </div> </div>
- 78. #main .feature h2 { border-bottom: 2px solid #F30; padding: 0.5em 0.2em; font-size: 1.2em; ! ! ! } #content h2 { color: #F30 } /* color color: #F30 */
- 79. #2
- 80. <div class="sidebar"> <nav class="nav"> <ul class="menu"> <li> <a>Menu Item</a> </li> ... <li> <ul class="sub-menu"> <li> <a>Sub Menu Item</a> </li> ... </ul> </li> </ul> </nav> </div>
- 81. .sidebar .nav .menu li a { display: block; border-bottom: 1px solid #899; padding: 1em; } .sidebar .nav .menu .sub-menu { padding: 0.5em; background: #EEE; } .sidebar .nav .menu .sub-menu li a { border-bottom: 0; padding: 0.7em 1em; }
- 82. .side-menu li a { display: block; border-bottom: 1px solid #899; padding: 1em; } .side-sub-menu { padding: 0.5em; background: #EEE; } .side-sub-menu li a { border-bottom: 0; padding: 0.7em 1em; }
- 83. .side-menu > li > a { display: block; border-bottom: 1px solid #899; padding: 1em; } .side-sub-menu { padding: 0.5em; background: #EEE; } .side-sub-menu > li > a { border-bottom: 0; padding: 0.7em 1em; }
- 84. .side-menu__item { display: block; border-bottom: 1px solid #899; padding: 1em; } .side-sub-menu { padding: 0.5em; background: #EEE; } .side-sub-menu__item { border-bottom: 0; padding: 0.7em 1em; }
- 88. #3
- 89. .book { padding: 20px; background-color: #E9EFE8; } .book__image { margin-right: 20px; } .book__name { margin-bottom: 10px; line-height: 1.3; font-weight: bold; font-size: 1.2em; } .book__info { margin-bottom: 10px; font-size: 0.875em; color: #666; }
- 90. .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } .btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
- 91. .default-button { color: #333; background-color: #fff; border-color: #ccc; } .primary-button { color: #fff; background-color: #337ab7; border-color: #2e6da4; } .info-button { color: #fff; background-color: #5bc0de; border-color: #46b8da; }
- 94. http://itcss.io/
- 97. $color-ui: #BADA55; $spacing-unit: 10px; $type-brand: "UI Font";
- 98. @mixin font-brand() { font-family: $type-brand; font-weight: 400; }
- 101. .ul-list { margin: 0; padding: 0; list-style: none; } .ul-list__item { padding: $spacing-unit; }
- 102. .products-list { @include font-brand; background: $color-ui; } .products-list__item { padding: $spacing-unit; color: #FFF; }
- 103. .one-half { width: 50% !important; }
- 104. "## _base.links.scss "## _base.page.scss "## _base.quotes.scss "## _base.type.scss "## _components.ads.scss "## ... "## _components.promo.scss "## _components.pull-quote.scss "## _objects.wrappers.scss "## _settings.colors.scss "## _settings.global.scss "## _tools.aliases.scss "## _tools.mixins.scss "## _trumps.show-hide.scss "## _trumps.widths-responsive.scss $## csswizardry.scss https://github.com/csswizardry/csswizardry.github.com/
- 105. /** * #SETTINGS */ @import "bower_components/inuit-defaults/settings.defaults"; @import "settings.global"; @import "settings.colors"; @import "bower_components/inuit-responsive-settings/settings.responsive"; ! /** * #TOOLS */ @import "bower_components/inuit-functions/tools.functions"; @import "bower_components/inuit-mixins/tools.mixins"; @import "tools.mixins"; @import "bower_components/inuit-responsive-tools/tools.responsive"; @import "tools.aliases"; ! /** * #GENERIC */ @import "bower_components/inuit-normalize/generic.normalize"; @import "bower_components/inuit-reset/generic.reset"; @import "bower_components/inuit-box-sizing/generic.box-sizing"; @import "bower_components/inuit-shared/generic.shared"; !
- 110. .box-a { margin: 10px; border-radius: 6px; background-color: rgba(239,206,130); } .box-b { margin: 15px; border-radius: 3px; background-color: rgba(201,173,109); } ! .ball-a { margin: 15px 20px; border-radius: 100%; background-color: rgba(239,129,128); } .ball-b { margin: 12px 24px; border-radius: 80%; background-color: rgba(186,99,100); }
- 112. .box-a { margin: 15px; border-radius: 6px; background-color: rgba(239,206,130); } .box-b { margin: 10px; border-radius: 6px; background-color: rgba(239,206,130); } ! .ball-a { margin: 15px 20px; border-radius: 100%; background-color: rgba(239,129,128); } .ball-b { margin: 15px; border-radius: 100%; background-color: rgba(239,129,128); }
- 113. .box { border-radius: 6px; background-color: rgba(239,206,130); } .box-a { margin: 15px; } .box-b { margin: 10px; } ! .ball { border-radius: 100%; background-color: rgba(239,129,128); } .ball-a { margin: 15px 20px; } .ball-b { margin: 15px; }
- 117. Rule of Three
- 118. Rule of Three
- 121. <ul class="ranking"> <li class="ranking__item"> <img class="ranking__image"> <p class="ranking__name"> ... </p> </li> ... </ul>
- 122. .ranking__item { counter-increment : rank; ... } .ranking__item:before { display: inline-block; content: counter(rank); ... } .ranking__item:nth-child(1):before { background-color: #ffd700; } .ranking__item:nth-child(2):before { background-color: #C0C0C0; } .ranking__item:nth-child(3):before { background-color: #C87533; }
- 124. <ul class="ranking"> <li class="ranking__item"> <span class=" ranking__rank ranking__rank—1">1</span> <img class="ranking__image"> <p class="ranking__name"> ... </p> </li> ... </ul>
- 125. .ranking__item { counter-increment : rank; ... } .ranking__rank { display: inline-block; content: counter(rank); ... } .ranking__rank--1 { background-color: #ffd700; } .ranking__rank--2 { background-color: #C0C0C0; } .ranking__rank--3 { background-color: #C87533; }
- 127. The first draft of anything is shit. Ernest Hemingway “ ”
- 128. Christopher Alexandar, A pattern language “ ”