タブボタン連動

①タブ切り替え

記事1記事2記事3

記事１のタイトル

記事１の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

記事2のタイトル

記事2の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

記事3のタイトル

記事3の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

①タブ切り替え2

①タブ切り替え4

①タブ切り替え5

①タブ切り替え6

②ボタン切り替え

商品1商品2商品3

商品1

商品1の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品2

商品2の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品3

商品3の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

⑥ボタン切り替え

商品1商品2商品3商品4商品5商品6

商品1

商品1の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品2

商品2の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品3

商品3の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品4

商品4の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品5

商品5の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品6

商品6の説明文。テキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。

③フローティングもくじボタン

全てのh2を目次対象としております。

④モーダル表示1

モーダル部分は自由入力です。

店舗までの道順

久屋大通駅から徒歩5分。３番出口から出て、大通りを左に見ながら進んでローソンの10メートル先です！

ご不明な点等ございましたら、下記までお気軽にお問い合わせください。

スタジオインディ就活写真 TEL: 000-0000-0000

x 閉じる

④モーダル表示2

拡大画像を表示させたいときは、モーダル部分に大きな画像を配置します。 ↑と同じなのでテキストなども挿入できます。

ディオールショウ サンク クルール

x 閉じる

⑤選び方のポイントdiv

タイトル

1タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

1タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

⑥アコーディオン機能

⑦画像のカルーセル機能

画像クリックで拡大画像が表示されるよう改良しました。 拡大表示用に大きいサイズの画像を配置してください。

.org_tag_slider01 をデフォルトでmax-width:350px にしています。
ここの値を変更するとサイズが変わります。
ただし、開発ツール上で変えても上手くいかない可能性があります。
※jsで動かしている関係です

⑧比較テーブル

・横スクロールテーブルは、thタグの”min-width”に適切な値を入力してください。

・この値の足し算で全体の横幅が決まります。

・１列目を固定したい場合は、tr内の１番目のth,tdに、position:sticky; を指定してください。
　※１列目の指定方法は例えば、.org_tag_table_sticky th:nth-of-type(1) です。

商品名	画像	スコア	人気	ポイント
商品A	商品詳細 これがh4になります 説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 これがh5になります 説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 テキストテキストテキストテキストテキストテキストテキストテキストテキスト。 選択肢１ 選択肢２ 選択肢3 Check テキスト テキスト テキスト 全長 1785mm 全幅 580mm 重量 33.1kg 乗車適応身長（大人） 142cm以上 サドル最大高さ 86.5cm サドル最小高さ 73cm 変速段数 3段 充電時間 約4.0時間 1充電あたりの最大走行距離 強：51km／スマートパワーモード：58km／オートエコモード＋：75km フロントバスケット フロントバスケット ✔ 付属品 不明 走行モード 強モード、スマートパワーモード、オートエコモードプラス、アシストオフモード 低床フレーム 不明 充電方法 専用スタンド 全部見る ここにリンクボタン x 閉じる	★★★★★	1位	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
商品B		★★★★	2位	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
商品C		★★★★	3位	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
商品D		★★★★	4位	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

⑩テーブル横罫線

⑫カルーセルテーブル

・列(.org_tag_table02__item) の min-width を変更することで各列の幅を変えられます。

・各行(.org_tag_table02__col) にはスタイルを適用にしていないので、独自スタイルを充ててください。

・各行(.org_tag_table02__col) は、div を h3 など別なタグに変更しても問題ありません。

商品A

★★★★★ 5.0

説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品A

★★★★☆ 4.0

説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品A

★★★☆☆ 3.0

説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品A

★★★★★ 5.0

説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品A

★★★★★ 5.0

説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品A

★★★★★ 5.0

説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

商品A

★★★★★ 5.0

説明文。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。

⑭並列画像

タイトル

タイトル

タップすると拡大します

⑮-1マルバツボックス

⑮-2マルボックス

⑮-3バツボックス

⑮-4チェックボックス

⑮-4フリーボックス