ShopDD

今回紹介するのはCSSで実装されているHoverエフェクトのライブラリである「Izmir Hover Effects」です。このIzmir Hover Effectsで公開されているのはCSSのHoverエフェクトのデモなのですが、12種類のかっこいいマウスHover時のアニメーションを見ることができます。公開されているのは12種類ですが、1000ものスタイルの組み合わせを使うことができます。 大昔ではこういうアニメーションをするにはJavascriptやFlashを使わないと...

今回紹介するのはHTML+CSSだけで走る馬のアニメーションを実装されているClip Clop Clippity Clop [CSS Only]という作品です。CodePenに実物がアップロードされているのですが、黒い馬が颯爽と走っている風景がHTMLとCSSだけで表現されています。CSS3アニメーションを用いることでJavascriptなどは使用していません。 このようにHTML+CSSだけで絵を描くというのは、一部のWEBデザイナーやコーダーでは行われているもので、私も過...

今回紹介するのはHTMLとCSSを使ってFPSゲームなどでよくあるような3D空間を表現した技術デモサイトである「CSS FPS」のサイトを紹介したいと思います。HTML+CSSで表現できることの幅広さと可能性を感じさせる素晴らしいサイトなので見たことがない人はぜひ訪れてみることをおすすめします。 このサイトではHTML+CSS+Javascriptを使って3D空間を作成しており、FPSゲームのようにPCではキーボード、スマホなどではタッチを駆使して...

今回紹介するのはMicrosoftが無償で提供しているソースコードエディタであるVisual Studio Code(VS Code)です。VS CodeはWindows/Mac/Linuxの全てで動作します。私は個人的にプログラムを書く際には、エディタのこだわりは特になかったのですが、ちょっとVS Codeを使ってみたらかなり良かったのでおすすめのエディタとして紹介したいと思います。 エディタといえば昔からVimとEmacsがエンジニア間でエディタ戦争を繰り広げている...

今年の2月にデザインや機能において大幅なアップデートを行ってから順調に利用者が増えているNetaGearですが、今回無限スクロールに対応して今までよりも見やすくなりました。また、登録サイトも大幅に増やしたので、登録カテゴリーをさらに4ジャンル増やして、今までよりも多くのサイトの記事を見られるようになりました。 また、それ以外にもお気に入り登録や閲覧履歴の上限を以前の倍に増やしました。以前は200件ほどでしたが...

本日よりShopDDのテンプレートデザインをVer3.5にアップデートしました。今回のアップデートでは見た目はあまり変化がないですが、内部コンテンツを大幅に書き直して高速化を図っています。ここ数ヶ月の間いろいろと検証しつつ、久しぶりにかなりコードをいじりました。 アップデート内容としてはコードの近代化と無駄の削除、高速化、モバイル対応が主になっています。デザインでは見やすさと利便性いう面に着目して、細かい追加...

NetaGearは2010年から公開している画像を一切使わずhtmlとCSSだけでサイトをデザインしたサイトです。そのNetaGearですが、今回古くなっていた内部プログラムを1から書き直し、お気に入りやマイリスト、サイト除外などの機能を追加したNetaGear ver3として大幅なアップデートを行いました。 またデザイン面では以前のNetaGear ver2の大まかなデザイン自体を踏襲しながら、いらない部分は削除して見やすいように1カラムデザインに...

このサイトもここ最近ではスマホでのアクセスが増えてきたということもあり、今さらながら現在のサイトデザインをスマホ用デザイン(レスポンシブWebでブラウザの表示領域で変化)に対応しました。年末から少しずつ時間を作って制作していたのですが、やっとのこと完成したのでついに公開です。 以前までもタブレット用の表示はあったのですが、スマホからこのタブレットモードの表示を見るとちょっと見にくいという問題があったの...