ホームページの構成を練ってみる
2020/07/29
サイポンの定義を知る
見映えよいデザインの研究
ホームページ作成をしていれば当然のことですが、背景や枠を如何にうまく使いこなすかが見栄えに大きく関わってきます。というか、それで7～8割は決まると言っても過言ではないのではないでしょうか。
サイポンの構成内で、背景を後ろから順番に見ていくと、
外側背景→内側背景→ブロック背景→コンテナ背景→パーツ背景
となります。横幅については内側背景とブロック背景は同じになるので、単一ブロックのページでは、内側背景はブロック背景に完全に隠れることになります。他の場合はそれぞれの幅に差があるので、色の差が見て分かります。この差の部分をどのように扱えばよいかということが課題になります。実際に、このブログのページで見ると、外側背景と内側背景は表示するページで定義されているので、ブロック背景からの設定になります。
ブロック枠線
ブロック背景
コンテナ枠線
コンテナ背景
パーツ枠線
パーツ背景
パーツ文字
ブロック背景
コンテナ枠線
コンテナ背景
パーツ枠線
パーツ背景
パーツ文字
パーツ文字
ブロック枠線
ブロック背景
コンテナ枠線
コンテナ背景
パーツ枠線
パーツ背景
パーツ文字
ブロック背景
コンテナ枠線
コンテナ背景
パーツ枠線
パーツ背景
パーツ文字
パーツ文字
共通部分を同じ色に
単純にパーツに配色するだけなら気にすることはありません。背景色を設定すればOKです。これを、背景色の切れ目まで配色を施したい…例えば、パーツ背景をコンテナ背景のところまで塗りつぶす…となると、一ひねり必要になります。上記で言えば、青色の背景が4分割されていますが、同じグループの上部の左右と下部の左右を一つのエリアとしたいということであれば難しくなります。4つ全てを一つのエリアということであれば、もちろんコンテナ背景で定義しパーツの枠線・背景は不要ということになります。
隙間を埋めるのは、余白を調整する方法もあります。ただ、それは最終手段として、枠の調整で設定する方法が楽です。枠線を太くしたり、角を丸めることで隙間をなくします。パターンとしては、見出しパーツ＋コンテナ背景、見出しコンテナ＋ブロック背景の2パターンになるでしょう。コンテナの枠線は角丸が使えるので、バリエーションは増えます。
奥の手としては、画像で対処する方法があります。上部がヘッダ部分と同じ、それ以外は背景色と同じ(もしくは透過色)にします。ヘッダ色に合わせて画像ファイルが必要になるのですが、思い通りにはなるので知っておいて損はないと思います。先のブログ記事に概要はまとめています。
↓↓↓
～サイポンで組合せデザイン～
隙間を埋めるのは、余白を調整する方法もあります。ただ、それは最終手段として、枠の調整で設定する方法が楽です。枠線を太くしたり、角を丸めることで隙間をなくします。パターンとしては、見出しパーツ＋コンテナ背景、見出しコンテナ＋ブロック背景の2パターンになるでしょう。コンテナの枠線は角丸が使えるので、バリエーションは増えます。
奥の手としては、画像で対処する方法があります。上部がヘッダ部分と同じ、それ以外は背景色と同じ(もしくは透過色)にします。ヘッダ色に合わせて画像ファイルが必要になるのですが、思い通りにはなるので知っておいて損はないと思います。先のブログ記事に概要はまとめています。
↓↓↓
～サイポンで組合せデザイン～
サイポン自体が絶賛改良中ではあるので、使っている途中でも機能が追加されているところがあり、今後もいろいろな機能追加はあるのではと思います。CSSが自由に定義できるCMSであれば、CSSで定義さえすれば自由な構想は練れるわけですが、サイポンでは限られた機能のみを使えます。逆に言えば、限定された機能の中でどうデザインするか。全く逆の発想からの設計になりますが、意外にこれが面白いと感じています。
限られた機能ではありますが、機能自体は高品位なものなので、簡単に高品質なホームページが手軽に作れます！もちろん、このページもサイポンで作成したものです。
