用途
新着
履歴
分類

CSS 要素の可変の制御

CSS 要素の可変の制御
CSS 要素の可変の制御
要素の大きさや縦横のサイズをCSSで変更するサンプルです。

トリミングしたり、ユーザーがカスタマイズするような場面で、要素を可変にしたいときがあるとします。

そんなときはCSSで制御できます。

以下の画像の右下をドラッグしてみてください。

上記のサンプルは、左上を起点に右へ下へ伸びていきます。

スタイルはこれだけ

    .demo_box1{
        resize: both;
        border: solid 3px #00F;
        background-color: #99CCFF;
        width:100px;
        height: 100px;
        overflow: auto;
    }

resize: both; が今回のテーマです。

トリミングの操作をするときは、そのサイズの縦横のピクセル数を保存させるイメージです。

次はちょっとCSSを組んで、中央に置いた要素が左右対称に広がるサンプルです。

切り抜きよりも拡大、リサイズで使えそうです。

親要素に

    .demo_space{
        display: flex;
        align-items: center;
        justify-content: center;
    }

その中の小要素に

    .demo_box2{
        resize: both;
        border: solid 3px #00F;
        background-color: #99CCFF;
        width:100px;
        height: 100px;
        overflow: auto;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

こんなスタイルを割り当てています。


次は水平への伸縮のみ操作可能のパターン。

 resize: horizontal;

にするだけ。


次は上下への伸縮のみ操作可能のパターン。

 resize: vertical;

にするだけです。

最後に拡大縮小を禁止するスタイルのサンプルです。

これはデフォルトで伸縮ができるテキストエリアに有効です。

普通のテキストエリア

可変を禁止したテキストエリア

resize: none;

禁止しているほうに↑が設定されています。

どれもあまり使う頻度はなさそうですが、それとなく覚えておきたい制御の一つです。

公開 : 2019-10-29 16:00:46
更新 : 2019-12-12 14:44:38
このエントリーをはてなブックマークに追加
LINEでシェア
このページの二次元コード

関連するサンプル

search -  category -  about
© 2020 kipure
Top