【まとめ】レスポンシブデザインで使えるメニュー3選＋１｜モバイルラボ
前回は「ハンバーガーメニュー」について紹介させていただきました。 今回はハンバーガーメニューだけではない、レスポンシブデザインでも使えて、変換ツール系でも利用できる、jQueryメニューをいくつかご紹介します。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに jQueryでサイトに合ったナビゲーションメニューを作ろう レスポンシブデザインで使える簡単メニュー「Naver」 レスポンシブデザインのサイトで今もよく見る形の、画面幅が小さい場合にグローバルメニューを、ハンバーガーボタンのメニューの中に隠すjQueryです。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに サンプルコードはこんな感じになります。 <nav> <a href="#">Home</a> <a href="#">News</a&
入会キャンペーン｜野村不動産プラウドクラブWEBキャンペーン
プラウドクラブに新規入会して頂きますと、オーストラリア旅行、AQUOSクアトロンTV、 サイクロン掃除機 他話題の賞品から、選べるプレゼントのチャンス！ 下記の賞品の中からご希望の賞品を1つ選択し、応募にお進み下さい。 最初に訪れるのは、グレートバリアリーフに囲まれたリゾートアイランド、ハミルトン島。島の滞在中は24時間レンタル可能なバギーで、いつでもゆったりと散策していただけます。 3日目にはプラウドCMの舞台になった「ホワイトヘブンビーチ」へ。日本では見られない、青い空と透き通る海、美しい白砂のコントラストをお楽しみ頂きます。自然豊かな観光地、ケアンズでは、ゴールドクラス席の高原列車で行くキュランダ観光へ出発し、コアラを抱っこして記念写真。オーストラリアの大自然を満喫いただける6日間です。 ※出発日は2014年の6月1日～30日の間からお選び頂けます。
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
