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

カテゴリー: CSS

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の変化をアニメーションさせるtransitionについてまとめたよ。(CSS おれおれ Advent Calendar 2012 – 22日目)

カテゴリー: CSS

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

(ヽ´ω`) oO( また日が昇ってからの更新になってしまった……。 )

前提:CSSにおけるアニメーションは以下の二種類あります。

  • Transitions … 変化するもの
  • Animations … 動き続けるもの

今回は前者について取り上げます。後者もいずれ。

概要

transitionは値の変化をアニメーションさせる、という事を指定するものです。

例えば青色をしたリンクにマウスカーソルを乗せると赤色になる、というような場面で、その変化を時間を付けて行わせる事ができます。

常に動き続けているようなアニメーションは、animateの方の領分です。

使える場面

(さらに…)

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

カテゴリー: CSS

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

セフセフ。

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

Switch Control風チェックボックス

HTML

こんな感じです。

(さらに…)

Chromeで画像の角丸枠線がボケるのを回避する。(CSS おれおれ Advent Calendar 2012 – 20日目)

カテゴリー: CSS

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

いわゆるBK (Bad Knowhow) というやつですな。(BKって和製英語の類?)

現象

画像にborderを付けてborder-radiusも付けると、なんかChromeでうまく表示されないんです。

Chrome 23で見た角丸枠線。欠けている。

Firefoxなんかだと正常でした。

回避策

(さらに…)

CSSでグラデーションを使うときにhsl()が便利すぎる。(CSS おれおれ Advent Calendar 2012 – 19日目)

カテゴリー: CSS

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

CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。

グラデーションをlinear-gradient()で実現するとき、このhsl()を使うと綺麗に記述する事が出来ます。

実例

こんなグラデーションを実装します。

#rrggbbを使ったグラデーションの例

まずは#rrggbbで書いた例です。

    background-image: linear-gradient(
        top,
        #ffffff   0%,
        #a3daf5  50%,
        #75c7f0  51%,
        #19a1e6 100%
        );

どんな感じで色が変化していくのか、あんまりわからないですね。

hsl()を使ったグラデーションの例

    background-image: linear-gradient(
        top,
        hsl(200, 80%, 100%)   0%,
        hsl(200, 80%,  80%)  50%,
        hsl(200, 80%,  70%)  51%,
        hsl(200, 80%,  50%) 100%
        );

どうでしょう、これならだいぶ見やすいんじゃないでしょうか。

面倒な色計算なしに、輝度を変えるだけで綺麗なグラデーションを実装する事ができました。また輝度以外を変えないため、かえって色の統一が取りやすいのではないかと思います。

まあ僕はプログラマー方面なので、あんまりデザインの事は知らないですけど。

色を変えるのにも強い

先程の例では水色のボタンでしたが、じゃあこれを赤にしようとしたらどうでしょう?

「あーごめーんやっぱここ目立たせたいからどどーん真っ赤にしちゃってー」

#rrggbbを使ったグラデーションの色を変える

終わりの色は水色のときは#19a1e6でしたが、じゃあ赤はどうしたら良いでしょう? またカラーパレットから探してくる?

水色 赤色
#ffffff #ffffff
#a3daf5 #f5a3a3
#75c7f0 #f07575
#19a1e6 #e61919

頑張って探してきました。(ぜえはあ)

hsl()を使ったグラデーションの色を変える

こちらは簡単です。

水色 赤色
hsl(200, 80%, 100%) hsl(0, 80%, 100%)
hsl(200, 80%, 80%) hsl(0, 80%, 80%)
hsl(200, 80%, 70%) hsl(0, 80%, 70%)
hsl(200, 80%, 50%) hsl(0, 80%, 50%)

色相を200から0にしただけです。

    background-image: linear-gradient(
        top,
        hsl(0, 80%, 100%)   0%,
        hsl(0, 80%,  80%)  50%,
        hsl(0, 80%,  70%)  51%,
        hsl(0, 80%,  50%) 100%
        );

が、これで雰囲気を変えずに色だけを変える事ができました。(まあ派手な雰囲気にはなりましたが。)

SCSSで量産できる

パターンを作ってしまえば、あとは色相を変えるだけで様々な色に変更する事ができます。あ、でも彩度も少し変えた方が良い場合もありますが。

七色用意してみました。

というわけで

おまえらもっとhsl()のすごさを知るべきだ、ってばっちゃがゆってました。