こんにちは、ワタナベです！
つい最近また耳に穴を開けました。
今年だけで４つも穴が開くとは自分もビックリ。完全にハマってしまいました(笑)
開ける瞬間の痛みは耳たぶ＞軟骨でした(´･ω･｀)参考までに
今回は、つい最近知った便利なcssについての備忘録です。
今さらかもしれないけれど！
position : sticky;
position: sticky;
top: 0;
スクロールしたら付いてきたほしい要素に↑を入れるだけで、付いてきてくれます！！！！
fixedだと、高さが消えるというか、その要素だけ「浮く」感じになりますよね？
stickyだと、その要素は浮かずに高さを保ちつつ、要素の位置までスクロールすると付いてきてくれます。
便利なのは便利なんですけど、お察しの通り、
そうです、IEには対応していません！（知ってた）
IEでの対応
どうしてもIEでsticky要素を追尾させたい場合は、jsで対応できます。
こういった便利でIEで使えないcssは、たいていjsがあるので助かりますね。
まあ本当はIEさんが対応してくれればjsも使わなくて良いので一番よいのですが(´･ω･｀)
Polyfill
コード
<script src=”js/stickyfill.min.js”></script>
<script>
Stickyfill.add($(‘.sticky‘));
</script>
.stickyの部分に任意のクラス（position:stickyを使うクラス）を入れてあげればOK。
ちなみに
IEや古いブラウザなどで動作しないcssなどに関してこのような記事がありました。
自分も同意で、よほどの理由が無いが切りは、対応していないブラウザで無理に追尾させなくてもよいのではと自分も思っています(´ω｀)
コンバージョンにつながるボタンとかなら仕方ないですが…！（ぐぬぬ）
こんなこともできる
うおおおおおおjsでしか見たことないやつ！！！！_(:3 」∠ )_
HTML
<h1>position: sticky</h1>
<h2 class=”h2_01″>サンプル1</h2>
<div class=”box”>
</div><h2 class=”h2_02″>サンプル2</h2>
<div class=”box”>
</div><h2 class=”h2_03″>サンプル3</h2>
<div class=”box”>
</div>
CSS
.box{
padding-bottom:1000px;
}h2{
top:0;
position:sticky;
}.h2_01{
background:#333;
color:#fff;
z-index:0;
}.h2_02{
background:#888;
color:#fff;
z-index:1;
}.h2_03{
background:#ddd;
color:#fff;
z-index:2;
}
注意点
- 先祖要素にoverflow
- inline-block要素（Safari）
↑動かないっぽいです。
くわしくはこちらのサイト様に↓↓↓
使いどころ
- 要素の高さを残しつつ追尾させたい時！
- スクロールで要素の位置まで来たら追尾させたい時！
長い文章が続いてる時とか、見出しを追尾させてみたりするのが良いのではないのでしょうか(´ω｀)
便利なのでちょいちょい使っていきたいです。
はやくIEさん対応して。
【久】ガンプラ制作記
ということで久々すぎる、ガンプラ制作記です。
前回お見せしましたうちの一つ、BB戦士のビルドストライクガンダムフルパッケージ…です！（長い）
ガンダムビルドファイターズというシリーズの主人公の１人、イオリ・セイくんの作ったガンプラ。そう、ガンプラ！
このシリーズは戦争ものではなく、登場人物たちがガンプラを作りそれを操縦して戦わせるアニメなのです…！
ガンダムシリーズを知っていると、にやりとする場面も多々あって面白いです(笑)
ビルドストライクガンダムは名前から察する通り、ガンダムSEEDのストライクガンダムがベースになっています。
余談ですが、このビルドストライクガンダムの操縦者はもう１人の主人公、レイジくんです。
そのセイくんの作ったガンプラのBB戦士バージョンなのですが、BB戦士なので色分けはまあ見てのとおりです。
黄色の部分は全部シールです。武器なんかはもう全く違う色ですね。今回は成形色が特殊だったので、そのまま素組みです。
組み立てるのが久々すぎて手際が悪かったのかうまくはまらず、しょっぱなからパーツオープナーを使う羽目になりました(;^ω^)
色分けは残念ですが、やっぱりBB戦士は簡単に組めちゃうのが良いところ(/・ω・)/
かっこよくもあり、かわいい。１度に２つも楽しめちゃう。そこもお得です♪
塗装の練習なんかにもよいと思います。
…ぼちぼち、ドムの制作にも取り掛かります(;^ω^)
今回は前回のガンタンクとは違う汚し方に挑戦したくて、色々調べ中です。
それではまた次回！
ご閲覧ありがとうございました～
