今回は、BiNDupのデザイン管理機能「Dress」の中でも、かなり上級者向けかもしれません。
Dressに少し慣れてきた方で、Dressできることが気になっている方に、
一部ですが「高度な設定」を使うとどんなことができるのか、解説したいと思います。
「高度な設定」では、画像を加工せずに写真に装飾的な文字を重ねたり、スマホ表示時際に特定の要素だけ非表示にすることができるようになります。
とはいえ、BiNDupには画像編集ツール「SiGN」もありますし、ブロックごとにPC/スマホの表示切り替えができるので、Dressを使わなくてもこれらの表現は可能です。
デザイナーのように細部までこだわりたい方や、画像加工の手間を省きたい方、高度な設定って何だろうと気になっていた方はぜひ、今回から触れてみてください。
普段は閉じられている「高度な設定」とは？
Dressでスタイルを追加、あるいは編集する際に画面右上のスイッチを押すと表示される項目たちです。
Dress（CSS）の知識無く適当にいじると、「デザインが崩れる恐れ※」がありますので普段は閉じられています。しかし使いこなせられればデザインの幅がかなり広がるので是非覚えていただきたいと思います。
※崩れた要因の設定を削除すれば元に戻せます
設定項目一覧
- 縦方向の配置（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）
インラインとブロック
「囲み」を使って違いを見てみます。囲みは標準では「ブロック」の性質を持ちます。
実際に適用した図を見ていただければ一目瞭然ですが、見た目が大きく変化します。
| 記述 | 効果 | 仕様 |
|---|---|---|
| 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)※１が基準 |
| skew | 傾斜 | skew(20deg) skewX(20deg)、skewY(20deg) |
おまけ
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」でのみ使用できます
POINT
- 画像を加工せずに写真に装飾的な文字を重ねることができる！
- スマホ表示時際に、特定の要素だけ非表示にすることができる！
- 画像で表現していたことが、画像なしで再現できるようになる！