知り合いから「ホームページを作って欲しい」という相談をよく受けます。
何故なら、会社でホームページを作りますと、打ち出しているからですね。
こちらから営業をするワケではないのに、ご依頼をいただくのは本当に有り難い話です。
ホームページを作って欲しいと依頼される時に、その内容と金額に焦点が行きます。
でも、制作側としては、スケジュールと質に最もこだわりたいという思考で依頼を受けます。（自分の場合の話です）
そして、ホームページを立て続けに作っていると、何だか似たような作業が多いことにも気が付きます。
そんなホームページ制作での似たような作業をサクッとこなすことで、制作期間が大幅に省略することができる事に気がついたので、
気がついた作業をブログに残しておこうと思います。
今回はCSS中心のホームページ制作テクニック（その１）です。
ページの色パターンを最初に作る
自分の場合は、ページデザインで重要な色デザインをstyle.css（すべてのページで必ず読み込む基本のスタイルシートファイル）に記述します。
色の値については、ページデザイン系のサイトや、Adobeのカラーサイトなどからいい感じの色をピックアップします。
※サンプルです。
:root{
--color-1 : #4B8CA6
--color-2 : #69A7BF
--color-3 : #96D977
--color-4 : #BDF26D
--color-5 : #A67458
--font-standard : black;
--font-hover : white;
}
色数はデザインに応じて数の変動をさせるのがポイントですが、--color-1は、そのデザインの一番良く使われる色味にしておくと変更があった時の対応が楽になります。
名称などは自分ルールで統一しておくと、別のホームページを作る時にも、値を変えれば使い回しもできてしまいます。
ちなみに、fontは、通常表示と、マウスホバーや背景色とカブる場合に、色味invertする必要があるので、--font-1とfont-2で真逆の値をセットしておくと使いやすいでしょう。
これらページ内で共通で使うcssの値は、:rootのselector部分に共通登録しておくことで、定数扱いのような使い方ができるので、プログラミングチックにできて便利です。
背景画像の濃淡をコントロールする方法
トップバナーなどで使う画像は、background-imageにセットするケースも多いと思います。
そんな時、背景画像の主張が濃すぎる時に、薄くしたいとか、暗くしたいとか濃淡をコントロールしたい場合があります。
通常の画像であれば、薄くしたい場合は、背景色を白色にした状態で、opacityを0.5とかにすれば、表示画像が半透明になり、白やら黒やらにセットできます。
でも、残念ながらcssのbackground-imageに対してのみ半透明にする機能というのが現時点で無いため、次のようなテクニックを使います。
元画像
<div class='sample'></div>
<style>
.sample{
background-image : url(sample.jpg);
}
</style>
白っぽくする
<div class='sample'></div>
<style>
.sample{
background-image : url(sample.jpg);
background-color:rgba(255,255,255,0.5);
background-blend-mode:lighten;
}
</style>
黒っぽくする
<div class='sample'></div>
<style>
.sample{
background-image : url(sample.jpg);
background-color:rgba(255,255,255,0.5);
background-blend-mode:lighten;
}
</style>
これで、背景画像の操作はほぼ自由自在です。
項目内の縦横配置方法
ホームページを作っている時に悩ましいのが、思った場所に文字や画像など、要素の配置ができないという事です。
display:flexでコントロールする
※こうしたいのに
※こうなっちゃう
こんな時は、display:flexでコントロールしちゃいましょう。
.menu a{
display:flex;
align-items:center;
justify-content:center;
}
flexでセットした第１階層にのみ、配置コントロールすることができます。
※メニューなどで使うのが便利です。
中心表示にする命令でこまめに書いても大丈夫です。
positionでコントロールする
画面に表示するモーダルが、うまくセンタリングできない・・・
.modal{
position:absolutel
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
特定の要素内での中心にしたい場合は、大枠の部分に、position:relative;をセットしておきます。
（relativeがセットされていない場合は、表示画面全体に対しての中心になります）
座標を50%移動させた後で、transformで、その要素のサイズの-50%ずらすやり方です。
応用技としては、横のみの中心の場合は、translateX()、縦のみの中心であれば、translateY()、でセットするといい感じにコントロールできます。
あとがき
なかなか人から教えてもらうことが少ないこうしたテクニックは、ブログで解説してくれている人も多いけど、なかなか文言でヒットすることが難しいため、
初心者の人がこれらの構築で数時間を費やしているケースも良く聞きます。
自分で便利にコピペできるアンチョコを作っておくことをおすすめしますね。
また、作業を進めていて、きになるスニペットなどがあれば、ブログで公開したいと思います。
