みかづきブログ その3

3ヶ月つづけてみました。

CSS

Grunt作業メモ その3

kimizuka.hatenablog.com kimizuka.hatenablog.com 以前、GruntからGulpに移行しかけたんですが、なんだかんだでGruntに戻ってきてしまいました。 Jadeも導入して、Gruntファイルを更新したのでメモを残しておきます。 ディレクトリ構成 以前のものから、Jad…

iOS8とiOS7ではサブピクセル(小数点以下のピクセル)のレンダリング結果が異なる

ドット絵でランニング - みかづきブログ その3kimizuka.hatenablog.comcodepen.ioこちらの記事 のコンテンツをつくっているときに気づきました。 scssの変数にいれていたのでうっかりしたのですが、こちらのコンテンツ、$DOT_GAP を 1 / 2 にしてつかってい…

ドット絵でランニング

surprise_window_makermaker.kimizuka.org5年前につくったこちらのコンテンツ ですが、PCが壊れたタイミングで.flaファイルをロストしてしまいました。。。 なおしたいところがいろいろあるので、JavaScriptに移植していこうと思い、とりあえずドット絵の部…

擬似クラス :target をつかう

CSS

:targetdeveloper.mozilla.org CSSでつかう CSS #ki:target { color: red; } #sho:target { color: red; } #ten:target { color: red; } #ketsu:target { color: red; } という感じで、idのtarget属性を指定すると、URLのhashにID名がついているときの見栄え…

続・Googleフォームの見た目を強引にカスタムする(投稿完了画面編)

CSS

Googleフォームの見た目を強引にカスタムする - みかづきブログ その3kimizuka.hatenablog.com前回はGoogleフォームのフォーム画面に対し強引にスタイルを当ててみました が今回は、より強引な手段をつかって投稿完了画面を編集してみたいと思います。以前は…

スマフォ用軽量カルーセルをつくろう その3

kimizuka.hatenablog.com kimizuka.hatenablog.com以前つくったもの を改良しました。 自動送りとユーザー操作のタイミングが重なったときの対策をいれました。 touchend が発火しないことのあるAndroid にも対応させるべく、touchmoveにイベントを張りまし…

compassで画像をbase64にする

CSS

普段、画像のbase64化には こちらのツール をつかっていましたが、最近compassに任せることができることを知りました。画像をBase64に変換するツール (data URI scheme) - シングスブログblog.thingslabo.com 記述方法 SCSS background-image: inline-image(…

grunt-contrib-cssminでminifyしたbackground-imageが一部Androidで表示されない

先日Android端末でbackground-imageが表示されずに悩んでいたら、grunt-contrib-cssmin が原因でした。github.com 現象 SCSS .btn { background: url(/img/btn.png) center center no-repeat; background-size: contain; } 上記のようなSCSS(backgroundでイ…

スマフォ用軽量カルーセルをつくろう その2

スマフォ用軽量カルーセルをつくろう - みかづきブログ その3kimizuka.hatenablog.com以前制作したスマフォ用カルーセル ですが、関係各所からの要望により、先頭と最後をループさせるように改良しました。方針としては、 先頭と最後尾にループ用の要素を増…

background-blend-modeを試す

CSS

さくっと試せるデモをつくってみました。background-blend-modedeveloper.mozilla.org DEMO

擬似クラス :empty をつかう

CSS

:emptydeveloper.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…

iOS7.X, Android4.Xではbody要素に overflow: hidden をあてても効かない

DEMO http://jsrun.it/kimmy/kFam 効きません。 1つ要素をかませれば効くようになります。 DEMO http://jsrun.it/kimmy/h0mF

iOSで -webkit-overflow-scrolling: touch をつかうと上に要素がかぶっていてもスクロールしてしまう。

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フォームの見た目を強引にカスタムする

CSS

Googleフォームをiframeで埋め込むとこんな感じです。でもこれではいまいち美味しんぼ感がでませんね。そこで、CSSを。あーして。こーして。そいや!ほんのり美味しんぼ感がでてきましたね。 カスタム手順 iframeのURLにアクセス ソースをまるっとコピー コ…

DOMをセレクトするときに正規表現的な文法をつかう

CSS

属性セレクタには完全一致以外の選択方法が用意されています。 [attr] attr という名前の属性を持つ要素を表します。[attr=value] attr という名前の、値が正確に "value" である属性を持つ要素を表します。[attr~=value] attr という名前の、値がスペースで…

スマフォ用軽量カルーセルをつくろう

CSS

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>

Pug(Jade)・Coffee・SCSSに逆変換するウェブサービスまとめ

なんだか本末転倒のような気もしますが、覚えておくと既存サイトをリニューアルする際などに便利です。 HTML → Pug(Jade) html2jade.org JavaScript → Coffee js2.coffee CSS → SCSS css2sass.herokuapp.com

擬似要素をCSSアニメーションで動かそうとするとAndroidで動かない機種がでてくる

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…

keyframeアニメーション終了時に終了時の状態を維持する

CSS

結論からいえば、animation-fill-modeプロパティを forwards にすればOKです。animation-fill-modedeveloper.mozilla.org DEMO CSS .box { position: absolute; top: 0; margin: 10px; width: 0; height: 0; background: #3e3e3e; box-shadow: 0 0 10px rgba…

Androidで動的にdata属性を変更した際に、属性セレクタで指定したスタイルが適用されない時がある

CSS

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;…

inline-blockで横並びにする際はfont-sizeにも気を配る

CSS

親要素からの縦位置と、(改行している際は)要素同士の横の間隔に関係してきます。 SCSS @import "compass/reset"; .btns { width: 100%; height: 30px; background: #6e6e6e; text-align: center; &:nth-child(odd) { background: #3e3e3e; } &:nth-child(…

jQueryでページ内リンクを取得する

CSS

JavaScript $("[href^=#]"); こちらで#からはじまるhref属性を持つ要素を取得できます。 JavaScript $("a[href^=#]"); aタグだけに限定することもできます。 CSS [href^=\#] { } ただの属性セレクタなので#をエスケープすればCSSをあてることもできます。 de…

iOSのボタンをCSSでまねる

CSS

まねてみました。 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…

iOSのロック画面のエラーの際の動きをCSSでまねる

CSS

まねてみました。 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…

subタグで上付き文字を表現する。

CSS

HTML <p>a = b<sup>2</sup></p> DEMO これで指数も表現できます。

メニューボタンと閉じるボタンをトグルさせる その2

CSS

メニューボタンと閉じるボタンをトグルさせる - みかづきブログ その3kimizuka.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; posi…

スマートフォンで長押しのメニューを表示させない

以前、Androidで画像を保存させないために四苦八苦しました がCSSでメニューの表示を止めれることを教えてもらいました。kimizuka.hatenablog.com CSS .touch-callout { -webkit-touch-callout: none; } DEMO iPhoneではばっちりでしたが、Androidには無視さ…

CSSでスクロールを促す

CSS

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…

CSSでCODEPENのロゴをつくる

CSS

つくってみました。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 { …

Android 2.3.X でブラウザの背景を透かす

html要素に backface-visibility: hidden をかけるとブラウザの背景が透けてOSの背景が見えます。 CSS html { -webkit-backface-visibility: hidden; } DEMO 是非ともAndroid(2.3.X)でご確認ください。

Android 2.3.X でテキスト入力すると画面がスクロールする

CSS

全要素にbackface-visibility: hiddenをかけるだけで、なんということでしょう。 Android2.3.Xにてフォームにテキスト入力するたびにガクガクとスクロールがとまりません。 是非ともおてもとのAndroid2.3.Xでご確認ください。 CSS * { -webkit-backface-visi…

ChromeのデベロッパーツールでCSSアニメーションのイージングを確認する

CSS

動的に変更&プレビューできることを知りました。便利ですね。

background-attachment: fixed を position: fixed におきかえる

CSS

本日、うまれてはじめて background-attachment: fixed をつかってみたのですが、固定した画像が大きすぎたせいか、ページのスクロールが大変重たくなってしまい、急遽 position: fixed に差し替えました。 background-attachment: fixed; position: fixed; …

ページの下部にいいねボタンを置いてダイアログが開かれたときにつじつまを合わせる

CSS

ページの右側にいいねボタンを置いてダイアログが開かれたときにつじつまを合わせる - みかづきブログ その3kimizuka.hatenablog.com以前ページの右にあるいいねボタンのダイアログ対策についてメモを残しました が、今回はページ下部用の対策です。方針はま…

position: fixed の要素の親に transform: translate3d をかけると position: absolute 的な挙動をするようになる。

CSS

表題のとおりです。 GPUレンダリングを有効にしたいからといって、 * { transform: translate3d(0, 0, 0); } 的なコードを書いているときに注意が必要です。 HTML <main id="main"> <div class="inner"> <div id="btn"></div> </div> </main> SCSS html, body { height: 100%; background: #a3a3a3; } #main { position: relative;…

tap-highlight-colorをワイルドカードで指定するとAndroidで効かないことがある

kimizuka.hatenablog.comこの記事 の検証を行っているときに気づきました。セレクタに * をつかうと効かない機種があるようです。(Android 2.3.4で確認)

text-align: justify をつかってテキストを均等割り付けする

CSS

均等割り付けという言葉を初めて知りましたし、CSSで設定できることも初めて知りました。 text-align を justify に設定するだけでOKです。 text-align: left text-align: justify とても便利ですね。

CSSでテキストのアンチエイリアスの感じを調整する。

CSS

ChromeやSafariではテキストのアンチエイリアスの感じを調整できることを知りました。 DEMO 便利ですね。

Androdで文字が変な箇所で折り返される現象をbase64で対策する

一部Androidで文字が変な箇所で折り返される現象は、その要素に背景色をつけることによって解決します。ただし、transparent や rgba(0, 0, 0, 0) ではうまくいかないので、1px 1px の透過pngを敷き詰めたりしているかたが多いとおもいます。そんなとき、透…

Mobile Safari のリーダー表示でリーダーの情報を表示する

Safariのリーダー機能の仕様が公開されていないので、探り探り実装してみました。 DEMO http://jsrun.it/kimmy/reader ※ iPhone の Safari で御覧ください つかいかた URLにアクセスするとURLバーに 「Reader View Available」と表示されます。URLの左側のリ…

IE8, IE9 にて min-heightを設定した要素の子要素を高さ100%にした際の挙動

CSS

min-heightを設定した要素の子要素の高さを100%にしした際に気づきました。Chrome, Safari, Firefox, IE10, IE11 と IE8, IE9 で挙動が変わってきます。 DEMO Chrome, Safari, Firefox, IE10, IE11 の場合 bodyの高さが1200px以下の場合も#wrapperの高さは12…

IE11でFixedの要素がスクロール時にガタつく問題

CSS

まだ発生条件が完全にわかっていないのですが、IE11でposition: fixed;の要素がスクロール時にガタつくときがあります。 ユーザ側の対策としては、 インターネットオプション > 詳細設定 > スムーズスクロールを使用する のチェックを外したら直りました。 …

CSS で Chrome の恐竜を描く

CSS

DEMO See the Pen Chrome's Error by kimmy (@kimmy) on CodePen. HTML <div class="dinosaur position size"> <header class="head"> <div class="face"> <div class="eye"></div> </div> <div class="chin"><div> </header> <div class="body"> <div class="neck"></div> <div class="breast"></div> <div class="belly">…</div></div></div>

Sassでプレースホルダセレクタをつかって、CSSに書き出されないセレクタを書く

CSS

Sass .btn { display: block; cursor: pointer; } .redBtn { @extend .btn; width: 160px; height: 90px; background-color: red; } このSassをコンパイルすると、 CSS .btn { display: block; cursor: pointer; } .redBtn { display: block; cursor: pointe…

Chromeでposition: fixedの要素のz-indexがおかしくなる時があるような気がする

CSS

DOMをバリバリ動かすサイトをつくっていたとき、z-indexがある一定の値を超えると表示されなくなるという現象に悩まされました。 .tohoho { position: fixed; z-index: 60; } だと表示されるのに、 .tohoho { position: fixed; z-index: 61; } だと表示され…

Mobile Safariのランドスケープ表示(横向き)でページを拡大しないようにする

iPhoneは本体を横向きにしてランドスケープ表示にすると、Mobile Safari の表示が拡大します。 今回はこの機能をOFFにする方法をまとめます。 テキストの拡大をOFFにする body { -webkit-text-size-adjust: 100%; } または、 body { -webkit-text-size-adjus…

プリント用のCSSを書く

CSS

kimizuka.github.io kimizuka.github.io前回つくったGitHubページですが、 <link rel="stylesheet" href="./css/main.css" media="screen"> <link rel="stylesheet" href="./css/print.css" media="print"> と、PCディスプレイ用のCSSとプリント用のCSSをわけています。 * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; color: #000; f…</link></link>

CSSでメニューの裏の背景をぼかす

CSS

iOSとかでよくある演出です。Chromeで御覧ください。 filterのblurがポイントですね。 DEMO HTML <header id="header"> <div id="btn"></div> </header> <ul id="menu"> <li>MENU A</li> <li>MENU B</li> <li>MENU C</li> <li>MENU D</li> <li>MENU E</li> </ul> <div id="content"> <p class="ttl">ELEFANT</p> </div> SCSS * { margin: 0; padding: 0; b…

RGBでも色指定を試してみる

HSLでの色指定を試してみる - みかづきブログ その3 HSLでの色指定を試してみる - みかづきブログ その3前回HSLでの色指定 を試したんですが、意外におもしろかったので、ForkしてRGBバージョンもつくってみました。 DEMO もしかすると慣れるとHSLのほうがつ…

HSLでの色指定を試してみる

いままで body { background: #000; } body { background: rgb(0, 0, 0); } body { background: rgba(0, 0, 0, 1); } body { background: black; } などなど、 カラーコードやRGB(RGBa)、キーワードでの色指定は行ってきたことがあったのですが、 body { b…