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

WordPressでアイキャッチ画像にキャプションを表示させる設定方法前のページ

これは凄い!色んなCSSを生成してくれるジェネレーター「Generate CSS」次のページ

関連記事

  1. Web Information

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

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

  2. Google英語版でWeb検索

    Web Information

    Googleの英語版でWeb検索して検索結果を表示させるやり方

    Google の英語版でWeb検索をする必要があったのでその時のやり方…

  3. Amazon.co.jpのほしい物リストに追加

    Web Information

    Amazon以外のサイトからでもAmazonのほしい物リストに追加できるChrome拡張機能

    ちょっと便利そうだったのでインストールしてみました。普段Chromeを…

  4. Googleブログ検索

    Web Information

    Googleブログ検索がなくなったと思ったらまだちゃんとあった

    Googleブログ検索を検索結果ページから絞り込んでよく利用していたん…

  5. Adobe Creative Cloud Cleaner Tool

    Web Information

    AdobeのCreative Cloudでインストールトラブルが起きた時は「CS Cleaner T…

    AdobeのCreative Cloudでインストールトラブルが起きた…

  6. Web Information

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP