UNORTHODOX WORKBOOK

2016.08.17 Wed

GulpでSVGスプライトを自動生成する

前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。 ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示さ…

2016.08.08 Mon

外部SVGファイルを非同期で読み込み、インラインのSVGスプライトとして利用する

SVGスプライトを外部ファイルとして読み込みたくて、色々と調べたり試してみたりしていたのですが、外部SVGをAjaxで非同期読み込みするという方法が一番しっくりきたので、その方法を紹介します。 SVGスプライトといっても…

2016.07.27 Wed

CSSだけで一覧ページのレイアウトを切り替える

よくあるやつですが、カード型デザインみたいな一覧ページのレイアウトをクリック一発で別のレイアウトへ変更するやつです。 JavaScriptだったり、別ページを用意したり、パラメーターつけたりで変更することもできると思いま…

2015.06.05 Fri

全画面の背景画像をCSSのマウスホバーで切り替える(画像のプレロードあり)

全画面に設置した背景画像をマウスホバーで切り替える方法。全画面の背景画像を含め、全てCSSだけでやっています。 切り替えるだけであれば、間接セレクタを使ってマウスホバー時の背景画像を用意しておけばいいだけなので、結構簡単…

2015.03.22 Sun

JSを使わずにアニメーションしながら展開するドロワーメニュー(スライドメニュー)の実装方法

Javascriptを使わずに、HTMLとCSSだけでアニメーションしながら展開するドロワーメニュー(スライドメニュー)を実装する方法です。 クリックでドロワーメニューを展開させる場合、jQuery等でちょっとしたプログ…

2015.03.12 Thu

[CSS] 1つのdiv要素だけでゲームボーイを再現してみた

暇だったので、CSSグラデーションの勉強がてら、1つのdiv要素にCSSだけでゲームボーイ本体を再現してみました。画像を使わずにほぼCSSだけでやっています(テキストの部分だけ画像を使用しました)。 CSSでゲームボーイ…

2015.02.16 Mon

CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ)

jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用に…

2015.02.09 Mon

非表示にしたメニューをクリックでモーダルウィンドウ風に画面いっぱいに表示する

最近良く見かけるメニューですね。メニューボタンをクリックするとモーダルウィンドウが画面いっぱいに広がって項目が表示されるやつ。今まで一度も使ったことがなかったので、流行ってる(?)し、試しにちょっと作ってみました。 ta…

2015.02.01 Sun

[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー

このサイトでも使用している(2015年1月現在)パタッと開いてパタッと現れるサイドメニューを実装する際に、CSSの transform:perspective を使用したんですが、少しはまった点があったので、復習を兼ねて…