| CARVIEW |
Select Language
HTTP/2 200
server: nginx
date: Fri, 10 Oct 2025 17:50:45 GMT
content-type: text/html; charset=UTF-8
content-length: 17002
last-modified: Fri, 10 Oct 2025 06:32:52 GMT
vary: Accept-Encoding
content-encoding: gzip
[CSS]軽量のスタイルシートで、スマホにもデスクトップにも快適で分かりやすいナビゲーション -Paradeiser | コリス
[CSS]軽量のスタイルシートで、スマホにもデスクトップにも快適で分かりやすいナビゲーション -Paradeiser
Post on:2015年9月16日
sponsorsr
スマホで表示すると三本線のアイコンになるハンバーガーメニューは、確かに小さい画面の問題を解決する方法の一つですが、ベストな選択ではありません。
ハンバーガーメニューの良い点を利用し、悪い点を改善した、スクリプト無しでレスポンシブ対応のナビゲーションを実装するスタイルシートを紹介します。
Paradeiserの特徴
- 実装は簡単で、超軽量
- Paradeiserは1.3KBのスタイルシート1つだけで、簡単に実装できます。
- CSS Only
- jQueryやスクリプトは使用しません。
- レスポンシブ対応
- スマホ、タブレット、デスクトップのそれぞれで快適に操作できます。
- オーバーフロー
- ナビゲーションはコンテンツにオーバーフローで表示されます。
- スクロール時の非表示にも対応
- 「Headroom.js」を使うことで、スクロール時に自動的に非表示・表示にできます。
Paradeiserのデモ
ハンバーガーメニューの悪い点は分かりにくいアイコンと全てのアイテムが隠されてしまうことです。
参考: The Hamburger Menu Doesn't Work
Paradeiserはこの2つの問題を解決し、スマホでもタブレットでもデスクトップでも快適に操作できるよう設計されたナビゲーションです。
まずは、デスクトップ時の状態で見てみましょう。
上部のバーに表示されるナビゲーションにはロゴを含む主要なリンクを3-5個が配置され、それ以外は右端のドロップダウンで表示されます。
デモページ: ドロップダウン
基本的なデザインはスマホ時でも同じで、ロゴを含む重要なリンクは常に表示された状態です。
デモページ: 幅480pxで表示
Paradeiserの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
<head> ... <link rel="stylesheet" href="paradeiser.min.css"> </head>
Step 2: HTML
nav要素の中に各アイテムを配置し、ドロップダウンはリスト要素で実装します。
<nav class="paradeiser">
<a href="#">
<img src="logo.png" alt="Logo" class="paradeiser_logo">
</a>
<a href="#">
<div class="paradeiser_icon_canvas">
<img src="img/menu_home.svg" alt="Navigate to Home">
</div>
<span>Home</span>
</a>
<a href="#">
<div class="paradeiser_icon_canvas">
<img src="img/menu_shop.svg" alt="Navigate to Shop">
</div>
<span>Shop</span>
</a>
<!-- paste in as many links as you want -->
<!-- and include the dropdown aswell -->
<span class="paradeiser_dropdown">
<a href="#paradeiser-more" id="paradeiser-dropdown">
<div class="paradeiser_icon_canvas">
<img src="img/menu_overflow.svg" alt="">
</div>
<span>More</span>
</a>
<ul class="paradeiser_children" id="paradeiser-more">
<li><a href="#">Terms of Service</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Yolo</a></li>
<li class="paradeiser-hidden-desktop"><a href="#">Hidden on desktop</a></li>
<li class="paradeiser-hidden-tablet"><a href="#">Hidden on tablet</a></li>
<li class="paradeiser-hidden-phone"><a href="#">Hidden on phone</a></li>
<li id="greybox"><a href="#!"></a></li>
</ul>
</span>
</nav>
スクロール時にバーを非表示にする場合
「Headroom.js」を使うことで、下にスクロールした際にバーをアニメーションで上部に隠し、上にスクロールした際にバーを表示させることもできます。
<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script>
<script>
// enabling to open the overflow menu as the pure css link
// would toggle a scroll and therefore hide the menu
document.getElementById("paradeiser-dropdown").addEventListener("click", function(event){
// stopping the scroll
event.preventDefault();
// toggling the class
document.getElementById("paradeiser-more").classList.toggle("open");
});
// hide the menu on click onto greybox
document.getElementById("greybox").addEventListener("click", function(event){
// stopping the scroll
event.preventDefault();
// toggling the class
document.getElementById("paradeiser-more").classList.remove("open");
});
// enabling headroom
var myElement = document.querySelector(".paradeiser");
var headroom = new Headroom(myElement, {
tolerance : 5,
onUnpin : function() {
document.getElementById("paradeiser-more").classList.remove("open");
}
});
headroom.init();
</script>
sponsors
Related Posts
関連記事が見つかりませんでした。
Sponsors
" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==" class="lazyload" style="--smush-placeholder-width: 291px; --smush-placeholder-aspect-ratio: 291/225;">
Recnet Entry
- 異世界や空想世界の創作に役立つ数学、物理、地学、生物学などの知識や技術に溢れた解説書 -空想世界をつくる理科の教科書
- このUIデザインかっこいい！ 近未来をテーマにしたUIコンポーネントとデザイン要素のセット -Cosmic UI
- Amazonのプライム感謝祭セールで、見逃しがちなお買い得品を紹介します
- これは見逃したら後悔する！ iPad版のAffinity Photo 2, Designer 2, publisher 2がなんと0の無料！！
- Amazonでプライム感謝祭セールが開催！ 私が購入して本当によかったものをご紹介
- WordPressのノーコード化が進んでいる！ 6.8対応、たいていのことはこの一冊で分かる解説書 -WordPressの教本 第7版
- 小規模なアップデートだけど、Web制作者は要チェック！ Chrome 141で新しく追加されたCSSとUIに関する機能
- デザインの勉強にもいい！ 色や配色や色彩心理などの知識をしっかり学べる色彩検定の新しい教科書 -すいすい学べる色彩検定2級・3級
Pickup Entry
- 2025年用、日本語のフリーフォント767種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
- 手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ
- ピクセルフォント・ビットマップ・電卓数字の日本語フリーフォント 総まとめ
- おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
- 商用利用無料、国内のフリーイラスト素材の総まとめ
- 商用利用無料、おしゃれでシンプルなかわいい海外のフリーイラスト素材の総まとめ
- フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
- いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
- 背景素材に困った時に！ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ
- 2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」
- 色々な色の名前、伝統色の名前が分かるサイトのまとめ
- VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利
- 最近の実装に合わせたHTMLテンプレート
- 5分で完璧に分かる！CSS Gridの基本的な使い方を解説
- 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
- CSS Flexbox の各プロパティの使い方を詳しく解説
- CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
- CSSの中央揃えで、最も万能で信頼できる実装テクニック
- 2025年、現在の環境に適したリセットCSSのまとめ
- 2024年版、CSSフレームワークのまとめ
- Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
- Font Awesome アイコンの使い方と便利な機能のまとめ
- Photoshopの新機能がかなり便利！かゆいところに手が届く改善点が盛りだくさん
- Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
- 2025年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
- ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
- フォントやタイポグラフィの知識・テクニックを学ぶまとめ
- レスポンシブ対応のWordPressのテーマファイルのまとめ
- プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
- 写真がもっと楽しくなる！写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ
- 黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
- 黄金比をサイトのデザインに取り入れる簡単な３つの方法
- フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集
- 美しい日本語を使いたい、ワンランク上のビジネスメールの作法
- 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
Category
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss