見出しのデザインに便利、Dressのbefore要素とafter要素の活用法

今回はホームページ作成サービス「BiNDup」のデザイン編集機能 Dressでも使えるCSSの「before要素」と「after要素」の入門編をお届けします。少々難しいのですが、見出しのデザインをカスタマイズしたいときなど重宝するので試してみてください。

before要素、after要素とは

before要素・after要素とは、CSSの擬似要素と呼ばれるセレクターの一種です。
この要素の特徴をものすごく簡易的に説明すると、CSSだけで段落の前後にコンテンツを挿入することができます。うまく使えば、見出しなどの装飾に活用できます。

以下、もう少し詳しい説明です。（読み飛ばしても大丈夫です）

少し専門的な話になってしまいますが、htmlで構成された要素にはボックスモデルが形成されます。
基本的にボックスモデルでは、文字通り要素全体を囲んだようなボックスが形成されるため、スタイルを指定すると段落パーツ全体にデザインが適用されます。
ボックスモデルの詳細は要素によって異なりますが、ここでは簡略化しています。

before要素とafter要素はこのボックスの内側の前と後に擬似的に生成されるコンテンツボックスです。この擬似的なボックスを使うことで、段落に対してより自由度の高い装飾をできるようになります。

Dressでbefore要素・after要素を追加

以下、Dressでbefore要素・after要素を使う方法です。
before要素を例に説明しますが、after要素でも手順は同じです。

Dressでデザインを編集したいパーツを選択し、「＋」ボタンで項目を追加していきます。

「オプションを設定（上級者向け）」をクリックします。

プルダウンからbefore要素（またはafter要素）を選択して「次へ」を押し、スタイル一覧へ進みます。

スタイル一覧でスタイルを設定してから項目一覧に戻ると、以下のようにbefore要素・after要素の項目が追加されています。
スタイルの設定については次の項目で説明します。

〈基本的な使い方1〉テキストを挿入する

before要素・after要素を追加後、スタイル一覧が表示されたら、スタイルを設定していきます。
まずはベーシックな使い方として、段落の前後にテキストを挿入してみます。

before要素・after要素は特殊なスタイル指定が必要となるため、まず「高度な設定を表示」を有効にしてから「＋」ボタンを押します。

表示された一覧の中から、「内容（content）」を選択します。
「内容（content）」はbefore要素・after要素を有効にするために、必ず必要な項目です。
一覧にない場合は既に追加されています

フォームに挿入したいテキストを半角クォーテーション（"）で囲んで入力します。
クォーテーションが全角にならないよう注意してください
サンプルではbefore要素に設定したので、タイトルの頭に＃が挿入されました。

before要素・after要素は独立しているので、この部分だけ文字色を変えたりできます。

日本語や全角記号などを使用する場合は文字化けすることがあるため、Unicodeエスケープシーケンスで入力する必要があります。
こちらのようなサイトを使って、表示したい文字をエンコードするようにしましょう。

こちらはエンコードした文字をafter要素に設定した例。after要素なので、タイトルの後に記号が挿入されました。

〈基本的な使い方2〉装飾する

擬似的に生成されたボックスを利用して、段落パーツを装飾することもできます。

before要素・after要素は「内容（content）」が指定されていないと生成されないので、まずここに半角クォーテーションだけ2つ（""）入力しておきます。クォーテーションだけならテキストは挿入されません。

以下、擬似的なボックスに背景画像でイラストを表示してみた例です。
before要素・after要素はデフォルトのままだと、幅や高さを意図した値にできないので「表示形式」でインラインブロックを指定しています。そして、表示位置を「縦方向の配置」や「余白」などで調整しています。

before要素・after要素を使う時の注意点

• before要素・after要素は一部のパーツには使用できません。例えば、画像（img）には使用できません。
• スマートモードだと構造的に意図したレイアウトにならないことがあります。意図した位置に配置できない時は、ブロックをエディタモードで編集してからの使用してみてください。

無料でBiNDupを使ってみるBiNDの制作事例を見る