レッスン内容
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ブロックを使う方がよいでしょう。