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. Chromeの複数タブをまとめて閉じるショートカットキー

    Web Information

    Google Chromeで指定した複数タブをまとめて閉じるショートカットキー

    ちょっと便利だったのでメモがてらご紹介します。Google Chrom…

  2. ブラウザをメモ帳にするやり方

    Web Information

    ブラウザのURL欄に一行入力するだけでメモ帳にすることができる

    とてもおもしろかったのでご紹介。ブラウザのURL欄にたった一行入力する…

  3. Animated SVG Image Slider
  4. New Tab Redirect

    Web Information

    Chromeの最初の画面(新規タブ)をアプリ一覧にする設定方法

    Chromeで新規タブを開いた時などに表示される最初の画面をアプリ一覧…

  5. 常用漢字筆順辞典

    Web Information

    読み方がわからない漢字を手書きで調べれるiPhoneアプリ「常用漢字筆順辞典」

    常用漢字筆順辞典という読み方がわからない漢字を調べる際にとても役立つi…

  6. Gmailの送信メール取り消し設定

    Web Information

    Gmailで送信メールを取り消し(キャンセル)する設定方法

    先日、GmailのWeb版に送信メールの取り消し機能が採用されたのでさ…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP