Html5勉強会スライド
- 17. h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
svg:not(:root) {
overflow: hidden;
}
Base - デフォルトのスタイル
normalize.css
http://necolas.github.io/normalize.css/
基本はタグセレクタ。必要な場合に属性セレクタや擬似クラスセレクタを利用する。
13年4月20日土曜日
- 18. #header, #article, #footer {
width: 960px;
margin: 1em 0;
}
#sidebar {
margin: 10px;
}
.l-switched #sidebar{
float: left;
}
.l-switched #article{
float: right;
}
Layout - 大枠部分のスタイル
ページをセクションに分けるためのスタイルをあてる。
<div class=”container l-switched”>
<article id=”article”>
<h2>
<span>...</span>
</h2>
</article>
<aside id=”sidebar”>
<figure>
<img alt=”banner” src=”...”>
<figcaption>...</figcaption>
</figure>
</aside>
</div>
13年4月20日土曜日
- 19. .module h2 {
margin: 10px 0 0 0;
}
.module li{
display: inline-block;
/* IE7 hack */
*display: inline;
*zoom: 1;
}
Module - パーツ別に分けるスタイル
使い回しできるように、クラスを主に使ってパーツ別に分けるためのスタイル
<div class=”module”>
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
13年4月20日土曜日
- 22. • レイアウト変更するclassにはlayout-などの接頭辞をつける
(ex. [ layout-fixed ], [ layout-inline ]など
• 状態をもつclassにはis-などの接頭辞をつける
(ex. [ is-active ], [ is-hidden ]など
• モジュール名はmodule-をつける必要ない(ほとんどがモジュ
ールになるから)
• サブクラス化する必要がある物は-(ハイフン)つなぎで名づけ
(ex. [ .example ]のサブクラスには[ .example-fixed ]とする
13年4月20日土曜日
- 28. .module h2 {
margin: 10px 0 0 0;
}
.module li {
display: inline-block;
/* IE7 hack */
*display: inline;
*zoom: 1;
}
<div class=”module”>
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
<li>
<ul>
<li>...</li>
<li>...</li>
<ul>
</li>
</ul>
</div>
13年4月20日土曜日
- 29. .module h2 {
margin: 10px 0 0 0;
}
.module li {
display: inline-block;
/* IE7 hack */
*display: inline;
*zoom: 1;
}
<div class=”module”>
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
<li>
<ul>
<li>...</li>
<li>...</li>
<ul>
</li>
</ul>
</div>
13年4月20日土曜日
- 30. .module h2 {
margin: 10px 0 0 0;
}
.module li{
display: inline-block;
/* IE7 hack */
*display: inline;
*zoom: 1;
}
<div class=”module”>
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
<li>
<ul>
<li>...</li>
<li>...</li>
<ul>
</li>
</ul>
</div>
適応されちゃう!
13年4月20日土曜日
