Divブロックは、ウェブサイトを構築する際に使用される最も基本的で汎用性の高い要素です。ボタン、コンテナ、セクションはすべて、特定のプロパティを追加したDivブロックです。ある程度まで、Divブロックはどんなものにもなります。例えば、Divブロックはスペースを作ったり、仕切りとして使ったりできますが、Divブロックの最も一般的な使い方は、他の要素をグループ化することです。DivブロックはHTML文書内の区分を定義します。
Div blockを追加する
Divブロックは「要素」パネルから Webflow プロジェクトに追加できます。下の例では、見出し、段落、ボタンがセクション内にありますが、テキストが読めません。Divブロックを追加し、これら3つの要素を中にドラッグすることで、1つの要素として編集・制御することができます。Divブロックの幅を50％に設定すると、中のコンテンツも50％に設定され、テキストが読みやすくなります。
Divブロックの中に要素を配置すると、その中のコンテンツに合わせて自動的にサイズが調整されます。
下の例では、Divブロックの中に要素が含まれています。Divブロックをセンタリングすると、そのコンテンツもセンタリングされます。
DivブロックのスタイルDivブロックは、右側のスタイルパネルでスタイルを設定できます。例えば、Divブロックに背景色やドロップシャドウを設定できます。また、Divブロックにパディングを設定して、Divブロックの端とその中のコンテンツの間にスペースを追加することもできます。クリック＆ドラッグでパディングを調整できます（下の例のように）。Shiftキーを押しながらドラッグすると、4辺を一度に調整できます。
ネストDivブロック
Divブロックを他のDivブロックの中に配置することもできます。ここでは、Divブロックを別のDivブロックの中にドロップし、水平の仕切りのように見えるようにスタイルを設定しています。
- 新しいDivブロックを既存のDivブロックにドロップする
- 幅を100px、高さを2pxに設定する。
- マージンを調整してスペースを作る
- 背景色を追加する
Divブロックの複製
Divブロックとそのコンテンツを複製することができます。これには2つの方法があります：
右クリックで複製
- Divブロックを右クリックする（Divブロック内でクリックするための空きスペースが見つけにくい場合は、要素のラベルを右クリックする）。
- 複製を選択
ショートカットで複製
- Divブロックを選択
- Command + C（Macの場合）またはControl + C（Windowsの場合）を押してコピーする。
- Command + V（Macの場合）またはControl + V（Windowsの場合）を押して貼り付けます。
Divブロックを複製すると、他の要素と同様に、その要素に付属するクラスとスタイルも複製されます。1つのDivブロックに加えたスタイルの変更は、同じクラス名を持つ他のすべてのDivブロックに影響します。
Divブロックを複製したら、セクションやコンテナ、別のDivブロックなど、ページ上の別の場所にドラッグできます。また、Command + X（Macの場合）またはControl + X（Windowsの場合）を押して切り取り、Divブロックを配置したい要素を選択し、Command + V（Macの場合）またはControl + V（Windowsの場合）を押して選択した要素の下に貼り付けることもできます。
DivブロックをLinkブロックに変換する
Divブロックをリンクブロックに変換して、そのブロックとコンテンツを他のリソースにリンクさせることができます。これは、レイアウトでコンテンツをグループ化するときに、リンクブロックではなくDivブロックを使っていたことに気づいたときに便利です。
Divブロックをリンクブロックに変更するには、Divブロックにリンク要素が含まれていないことを確認し、Divブロックを右クリックしてリンクブロックに変換します。
Divブロックで要素間にスペースを作る
Divブロックを使って、他の要素の間に余白を作ることができる（高さや幅を設定して、他のコンテンツを押しやる）。しかし、この方法はスペースを作るのに理想的ではなく、長期的に追跡するのが難しい場合があります。一般的なルールとして、マージンやパディングを使って要素間にスペースを作り、どうしても必要な場合にのみDivブロックを使う方がよいでしょう。
