このサイトは、WEBサイト制作における
基本的なテクニックなどを、
目的ごとにアーカイブしていく、
初級WEBクリエイター向けの備忘録的な
サイトです。
このサイトは、WEBサイト制作における
基本的なテクニックなどを、
目的ごとにアーカイブしていく、
初級WEBクリエイター向けの備忘録的な
サイトです。
シンプルになりがちなリンクボタンのデザインですが、いつもと違うスタイルを取り入れたい、他のボタンよりも目立たせたいときに使えそうなアイデアを考えてみました。 マウスオンでアニメーションも付けてあります。気になるデザインが […]
ドロップダウン形式のグローバルナビメニューをカスタマイズして、パネル形式＆イメージ画像を表示できるメガメニューのコードサンプルを作ってみました。 リンクごとに画像を表示するので、商品カテゴリーなど、ユーザーに訴えかけたい […]
Webサイトの主要ページへのリンクをまとめたグローバルナビメニューは、ユーザービリティを考慮したわかりやすい設計が求められます。サイトのページ数が多い場合は、ナビメニューに掲載できる表示範囲も限りがあるため、工夫が必要に […]
WEBサイトを訪れた際に、ユーザーに興味を引いてもらう手法の一つに、「ポップアップ」表示があります。ECサイトでは、販促クーポンの配布など、キャンペーンページに誘導したり、企業サイトでも、重要なお知らせを表示する際に見る […]
「Javascript」を使用しないハンバーガーメニューの実装方法について、以前の記事でご紹介しましたが、表示するドロワーメニューのアニメーションはバリエーションが豊富に存在します。 今回は、オフキャンバスと呼ばれる、画 […]
スマートフォンサイトに限らず、PCサイズのサイトにも使われることが多くなった、三本線でメニューボタンを表すハンバーガーメニュー。Javascriptを使わずに、「HTML」のinput要素と「CSS」だけで実装する方法に […]
前回は基本編として、ページトップへ戻るボタンをHTMLとCSSで設置する手順をお伝えしましたが、今回は、ボタンの表示やスクロールスピードの制御を、jQueryで行う実用的な方法をご紹介します。 HTML・CSSのコーディ […]
jQueryは、Webページの構築において非常に便利なJavaScriptライブラリの一つです。 JavaScriptライブラリとは、JavaScriptのプログラムを書きやすくするために、使用頻度の高いコードや効果など […]
最近のウェブサイトでは、スマートフォンでの表示のように、縦に長いコンテンツになることが当たり前になっていますよね。ユーザービリティを考えると、このページトップへ戻るボタンを設置することが必須ではないでしょうか。 今回は、 […]
