2016.07.27 Wed

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

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

2016.04.30 Sat

様々な正多角形をCSSで再現する

東京オリンピックのエンブレムが十二角形を基準としているという話を聞いて、CSSで十二角形を作るにはどうやるんだろと思ってやってみたらあっさりできてしまったので、いっそのこと色々な多角形をCSSで作ってみようということで作…

2016.03.09 Wed

「SHOKI JOETAKI OFFICIAL」WOTDを受賞致しました

先月のことですが、CSS DESIGN AWARDSという国際的なWebデザインのアワードがあるのですが、こちらに、先日制作させていただいた「SHOKI JOETAKI OFFICIAL」のWebサイトを応募しましたとこ…

2015.12.29 Tue

【CSS】animationプロパティを使ったマウスホバーエフェクトの巻き戻し

CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。 そんな時…

2015.10.11 Sun

MAMPで本番環境のWordPressサイトをデータベースごとローカルに構築する

El CapitanにアップデートしたらMAMPがおかしくなってしまったので、これを機に新しいバージョンのMAMPをインストールして、せっかくなのでデータベースごと本番環境のWordPressサイトをローカルに構築した際…

2015.09.24 Thu

[After Effects] 文字を書き順通りに徐々に表示させるアニメーションの作り方

文字を書き順通りに塗りつぶしていくアニメーションが必要になったので、After Effectsを使ってアニメーション（動画）を作成しました。After Effectsは、あまり使う機会がなく、たぶんすぐ使い方を忘れてしま…

2015.06.21 Sun

CSSのブレンドモードを使った3Dのような表現

使いどころがよく分からなくて、CSSのブレンドモードは、今まで一度も使ったことがありませんでした。対応ブラウザが少ないというのもありますし。 イメージでは背景色と背景画像をブレンドするものと捉えていましたが、実際には複数…

2015.06.05 Fri

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

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

2015.05.31 Sun

カラーミーショップで配列の中身を確認する方法

タイトルの通りで、カラーミーショップで使用されている独自タグの配列の中身を確認したくて、調べてみると意外にもできたのでメモ。 カラーミーネタはあまり需要がなさそうなんですが、案件で使ったりするので、今後の為に備忘録として…