去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
Appleウェブサイトのレスポンシブなナビゲーションが「うまい！」と思う4つの理由
こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。 最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。 ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです！ 目次 マルチデバイス時代のナビゲーション 理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している 理由2： 見せられるときは、しっかり見せている 理由3： コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙 理由4： その時必要なナビ
【レスポンシブ対応】複数のブロックに分かれたリストを１つにまとめる | バシャログ。
ここ最近、Huluでは「メジャー」、「ダイヤのＡ」と野球アニメを見続けている kouraku です。おかげ様で、今年の甲子園はいつも以上に楽しんでみることができました。 さてさて、フロントエンドではレスポンシブ対応が当たり前になってしまったので、毎回毎回「あれ、どうするんだっけ？」と悩まないようにちょっとずつメモ書きを残していこうと思います。ということで、今回は複数ブロックに分かれたリストを1つにまとめる方法をメモメモ。 ※ここでは、768px以下はSP用レイアウトとして扱います。 複数ブロックを1行1列に 例えば下図の様なことをやりたい場合。 ※ここでは、横並びのスタイルは float で当てます。inline-blockでもよいのですが、SP用の書き換えを少なくするため、ここでは float を採用しています。 上図の様に PC から SP へとスタイル変更するには、 floatしてい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
