cssのz-indexの重なり順で困ったときにしてみたこと

css z-index

z-index設定したけど変なところで他のコンテンツが重なって見えなくなる!!とか、こんな経験ないですか?それってz-index戦争起きていませんか?今回は、僕がz-index戦争が起きなければいいな〜と思いから対応した内容をまとめます。きっともっといい方法をあると思うので、こんな風にやるやつもいるのか程度で見ていただけると嬉しいです。

CSSだけでできちゃう!overflow:scroll;を使った簡単なスライダー

CSSだけでできちゃう!overflow:scroll;を使った簡単なスライダー

今回はcssのoverflow:scroll;を使って簡単なスライダーを紹介します。Spotlightとかグノシー(アプリ)でも使われていますね。
iPhoneでは全く問題なく動きますし、Androidでも何機種かは確認できましたがちゃんと動きます。(動かない端末もあるかもですが・・・。検証しきれていません。すいません。)

超お手軽CSSプリプロセッサMythを使ってみよう

Myth

googleで検索してみたけど、あんまり人気ないんですかねMythって。正直いうと僕もついこないだまで知らなかったんですけど、新しい現場に移ったんですが、そこで使っていたんですよね。なので勉強がてら記事にしようかと思います。とはいっても学習コストがとても低いプリプロセッサなのでチュートリアルではなく紹介です。

compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう

compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう

最近はsassやcompassに関する記事ってかなり目にするようになりましたよね。書籍も本屋さんに置いてあったりして、注目度の高さが伺えます。sassやcompassを使用する際には必ずコンパイルが必要になりますよね。今回はgulp(タスクランナー)を使って自動化しちゃいましょう。
そこまで設定するのって結構、手順が多いので僕もよく忘れるんですよね。なので忘れないように覚書です。ではcompass(scss)で書いてgulpでコンパイルするとこまでやってみることにしましょう。

レスポンシブに対応したcssフレームワーク Materializeを使ってみた感想

レスポンシブに対応したcssフレームワーク Materializeを使ってみた感想

仕事で使えそうないい感じのcssフレームワークを探していました。datepickerがついてて、レスポンシブに対応したものって感じで。
今回は、Materializeっていう結構いい感じのcssフレームワークを見つけたので、ざっくりご紹介します。

viewportの指定はどうするのが適切なのかいろいろ検証してみた

viewportの指定はどうするのが適切なのかいろいろ検証してみた

実際に緊急で対応した経験なんですが、レスポンシブでもないし、スマホサイトがあるわけでもないPCサイトをスマホで見るときに困ったことがありました。なのでviewportの指定とメディアクエリの組み合わせをいろいろ検証してみたのでそのまとめです。

ページの先頭へ