表題のとおりです。 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;…

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

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

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

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

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

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

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

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

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

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

http://kimizuka.github.io/ http://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%…</link></link>

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…

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

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

基本的には、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。が。一部Androidではこの設定を乗り越えてページをスクロ…

vw, vh, vmax, vmin をつかえばらくらく指定できます。 vw, vh 親のサイズに依存することなく、viewportを基準にサイズを指定できる単位です。 .viewport { width: 100vw; height: 100vh; } と指定すればviewportのサイズに対して100%、 .viewport { width: …

DEMO HTML <div class="btn"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> CSS body { background: #333; } .btn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 44px; height: 44px; cursor: pointer; overflow: hidden; .line { position: …

DEMO See the Pen hello world. by kimmy (@kimmy) on CodePen. HTML <div class="txt t0"> <p class="txt-copy"></p> <div class="txt-underline"> <div class="txt-cursor"></div> </div> </div> SCSS body { color: #333; font: 30px AvenirNext-Heavy; background: #a3a3a3; } .txt { position: absolute; top: 0; bott…

SCSSをつかうとセレクタをネストで書けるようになります。 その際、& ををつかうと1つ親のセレクタを参照できます。 SCSS .box { &.red { background: #dc5252; } } ↓ CSS .box.red { background: #dc5252; } SCSS .box { .blue & { background: #65b9c3; } …

DEMO See the Pen Box 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> <li class="surface top"></li> <li class="surface bottom"></li> </ol> SCSS $size: 200px; html { width:…

こちらの背景透過画像にシャドウを落としてみましょう。 box-shadow 画像の縁にshadowを落とせます。 CSS .img { box-shadow: 0 0 5px rgba(0, 0, 0, .5); } -webkit-filter: dropshadow 画像の縁ではなく、透過ではない部分にshadowを落とせます。 CSS .img…

これまで、UIView、Canvas要素の背景をグラデーションにしてきましたが、今回はCSSでDOMの背景をグラデーションにしてみます。 UIViewの背景にグラデーションを設定しよう。 - みかづきブログ その3 Canvasの塗りつぶし色にグラデーションを設定する - みか…

前回つくったもの を3D的な感じにしてみました。 CSSアニメーションを一時停止する - みかづきブログ その3 DEMO See the Pen plate that rotates by kimmy (@kimmy) on CodePen. HTML <div id="plate"> <div class="front">HELLO</div> <div class="back">WORLD.</div> </div> CSS body { background: #e3e3e3; } #plate { position:…

CSSアニメーションは animation-play-state: paused; で一時停止することができます。 animation-play-state: running; でアニメーションします。 DEMO クリックするとアニメーションが一時停止し、もう一度クリックすると再び動き出します。 内部的にはpaus…

以前、こんな記事 を書いてましたが、センタリングしたい要素のサイズが決まっている場合は今回の方法がいちばん簡単かもしれません。 CSSで子要素の縦位置をセンタリングしよう。 - みかづきブログ その3 DEMO HTML <div class="box"></div> CSS .box { position: absolute; top: 0…

beforeに対してtransformをかけて実装しました。 DEMO HTML <div class="wrapper"> <section class="red"> <h1>RED</h1> <p>sectionをななめに分割します。</p> </section> <section class="blue"> <h1>BLUE</h1> <p>sectionをななめに分割しときます。</p> </section> <section class="purple"> <h1>PURPLE</h1> <p>sectionをななめに分割してます。</p> </section> </div>

特定の要素を全画面(フルスクリーン)にするFullscreen APIこちらを参考にDEMOをつくってみました。 DEMO http://jsrun.it/kimmy/fullscreen HTML <div id="target"> <img src="http://jsrun.it/assets/5/O/F/h/5OFhg.jpeg" /> </div> <div id="btn" class="btn red adjust"> <div class=hole> <div class="inner">FULL</div> </div> </div> JavaScript (function…

Google FontsWEBフォントをつかったことがなかったので調べてみました。