※スマホ対応はしてません。

タグ: UI

CSS Flexboxでスクロールさせようとしたら縮んでしまうのがflex-shrinkで直った。

カテゴリー: CSS

先にまとめ

  • flex-shrink: 0 を Flexbox の子要素に書く
  • 親要素は普通に display: flex と overflow: auto

ここまでのあらすじ

単純に overflow: auto しとけばスクロールするじゃろ~とやってみたら Flexbox の子要素が軒並みスクロール不要な大きさにまで縮んでしまった。そういえばそうだった。

過去に同じ問題に直面したときはたしか min-width なんか付けたんだけど今回やってるのは大きさがまちまちで決められないし、そもそも min-width もなんか違う感じあるしってんで調べたところ、flex-shrink というプロパティがあることを知った。

flex-shrink

子要素の縮小係数 (shrink factor) を指定します。0 以上の数値。初期値は 1 。

親要素(display: flex を書く方)じゃなくて子要素の方へ指定する点に注意。

デモ

おしまい

リファレンスちゃんと読むの大事だね。

他に flex-grow と flex-basis 、あと省略形の flex があります。MDN 読んでみて。

参考

CSSだけでウィンドウぴったりに表示する編集画面を作る。(CSS おれおれ Advent Calendar 2012 – 23日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 23日目

メールとかブログ記事とかの編集画面みたいなのがあって、それをウィンドウいっぱいに表示するとき、ウィンドウに合わせて縦方向に伸ばすのってどうしてますか? JavaScript使っちゃいます? それCSSで出来るよ!

ウェブサービスではあんまりないUIだと思うけど、ウェブアプリ的なものだったらよくあるのでは。

概要

ネタバレ。

height:100%で常に画面の高さに合わせつつ、固定の部分についてはpaddingで隙間を用意します。その際にbox-sizing:border-boxを指定する事で、隙間の部分まで含めた高さを指定出来るようにします。

高さを100%に出来る場合、出来ない場合について知る

昔書いたのでちらと読んでみてください。

一言で言うと、上位要素に高さの指定がある場合にのみ出来るという感じです。

最上位要素の高さを指定する

HTMLのドキュメントツリーにおける最上位要素といえば、もちろんhtml要素です。

あとbody要素もついでに設定しちゃいましょう。こちらは一般的なブラウザーでは、初期状態で余白が指定されているので、それもリセットします。

html, body { height:100%; margin:0; }

縦にいっぱいだけど余白がある要素をつくる

縦いっぱいに広げるのはheight:100%だけで可能です。今回やりたいのは、それに加えて固定の高さの領域を用意する、というものです。

paddingとbox-sizing:border-boxを利用します。つまりheight:100%が示す値を、paddingまで含めたものとします。

<body>
  <div class="editor">Content box</div>
</body>
.editor {
  box-sizing: border-box;
  height: 100%;
  padding-top: 30px;
}

box-sizing:content-box(初期値)の場合の領域

box-sizing:border-boxの場合の領域

下部領域も

同様に下方向にもpaddingを追加します。

デモ

こんな感じになりました。

実行画面を別ウィンドウで開いて、ウィンドウサイズを変えてみてください。

編集画面的なもの。

縦に伸ばすと、中央部分だけが伸びる。

関連

CSSでiOS風のチェックボタンをつくるチュートリアル。(CSS おれおれ Advent Calendar 2012 – 21日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 21日目

セフセフ。

iOSの選択ボタン。HTMLでいうチェックボタン的なもの。”Switch Control”というらしいです。

Switch Control風チェックボックス

HTML

こんな感じです。

(さらに…)

CSSでトグルボタンを作ってみた。(CSS おれおれ Advent Calendar 2012 – 18日目)

カテゴリー: CSS

CSS おれおれ Advent Calendar 2012 – 18日目

チェックボックスと同じ機能を持つボタンです。押すと引っ込んだ状態になり、もう一度押すと出っ張った状態になります。

なんか現実世界のスイッチで使われてたりしますね。あれです。

押すと引っ込むトグルボタン。

デモ

(さらに…)

CSSだけでタブ切り替えを実装してみた。(CSS Programming Advent Calendar 2012 – 06日目)

カテゴリー: CSS

CSS Programming Advent Calendar 2012 – 06日目

JavaScriptを使わず、CSSを駆使してそれっぽい事をやるCSSプログラミングのアドベントカレンダーへの投稿記事です。

いわゆるタブ的な動きを、CSSだけで組みました。(※実務で使っちゃ駄目ですよ!)

タブのCSS自体の組み方はこちらをどうぞ:

デモ

どーん!

仕組み

(さらに…)