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

カテゴリー: CSS

CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。

カテゴリー: CSS

というわけでお探しの完全理解はこちらです。

スマホでも存分にご理解頂けます。

見た目

こんな感じ。

この動画だけでも十分理解できそう。

matrix() とは

動かして完全理解して頂きましたら、改めてこの関数を紹介したいと思います。

(さらに…)

ヘッダー、フッターの固定にposition:sticky使うとCSSだけで完結するし良いかも。

カテゴリー: CSS

というわけで、いまさら初めて使いました。

デモ

フッターも追加したよ。

使い方

.sticky-header {
  background-color: #fff;
  position: sticky;
  top: 0;
}

position: sticky にして、位置と背景色の指定も併せて行う。背景色がないと見えちゃうから。

position: fixed と違ってサイズ分の余白を自前で用意する必要がないのがらくちん。

利用可能状況

IE以外で使える。大丈夫そうだ。

一通りのウェブブラウザで利用可能。(Can I useより。)

table 関係が現行版だとちょっとまだアレっぽいけど、今回の目的には関係ない。

と思いました

思いつきなので細かいとこ調べてないや許して。スタック文脈とか絡んでくるときっと面倒くさそうな予感がする。

本来は長いコンテンツにたくさんの見出しがあって、みたいな場合に使うものだと思うんだけど、単純に上下端に固定する目的で使うのも悪くないんではないだろうか。だめです?

参考

「フロントエンドエンジニア養成読本」を読んで、エンジニアになってよ!

カテゴリー: CSS, JavaScript, Web

著者の方々から頂いておりましたので、遅まきながらご紹介さして頂きたいと思います。

(すみません、半年近く経ってしまいました……。)

概要

  • ウェブのクライアント側の濃い技術がたっぷり
  • UXの話からブラウザーの仕組みまで
  • 難易度は高め、だけどそこまで高くはない
  • 全てを理解できなくても、勉強の指針として目次を頭に入れておくと良さそう
  • ツール解説は特になし
  • 「10年先も役立つ力をつくる」は本当だと思う

    (さらに…)

CSS 珍百景 Advent Calendar 2014 – 02日目

カテゴリー: CSS

すみません、三日目と勘違いしてました……。

今回はtransform:scale()とzoomの併用についてです。バグじゃないです。

デモ: