常にページ最下部に固定するようなフッターを実現したい。 このとき、ページ内の要素が画面の高さを越えるときは、フッターは画面外となり、スクロールしなければ表示されないようにしたい。 このようなフッターは「Sticky Footer（スティッキーフッター）」…

::befor や ::after といった疑似要素の content に \a を入れることで改行できる。 コード例 .foo::after { content: '\a'; white-space: pre; } サンプル codepen.io 解説 content: '\a' について \a というのは改行を表している。 改行（厳密に言うとLF）…

BEMやらSMACSSやら、CSS設計のアイディアは色々あるのだけど、どうにも複雑で。。 そんなときにrscss（Reasonable System for CSS）を見つけたんだけど、これがちょうどいい感じで、縛りもきつくなくて導入しやすかった。 ので、改めてドキュメントを訳しつ…

パッと思い浮かぶのはFlexboxを使う方法なのだが、これがFlexboxだと、CSSだけでの実現はなかなか難しそう。 もし、これをCSSのみで実現しようと思うとGrid Layoutを使うのが一番簡単な気がしている。 developer.mozilla.org サンプルは以下（CodePenのサイ…

codepen.io Flexboxを使って実現している。 justify-content: center; で水平方向の中央寄せ、 align-items: center; で垂直方向の中央寄せをすることで、テキストをボタンの真ん中に持ってくる。 角丸は border-radius で調整。 幅や高さ、色などは好みで。…

codepen.io 最初は width: 0 にしておいて最後はすべてのテキストがぴったり表示されるくらいの幅（ここでは width:250px）まで広げる感じ。 ポイントは steps を使うことで、連続ではなく1フレームごとにパッと切り替えるようにする。 steps(n) の n の値と…

position: fixed; と bottom: 0; を使えばOK。 #footer { position: fixed; bottom: 0; width: 100%; } codepen.io