1. >
  2. >
  3. cssだけでタブ切り替えしたい!デザイン3パターン

cssだけでタブ切り替えしたい!デザイン3パターン

タブのイメージ
メインコンテンツ内で紹介したいことが多すぎるとき、簡単にタブで切り替えして見やすくしたい! html・cssだけでできるタブ切り替えを紹介します。

レスポンシブ対応するベースソース

以下のHTMLとCSSがベースになります。 紹介するデザインは、このベースを入れたうえで追加してください。

ベースDEMO

コンテンツ 1
コンテンツ 2
コンテンツ 3
一般的なタブデザインです。 見やすくてわかりやすいので、これだけのほうがいい場合もあるかもしれません。

HTML

css

情報が見やすいタブデザイン

基本のHTMLに以下のcssを追加するだけでOKです。 切り替えボタンを繋げてみた感じです。 両サイドの丸角指定するため、labelにidを追加しています。 また、コンテンツ部分はセンター寄せにしていますが、お好みで外してください。

情報が見やすいタブのDEMO

コンテンツ 1
コンテンツ 2
コンテンツ 3

情報が見やすいタブCSS

ベースのcssを入れてから追加してくださいね。

吹き出し付きのタブデザイン

こちらも同様に基本のHTMLに以下のcssを追加するだけでOK。 afterで付け足しているだけです。少しポップな印象になりました。

吹き出し付きのタブDEMO

コンテンツ 1
コンテンツ 2
コンテンツ 3

吹き出し付きのCSS

にゅるっと出てくるドッグイヤー風タブデザイン

こちらも同様に基本のHTMLに以下のcssを追加するだけでOK。 ちょっとだけアニメーションを入れてみたバージョン。 にゅるっとさせていますが、もっと早い動きを入れたいときはtransitionの秒数(.数字s)を調整してください。

DEMO

コンテンツ 1
コンテンツ 2
コンテンツ 3

にゅるっと出てくるドッグイヤー風CSS

注意点

コピペでうまく動かないときにここをチェック!
  • ワードプレスの仕様で、勝手に<p>が入っていないか
    ※入っている場合は、ここをチェック
  • このサイトみたいに複数チェックボックスを使っていないか
    ※使っている場合は、nameとforで指定している名称を変更してみてください。
  • 同じidやクラス名が別で使用されていないか

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る