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

    Webページやモバイルサイトで使いたいフリーのアイコンセット

    とてもいい感じにまとめられていたのでご紹介します。Webページやモバイ…

  2. CSSViewer

    Web Information

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

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

  3. Web Information

    TumblrにiPhoneからブックマークレットを使って簡単に投稿できるようにしてみる

    TumblrにiPhoneから簡単に投稿できたりするブックマークレット…

  4. URLをハイライト表示させるショートカットキー

    Web Information

    ChromeでURL欄にカーソルを合わせる(ハイライト表示)ショートカットキー

    最近覚えたChromeの役立つショートカットキーをご紹介します。URL…

  5. Web Information

    iPhoneとMacをUSBテザリングで接続するやり方

    前回iPhoneとMacをBluetoothテザリングするやり方を記事…

  6. Feedlyでカテゴリーのフォルダ名を変更

    Web Information

    Feedlyでカテゴリーのフォルダ名を変更するやり方

    Feedlyでカテゴリーのフォルダ名を変更するやり方をメモしておきます…

最近の記事

  1. M32ミニ
  2. CITTA TT5.0
  3. Kindle Oasis
  4. OWL-WDDESK01

アーカイブ

PAGE TOP