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

タグ: UI

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自体の組み方はこちらをどうぞ:

デモ

どーん!

仕組み

(さらに…)

ありがちなタブのマークアップとスタイル実装例。(CSS おれおれ Advent Calendar 2012 – 06日目)

カテゴリー: CSS

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

だいたいいつもこんな感じで書いてますよ、というものを。それなりに面倒なんですよねー。

完成品

それでは、以下解説。

マークアップ

できるだけシンプルにしたいと思っています。

  • .tab
    • a[href=target].tab-button*
    • article#target.tab-panel*

.tab-buttonと.tab-panelは複数あり、また対になっています。

リンクがul>li>aという構造も考えられますが、ただ並んでいるだけであって、別にリストではないかなと思って、ただただ並べています。

スタイル

タブボタンの基本的な形

(さらに…)