CSS辞典-配置と表示

配置と表示では、文字や画像の表示位置や内容があふれた場合の表示方法などを設定できるスタイルシートです。ここではよく使うスタイルシートをまとめてありますので、組み合わせでオシャレなデザインに作成していきましょう。

CSS(スタイルシート)辞典-配置と表示

要素の表示形式を指定したい

display:値

inline
指定された要素をインラインする
block
指定された要素をブロックレベルにする

これは通常のリスト

list

インラインを使ったリストです。

inline
css
ul {
  margin: 0;
  padding: 0;
}
.inlinesanpule li {
  display: inline;
  background-color: #CCC;
  line-height: 3;
  padding: 10px;
}
xhtml
<ul class="inlinesanpule">
<li>インラインを使った</li>
<li>リストです。</li>
<li>背景に</li>
<li>色をつけてます。</li>
<li>横に並びます。</li>
</ul>

ブロックを使ったリスト。

block
css
ul {
  padding: 0;
}
.blocksanpule li {
  display: block;
  border: 1px solid #CCC;
  padding: 10px;
}
xhtml
<ul class="blocksanpule">
<li>これはブロックを使った</li>
<li>リストです。</li>
<li>各形式を分かりやすくする為に</li>
<li>ボーダーをつけてあります。</li>
<li>各文字にボックスが出来ます。</li>
</ul>

Top

任意の位置に表示したい

position:値

ボックスの配置位置をしていします。位置表示箇所は、topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティで位置を指定します。

static
この値を指定すると、位置箇所を決める、topプロパティ、rightプロパティ、bottomプロパティ、leftプロパティは無視され通常表示される位置に表示されます。
relative
通常表示される位置から相対的な位置に配置します。この後に続く通常のボックスは、このボックスが通常に配置されているものとして配置されます。
absolute
絶対的な配置です。包含ブロックを基準とし、そこからの距離で配置されます。
※包含ブロック・・・一番外側にはbody要素で包まれその中に各ブロックが含まれています。absoluteの外側に他のブロック要素で包まれている場合は、そのブロックが包含ブロックになります。absoluteの外側に他のブロック要素が無い場合は、一番外側にあるbody要素が包含ブロックになります。
fixed
位置が固定されスクロールしても移動しなくなります。
position
css
body {
  margin: 0;
}

p {
  margin: 0;
  width: 150px;
  height: 150px;
  color: #fff;
  font: 24px Impact,sana-serif;
}

#static {
  position: static;
  top: 200px;
  left: 150px;
  background: #ff0000;
}

#relative {
  position: relative;
  top: 0;
  left: 150px;
  background: #009966;
}

#absolute {
  position: absolute;
  top: 0;
  left: 150px;
  background: #ffcc00;
}

#fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3399ff;
}
xhtml
<p id="static">static</p>
<p id="relative">relative</p>
<p id="absolute">absolute</p>
<p id="fixed">fixed</p>

Top

回り込みを指定したい

float:値

left
対象となるボックスを左側に配置して、後に続く内容を右側に回りこませる
right
対象となるボックスを右側に配置して、後に続く内容を左側に回りこませる

これはfloatを使わない場合の表示です。

float

これはfloat:leftを使ったサンプルです。

float
css
p {
  margin: 0;
  line-height: 1.5;
  padding-bottom: 10px;
}
#flotelightsanpulu {
  padding: 5px;
  border: 1px solid #CCC;
}
#flotelightsanpulu img {
  border: 1px solid #CCC;
  margin-right: 10px;
  float: left;
}
xhtml
<div id="flotelightsanpulu">
<p><img src="http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/css/globa-translator.jpg" width="120" height="120" alt="国旗" />これはfloat:leftを使ったサンプルです。</p>
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>

Top

回り込みを解除したい

clear:both

回り込み解除なし

clear both

回り込み解除

clear both
css
p {
  margin: 0;
  line-height: 1.5;
  padding-bottom: 10px;
}
#clearbothsanpule {
  padding: 5px;
  border: 1px solid #CCC;
}
#clearbothsanpule img {
  float: left;
  margin: 0 10px 10px 0;
  border: 1px solid #CCC;
}
.kaijo {
  clear: both;
  background: #ccc;
  padding: 5px;
  overflow: hidden;
}
xhtml
<div id="clearbothsanpule"><p><img src="http://detarame.moo.jp/wp/wp-content/themes/whbk5/images/css/globa-translator.jpg" width="120" height="120" alt="国旗" />回り込み解除したサンプルです。</p>
<p>ああああああああああああああああああああああああああああああああああああ</p>
<div class="kaijo">
<p>回り込み解除</p>
<p>このグレーのボックスにclear:bothを使うことによって回り込みが解除されています。</p>
</div>
</div>

Top

内容があふれた場合にはスクロールバーを表示する

overflow:auto

何も設定してないときの表示例

overflow

overflow:autoを設定したときの表示例

overflow
cssソース
#overflowsanpuru {
	height: 80px;
	background-color: #CCC;
	overflow: auto;
}
xhtmlソース
<div id="overflowsanpuru">
<p>これはoverflow:autoを設定したときの表示例です</p>
<p>分かりやすくする為にボックス内に背景色をつけ<br />
ボックスの高さを設定してます。<br />
ボックスのサイズを越えた場合にはスクロールバーが<br />
表示されます。<br />
更新履歴などにも使えると思います。</p>
</div>

Top

最終更新日: 2013年2月10日