ホームページ作成講座[CSS編]表示形式のスタイル設定

縦横幅の指定

ボックスや画像などの横幅や高さを指定することができます。プロパティと値は以下の通りです。

width : 数値

横幅を指定します。値には実際の長さ（px等）や％などを使います。

heigth : 数値

高さを指定します。値には実際の長さ（px等）や％などを使います。

（サンプル）

<style>
div.sq{
  width : 100px;  //横幅100pxに
  height : 100px;  //高さ100pxに
  border-radius : 50px;  //角を半径50pxに丸める
  background-color : red;  //背景を赤に
}
</style>

<div class="sq"></div>

最大最小値の指定

横幅や高さの最大値や最小値を指定することもできます。プロパティと値は以下の通りです。

max-width : 数値

横幅の最大値を指定します。

max-height : 数値

高さの最大値を指定します。

min-width : 数値

横幅の最小値を指定します。

min-height : 数値

高さの最小値を指定します。

（例）

<style>
img{
  width : 100%;  //横いっぱいに広げる
  max-width : 640px;  //最大640pxに制限する
}
</style>

上記の例は、画像を横幅いっぱいに広げて表示するように指定しています。しかし画像が大きくなり過ぎないように、最大640pxまでという制限を付けています。横幅が広いブラウザやスマホを横向きで見ても、画像は640pxより大きく表示されることはありません。

表示形式の指定

要素の表示形式を指定したり変更したりすることができます。プロパティと値は以下の通りです。

display : block/inline/none

値にblockを指定すると、ブロック要素となります。

値にinlineを指定すると、インライン要素となります。

値にnoneを指定すると、非表示になります。要素があったスペースも無くなります。

（他にも指定できる値はたくさんあります）

（サンプル）

<style>
div.sq{
  width : 100px;
  height : 100px;
  border-radius : 50px;
  background-color : red;
  display :none;  //非表示にする
}

li{
  display : inline;  //インライン要素にする
  list-style-type : none;  //マーカーを非表示にする
}
</style>

<div class="sq"></div>

<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ul>

上記のサンプルでは、100×100pxのdivタグが存在するはずですが、display:noneを指定しているので表示されていません。またその空間も詰められて、次のリストが表示されています。

リストのliタグは通常ブロック要素なので縦に並ぶはずですが、display:inlineを指定しているので横並びになっています。

表示・非表示の指定

要素を表示させたり非表示にしたりすることができます。プロパティと値は以下の通りです。

visibility : visible/hidden

値にvisibleを指定すると、表示されます。

値にhiddenを指定すると、非表示になります。表示されませんが、要素があった場所のスペースはそのまま残ります。

（サンプル）

<style>
div.sq{
  width : 100px;
  height : 100px;
  border-radius : 50px;
  background-color : red;
  visibility : hidden;  //非表示にする
}

li{
  display : inline;
  list-style-type : none;
}
</style>

<div class="sq"></div>

<ul>
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>
</ul>

上記のサンプルはその前のサンプルとほぼ同じですが、display:noneの部分がvisibility:hiddenに変わっています。 100×100pxのdivタグが非表示になっているのは同じですが、その要素が存在しているスペースは残っています。

はみ出した部分の表示形式

要素からはみ出した部分の表示をどうするか指定することができます。プロパティと値は以下の通りです。

overflow : visible/hidden/scroll/auto

値にvisibleを指定すると、はみ出した部分がそのまま表示されます。

値にhiddenを指定すると、はみ出した部分は非表示になります。

値にscrollを指定すると、スクロールバーが出てはみ出した部分が見れるようになります。スクロールバーは必要なくても表示されます。

値にautoを指定すると一般的な設定では、はみ出した部分がある時にスクロールバーが表示されるようになります。

overflow-x : visible/hidden/scroll/auto

横方向にはみ出した場合にどうするかを指定します。

overflow-y : visible/hidden/scroll/auto

縦方向にはみ出した場合にどうするかを指定します。

（サンプル）

<style>
div{
  width : 10em;  //横幅を10文字分にする
  border : 1px solid gray;  //1pxの灰色の枠線を付ける
  white-space : pre;  //文字を折り返さないようにする
  margin-bottom : 1em;  //下の空白を1文字分空ける
}

.vis{  overflow : visible; }  //はみ出した部分をそのまま表示
.hid{ overflow : hidden; }  //はみ出した部分を非表示
.scr{ overflow : scroll; }  //スクロールバーを表示
.aut{ overflow : auto; }  //必要な時にスクロールバーを表示
</style>


<div class="vis">値にvisibleを指定した場合</div>
<div class="hid">値にhidennを指定した場合</div>
<div class="scr">値にscrollを指定した場合</div>
<div class="aut">値にautoを指定した場合</div>