デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
[JS]レスポンシブデザインもOK、水平タイプのナビゲーションをいい感じにするスクリプト -HorizontalNav
リスト要素で実装した水平タイプのナビゲーションのスタイルを壊すことなく、配置エリア・表示サイズに合わせて最適化するjQueryのプラグインを紹介します。 HorizontalNav [ad#ad-2] HorizontalNavのデモ HorizontalNavの使い方 HorizontalNavのデモ 水平タイプのナビゲーションの見た目は通常、成り行きや指定したサイズになりますが、HorizontalNavを使用すると配置エリアのサイズに合わせて各アイテムのサイズを均等にします。 デモ：480pxで表示 上：未適用はが成り行きで二段になってしまう幅になっても、下：適用の見た目は損なわれません。 HorizontalNavの使い方 実装は4ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//aja
[JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+
レスポンシブWebデザインの簡単な作り方 [ホームページ作成] All About
レスポンシブWebデザインの簡単な作り方レスポンシブWebデザインとは、ユーザの画面サイズやブラウザのウインドウサイズに応じて適用CSSを分けることで、閲覧環境に合ったデザイン・レイアウトでウェブページを表示するデザイン方法のことです。レスポンシブWebデザインのメリットやデメリットなどの基本から、CSSソースのサンプル、簡単に作れるフレームワークやテンプレートを紹介。 レスポンシブWebデザインとは レスポンシブWebデザイン(Responsive Web Design)とは、アクセス者の閲覧環境に応じて適用するCSSを切り替えることで、ウェブページのデザインやレイアウトを自動的に変化させるデザイン方法ことです。主に、ブラウザのウインドウサイズや端末の画面サイズのような「描画領域の横幅」に応じてデザインを切り替えます。 レスポンシブWebデザインを使うと、端末の種類ごとにウェブサイトを分
![レスポンシブWebデザインの簡単な作り方 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/a770c6d0b1827b2940ee539f9ebd1accbf26e365/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F9%2F6%2F7%2F8%2F7%2Ftopimg_original.png)
【レスポンシブデザイン】お役立ちサイトのチャンプルまとめ。 | バシャログ。
あ、sass3.2来てら。hakoishiです。 横目に見つつ、本日はレスポンシブまとめ。 構想の参考にしたい事例から、実制作で役立つ技術記事までチャンプルです。 ギャラリー 21 Inspiring Unique Responsive Web Design Examples 海外のレスポンシブ事例集。 Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたアーカイブサイト タイトルの通り、国内のレスポンシブ事例集。 スマホ、タブレット、PCのプレビューが表示されていてザッピングにも便利。 Responsive Layouts, Responsively Wireframed 汎用的なワイヤー例。右上のナビでPC、モバイル表示を切り替えてみましょう。 直感的で解りやすいので、お客様への説明にも使えるのではないでしょうか。 あと、このサイト自
30 Examples of Responsive Website Design
Nowadays, people are browsing websites using multiple devices like PCs but also smartphones and tablets and adapting the website layouts to fit each gizmo is becoming a must. It seems that web designer`s mission is harder than ever. But is it true? Welcome to post-pc era. People are slowly but certainly switching from PC use to phones and tablets.Looks like this new devices are receiving more atte
スマホでスライド形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider JavaScript touch control slider」
スマホでスワイプ形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider JavaScript touch control slider」 スマホでも画像ギャラリー的なことやりたいですよね。 jQueryプラグインのTouchSlider — JavaScript slide contentを利用するとスマホでスワイプ形式のスライドギャラリーを導入することができます。 もちろんPCでも動作しますので、レスポンシブ・ウェブデザインにも良いかもしれません。 sponsors 使用方法 TouchSlider — JavaScript slide contentからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javas
ヘッダは上部固定で、フッタは最下部にするスタイルシート、レスポンシブにも対応！ | コリス
ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。 Sticky footer with fixed navbar コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！ デモ Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。 デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。 デモのコンテンツ量が少ないため、狭い表示エリアで。 デモページ：幅780pxで表示 実装 実装はデモを必要最小限にしたもので、紹介します。 HTML 上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。 <body> <div
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
