CSS辞典-配置と表示

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

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

要素の表示形式を指定したい
任意の位置に表示したい
回り込みを指定した
回り込みを解除したい
内容があふれた場合にはスクロールバーを表示する
CSS辞典トップへ戻る

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

display:値

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

これは通常のリスト

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

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>

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

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: 位置が固定されスクロールしても移動しなくなります。

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:leftを使ったサンプルです。

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

回り込み解除なし

回り込み解除

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:autoを設定したときの表示例

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