皆さん、お久しぶりです。「なゆた」です！
サイトを作るとき、文字を見やすくするためには、
演出の一環として「ボックス」というものが不可欠な時もあります。
今回はその「ボックス」と、それに影が付けられる「box-shadow」について詳しくお教えします！
こんな人に読んで欲しい！
文字や画像を見やすくしたいという人
使い方
ボックスの作り方
まず、HTML上でdivタグを作ります。div以外にタグはいらないですし、文字は何も入れなくてもOKです。
次に、CSS上で幅と高さ、背景色を入れます。marginとpaddingの有無は自由です。
これで「ボックス」が出来上がりました！たった２ステップで簡単にできちゃいます！
「box-shadow」の付け方
ここからは、その「ボックス」に影をつける方法をお教えします！
たった１ステップだけです。
先ほどのCSS上で、新たに「box-shadow」を追加します。
その中に、「〇〇px（左右の位置） 〇〇px（上下の位置） #〇〇〇〇〇〇（色彩番号）」を入れます。
すると、ボックスに影が付いちゃいました！これで完成です！
HTMLのdivタグ内に文を入力して、CSS上に「color（文字色）」を追加したりすることで、
ボックス内に文字や画像を入れることもできます。
最後に
いかがでしたか？
皆さんもサイトを作る際、この「ボックス」を作って、文字や画像をもっと見やすくしてみて下さい！
以上です、ありがとうございました！
コメント