MENU
BLOG TOP›Study の記事一覧
2016.09.18 Sun
テキストエディタで正規表現の後方参照を使った置換(検索)を行う方法
テキストエディタで正規表現の置換(検索)を行う際に、一部分だけを残し、その他の部分を置き換える、いわゆる後方参照を使った置換ができることを知ったのでメモ。忘れそうなので詳細を記載します。 正規表現を使って置換ができるテキ…
2016.04.30 Sat
様々な正多角形をCSSで再現する
東京オリンピックのエンブレムが十二角形を基準としているという話を聞いて、CSSで十二角形を作るにはどうやるんだろと思ってやってみたらあっさりできてしまったので、いっそのこと色々な多角形をCSSで作ってみようということで作…
2015.06.21 Sun
CSSのブレンドモードを使った3Dのような表現
使いどころがよく分からなくて、CSSのブレンドモードは、今まで一度も使ったことがありませんでした。対応ブラウザが少ないというのもありますし。 イメージでは背景色と背景画像をブレンドするものと捉えていましたが、実際には複数…
2015.03.16 Mon
CSSフィルターを使って流体を表現する(+SVGフィルター)
滑らかに結合したような表現をCSSで実装する方法です。なんて言ったらいいか分からなくて、タイトルでは「流体」と表現していますが、要は「ぷよぷよ」みたいなやつですね。英語ではこういうのを「gooey」とか言ったりするみたい…
2015.03.12 Thu
[CSS] 1つのdiv要素だけでゲームボーイを再現してみた
暇だったので、CSSグラデーションの勉強がてら、1つのdiv要素にCSSだけでゲームボーイ本体を再現してみました。画像を使わずにほぼCSSだけでやっています(テキストの部分だけ画像を使用しました)。 CSSでゲームボーイ…
2015.03.08 Sun
CSSのclipプロパティを使ってテキストの一部を切り取って横へずらす
テキストにノイズがかかったようなアニメーションをCSSだけで実現したくて、とりあえずテキストの一部分だけを切り取って横へずらすことはできないかなと模索していまして、何かそれっぽい感じのことができたのでブログに残しておきま…
2015.02.05 Thu
[jQuery]スクロール量に応じて(連動して)、アニメーションさせる方法
アニメーションというか、jQueryでスクロールを監視して数値化し、それをリアルタイムに反映させることで滑らかに動かす方法。スクロール量に連動させているので、スクロールするたびにアニメーションのような滑らかな動きをします…
2015.01.22 Thu
Velocity.jsを使ったスムースなページ内スクロール
アニメーションについて色々と勉強している。jQueryのアニメーションはこま落ちするし、CSSのアニメーションは計量だけど、少し複雑だったり、同時に走らせたりすると、(Macだと特に)カクついてしまうことが多くて困ってい…
2015.01.18 Sun
VirtualBoxとmodern.IEでWin8.1+IE11の環境をいまさらMacに構築してみた
今まで、IE6~IE9の表示確認は、古いWindowsPCがあったのでそれで行っていて、実機で確認できていたので、わざわざ仮想環境とか必要なくて、今まで触れてこなかった。 このサイトをリニューアルした際に、SVGとかCS…
長野県北部を拠点にフリーランスとして活動しています。Webサイトの制作をメインに、グラフィックデザインなどの制作も行っています。 Twitter / GitHub / About