注釈

  • 60分のセミナー用のスライドです
  • 60分間ひたすらしゃべるための資料なので、目次はありません
  • セミナーのフォローアップのために公開しています
  • 文字が大きいのは、会場の後ろの席でも見えるようにするためです

1985年生まれ。 HTML/CSSからCMSの構築まで、様々なサイトの制作に携わり、2014年に[株式会社まぼろし](http://maboroshi.biz/)に入社。 [KOJIKA17](http://kojika17.com/)のブログや共著などの執筆複数。

--- CSSで書いたやつ ![](img/22.png) --- そのソース ![](img/23.png) --- 拡大 ![](img/24.png) --- たまに「CSSのへんたい」って呼ばれます。 --- ## CSSの基本から

Cascading Style Sheets

.header {
  margin: 8px;
  color: #f00;
}

マジックナンバーの良くない例

.main {
  float: left;
  width: 640px;
}
.main h1 { width: 640px; }
.main p { width: 640px; }
.main ul li { 
  width: 620px;
  margin-left: 20px;
}

数値が乱立

.aaa { width: 640px; }
.bbb { width: 324px; }
.ccc { width: 216px; }
.ddd { width: 64px; }
.eee .aaa { width: 320px; }

ブログがシンプルなのもあるけど、
RWDでやってることは、主にこれだけ

body {
  padding: 1px 2em;
}
.c {
  max-width: 42.5em;
  margin: auto;
}
@media screen and (max-width:36em) {
  .copyright {
    float: none;
    clear: left;
  }
}

もし色々なところを固定してしまうと

.wrapper { width: 960px; }
.header { width: 960px; }
.footer { width: 960px; }
.main { width: 640px; }
.main h1 { width: 640px; }
.main ul { width: 640px; }
.side { width: 320px; }

ボタンのモジュールを作った

.button {
  display: block;
  padding: 8px 16px;
  width: 448px; /* 480px - 16 * 2 */
  background: #444;
  color: #f69;
}

ボタンを入れる

「ボタンを別の場所にも入れて！」

色々な場所に入れたくても、
widthの調整が必要になる
(paddingの計算も...)

モジュールのwidthを削除

.button {
  display: block;
  padding: 8px 16px;
  /* width: 448px; */
  background: #444;
  color: #f69;
}

ボタンが勝手に調整

最初のコードの
マジックナンバーを改善

.main {
  float: left;
  width: 640px;
}
.main h1 { width: 640px; }
.main p { width: 640px; }
.main ul li { 
  width: 620px;
  margin-left: 20px;
}

マジックナンバーを改善

.main {
  float: left;
  width: 640px;
}
.main ul li { 
  margin-left: 20px;
}

セレクタ

body { ..:..; }
.header { ..:..; }
ul#nav li { ..:..; }
.nav li:fist-child { ..:..; }
.nav li ~ li { ..:..; }
.wrapper .main .title .sub-title { ..:..; }

例えば


  
Heading


#main h2 {
  color: black;
}
特定のページのh2要素の色を変えたい 

  
Heading

特定のページのh2要素の色を変えたい

#main h2 {
  color: black;
}
.about-title {
  color: red;
}

特定のページのh2要素の色を変えたい

#main h2 { /* 詳細度( 0, 1, 0, 1 ) */
  color: black;
}
.about-title { /* 詳細度( 0, 0, 1, 0 ) */
  color: red;
}

特定のページのh2要素の色を変えたい

#main h2 { /* 詳細度( 0, 1, 0, 1 ) */
  color: black;
}
#main .about-title { /* 詳細度( 0, 1, 1, 0 ) */
  color: red /* !important */;
}

最終的にこうなりやすい

#main h2 { ..:..; }
#main .about-title { ..:..; }
#main .list { ..:..; }
#main .block .item { ..:..; }
#main .profile .img-box img { ..:..; }
#main .profile .text { ..:..; }
#main .profile .text .button { ..:..; }
#main .contact .text { ..:..; }

OOCSS

.unit { float: left; }
.size1of1 { float: none; }
.size1of2 { width: 50%; }
.size1of3 { width: 33.33333%; }
.size2of3 { width: 66.66666%; }

SMACSS

.l-grid { ..:..; }
.pod { ..:..; }
.pod-callout { ..:..; }
.tab { ..:..; }
.is-tab-active { ..:..; }

BEM

.menu { ..:..; }
.menu__layout { ..:..; }
.menu__layout-unit { ..:..; }
.menu__item_state_current { ..:..; }

変更してみる

#main {
  width: 640px;
}
#main h2 {
  border: 1px solid;
  color: black;
}

#main h2 から #main-title に変更

#main {
  width: 640px;
}
#main-title {
  border: 1px solid;
  color: black;
}

ID から class へ変更

.main {
  width: 640px;
}
.main-title {
  border: 1px solid;
  color: black;
}

さっきと同じように赤に変更

.main {
  width: 640px;
}
.main-title {
  border: 1px solid;
  color: black;
}
.about-title {
  color: red;
}

特定のタイトルを赤に変更

.main { /* 詳細度( 0, 0, 1, 0 ) */
  width: 640px;
}
.main-title { /* 詳細度( 0, 0, 1, 0 ) */
  border: 1px solid;
  color: black;
}
.about-title { /* 詳細度( 0, 0, 1, 0 ) */
  color: red;
}

便利だけど、
.mainの依存が強い

.main {
  width: 640px;
}
.main h2 {
  border: 1px solid;
  color: black;
}

依存関係を切り分ける

.main {
  width: 640px;
}

.theme-wysiwyg h2 {
  border: 1px solid;
  color: black;
}

依存関係を切り分ける

HTMLは、こんな感じ


  
demo

  
lorem

依存関係を切り分ける

.mainに違うh2のスタイルがかかっても大丈夫


  

    
demo

    
lorem

  

  

    
お問い合わせ

パーシャル

@import "variables";  
@import "reset";
@import "style";

z-indexの管理...？

$z-header:    10;
$z-nav:          20;
$z-pulldown: 21;
$z-child:        22;

これとあまり変わらない

.header { z-index: 10; }
.nav { z-index: 20; }
.pulldown { z-index: 21; }
.child { z-index: 22; }

z-indexの管理

$z: header, nav, pulldown, child;

.header {
  z-index: index($z, header); // 1
}
.child {
  z-index: index($z, child); // 4
}

z-indexの管理

$z: child, header, nav, pulldown;
// child を先頭に移動

.header {
  z-index: index($z, header); // 2
}
.child {
  z-index: index($z, child); // 1
}
- photo by []() - photo by []() - photo by []()