サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
design.aekana.com
ページ数やコンテンツが多いサイトだと、カテゴリーの階層が深くなり、導線の設置がどうしても多くなってしまいます。 導線の設置が分かりづらいと、ユーザーは目的のページにたどり着けない場合も。 そんな時はグローバルナビゲーションに導線をまとめることをおすすめします。 カテゴリ分けも分かりやすく、ページ全体がすっきりとまとまります。 このような表示領域を広く使ったドロップダウンメニューのことをメガメニューと呼びます。 そんなメガメニューが簡単に実装できるjQueryプラグイン「megamenu.js」の実装方法をご紹介します。 作成したデモはこちらです。 DEMO GitHubからmegamenu.jsをダウンロードする GitHubからmegamenu.jsをダウンロードします。 megamenu.js 画面右側の「Clone or download」のボタンを押して、「Download ZIP
よくビジネス系のページや若者向けのページに多いのが、背景を斜めにしてその上にテキストを乗せるパターン。 背景を斜めにするだけで、躍動感が出て、デザインセンスがぐっと上がります。 覚えておくと便利なので、デモを作成しました。 斜めの背景帯+帯の下に背景画像+レスポンシブ対応になっています。 DEMO HTML <div class="bg_1"> <div class="contents"> <div class="contents_inner"> <!--帯の中のコンテンツ--> </div> </div> </div> .bg_1 { width: 100%; height: 400px; background-image: url(画像URL); background-size: cover; background-position: center; padding: 35% 0 0
CSSで表現できるボタンのマウスオーバーのエフェクトをまとめました。 ボタンのデザインを充実させるとクリック率・コンバージョン率アップにも繋がります。 そのままコピー&ペーストできますので、時間短縮にぜひご活用ください。 ※デモはPC環境でご覧ください 2018/8 CSSボタンデザイン記事を追加しました。 コピペでできる立体的なCSSボタンデザイン集 CSSだけで表現できる押したくなるボタンリスト 1. ボタン基本形 まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。 フォントの大きさや種類は適宜変更してください。 !importantは当サイトに合わせた記述ですので、基本的に外してください。 <a href="" class="btn btn01">HOVER</a> .btn { padding: 15px 70px; font-weig
このページを最初にブックマークしてみませんか?
『design.aekana.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く