サイポンで組合せデザイン
2020/07/15
CSSなしのデザイン
CSSを書かないデザイン？
サイポンでサイトを作成するわけですが、デザインにおいてCSSは書きません。システムの背後では使っているのですが、サイトを作る操作上は使いませんし、何より指定ができません。
その代わりに必要不可欠と思われるCSSについては機能として組み込まれています。それを組み合わせることで、面倒に見えるデザインを簡単にそろえることができます。
例えばこちらのコンテナの内容
(横コンテナ)
ここには左側の画像と右の見出しとテキストがあります。全体の背景をグレー、それぞれのパーツの背景を水色にしています。
それぞれで枠を設定します
全体の枠線と、それぞれのパーツの枠線を青色にしています。背景と枠で境界線が明確になります。
全体の背景にハーフ画像を追加
背景画像にハーフ画像(右半分青、左半分は透過)を設定します。
さらに、画像の枠と背景を外し、全体の枠の角を丸めます。
さらに、画像の枠と背景を外し、全体の枠の角を丸めます。
ハーフ画像を使うのはテクニックですが、色の割合や透過処理などを駆使すると様々なパターンが用意できそうです。
別のパターン(縦コンテナ)を見てみましょう。
別のパターン(縦コンテナ)を見てみましょう。
見出しと画像・テキストが2列に並びます。
同じようにそれぞれのパーツの背景を
同じようにそれぞれのパーツの背景を
同じように枠線を設定します。
水色に変更します。
水色に変更します。
見出しコンテナに変更し、パーツ全体を囲ってデザインします。
左パーツ全体の背景と枠線を外し、それぞれの枠線を丸めます。
右パーツの枠線も適宜変更します。
基本パーツを並べるだけでもサイトは完成します。
一歩上を行こうとするのであれば、しっかりと仕様を把握する必要がありますね。最初に扱った横コンテナを中心とするパーツ、2番目の縦コンテナを中心とするパーツ、それぞれに利点と欠点があります。
横コンテナ
縦コンテナ
横コンテナ
一つのパーツの中を区切りとしてデザインできるので、ひとまとめのデザインにしやすいという点があります。そのデザインが一つの単位となって、重ねていくのがよいでしょう。
縦コンテナ
コンテナが縦、あるいは横並びに並ぶので、それをまとめるにはブロックレベルでデザインを施す必要があります。それぞれのパーツを取り囲むかたちでデザインをするイメージになるでしょう。見出しコンテナを使わずに、背景画像でも同じようなデザインを形成できます。この場合も縦のハーフ画像を用います。
ということで、横コンテナを一つのデザインとして重ね、縦コンテナは全体ひとまとまりのデザインを念頭にパーツを組むのが順当かと思います。いずれにしても、限られたパーツを駆使することで、他のサイト作成のCMSに劣らないデザインを作り出して行くのは十分な可能性を秘めています。
かなり深いところまで突っ込んでみると、おもしろくなってきます。どちらかというと、HTMLやCSSを触るサイト作成をした立場からすると、反対方向からデザインを詰めていくような感覚なわけですが、この辺りもサイポンのおもしろさです。
本当に簡単に高品質なホームページが手軽に作れてしまいます！もちろん、このページもサイポンで作成したものです。お試しで触ってみれば、きっと、その可能性に！
