製品ガイド

bitlock MINIや各種製品についてのお悩みなどを解決します

2026-03-05
更新

webflowでできること(テストページ)

見出し下の説明文

‍これはH1です。

これはH2です。

これはH3です。

これはH4です。

これはH5です。
これはH6です。

‍通常のテキスト

下が開くテキスト

上が開くテキスト

引用
  • 箇条書き
  • 箇条書き
  1. 番号リスト
  2. 番号リスト

マテリアルシンボルを入れてみる

home

コードブロック

<p class="custom-text">ここにコンテンツを入力します</p>

画像の説明文

ここからHTML embed

warning
注意

電池があるか確認してください

‍バナー系

info

ここに本文が入ります。

error

本文が入ります

lightbulb

本文が入ります

画像の横並び

画像1
画像2
画像3

選んだ画像に合わせた選択肢の表示ver2

画像1

画像1の詳細コンテンツ

PCではカード列の下に広がり、スマホではカードのすぐ下(アコーディオン)に展開されます。

  • グレーの背景色は消えています
  • ドット(・)が綺麗に表示されます
リンクも自由に入ります
画像2

画像2の詳細

  1. 黄色の背景色も消えています
  2. 数字が綺麗に表示されます
画像3

p、button、a、listなど自由に配置可能です。4個目、5個目と追加したい場合は、HTMLをコピーして下にペーストするだけで自動認識します。

A:画像クリックで外部リンクに遷移(スマホ幅では縦並びになるコード)
※ styleを上書きされてしまうが、同時に使うことはないため一旦コピー用に置いておく

B:画像クリックで外部リンクに遷移(スマホ幅でも横並びを保つコード)
※ styleを上書きされてしまうが、同時に使うことはないため一旦コピー用に置いておく

ABの比較用

パターンA:スマホで1列(縦並び)

パターンB:スマホで2列(正方形)

リスト系のカスタムを外す

以下のリストには、確実にドットと番号が表示されます。

  • ドットがつく箇条書きの1つ目です。
  • ドットがつく箇条書きの2つ目です。文章が長くなって2行目に折り返しても、綺麗に頭が揃います。
  1. 番号リストの1番目です。
  2. 番号リストの2番目です。