More Related Content
More from Seiichiro Mishiba (14)
CSS の歩き方
- 2. 名前 三柴 誠一郎
出身 愛媛県
拠点 千葉県松戸市
特徴 絶望的に方向音痴
趣味 カメラ、 旅、 料理、 滝めぐり
自己紹介
活動
松戸でWordPressに関するセミナーを運営
https://www.facebook.com/groups/wordpress.banana.cluster/
https://wpmatsudo.doorkeeper.jp/
経歴
1996年にIT会社へ入社。業務システムの
企画・構築・運用等の経験を経て2014年
からフリーランスとして活動中。
- 35. セレクタが複数ある場合
div h1.entry-title {
color: red;
}
.primary .entry-title {
color: green;
}
.entry-title {
color: blue;
}
CSS
こちらのルールが適用
・同じ詳細度の場合は1つのクラスセレクタより2つのクラスセレクタが優先
・詳細度の低いセレクタがいくらあっても詳細度の高いセレクタが優先
- 37. 文字は何色?
div h1.entry-title {
color: red;
}
div .entry-title {
color: green;
}
.entry-title {
color: blue;
}
CSS
<div class=“primary”>
<h1 class=“entry-title”>title</h1>
</div>
HTML
- 39. 文字は何色?
.primary h1.entry-title {
color: red;
}
div.primary .entry-title {
color: green;
}
.primary .entry-title {
color: blue;
}
CSS
<div class=“primary”>
<h1 class=“entry-title”>title</h1>
</div>
HTML
- 47. OOCSS ぽいサイトのコードを確認してみる
.btn {
position: relative;
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: bold;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
}
CSS ボタン(構造)のルールを定義
- 48. OOCSS っぽいのサイトのコードを確認してみる
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941
}
.btn-danger {
color: #900
}
.btn-sm {
padding: 2px 10px
}
CSS 装飾のルールを定義文字を白
背景を緑色
文字を赤
余白を変更(小さく)
参考)GitHUB https://github.com/
- 58. BEM ぽいサイトのコードを確認してみる
.m-btn02 {
display: block;
background: #363a3f;
border: 1px solid #1a1c1f;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0.5px
rgba(255, 255, 255, 0.1) inset, 0 0 1px rgba(255, 255, 255, 0.4)
inset;
padding: 11px 13px 10px;
line-height: 1;
font-weight: normal;
text-align: center;
border-radius: 3px;
font-size: 12px;
color: #fff;
box-sizing: border-box;
}
CSS block のルールを定義
Block
- 59. BEM ぽいサイトでコードを確認してみる
.m-btn02.m-btn02__icon {
height: 1em;
display: inline-block;
margin-right: 7px;
}
.m-btn02.m-btn02--inline {
display: inline-block;
}
.m-btn02.m-btn02--color-orange {
background: #ff3c00;
border-color: #ef3300;
}
CSS Element, Modifier のルールを定義
Element
Modifier
Modifier
参考)comico http://www.comico.jp/