どうも！LSSです！！
例えば、なんですが、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>
こう、貼り付けます。
これを読んだ方が「自分のブログに使ってみたい！」と思っていただいた場合、「コード」の内容をコピーして、はてなブログだったら「HTML編集」画面に貼り付けると、自分のブログのパーツとして利用できます^^
と、ここで「ん？この訳の分からない文字の羅列、そもそもどうやって作ってるの？」というところを、今日は記事ネタにしたいと思います^^
- 困難は分割して考える
- まず、始めてみます
- で、周りを囲む装飾をしておきます
- 横幅いっぱいになっているので、
- 角を丸くするにはborder-radius
- 中の文字が枠に近すぎるので、paddingで余白
- 中の文字の背景が真っ白だけど、色をつけたい
- 枠の色が濃いので、中身と合わせてみようか
- 枠の左や上と中身の色が全く同じ、っていうのが嫌
- 表面の色が単調なので、変化をつけてみます
- 光が強すぎるので、弱くしてみよう
- ちょっと弱すぎ
- 前編はここまで！
困難は分割して考える
元はデカルトさんという哲学者の言葉らしいですね。
要は、たくさんの複合的な要因が絡まりあって、どう解決していいやら途方にくれた時、元の要因を分けていって「簡単なひとつの問題」がいっぱいある状態、として一つ一つ解決していけばよい、と。
一般論の話ですが、プログラミングやCSSには特に当てはまる！と思っています。
まず、始めてみます
とりあえず「CSSで装飾する対象」がないと始まりません。
ので、まずはこうします。
コード
<div>ボタン風</div>
めっちゃ単純ですねｗ
<div>タグや<span>タグは「HTML上で特に意味のないタグ」とされているので、こういう時に便利です^^
中に入れる文言は後から考えるとして、とりあえず何でもいいから書いておきます。
今回は「ボタン風」としました。
ここに、効果を確認しながら色々付け足していきます！
で、周りを囲む装飾をしておきます
とりかかる順番はなんでもいいのですが、まず「どこからどこまでがその範囲なのか」、目で見て分かりやすいように、囲みが見えるようにしちゃいます！
コード
<div style="border: 5px outset green;">ボタン風</div>
ただボーダーをつけただけ。
これはそう難しくないですね。
横幅いっぱいになっているので、
今回は「内容に応じた幅」にしたい、と思います。
そうすると、こういう事に。
コード
<div style="display: inline-block; border: 5px outset green;">ボタン風</div>
<div>タグはデフォルトでは「block要素」で、それだと横幅いっぱいがデフォルトになります。
display: inline-block;
で「インライン要素として表示」するように指定してやると、中身に応じた幅のボックスになります。
角を丸くするにはborder-radius
角がとがっているのを、とりあえず今回は丸くしておきたい。
ので、border-radiusを付け足します。
コード
<div style="display: inline-block; border: 5px outset green; border-radius: 10px;">ボタン風</div>
border-radius: 10px;
とすると「半径10ピクセルの円を４分割したものが角につく」ようになります。
数値を変更する事で、丸みの大きさも変えられます！
中の文字が枠に近すぎるので、paddingで余白
コード
<div style="display: inline-block; border: 5px outset green; border-radius: 10px; padding: 10px;">ボタン風</div>
padding: 10px;
と書くと、「ボックスの枠と中身の間に10ピクセルの余白」が入ります。
中の文字の背景が真っ白だけど、色をつけたい
コード
<div style="display: inline-block; border: 5px outset green; border-radius: 10px; padding: 10px; background-color: yellowgreen;">ボタン風</div>
とりあえず…黄緑色にしてみます。
background-color: yellowgreen;
という感じで、「背景色」を指定すると、こうなります。
枠の色が濃いので、中身と合わせてみようか
先につけたborderで、色を適当に「green」としていましたが、背景色と同じ「yellowgreen」にしてみましょう。
コード
<div style="display: inline-block; border: 5px outset yellowgreen; border-radius: 10px; padding: 10px; background-color: yellowgreen;">ボタン風</div>
枠の左や上と中身の色が全く同じ、っていうのが嫌
境界線が分からないので、やっぱちょっと違う色にしましょうか。
コード
<div style="display: inline-block; border: 5px outset greenyellow; border-radius: 10px; padding: 10px; background-color: yellowgreen;">ボタン風</div>
という事で、さっき変えたばかりのborderの色を「greenyellow」にまた変更してみました。
「greenyellow」と「yellowgreen」がこんだけ違う色になりますｗ
表面の色が単調なので、変化をつけてみます
background-colorはそのままにして、
コード
<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%,white,transparent);">ボタン風</div>
別途、background-imageで円形グラデ―ションを乗せてみました。
background-image: radial-gradient(circle at 65% 35%,white,transparent);
で「白から透明に変化する円形グラデーション」を乗せた事で、背景色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%,#ffffff80,transparent);">ボタン風</div>
「white」だと中心が完全な白で、ちょっと抑えめにしたくて
#ffffff80
としました。
#ffffffが白、最後の80が「不透過度」となり、半分透明になります。
ちょっと弱すぎ
コード
<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>
再度調整。もすこし白を強くするため、「80」を「c0」にしてみます。
こんなもんかな^^
前編はここまで！
ちょっと長くなってきたので、ここで一旦分ける事にします^^;
後日「後編」で完結します！！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
