レイアウト崩れで困ったときに…

CSS 基礎&Tips
CSSの基礎
ボックスモデル
Box Model
ボックスモデル
margin

border

padding
content
ボックスモデル
ブラウザの開発ツールで確認できます

Firefox (Firebug)

Google Chrome
ブロックレベル要素
インライン要素
Block-Level Elements & Inline Elements
ブロックレベル要素
見出し 段落 表など、
・
・
文書を構成する基本となる要素で、
独立したブロック
(かたまり)
として扱われる。
下にレイアウトされてゆく。

ブロックレベル要素

ブロックレベル要素
ブロックレベル要素
他のブロックレベル要素やインライン要素を
配置することができる。

ブロックレベル要素
ブロックレベル要素

インライン要素

インライン要素
ブロックレベル要素
代表的なタグ

<div>、
<p>、
<h1>∼<h6>、
<form>、
<table>、
<ul>、
<ol>、
<dl>、
<blockquote>、
<address>
インライン要素
ブロックレベル要素内に特定の意味を持たせる要素で、
行内の一部として扱われる。
横にレイアウトされてゆく。

インライン要素

インライン要素

インライン要素

インライン要素

インライン要素
インライン要素
インライン要素を配置することはできるが、
ブロックレベル要素を配置することはできない。

インライン要素
インライン要素

インライン要素

ブロックレベル要素
インライン要素
代表的なタグ

<a>、
<img>、
<span>、
<input>、
<select>、
<label>、
<strong>、
<em>
HTML5での注意点
HTML5では、
ブロックレベル要素とインライン要素の分類はなくなる。
インライン要素にブロックレベル要素を配置することもできる。

インライン要素
インライン要素

インライン要素

ブロックレベル要素
基本レイアウト
floatを使った段組み
Column Layout
2カラム
通常
2カラム
これもアリ
3カラム
float使用時の注意点

必ずwidthを指定する
floatした後は必ず解除する

これは約束。
float使用時の注意点

floatを解除し忘れることによる
レイアウト崩れが非常に多いです
floatの解除の仕方
Clear Float
clearプロパティ
後続の要素に clear: both; を指定
clearfix
親要素に class="clearfix" を指定
clearfix
(2004年)
.clearfix:after {
content: " ";
.
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix...
clearfix
(201
1年)
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* ...
位置指定
Positioning
絶対配置

position: absolute;
基準点からのオフセッ
トで位置を指定する
絶対配置
position: absolute;
基準点

top
left

position: absolute;
top: 20px;
left: 20px;

基準点からのオフセッ
トで位置を指定する
絶対配置
position: absolute;
position: absolute;
bottom: 20px;
right: 20px;
right
bottom

基準点

基準点は、
上下左右どこでもOK
絶対配置の注意点
基準点を指定しない場合は、
ウィンドウの左上が基準点になる。

基準点
基準点の設定
基準にしたい親要素に
position: relative; を指定

基準点

position: ralative;
position: absolute;
top: 10px;
left: 10px;
CSS Tips
初心者のために
CSS Tips for Beginners
vertical-align
画像の下に謎のスキマができる場合
vertical-align
画像に vertical-align: bottom;
display
要素の表示形式を指定する
display: none;
要素を非表示にし、
レイアウトに影響を与えない

display: block;
要素をブロックボックスとして生成する

display: inline;
要素をインライン...
display
例えば、
画像を横並びにしたい場合
li {
display: inline;
}
display
例えば、
画像を横並びにしたい場合
li {
display: inline;
}
display
display: inline;
display: inline-block;
だけでは、
スキマができる

0.34em程度のスキマ
display
代替案①
float を使う

<li>

<li>

<li>

li {
float: left;
width: 150px;
}

floatの解除を忘れずに
display
代替案②
HTMLソースの改行を削除
<ul>
<li> ・ </li><li> ・ </li><li> ・ </li>
・・
・・
・・
</ul>
<li>

<li>

<li>
Upcoming SlideShare
Loading in …5
×

CSS Basic and Tips

551
-1

Published on

在職中にCSSでよく質問された内容についてまとめた、某社退職時の置き土産。 (Elementary CSS tips in Japanese.)

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
551
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS Basic and Tips

  1. 1. レイアウト崩れで困ったときに… CSS 基礎&Tips
  2. 2. CSSの基礎
  3. 3. ボックスモデル Box Model
  4. 4. ボックスモデル margin border padding content
  5. 5. ボックスモデル ブラウザの開発ツールで確認できます Firefox (Firebug) Google Chrome
  6. 6. ブロックレベル要素 インライン要素 Block-Level Elements & Inline Elements
  7. 7. ブロックレベル要素 見出し 段落 表など、 ・ ・ 文書を構成する基本となる要素で、 独立したブロック (かたまり) として扱われる。 下にレイアウトされてゆく。 ブロックレベル要素 ブロックレベル要素
  8. 8. ブロックレベル要素 他のブロックレベル要素やインライン要素を 配置することができる。 ブロックレベル要素 ブロックレベル要素 インライン要素 インライン要素
  9. 9. ブロックレベル要素 代表的なタグ <div>、 <p>、 <h1>∼<h6>、 <form>、 <table>、 <ul>、 <ol>、 <dl>、 <blockquote>、 <address>
  10. 10. インライン要素 ブロックレベル要素内に特定の意味を持たせる要素で、 行内の一部として扱われる。 横にレイアウトされてゆく。 インライン要素 インライン要素 インライン要素 インライン要素 インライン要素
  11. 11. インライン要素 インライン要素を配置することはできるが、 ブロックレベル要素を配置することはできない。 インライン要素 インライン要素 インライン要素 ブロックレベル要素
  12. 12. インライン要素 代表的なタグ <a>、 <img>、 <span>、 <input>、 <select>、 <label>、 <strong>、 <em>
  13. 13. HTML5での注意点 HTML5では、 ブロックレベル要素とインライン要素の分類はなくなる。 インライン要素にブロックレベル要素を配置することもできる。 インライン要素 インライン要素 インライン要素 ブロックレベル要素
  14. 14. 基本レイアウト
  15. 15. floatを使った段組み Column Layout
  16. 16. 2カラム 通常
  17. 17. 2カラム これもアリ
  18. 18. 3カラム
  19. 19. float使用時の注意点 必ずwidthを指定する floatした後は必ず解除する これは約束。
  20. 20. float使用時の注意点 floatを解除し忘れることによる レイアウト崩れが非常に多いです
  21. 21. floatの解除の仕方 Clear Float
  22. 22. clearプロパティ 後続の要素に clear: both; を指定
  23. 23. clearfix 親要素に class="clearfix" を指定
  24. 24. clearfix (2004年) .clearfix:after { content: " "; . display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac ¥*/ * html .clearfix {height: 1%;} .clearfix {display: block;}
  25. 25. clearfix (201 1年) .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .clearfix { *zoom: 1; }
  26. 26. 位置指定 Positioning
  27. 27. 絶対配置 position: absolute; 基準点からのオフセッ トで位置を指定する
  28. 28. 絶対配置 position: absolute; 基準点 top left position: absolute; top: 20px; left: 20px; 基準点からのオフセッ トで位置を指定する
  29. 29. 絶対配置 position: absolute; position: absolute; bottom: 20px; right: 20px; right bottom 基準点 基準点は、 上下左右どこでもOK
  30. 30. 絶対配置の注意点 基準点を指定しない場合は、 ウィンドウの左上が基準点になる。 基準点
  31. 31. 基準点の設定 基準にしたい親要素に position: relative; を指定 基準点 position: ralative; position: absolute; top: 10px; left: 10px;
  32. 32. CSS Tips
  33. 33. 初心者のために CSS Tips for Beginners
  34. 34. vertical-align 画像の下に謎のスキマができる場合
  35. 35. vertical-align 画像に vertical-align: bottom;
  36. 36. display 要素の表示形式を指定する display: none; 要素を非表示にし、 レイアウトに影響を与えない display: block; 要素をブロックボックスとして生成する display: inline; 要素をインラインボックスとして生成する display: inline-block; 幅や高さなどを指定できるインライン要素を生成する
  37. 37. display 例えば、 画像を横並びにしたい場合 li { display: inline; }
  38. 38. display 例えば、 画像を横並びにしたい場合 li { display: inline; }
  39. 39. display display: inline; display: inline-block; だけでは、 スキマができる 0.34em程度のスキマ
  40. 40. display 代替案① float を使う <li> <li> <li> li { float: left; width: 150px; } floatの解除を忘れずに
  41. 41. display 代替案② HTMLソースの改行を削除 <ul> <li> ・ </li><li> ・ </li><li> ・ </li> ・・ ・・ ・・ </ul> <li> <li> <li>

×