【固定ページ】テスト

タグテスト

タブボタン連動

上部コンテンツ1
上部コンテンツ2
上部コンテンツ3
下部コンテンツ1
下部コンテンツ2
下部コンテンツ3

①タブ切り替え

記事1のタイトル

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

池袋で証明写真を撮影するならどこ?スタッフ独自リサーチ!駅構内や駅付近の撮影場所を解説!18

記事2のタイトル

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

八王子で証明写真を撮影するならどこ?スタッフ独自リサーチ!駅構内や駅付近の撮影場所を解説!17

記事3のタイトル

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

八王子で証明写真を撮影するならどこ?スタッフ独自リサーチ!駅構内や駅付近の撮影場所を解説!17

①タブ切り替え2

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

①タブ切り替え4

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

①タブ切り替え5

コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5

①タブ切り替え6

コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5
コンテンツ6

②ボタン切り替え

商品1

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

MAJOLICA MAJORCA:パフ・デ・チークPK301ピーチマカロン

商品2

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

パーフェクトスタイリストアイズ[23] アーモンドカヌレ

商品3

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

ドラマティックパウダリー EX

⑥ボタン切り替え

商品1

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

MAJOLICA MAJORCA:パフ・デ・チークPK301ピーチマカロン

商品2

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

パーフェクトスタイリストアイズ[23] アーモンドカヌレ

商品3

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

ドラマティックパウダリー EX

商品4

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

ドラマティックパウダリー EX

商品5

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

ドラマティックパウダリー EX

商品6

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

ドラマティックパウダリー EX

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

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

④モーダル表示1

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

久屋大通駅からの行き方10

店舗までの道順

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

久屋大通駅からの行き方10

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

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

スタジオインディのロゴ
x 閉じる

④モーダル表示2

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

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

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

x 閉じる

⑤選び方のポイントdiv

タイトル

スタジオインディ神戸TOP

1タイトル

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

大宮で証明写真を撮影するならどこ?スタッフ独自リサーチ!駅構内や駅付近の撮影場所を解説!17

1タイトル

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

⑥アコーディオン機能

テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト テキストテキストテキストテキスト
全部見る

⑦画像のカルーセル機能

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

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

ディオール アディクト リップ ティント
就活証明写真で加工いらずのベースメイクのやり方をプロが解説:フィラデルム モイスチャークリーム
ケープキープウォーター ハード
レブロン カラーステイ ロングウェア メイクアップ
MAYBELLINE NEW YORK:ブロウインク 3Dスタイリングジェル 04 キャラメルブラウン

    ⑧比較テーブル

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

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

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

    商品名 画像 スコア 人気 ポイント
    商品A
    ディオール アディクト リップ ティント

    商品詳細

    ディオール アディクト リップ ティント

    これがh4になります

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

    これがh5になります

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

    • 選択肢1
    • 選択肢2
    • 選択肢3

    Check

    • テキスト
    • テキスト
    • テキスト
    全長 1785mm
    全幅 580mm
    重量 33.1kg
    乗車適応身長(大人) 142cm以上
    サドル最大高さ 86.5cm
    サドル最小高さ 73cm
    変速段数 3段
    充電時間 約4.0時間
    1充電あたりの最大走行距離 強:51km/スマートパワーモード:58km/オートエコモード+:75km フロントバスケット
    フロントバスケット
    付属品 不明
    走行モード 強モード、スマートパワーモード、オートエコモードプラス、アシストオフモード
    低床フレーム 不明
    充電方法 専用スタンド
    全部見る
    ここにリンクボタン
    x 閉じる
    ★★★★★ 1位 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    商品B就活証明写真で加工いらずのベースメイクのやり方をプロが解説:フィラデルム モイスチャークリーム★★★★2位テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    商品Cケープキープウォーター ハード★★★★3位テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    商品Dリップティント N:OPERA★★★★4位テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

    ⑩テーブル横罫線

    全長 1785mm
    全幅 580mm
    重量 33.1kg
    乗車適応身長(大人) 142cm以上
    サドル最大高さ 86.5cm
    サドル最小高さ 73cm
    変速段数 3段
    充電時間 約4.0時間
    1充電あたりの最大走行距離 強:51km/スマートパワーモード:58km/オートエコモード+:75km フロントバスケット
    フロントバスケット
    付属品 不明
    走行モード 強モード、スマートパワーモード、オートエコモードプラス、アシストオフモード
    低床フレーム 不明
    充電方法 専用スタンド
    全部見る

    ⑫カルーセルテーブル

    ・列(.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
    リップティント N:OPERA

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

    商品A

    ★★★★★ 5.0
    ニゼル ドレシア ホールドフィットヴェール

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

    商品A

    ★★★★★ 5.0
    ニゼル ドレシア ホールドフィットヴェール

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

    商品A

    ★★★★★ 5.0
    黒彩ヘアカラースプレー

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

    ⑭並列画像

    タイトル

    タイトル

    タップすると拡大します

    ⑮-1マルバツボックス

    〇 良い

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

    × 気になる

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

    ⑮-2マルボックス

    〇 良い

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

    ⑮-3バツボックス

    × 気になる

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

    ⑮-4チェックボックス

    Check

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

    ⑮-4フリーボックス

    この記事でわかること

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