画像化せずに写真に文字要素を載せられる!Dressの高度な設定にチャレンジ

  • 画像化せずに写真に文字要素を載せられる!Dressの高度な設定にチャレンジ

今回は、BiNDupのデザイン管理機能「Dress」の中でも、かなり上級者向けかもしれません。
Dressに少し慣れてきた方で、Dressできることが気になっている方に、
一部ですが「高度な設定」を使うとどんなことができるのか、解説したいと思います。

「高度な設定」では、画像を加工せずに写真に装飾的な文字を重ねたり、スマホ表示時際に特定の要素だけ非表示にすることができるようになります。
とはいえ、BiNDupには画像編集ツール「SiGN」もありますし、ブロックごとにPC/スマホの表示切り替えができるので、Dressを使わなくてもこれらの表現は可能です。
デザイナーのように細部までこだわりたい方や、画像加工の手間を省きたい方、高度な設定って何だろうと気になっていた方はぜひ、今回から触れてみてください。

普段は閉じられている「高度な設定」とは?

Dressでスタイルを追加、あるいは編集する際に画面右上のスイッチを押すと表示される項目たちです。
Dress(CSS)の知識無く適当にいじると、「デザインが崩れる恐れ※」がありますので普段は閉じられています。しかし使いこなせられればデザインの幅がかなり広がるので是非覚えていただきたいと思います。
※崩れた要因の設定を削除すれば元に戻せます

Dressの高度な設定のUI

設定項目一覧

  • 縦方向の配置(verticla-align)
  • 改行(white-space / word-break / word-wrap)
  • リスト記号(list-style)
  • 表示形式(display)
  • フロート(float)
  • はみ出し処理(overflow)
  • トランジション(transition)
  • 変形(transform)
  • 内容(content)
  • 配置方法(position)
  • 位置(top / right / bottom / left)
  • 重なり順(z-index)

赤字はデザインに影響が出やすい項目
※各項目の詳しい性質は()のキーワードで調べてみてください

「高度な設定」を実際に使ってみる

一覧を見てもよくわからないと思いますので、実際に使ってみましょう。

1.表示形式(display)でできること

htmlの要素には大きく分けて2つの性質があります。それが「インライン」と「ブロック」ですが、display設定では要素の性質を変更することができます。
Dressで設定できるのは以下の7つ。青字は中でもよく使うものです。今回はその4つについて解説します。

  • インライン(inline)
  • ブロック(block)
  • インラインブロック(inline-block)
  • リスト項目(list-item)
  • テーブル(table)
  • テーブルセル(table-cell)
  • 継承(inherit)
  • 表示しない(none)

インラインとブロック

「囲み」を使って違いを見てみます。囲みは標準では「ブロック」の性質を持ちます。
実際に適用した図を見ていただければ一目瞭然ですが、見た目が大きく変化します。

囲みによるdisplay設定の違い

記述 効果 仕様
inline インライン 文章として扱われます。枠などの装飾は1行毎に反映されます。
block ブロック ひとつの集合体として扱われます。指定がない限り横に広がり続けます。高さは中身に合わせて広がります。
inline-block インラインブロック インラインとブロックの両方の性質を持つ。中身の分だけ広がる
none 非表示 非表示にできます。

こんな時に使える

BiNDupではブロックごとにPC/スマホの表示切り替えができますが、
こちらを使いこなせれば、スマホの時特定の要素だけ非表示することができます。
スマホだけ要素を非表示

2.変形(transform)でできること

要素を変形することができます。
場合によっては今まで画像で用意していたものがDressだけで表現可能になるかもしれません。
ただ、自分で記述する必要があるので詳しく知りたい方は調べてみてください。

効果 記述例
translate 移動 translate(20px, 20px)
translateX(20px):横方向だけ
translateY(20px):縦方向だけ
rotate 回転 rotate(40deg)
rotate(-40deg)※degは角度
scale 拡大縮小 scale(2)
scaleX(0.5)、scaleY(0.5)※1が基準
skew 傾斜 skew(20deg)
skewX(20deg)、skewY(20deg)

transformの比較

おまけ

transformは、複数の効果を同時に記述できます。
書き方は、各効果の間にスペースを入れるだけ。

transformの同時設定

右記を設定。 translateY(-20px) rotate(-90deg) skew(45deg)

3.配置方法(position)でできること

要素の配置方法を設定することができます。
positionを設定すると、「位置(top / right / bottom / left)」「重なり順(z-index)」が使用できる※ようになります。
※staticを除く

記述 効果 補足
static 初期値。特に何もない。
relative 相対配置 配置の起点がこの要素の左上になる。absoluteの起点にもなる
absolute 絶対配置 親要素がrelativeでない場合、配置の起点はブラウザ(画面左上)
fixed 固定配置 配置の起点は常にブラウザ(画面左上)。スクロールしても位置は保たれる

位置(top / right / bottom / left)と重なり順(z-index)

positionで設定された起点からの位置を設定できます。基本的に上下(topとbottom)または左右(leftとright)は同時に設定できません。

記述 効果
top 上からの距離
right 右からの距離
bottom 下からの距離
left 左からの距離
z-index 要素の重なり順。数字が大きい方が上面に表示される。-10〜10まで設定可能。

画像を加工せずにさまざまな表現が可能

難しいことを長々と続きましたが、一体何ができるかというと、これらを活用すると図のように今まで画像で表現していたようなことも、画像なしで再現できるようになります。
詳しい設定は、サイトデータを配布しますので、設定値を参考に色々試してみてください!

高度な設定のサンプル

transformで変形させた大見出しをpositionで位置を調整している

さらに応用編(背景を斜めに)

ちょっとさらに難しくなってしまいますが、下記サンプルの斜め背景も「変形(transform)」の「skewY(-10deg)」を利用しています。
こちらの詳しい設定もサイトデータを確認してみてください。

高度な設定のサンプル_応用

設定箇所:①目次ブロック ②目次ブロック>after要素

※本サイトデータは「BiNDup」でのみ使用できます