【CSS】CSSサンプルができるまで（後編）【困難は分割して考える】
どうも！LSSです！！
前回、前編では、
例えばこんなボタンっぽいの
↑こういう感じのCSSサンプルを作るのに、
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -1px -1px 0px yellowgreen, 1px 1px 0px greenyellow;">例えばこんなボタンっぽいの</div>
↑こういうコードを書くのに行きつくまでの過程を「途中まで」書きました。
今回は「後編」として、その続きを書いていきます！！
- 前回の最終形
- 中の文字を太くする
- 文字の色を変えてみよう！
- でも案の定、読み辛さもあるかな…？
- ここで、もう一度、外枠に注目！
- 角をより丸っこく
- text-shadowをもちっと控えめに…。
- 完成！！
- あとがき
前回の最終形
ボタン風
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 10px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent);">ボタン風</div>
ここまでやりましたね。
ざっと書くと、
- 飾る対象を用意して
- borderで囲んで
- 内容にあわせた幅になるようにして
- 角を丸くして
- 内部に余白がつくようにして
- 背景に色をつけて
- 光が当たっているような演出をつけた
ところまででした。
では、続きを始めます！
中の文字を太くする
中に書いた「ボタン風」という文字を、もっとどっしりとした感じにしたいな、と思ったので、
font-weight: bold;
を書き足しました。
ボタン風
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 10px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold;">ボタン風</div>
それだけで↑こんな風に、どっしりとした太文字になります^^
文字の色を変えてみよう！
黒い文字、も薄い色の背景だとハッキリしてていいんですが、柔らかい感じ（？）にしたくなり、いっそ白文字にしてみました！
ボタン風
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 10px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white;">ボタン風</div>
color: white;
のように書く事で、文字色を指定できます（今回はwhite）
先に太字にしていたのもあって、色付けが分かりやすいですね^^
でも案の定、読み辛さもあるかな…？
薄い色の背景に、さらにradial-gradientで「光が当たったような演出」もしているところに白文字。
オシャレ感もありますが（個人の感想です）、読み辛いのはいただけない。
文字の色を変える、という手もありますが、もうひとつ「文字に影をつける」という手があります！
ボタン風
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 10px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -2px -2px 0px yellowgreen;">ボタン風</div>
というわけで、今回は、
text-shadow: -2px -2px 0px yellowgreen;
として、「左に２ピクセル、上に２ピクセルずらした位置に、ぼかし無し（0px）でyellowgreenの影」をつけてみました。
と、こうした事で「表面を彫って文字を刻み込んだ」感じになりますね！
ここで、もう一度、外枠に注目！
ボタン風
border: 5px outset greenyellow;
で囲んだ外枠なんですが、
「左辺と上辺が明るい色、右辺と下辺が暗い色」
になっていますね。
こういう配色にすると「浮き上がっているように」見え、その逆に「左辺と上辺を暗い色、右辺と下辺を明るい色」にすると「くぼんでいるように」見えるようです。
text-shadow: -2px -2px 0px yellowgreen;
で文字につけた影が暗めの黄緑色だった事によって、文字がくぼんで見えたのなら、
「右下に明るめの影をつけると、より綺麗にくぼんでる感が出る」のかな？
という事でやってみました。
ボタン風
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 10px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -2px -2px 0px yellowgreen, 2px 2px 0px greenyellow;">ボタン風</div>
text-shadowは、こんな風にカンマ「,」で区切る事で、複数の影を設定できます。
そこで「２ピクセル右、２ピクセル下にずらした位置にgreenyellowの影」をつけてみました。
…うーん、あまり変わらないような？そしてよく見ないと分からないような気もしますが…まぁいっかｗ
このまま進める事にします。
角をより丸っこく
だいたい「これでいっか」って感じになってきたので、あとは微調整になります。
まず、角丸ですが、もうちょっと丸っこいほうが可愛いかな？と思い、10pxを指定していたのを、
ボタン風
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -2px -2px 0px yellowgreen, 2px 2px 0px greenyellow;">ボタン風</div>
20pxに変更してみました。
こんなもんかな^^
text-shadowをもちっと控えめに…。
「さりげなさ」がオシャレ？って気がしてきているので、文字の影を控えめにしてみます。
ボタン風
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -1px -1px 0px yellowgreen, 1px 1px 0px greenyellow;">ボタン風</div>
「左に２ピクセル、上に２ピクセル」「右に２ピクセル、下に２ピクセル」ずらした位置に置いていたtext-shadowですが、ずらし幅を全て１ピクセルに変更しました。
それによって、影が細く、控えめになります^^
完成！！
上記手順を経て、完成って事にします^^
あとは、中の文言「ボタン風」って仮に書いていたのを変更して…
例えばこんなボタンっぽいの
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 20px; padding: 10px; background-color: yellowgreen; background-image: radial-gradient(circle at 65% 35%,#ffffffc0,transparent); font-weight: bold; color: white; text-shadow: -1px -1px 0px yellowgreen, 1px 1px 0px greenyellow;">例えばこんなボタンっぽいの</div>
という完成形に至りました^^
あとがき
「困難は分割せよ」
パソコンもプログラミングも無かった時代の哲学者、デカルトさん（1596-1650）の遺した名言ですが、パソコンやプログラミングには特に当てはまるように思います。
CSSもまた「プロパティ:値;」を１セットとして、この書き方で「ここはこう表示してね」を多く組み合わせる事で、様々なパターンを生み出せます^^
タレント・西川きよし氏のネタですが、これも通じるところがある名言だと思いますね。
ひとつひとつ、プロパティを試して都度確認しながら、時には迷って後から変更・調整を加えてもいいですし、ある程度見栄えに納得できたらそこで完成！
…という「CSSサンプルの制作過程」の話でした^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
