Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【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>

 

↑こういうコードを書くのに行きつくまでの過程を「途中まで」書きました。

 

今回は「後編」として、その続きを書いていきます!! 

 

 

前回の最終形

ボタン風

 

コード

<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;
として、「左に2ピクセル、上に2ピクセルずらした位置に、ぼかし無し(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は、こんな風にカンマ「,」で区切る事で、複数の影を設定できます。

そこで「2ピクセル右、2ピクセル下にずらした位置にgreenyellowの影」をつけてみました。

 

…うーん、あまり変わらないような?そしてよく見ないと分からないような気もしますが…まぁいっかw

 

このまま進める事にします。

 

 

角をより丸っこく

だいたい「これでいっか」って感じになってきたので、あとは微調整になります。

まず、角丸ですが、もうちょっと丸っこいほうが可愛いかな?と思い、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>

 

「左に2ピクセル、上に2ピクセル」「右に2ピクセル、下に2ピクセル」ずらした位置に置いていたtext-shadowですが、ずらし幅を全て1ピクセルに変更しました。

それによって、影が細く、控えめになります^^

 

 

完成!!

上記手順を経て、完成って事にします^^

あとは、中の文言「ボタン風」って仮に書いていたのを変更して…

 

例えばこんなボタンっぽいの

  

コード

<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もまた「プロパティ:値;」を1セットとして、この書き方で「ここはこう表示してね」を多く組み合わせる事で、様々なパターンを生み出せます^^

 

 あと、「大きな事はできませんが、小さな事からコツコツと」

タレント・西川きよし氏のネタですが、これも通じるところがある名言だと思いますね。

 

ひとつひとつ、プロパティを試して都度確認しながら、時には迷って後から変更・調整を加えてもいいですし、ある程度見栄えに納得できたらそこで完成!

…というCSSサンプルの制作過程」の話でした^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^