MANA-DOT

PIXEL ART, PROGRAMING, ETC.

css

レスポンシブなCSSスプライト

よく知られたCSSスプライトはボックスの幅・高さをスプライト画像と同じに指定し、background-position をずらすことで複数のスプライト画像を含むスプライトシートの中から対象画像だけを表示します。 この方法だと表示できる画像のサイズは固定なのですが、…

はてなブログでレスポンシブデザインが利用できるようになっていた

はてなブログのデザイン設定画面を久しぶりにいじってみたら、スマホのデザインをいじる機能と、PCのデザインをレスポンシブデザインとしてスマホでも利用できる機能が追加されていたので、このブログをレスポンシブデザインにしました。

bootstrap-sass でレスポンシブなはてなブログのテーマを作る

最近このブログのテーマを一新しましたが、その際に Bootstrap を利用しました。 はてなブログで Bootstrap を利用するために、sass によるセレクタの継承、uncss による不必要なセレクタの除去と一手間かけたので、その方法を紹介します。

ブログのサイドバー追尾の個人的最適解。コンテントとサイドバーのスクロール速度を変えてみる

まとめブログなど、メインコンテントとサイドバーの2カラム構成で、メインコンテントが非常に長いサイトでよく見るサイドバーの動きで、スクロールしてサイドバーをすべて表示したら、その箇所からサイドバーをスクロールに追尾させるというものが有ります。…

切り替えスイッチをCSSでつくる

画像のような切り替えスイッチをHTMLとCSSだけで作ります。