「ボタンに影を付けてかっこよく目立たせたい!」ボタンに影をつける方法を紹介します。【方法1】box-shadowを使うbox-shadowは要素に影をつけるCSSです。class="example">ボタン</a>box-shadowの値は下記のように指定します。右方向:左から光が当たっていることを表現できます。マイナスにすると逆になります。下方向:上から光が当たっていることを表現できます。マイナスにすると逆になります。ぼかし具合:色をぼかすことができます。0にするとぼけません。省略すると0になります。広がり:中心から広げることができます。0にすると広がりません。省略すると0になります。色:影の色を指定します。rgbaを使うことで半透明な色も指定できます。#2f5d08ボタンCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【方法2】borderを使うborderは本来要素に枠線をつけるCSです。これを使ってカンタンな影を表現できます。borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。表現の幅・難易度の違いここまでの例を見てわかる通りbox-shadowはぼかしたり広げたりすることができます。borderはぼかしたり広げたりできません。※厳密には工夫次第でできますが、かえってメンドウです。box-shadowはborderと同時に指定できますが、borderはできません。※厳密にはborderのかわりにoutlineを使うと同時使用ができます。box-shadowは使い慣れないため指定を間違いやすいですが、borderは使い慣れているため間違わず使えますね。位置の違いbox-shadowは要素の外側に、borderは要素の内側につきます。下記は影の色を半透明の灰色にして背景色が反映されるようにしています。borderbox-shadowは外側の色に影響され、borderは内側の色に影響されていることがわかります。widthやheightを指定するときも注意しましょう。角丸をつけたときの違い下記例の影とボタンの境界線に注目してください。box-shadowは角丸(border-radius)にしても丸いですが、borderは角丸にならなくなります。→box-shadowがオススメ以上、ボタンに影をつける方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。