すべての記事

せっかく優れたサイトを集めておりますので、まずはそれらをまとめた記事を書いていこうと思います。 制作事全般に通じますが、納期というのは最重要課題の1つです。納期を守るため、優先度が低い要素はカットされるなど「クオリティと納期のせめぎ合い」...

今回はグローバルメニューの登竜門、ドロップダウンメニューをCSSだけで作っていきたいと思います。 「transition」でアニメーションさせつつ、ひ孫階層まで対応したコードです。「なるべくコードはシンプルにわかりやすく」を意識して書いて行きます。 細...

レスポンシブレイアウトでのスマホビューが圧倒的に増えて来た昨今、アコーディオンメニューは、狭い画面でユーザーが必要な情報を任意で表示することができ、ユーザビリティの観点から見ても重要なテクニックの1つです。 ということで、今回はjQueryなし...

ひと昔前までは、ローディングアニメーションと言えばCSSアニメーションで円がクルクル回ってるだけだったり、ロゴが中央に表示されて消えていくだけだった印象ですが、今は趣向が凝ったローディングアニメーションのサイトがたくさんあります。 また、ロ...

jQueryでスライダーを実装したいけど、複雑なコードは書きたくない slickって聞いたことはあるけど、使い方がよく分からない… この記事は、slickの導入方法から基本的な使い方、さらには現場でよく使われるカスタマイズ例やトラブル対処法までを網羅した完...

以前「スプリットレイアウトの参考になるサイトまとめ」という記事を書きましたが、今回は実践編として実際にスプリットレイアウトのサイトを作成していきたいと思います。 サンプル 01.スプリットレイアウトとは その名のとおり画面をスプリット＝分割す...

みなさん、レイアウトが超簡単になるCSSのFlexbox使っていますか？ めちゃくちゃ便利なので私は使いまくっておりますが、指定できることが豊富なのでチートシートを作りました。 チートシートはそれぞれページ内リンクになっていて、クリックで詳細の解説...

人は初めて会う人の印象を３～５秒で決め、その決定材料となる情報のほとんどを「視覚情報」から得ています。 Webサイトにおいても同様で、インターネットユーザーはほんの数秒でそのサイトの判断をするということ。 私たちの脳はものすごいスピードで視覚...

当サイトに掲載する素敵なWebサイトを毎日収集していて、斜め上から見たような立体的なイメージ（アイソメトリックプロジェクション）を取り入れたサイトよく見るようになりました。 立体感があって印象的なデザインになるのでショーケースをまとめて見ま...

昨年くらいから見かけるようになった印象の「スプリットレイアウト」のサイト。 今回は「スプリットレイアウト」を取り入れる際の参考になるサイトをまとめてご紹介します。 スプリットレイアウトとは？ 「スプリットレイアウト」は「スプリットスクリーン...

最近ではWebサイトにアニメーションを取り入れるのが当たり前になってきています。 ひと昔前はフルフラッシュサイトで見かけたようなゴリゴリ動く表現がhtml5やCSS、JS・JQueryによって実装可能になりました。 今回はそんなアニメーションの表現が優れたサ...

こちらの記事の内容は古くなっています。もっと簡単にヘッダーを固定表示できる最新の記事をアップしましたので、下記のリンクよりぜひそちらをご覧ください。 スクロールしても固定表示されるヘッダーは珍しくありませんが、その方法はいくつかあります。...

position:sticky;はスクロールしたときに、要素が指定した位置に来たところから固定させることができるとても便利なプロパティです。 position:fixed;と似ていますが、position:sticky;ならjavascriptも書かないとできなかった難しい指定がたった2行ででき...