にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

CSSだけでボックスの縦横サイズをユーザが自由に変更できるようにする方法 [CSS3,ボックス]

CSSのresizeプロパティを使えば、閲覧者がマウスなどを使って任意のボックスの描画面積を自由に増減させられるようになります。複数行のテキスト入力欄のサイズが可変になっていれば、たくさん入力したい場合などに便利かも知れません。

CSSだけで、ボックスの縦横サイズをユーザが変更できるようにできる

CSS3で新たに追加されたresizeプロパティを使うと、ボックスの縦横サイズ(表示面積)をユーザが自由に拡大・縮小できるようになります。テキスト入力欄に限らず、p要素やdiv要素みたいなボックスでも自由に変更できるようにできます。

例えば、以下の緑色の線で囲まれたボックスは、p要素で作った「段落」です。
しかし、ボックスの右下をドラッグすることで、表示面積を自在に伸縮できます。
※ただし、IE・Edge・iOS版Safariは除きます。(Firefox、Chrome、Opera、PC版Safariでは動きます。)

このボックスは、p要素(段落)で作っています。この表示面積は、ユーザが自由に伸縮できます。
おそらく、ボックスの右下側に「伸縮可能」であることを示す斜めの二重または三重線などが表示されているのではないかと思います。
そいつをドラッグすると、このボックス(p要素)の表示面積を伸縮できます。

緑色枠の右下端をドラッグしてみて下さい。▲

ボックスのサイズをユーザが変更できるようにするresizeプロパティ

このように、ボックスの縦横サイズを自由に変更できるようにする方法はとても簡単で、下記のようにresizeプロパティを使うだけです。

CSSソース

対象要素 {
   resize: both;
}

上記のように記述すると、そのボックスの縦横サイズをユーザが自由に伸縮できるようになります。縦横両方ではなく片方だけを可変にしたい場合は、以下のような記述も使えます。

resize: horizontal; /* 幅だけ可変 */
resize: vertical;   /* 高さだけ可変 */
resize: none;       /* 変更不可 */

なお、resizeプロパティだけでは可変にはできない場合があります。
少なくとも、p要素やdiv要素などのような、元々サイズが不定で、内容に応じて拡張されるようなボックスの場合は、「縦横サイズを固定する」・「スクロールバーを表示する」といった装飾を同時に指定しておく必要があります。

冒頭の例では、以下のようなCSSソースを使いました。

CSSソース

p {
  border: 2px solid green;
  width: 300px;
  height: 200px;
  overflow: scroll;
  resize: both;
}

複数行のテキスト入力欄(textarea要素)の縦横サイズを可変にした例

冒頭の例は、単に文章を表示するだけの「p要素」に対して適用したものですが、たいていこのプロパティを活用するのは「テキスト入力欄」を作るときでしょうかね。

たくさん情報を詰め込んでいるポータルページのような場所で、各ブロックの表示面積をユーザが自由に決定できるようにしたいときなんかにも使えるかも知れません。(^_^;)


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---