ホームページ作成はパズル
2020/08/07
空白を制する
パーツ間の隙間を制御する
実際の仕様を検証
ホームページ作成の構成は、さながらパズルのようです。構成要素を分割して部品とし、それを配置していきます。それぞれの部品同士は線や空白で仕切られることになります。その配置次第で、ページの読みやすさや印象が全然違ってきますから、悩むところです。
ホームページの構成が分かる方であれば、余白の設定はマージンとパディングの調整でできるわけですが、ここは最終の調整です。できることなら、デフォルトの値を使えるようにしたいところです。特に、サイポンではスマホ画面にしたときには余白の設定が無視されてしまい、PCと同様の見方にするには再度調整も必要になります。
空白を狭めるのは先の余白の調整をしなければなりませんが、空白を開けるのは余白行を入れることで対応できます。空のテキストスペースと言えばいいのかもしれませんが、サイポンではパーツとして「余白」といういわゆる余白行があります。テキストでの改行であれば文字サイズなどにも左右されるので、決まったサイズが入るのは、組み立てる工程の中で重要な要素です。
そんな余白にも、3種類の幅があります。標準、大きめ、小さめの3種ですが、サイズ感の違いは適当に扱っていたので、どの程度の違いになるのかを比較してみました。※項目なしでの比較ですが、見えやすくするために、細い枠線だけつけています。
実際の比較が以下です。大きめ7段と小さめ16段、標準8段と小さめ13段がおおよその一致になるので、大きさの比は大きめ：標準：小さめ＝1.4：1.0：0.6くらいになります。単に余白で調整したいときに、これを知っているだけでも楽にはなりそうです。なお、スマホのときは若干違ってきます。小さめと言っても、5割なのか7割なのかで使い道も変わってきます。標準に対して、0.6倍と、1.2倍、1.4倍、1.6倍…のスペースは容易に設定できるということですね。
大きめ幅
標準幅
小さめ幅
コンテナとパーツの関係
パーツはコンテナの要素ですが、一つのコンテナ内にパーツを複数入れる場合とコンテナを複数配置して、それぞれのコンテナ内にパーツを配置する2者でどの程度の違いが出るかです。
さすがに、ブロックでの配置にするとパディングとマージンが加算されるので違ってきます。ブロックレベルで余白を重ねることはあまりなさそうなので、問題はなさそうです
基本的には余白のパーツには装飾を入れないのが普通になるので、通常には差異がないように見えます。上記で、1行目はコンテナに一つの余白、2、3行目はコンテナに2つの余白が入っていますが、それぞれの間隔は同じようには見えます。背景や枠線に影響はされますが、基本的には気にしなくてもいいようです。
さすがに、ブロックでの配置にするとパディングとマージンが加算されるので違ってきます。ブロックレベルで余白を重ねることはあまりなさそうなので、問題はなさそうです
