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. Chromeで翻訳する方法

    Web Information

    Chromeで外国語のWebサイトのページを翻訳する方法

    Chromeで普段使用する言語以外の外国語のWebサイトにアクセスする…

  2. Web Information

    MacのReederでPocketに送るためのショートカットを作成

    MacのReederでPocketに簡単に送れるようにするためのショー…

  3. CSS Dig

    Web Information

    CSSをプロパティから解析してくれるChrome拡張機能「CSS Dig」

    CSS DigというChrome拡張機能を使ってみました。今まであまり…

  4. Web Information

    iPhone版Pocketで横スクロールした際に次の段落まで飛ぶ機能を無効にするやり方

    iPhoneのPocketが好きで、個人的に結構使ってるんですが、横ス…

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

    Web Information

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP