Responsive Full Width Tabs

Web Information

レスポンシブなタブパネルを実装できる「Responsive Full Width Tabs」

Responsive Full Width Tabsというレスポンシブなタブパネルがとてもよさそうだったのでご紹介します。フルサイズではタブメニューにアイコンとテキストが表示されているんですが、モバイルサイズになってくるとアイコンのみのタブメニューに切り替わります。

[ads_center]

Responsive Full Width Tabs

デモページ

以下はPCサイズで閲覧した時のものです。

PCサイズでの閲覧

続いてタブレットサイズ。

タブレットサイズでの閲覧

最後はスマホサイズでの閲覧。

スマホサイズでの閲覧

表示する画面サイズによってレイアウトが見やすいように最適化されます。実装方法は以下のページに詳しく載っているので、気になる方は是非チェックしてみて下さい。

Responsive Full Width Tabs

関連記事

  1. Web Information

    iPhoneのアラームを無音でバイブや光のみで知らせてくれる便利アプリ「サイレントタイマー」

    静かな場所でiPhoneのアラームをかけたい時に便利なアプリ「サイレン…

  2. iPhoneのスクリーンショットを片手で撮る

    Web Information

    iPhoneのスクリーンショットを片手で撮る方法(AssistiveTouch活用)

    iPhoneのスクリーンショットを片手で撮りたいと思う時ってありますよ…

  3. Web Information

    Yahoo!知恵袋もRSS登録することができるだっていうのを最近知った

    Yahoo!知恵袋もRSS登録することができるんですね。最近知りました…

  4. CSSViewer

    Web Information

    特定の要素のCSSを手軽に確認できるChrome拡張機能「CSSViewer」

    CSSViewerというChrome拡張機能を使ってみました。特定の要…

  5. iPad Airのテンプレート素材(PSD)

    Web Information

    デザインやモックアップに役立ちそうなiPad Airのテンプレート素材(PSD)

    iPad Airのテンプレート素材(PSD)がとてもよかったのでメモが…

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP