【Dress虎の巻・テキスト編】文字にこだわるとき使いたい6つの項目

BiNDupのデザイン編集機能『Dress』はお使い頂けてますか?
今回はWebサイト作成の中で最も扱う事の多いテキストに特化して解説したいと思います。
理解する事でより伝えやすいテキストデザインが出来ますので是非押さえておきましょう。

Dressを設定する際の考え方

まずはDressの基本的な考え方について。
WebサイトはCSSと云う言語によってデザインされていますが、Dressはソースコードを書かずにCSSが編集出来る機能です。
なのでCSSのルールに基づいてDressは設計されています。

設定の基本は広から狭へ

例えば文字サイズを指定しようと思った時に、全ての要素にそれぞれサイズを指定するのでは手間が掛かりますし、効率も落ちてしまいます。
まずはサイト全体に基本的な文字サイズを指定して、それとは異なる要素にだけそれぞれ個別の指定を行います。

デザイン指定の良い例と悪い例

Dressでは『基本設定』と云う項目がありますので、そこでサイト全体のルールを作っていきましょう。
『ページデザイン』の項目で文字色や文字サイズ、フォントなどの設定を行います。

Dress基本設定

例えば大見出しの文字サイズを大きくしたり文字色を変えたりしたい場合、『ページデザイン』の設定とは異なる設定を個別で行います。

設定箇所の重複に注意

例えば『ページデザイン』で文字色に黒を指定している場合、大見出しに改めて黒を指定する必要はありません。
個別で同じ指定をしてしまうと、後で変更しようとした時にそれぞれ設定箇所を探して設定し直さなくてはいけない手間が発生して管理効率が悪くなります。
大事なポイントなので忘れないようにしましょう。

Dressカラーを活用しよう

DressにはDressカラーと云う機能があります。
色を定義して使いまわせる様にしています。
従来の設定方法では色の修正が発生すると設定箇所全てを探してそれぞれ修正する必要がありましたが、Dressカラーによって一元管理ができる様になり、定義カラーを変更するだけでDress全体の修正を行う事が出来る様になりました。
Dressカラーは基本設定内にありますので是非押さえて下さい。

Dressカラー

文字要素で使われる単位について

Dressでは様々な単位を設定する事が出来ます。
今回はテキスト篇なので、文字要素に指定する場合を想定してそれぞれの単位を解説します。

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

今すぐ資料をダウンロード
  • POINT

  • Dressはソースコードを書かずにCSSが編集出来る機能
  • サイト全体に基本的なスタイルを指定して、それとは異なる要素にだけそれぞれ個別の指定を行う事で管理効率が向上する
  • PC、スマホそれぞれに最適化した文字サイズを設定する

あわせて読みたい