Weitere ähnliche Inhalte
Ähnlich wie 使いやすいWordPressのためのCSSのつくりかた (20)
使いやすいWordPressのためのCSSのつくりかた
- 3. Toro_Unit
占部 紘 (うらべ ひろし)
Frontend Engineer / Plugin Developer /
Web Designer
Github: @torounit
Twitter: @Toro_Unit
Facebook: fb.me/torounit
Blog: http://www.torounit.com
2015.09.12 @WordBench Osaka 3
- 12. Plugin Development
• Custom Post Type Permalinks
• Simple Post Type Permalinks
• Powerful Post Per Page
• etc...
2015.09.12 @WordBench Osaka 12
- 25. Do you know Editor Style?
おまえはエディタースタイルを知っているか
2015.09.12 @WordBench Osaka 25
- 48. とりあえずこんな順番でCSSを書いてると思うんです。
1. Reset.css / Normalize
2. HTML要素へのCSS (h1,h2,h3,a,table,ul,li, etc...)
3. クラスとかIDとか (.alignleft,.alignright,.media-object,etc...)
2015.09.12 @WordBench Osaka 48
- 49. とりあえずこんな順番でCSSを書いてると思うんです。
1. Reset.css / Normalize
2. HTML要素へのCSS (h1,h2,h3,a,table,ul,li, etc...)
3. クラスとかIDとか (.alignleft,.alignright,.media-object,etc...)
本文欄のデザインをタイプセレクタに適用する!
2015.09.12 @WordBench Osaka 49
- 80. CSSって簡単!??
.title {
border-left: 10px solid #CCC;
padding: 0 0 0 5px;
font-size: 2em;
}
.sidebar .title {
background-color: #333;
color: #FFF;
padding: 0;
border: 0;
}
2015.09.12 @WordBench Osaka 80
- 81. CSSって簡単!??????????
.title {
border-left: 10px solid #CCC;
padding: 0 0 0 5px;
font-size: 2em;
}
.title::before {
content: "§";
}
.sidebar .title {
background-color: #333;
color: #FFF;
padding: 0;
border: 0;
}
.title::before {
display:none;
}
2015.09.12 @WordBench Osaka 81
- 85. ちゃんとしたCSSって?
CSS Architecture — Philip Walton
• 原文:http://philipwalton.com/articles/css-architecture/
• 日本語訳:http://article.enja.io/articles/css-architecture.html
2015.09.12 @WordBench Osaka 85
- 106. .main-contents {
float: left;
display: block;
}
.home .main-contents,
.page .main-contents {
float: none;
}
.blog .main-contents,
.single .main-contents {
float: right;
}
2015.09.12 @WordBench Osaka 106
- 107. .main-contents {
float: left;
display: block;
}
.home .main-contents,
.page .main-contents {
float: none;
}
.blog .main-contents,
.single .main-contents,
.date .main-contents,
.archive .main-contents {
float: right;
}
2015.09.12 @WordBench Osaka 107
- 147. BEMの例
.post { /* Block */
}
.post__title { /* Element */
}
.post--sticky { /* Modifier */
}
.post__title--new {
}
2015.09.12 @WordBench Osaka 147
- 152. BEMの例
• Material Design Lite
• Comico http://www.comico.jp/
• NBA.COMの各チームのスケジュール。http://www.nba.com/
spurs/schedule
2015.09.12 @WordBench Osaka 152
- 159. Foundation
• Normalize.css / Reset.css
• プロジェクトのデフォルトスタイル.
• 要はSMACSSで言うところのBase.
Layout
• ヘッダー・フッター・メインカラム・サイドバー等
2015.09.12 @WordBench Osaka 159
- 165. 補足
• ざっくり言うと、SMACSS + MCSS(Multilayer CSS).
• 内容がかぶるので紹介しませんが、日本語ドキュメントもあ
るので、一見の価値あり。http://operatino.github.io/MCSS/
ja/
2015.09.12 @WordBench Osaka 165
- 175. Setting: グローバルな変数
Tools: Mixin、Function
Generic: Normalize、Reset
Base: デフォルトのスタイル。要素セレクタ。
Objects: 装飾のないパターン。FLOCSSでいうComponent.
Components: FLOCSSでいうところのProject. プロジェクト固
有のコンポーネントパターン。
Trumps: ユーティリティクラス。便利クラス。
2015.09.12 @WordBench Osaka 175
- 197. • 「Every Declaration Just Once」とかいう話もあるけど、
CMSのように最初にCSSを用意してHTMLを追加していくも
のにはつらいと思う。
• CMSは基本的に、ページが容量の許す限り増やせる。なので
プロジェクトごとにCSSフレームワークを作るくらいの気持
ちでやった方が良い。
• 静的サイトと同じようなデザイン要件だとCMSでやるメリッ
トが薄まるのでそこら辺のコントロールも大切。
2015.09.12 @WordBench Osaka 197
- 200. 参考資料
• CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
http://pepabo.github.io/docs/frontend/standard/css-
architecture/
• なんでCSSすぐ死んでしまうん http://www.slideshare.net/
hayatomizuno/css-41084761
2015.09.12 @WordBench Osaka 200