CSS
kimizuka.hatenablog.com前回はGoogleフォームのフォーム画面に対し強引にスタイルを当ててみました が今回は、より強引な手段をつかって投稿完了画面を編集してみたいと思います。以前は投稿完了画面にタグを打てたようなきがするのですが、最近ではテキス…
kimizuka.hatenablog.com kimizuka.hatenablog.com以前つくったもの を改良しました。 自動送りとユーザー操作のタイミングが重なったときの対策をいれました。 touchend が発火しないことのあるAndroid にも対応させるべく、touchmoveにイベントを張りまし…
普段、画像のbase64化には こちらのツール をつかっていましたが、最近compassに任せることができることを知りました。http://blog.thingslabo.com/archives/000058.htmlblog.thingslabo.com 記述方法 SCSS background-image: inline-image("画像のパス"); …
先日Android端末でbackground-imageが表示されずに悩んでいたら、grunt-contrib-cssmin が原因でした。github.com 現象 SCSS .btn { background: url(/img/btn.png) center center no-repeat; background-size: contain; } 上記のようなSCSS（backgroundでイ…
kimizuka.hatenablog.com以前制作したスマフォ用カルーセル ですが、関係各所からの要望により、先頭と最後をループさせるように改良しました。方針としては、 先頭と最後尾にループ用の要素を増やす jQueryのanimateでスクロールさせる（コールバックを登録…
さくっと試せるデモをつくってみました。developer.mozilla.org DEMO
developer.mozilla.org CSSでつかう CSS .box { float: left; margin: 10px; border-radius: 20px; width: 120px; height: 120px; font: 18px "AvenirNext-Heavy"; line-height: 120px; text-align: center; background: #a3a3a3; box-shadow: 0 0 5px rgba(…
DEMO http://jsrun.it/kimmy/kFam 効きません。 1つ要素をかませれば効くようになります。 DEMO http://jsrun.it/kimmy/h0mF
iOS7.1, iOS8.1, iOS8.4 で確認しました。 HTML <div class="box"> <div class="img"></div> </div> <div class="mask"> </div> CSS .box { overflow: scroll; -webkit-overflow-scrolling: touch; } .img { width: 1000px; height: 1000px; background: url(http://jsrun.it/assets/y/S/0/t/yS0tr.jpeg) center center no-repeat; …
Googleフォームをiframeで埋め込むとこんな感じです。でもこれではいまいち美味しんぼ感がでませんね。そこで、CSSを。あーして。こーして。そいや！ほんのり美味しんぼ感がでてきましたね。 カスタム手順 iframeのURLにアクセス ソースをまるっとコピー コ…
属性セレクタには完全一致以外の選択方法が用意されています。 [attr] attr という名前の属性を持つ要素を表します。[attr=value] attr という名前の、値が正確に "value" である属性を持つ要素を表します。[attr~=value] attr という名前の、値がスペースで…
SCSSのmixinにしてみました。 DEMO ※ スマートフォンでしか動作しません HTML <div data-carousel="0"> <ol class="photos"> <li class="photo"></li> <li class="photo"></li> <li class="photo"></li> <li class="photo"></li> </ol> <ol class="btns"> <li class="btn"></li> <li class="btn"></li> <li class="btn"></li> <li class="btn"></li> …</ol></div>
なんだか本末転倒のような気もしますが、覚えておくと既存サイトをリニューアルする際などに便利です。 HTML → Pug（Jade） html2jade.org JavaScript → Coffee js2.coffee CSS → SCSS css2sass.herokuapp.com
Android標準ブラウザで動かない場合があるようです。同じ機種でもChromeでは動きました。 DEMO CSS .box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, .25…
結論からいえば、animation-fill-modeプロパティを forwards にすればOKです。developer.mozilla.org DEMO CSS .box { position: absolute; top: 0; margin: 10px; width: 0; height: 0; background: #3e3e3e; box-shadow: 0 0 10px rgba(0, 0, 0, .25); } .…
DEMOをごらんください。 DEMO JavaScript var index = 0; setInterval(function() { index = (index + 1) % 3; $("#box").attr("data-index", index); }, 200); HTML <div id="box" data-index="0"> <div class="face">٩( 'ω' )و</div> </div> SCSS $length: 3; #box { position: relative; width: 100px; height: 100px;…
親要素からの縦位置と、（改行している際は）要素同士の横の間隔に関係してきます。 SCSS @import "compass/reset"; .btns { width: 100%; height: 30px; background: #6e6e6e; text-align: center; &:nth-child(odd) { background: #3e3e3e; } &:nth-child(…
JavaScript $("[href^='#']"); document.querySelector("[href^='#']"); こちらで#からはじまるhref属性を持つ要素を取得できます。 JavaScript $("a[href^='#']"); document.querySelector("a[href^='#']"); aタグだけに限定することもできます。 CSS [href…
まねてみました。 DEMO See the Pen Button by kimmy (@kimmy) on CodePen. SCSS body { background: #1e1e1e; } .btn { box-sizing: border-box; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding-top: 8px; border: soli…
まねてみました。 DEMO See the Pen PIN by kimmy (@kimmy) on CodePen. SCSS body { background: #333; } .dots { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 156px; height: 12px; @for $i from 0 through 4 { &[da…
HTML <p>a = b<sup>2</sup></p> DEMO これで指数も表現できます。
kimizuka.hatenablog.com以前つくったもの が不格好だったので再度挑戦してみました。 HTML <div class="btn"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> SCSS body { background: #333; } .btn { box-sizing: border-box; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margi…
以前、Androidで画像を保存させないために四苦八苦しました がCSSでメニューの表示を止めれることを教えてもらいました。kimizuka.hatenablog.com CSS .touch-callout { -webkit-touch-callout: none; } DEMO iPhoneではばっちりでしたが、Androidには無視さ…
DEMO See the Pen Scroll Icon by kimmy (@kimmy) on CodePen. HTML <div class="mouse"></div> SCSS body { background: #3e3e3e; } .mouse { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: solid #fff 2px; border-radius: 12px; width: 24px; hei…
つくってみました。3Dでつくって視点を回転させています。 DEMO See the Pen CODEPEN by kimmy (@kimmy) on CodePen. HTML <ol class="box"> <li class="surface front"></li> <li class="surface back"></li> <li class="surface left"></li> <li class="surface right"></li> </ol> SCSS $size: 100px; html { width: 100%; height: 100%; } body { …
html要素に backface-visibility: hidden をかけるとブラウザの背景が透けてOSの背景が見えます。 CSS html { -webkit-backface-visibility: hidden; } DEMO 是非ともAndroid（2.3.X）でご確認ください。
全要素にbackface-visibility: hiddenをかけるだけで、なんということでしょう。 Android2.3.Xにてフォームにテキスト入力するたびにガクガクとスクロールがとまりません。 是非ともおてもとのAndroid2.3.Xでご確認ください。 CSS * { -webkit-backface-visi…
動的に変更＆プレビューできることを知りました。便利ですね。
本日、うまれてはじめて background-attachment: fixed をつかってみたのですが、固定した画像が大きすぎたせいか、ページのスクロールが大変重たくなってしまい、急遽 position: fixed に差し替えました。 background-attachment: fixed; position: fixed; …
kimizuka.hatenablog.com以前ページの右にあるいいねボタンのダイアログ対策についてメモを残しました が、今回はページ下部用の対策です。方針はまったく一緒で、fb_iframe_widget_liftクラス がついたときの position を指定しています。 .fb_iframe_widge…
