#08|Divブロックについて

サイト構築において最も基本的で汎用性の高い要素であるDivブロックの概要について説明します。

目次

Divブロックは、HTML文書内の区分を定義するもので,ウェブサイトを構築する際に使用される最も基本的で汎用性の高い要素です。

ボタン、コンテナ、セクションはすべてDivブロックであり、特定のプロパティを追加したものです。

最も一般的な使い方は、”他の要素をグループ化すること”です。 Divブロックは、スペースを作ったり、仕切ったりするなど自由自在に使うことができます。

1.Divブロックの追加方法

Div block icon thumbnail
Divブロックのアイコンサムネイル

Divブロックは、「要素」パネルからプロジェクトに追加することができます。下の例では、見出し、段落、ボタンがセクション内にありますが、テキストは読み取れません。

Divブロックを追加して、この3つの要素をドラッグすることで、1つの要素として編集・制御することができます。Divブロックの幅を50%に設定すると、中のコンテンツも50%になり、文字が読みやすくなります。

The five elements that are included in the basic section are Div block (highlighted), list, list item, link block and button.

Divブロック要素の選択:ベーシックブロックに含まれている5つのアイテムから「Div Block」を選択。

2. Divブロックのスタイリング

右側のスタイルパネルを使って、Divブロックのスタイルを設定できます。例えば、Divブロックに背景色をつけたり、ドロップシャドウをつけたりすることができます。

背景を追加する

Step one on the left, click on the color button in the backgrounds section of the styling panel. Step two on the right, select the color you want to set as the background.
  1. (左)スタイリングパネルの背景セクションにあるカラーボタンをクリックします。
  2. 右側の背景に設定したい色を選択します。

ドロップシャドウを追加する

Step one on the left, select the Box shadows effect under the effects section in the styling panel. Step two on the right, the box shadow settings panel displays type, angle, distance, blur, size and color settings.
  1. (左)スタイリングパネルの効果セクションで「ボックスシャドウ」効果を選択します。
  2. 右側のボックスシャドウの設定パネルで、タイプ、角度、距離、ぼかし、サイズ、色の設定を表示します。

パディングの追加方法

Divブロックの端と中のコンテンツの間にスペースを追加するパディングを設定することも可能です。クリック&ドラッグでパディングを調整できます(下の例のように)。Shiftキーを押しながらドラッグすると、4辺を一度に調整することができます。

The Spacing section displays margin and padding settings, also a center element horizontally button.

セクションには、マージンとパディングの設定と、「要素を水平に中心化」ボタンが表示されます。

Divブロックの中に要素を配置すると、中のコンテンツに応じた大きさに自動的に調整されます。

下の例では、Divブロックの中に要素が入った状態になっています。Divブロックを中央寄せにすると、コンテンツも中央寄せになります。

The spacing section of the styling panel is displaying the Center element horizontally button highlighted.
スタイリングパネルのスペーシングセクションでは、「Center element horizontally」ボタンがハイライト表示されています。

幅を50%に設定する方法

On the left, the navigator displays a div block containing a H1 Heading, Paragraph and button elements. On the right, the width of 50% is highlighted on the size section in the style panel.

左側には、H1見出し、Paragraph、button要素を含むDivブロックがナビゲータに表示されています。右側では、スタイルパネルのサイズセクションで、が50%であることが強調表示されています。

Divブロックは、他のDivブロックの中に配置することもできます。

4. Divブロックの複製

Divブロックとそのコンテンツは、複製することができます。Divブロックを複製すると、他の要素と同様に、その要素に付属するクラスとスタイルも複製されます。1つのDivブロックに加えたスタイルの変更は、同じページや別のページにある、同じクラス名を持つほかのDivブロックすべてに影響します。

Two div blocks in separate sections are highlighted on the navigator panel. Each Div Block contains an H1, paragraph and button element.
ナビゲーターパネルでは、2つのDivブロックが別々のセクションで表示されています。
各Divブロックには、H1、段落、ボタン要素が含まれています。

5. Divブロックの複製方法

  1. 右クリックで複製
    Divブロックを右クリックして、「Duplicate・複製」を選択
  2. ショートカットで複製
    Divブロックを選択して、Cmd + C(Mac)またはCtrl + C(Windows)を押してから、Cmd + V(Mac)またはCtrl + V(Windows)を押して別の場所へペーストできます。

また、Command + X(Macの場合)またはControl + X(Windowsの場合)で切り取り、Divブロックを配置したい要素を選択してから、Command + V(Macの場合)またはControl + V(Windowsの場合)で選択した要素の下部に貼り付けることもできます。

6. リンクブロックに変換する

Divブロックをリンクブロックに変換すると、そのブロックとコンテンツが他のリソースにリンクされます。レイアウトでコンテンツをグループ化する際に、リンクブロックではなくDivブロックを使っていたことに気づいた場合などに便利です。

Divブロックをリンクブロックに変更するには、Divブロックにリンク要素が含まれていないことを確認し、Divブロックを右クリックしてリンクブロックに変換します。