業務でよく使う！細部をデザインするDressカスタマイズ術

こんにちは！デザイナーのオモトです。
今日は、普段の業務の中でよく使う、Web制作サービス「BiNDup」によるDress機能のデザインカスタマイズテクニックを難易度とともに4つご紹介！今回はDressの基本操作がわかる方向けの上級者向けの内容となっています！
というのも、細部に凝ったデザインをBiNDで実現するべく、BiNDのプロフェッショナルであるDSデザイナーたちによる創意工夫が散りばめられているので、ややこしい設定をたくさんする必要がある、というのが大きいです。
そしてそれを、なぜこういう設定なのかを「理解」するのは、初心者にはさらに難しいでしょう！（※その部分については、本記事では解説しません）
とはいえ同じように設定すればできますので、ぜひがんばって真似して見てくださいね！
また記事の最後に、サンプルのサイトデータも配布していますので、うまくできなかった方も安心してください！

ブロック全体に囲み罫線

難易度：★★

サンプルを見る

画像と文字の組み合わせなど、複数をひとまとめに見せたい時に使用します。
１つの文章だけに囲み罫線を使いたい場合は、こんなややこしいことはせず、段落スタイルの「囲み」を使ったほうが早い可能性はあります！

1. ブロックの「全体」の「枠線」の「四方とも同じ」にチェック、実線・10px・色を入れる
2. ブロックの「全体」の「幅」。「幅の上限」を400pxなど任意のサイズに。
3. そのままだと画面左にブロックが寄ってしまうので、「余白」の「外側の余白」の左右のみ「自動」にチェックを入れます。すると画面中央に揃います。

注意

サンプルの例では、ブロックDressを使用しているので、ブロックの「全体」に対して設定を適用しています。サイト全体のDressで設定を行いたい場合は、「プレーンブロック」「アルバムブロック」に対して適用してください。

小見出しをアンダーラインで文章を強調！

難易度：★★★★

サンプルを見る
サンプルでは小見出しですが、同じように設定すればどの段落スタイルでも可能です！
CSSだと簡単に実装できるのですが…BiNDでやりたいとなるとこんな感じで一工夫が必要！

■小見出しに対しての設定
・「行の高さ」を「１.5」に
・「表示」の「表示形式」を「インラインブロック」に
・「配置」の「配置方法」を「相対配置」にする

■小見出しの「before要素」に対しての設定
・背景色を設定
・「高さ」を0.5eｍに
・「表示」の「表示形式」を「ブロック」に
・「表示」の内容」に「""」を入力
・「配置」の「配置方法」を「絶対配置」にする
・「配置」の「位置」の左右・下に「0」を入力
・「重なり順」を「-1」に

■中央揃えにしたい場合の設定（小見出しに対して）
・「配置」の「位置」の左に「50%」
・「表示」の「変形」に「translate(-50%,0)」

■右揃えにしたい場合の設定（小見出しに対して）
・「配置」の「位置」の左に「100%」
・「表示」の「変形」に「translate(-100%,0)」

タイトルにおしゃれなカギカッコをつける①

難易度：★★★★★

見出しを目立たせるのによく使います！
タイトルに使う頻度が多いのでタイトルに設定していますが、同じように設定すればどの段落スタイルでも可能です！
サンプルを見る

■「タイトル」への設定
・「余白」の「内側の余白」に適度に余白を入れる
・「配置」の「配置方法」を「相対配置」にする

■「タイトル」のbefore要素への設定
・「枠線」の上・左側に16pxの実線を入れる
・「幅」「高さ」を1.6emに（お好みで！罫線の縦位置が変わります。）
・「表示」の「表示形式」を「ブロック」に
・「表示」の内容」に「""」を入力
・「配置」の「配置方法」を「絶対配置」にする
・「配置」の「位置」の上・左側に「0」を入力

■「タイトル」のafter要素への設定
beforeと同じように、下・右側へ設定していきます。

・「枠線」の下・右側に16pxの実線を入れる
・「幅」「高さ」を1.5emに
・「表示」の「表示形式」を「ブロック」に
・「表示」の内容」に「""」を入力
・「配置」の「配置方法」を「絶対配置」にする
・「配置」の「位置」の下・右側に「0」を入力

インデント式リストを使った見出しと本文をまとめたおしゃれなカギカッコ②

難易度：★★★★★

サンプルを見る

インデント式リストに対して設定する事によって、見出しと本文のセットにカギカッコをつけることができます！また積み重ねられるので、商品のポイントを３つ伝える時などに利用でき、汎用性は高いです！

■インデント式リストに対しての設定
・「表示形式」を「ブロック」に（縦積みの設定）

■インデント式リストの「テーブル行（tr）」に対しての設定（縦積みの設定）
・「余白」の「外側の余白」の下を20pxに
・「表示形式」を「インラインブロック」に（縦積みの設定）
・「配置」の「配置方法」を「相対配置」に

■インデント式リストの「テーブルヘッダー（th）」に対しての設定（カッコ内のデザイン・縦積みの設定）
・背景色を設定（デザインの設定）
・適度に内側の余白を入れる（デザインの設定）
・「表示形式」を「ブロック」に（縦積みの設定）
・「フロート」を「フロートしない」に（縦積みの設定）

■インデント式リストの「テーブルコンテンツ（td）」に対しての設定（カッコ内のデザイン・縦積みの設定）
・左側の内側の余白を0に（デザインの設定）
・「表示形式」を「ブロック」に（縦積みの設定）

■インデント式リストのテーブル行（tr）のbefore要素への設定（カギカッコの設定）
・「枠線」の上・左側に4pxの二重線を入れる
・「幅」「高さ」を40pxに
・「表示」の「表示形式」を「ブロック」に
・「表示」の内容」に「""」を入力
・「配置」の「配置方法」を「絶対配置」にする
・「配置」の「位置」の上・左側に「0」を入力

■インデント式リストのテーブル行（tr）のafter要素への設定（カギカッコの設定）
・「枠線」の下・右側に4pxの二重線を入れる
・「幅」「高さ」を40pxに
・「表示」の「表示形式」を「ブロック」に
・「表示」の内容」に「""」を入力
・「配置」の「配置方法」を「絶対配置」にする
・「配置」の「位置」の下・右側に「0」を入力

まとめ

いかがでしたでしょうか！LP（ランディングページ）やキャンペーンで活躍するかと思いますので、ぜひ使ってみてくださいね。

サンプルのサイトデータの配布

今回作成したサンプルのサイトデータを以下より配布しますので、参考にしてください。