CSSのみで作れるレスポンシブ対応ナビゲーションメニューのコードスニペット10選！【後篇】
６．レスポンシブスティッキーヘッダー 前編でも紹介した、単一ページで遷移するデザインと同系統のナビゲーションです。 違いは、このナビゲーションはページ上部に固定された少し大きめのブロックがあるので、少し違ったテイストに見える点です。 ブラウザのサイズを小さくすると、ハンバーガーアイコンが楽しい動き方をすることがわかります。趣のあるスタイルですが、万人受けするものではないかもしれません。 それでも、単一ページで遷移するサイトやランディングページでこういった飾り気がないスマートなナビゲーションバーを使いたいなら、素晴らしいデザインです。 ７．レスポンシブ＆タッチフレンドリー 良くできたサイトというのは、カーソルを合わせるべきところが見てすぐわかるようになっていなければいけません。その点においてこのナビゲーションは、デザイナー心をくすぐるデザインになっています。 どんなサイズの画面にも対応してい
レスポンシブデザインでスマホだけアコーディオン | 野良人（のらんど）
CSSの装飾は省いて動作に最低限必要な部分だけ載せてあります。 デモ1 ※ブラウザ幅をアレしてご確認ください ポイント jQueryのslideToggleメソッドで開閉のアクションを行います クリックする.titleセレクタにpointer-eventsを設定して、PC表示ではクリックできないようにしておくことでスマホのみアコーディオンで開閉するようにします。 狭いブラウザ幅でクリックして閉じてからブラウザ幅を変更したら閉じっぱなしになる問題への対応 あんまり想定されない操作ではありますが… PCでブラウザ幅をブレイクポイント以下に狭める クリックでアコーディオンパネルを開→閉とする（この時jQueryによって要素のスタイル属性にdisplay:noneが追加される） ブラウザ幅をブレイクポイント以上に広げる こういう操作をすると、PC表示なのにアコーディオンパネルが閉じたまま開くことが
CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と
【コードからおさらい】HTMLとCSSを使ったマテリアルデザインの応用例まとめ14選！
Googleによる開発以来、様々なサイトやアプリケーションがマテリアルデザインを成功裡に取り入れています。今年はマテリアルデザインの年と言っても過言ではないでしょう。 マテリアルデザインとは、あらゆるメジャーなプラットホームやデバイスに対応可能にするとともに直観的に理解しやすいデザインのためにGoogleが作成したデザイン・ガイドラインのことです。 同じコンセプトをもったメジャー・ストリームであったフラットデザインに比べ、より視覚的・直観的に把握しやすいように奥行きや影などを使用し、「物質感」を出す点が特徴です。 本記事では、まだこの流れになじみがないという方や、よくわからないという方のために、CodepenからいくつかHTLMとCSSの実例を引っ張ってきました。 （画像をクリックするとCodePenにとびます） マテリアル・デザインを応用した各要素については次の記事を参考にしてみてくださ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
