年末までもう少しですね。
この間の世界野球WBSCで日本代表が韓国に奇跡の大逆転を食らってからもう1月が経とうとしてますが、いまだに傷は癒えてません。
DH指名打者です。
大谷選手、中田翔選手がベストナインに選ばれるなどしましたがそのファイターズはパリーグ2位って不思議ですよね。
世界のベストナインですので、つまりはそういうことなんですが、結果はこういうことでした。この傷も癒えてません。
ということで今回は野球について色々と書きたかったのですが、投手の練習と関係の深いshadowについて書いていきます。
box-shadowです。cssです。
box-shadowの使い方って結構面倒ですよね。一方向だけにかけたいのに横にはみ出るとか、使い始めの頃は腹が立つ奴です。
しかし一度覚えてしまうと便利な使い方も多く、かなり使える奴です。
borderの代わりも果たして仕事もきっちりします。代打でいうところの立浪みたいな奴です。
ということで、今回は立浪(box-shadow)の使い方を少し特殊な「枠として使用」するケースで基礎から解説します。
二重線を表現する際に使うのは
borderのdoubleかと思います。
しかしそんな二重線のデザインよりも圧倒的に内側の色はこれで外側の色がこれ。
とか、borderのdoubleでは表現できない。
っていうデザインを持ってくる人の方が多いです。もしくは作りたいという人の方が多いですよね。
そんな時に使えるのが立浪(box-shadow)です。
立浪(box-shadow)は基本的に影ですが、影もはっきり見える影とぼやけて見える影があり、線で使いたい場合ははっきり見える影を使用して線のように見せることが出来ます。
早速、立浪(box-shadow)の指定を見ていきます。
box-shadow: “右方向にずらす” “下方向にずらす” “ぼかしの大きさ” “影の大きさ” “色”;
書くときにぼかしの大きさなどを省略することは可能ですが、使い方を覚えるまではきっちりこの5つを指定するほうが理解が早いです。
最初のころはしっかりとこの5つを指定して立浪(box-shadow)の使い方を覚えていきます。
では、枠を作りたい場合の立浪(box-shadow しつこいので以下”立浪”)への指示のポイントは
「ずらすな」あたりまえですがずらす値を入れると枠がずれます。
「ぼかすな」ぼかすとはっきりとした線になりません。
「線の幅はこんくらい」
この3つです。
勘の良い方は先ほどの立浪の指定すべき箇所がなんとなくわかるかと思いますが、この3ポイントを抑えて実際に立浪に指示を出してみます。
立浪: “右方向ずらすな” “下方向ずらすな” “ぼかすな” “影の大きさ=線の太さこれくらい” “色”;
となることはおわかり頂けるかと思います。
これをパソコンが理解できる用にパソコン用への指示がこちらです。
box-shadow: 0 0 0 3px #000;
です。box-shadowを立浪に変えると効果が効かなくなりますので気を付けてください。
この指示を解説すると
box-shadow: “0 右にずらすのは0pxです” “0 左にずらすのは0pxです” “0 ぼかす大きさは0pxです” “3px 影の大きさは3pxです” “#000 色は黒です”;
となります。
つまり、要素(立浪を指定したもの、監督でしょうね)を囲む3pxの黒の線が出来上がります。
と、口だけで説明してもあれなので。出来上がりは以下の形です。色は黒で作ってませんがこのようなイメージです。
一番外側の線が
枠をつけたい要素 {
box-shadow:0 0 0 3px #F00;
}
この効果がついてます。
ボーダーの一色だけの枠をさらに立浪を適用して色分けされた2重線になりました。
そしてここで要注意事項ですが、
実は立浪は実体がありません。ですので、要素の大きさにプラスアルファされた大きさになります。
borderだとborderの太さも要素の大きさに含める便利な
box-sizing:border-box;
が使用できますが、立浪には無視されます。
しかし、ここで逆転するのが立浪の力です。
box-shadowの6つ目の指示でこれを解決します。
今まで隠していましたが、insetという指示があります。
これは、”影を内側に表示して”という指示です。
これを指示することによって立浪が外側に出た文を要素の中に入れる為、見た目の大きさを変えずになんとかなります。
box-shadow:0 0 0 3px #000 inset;
見ておわかり頂けるかと思いますが、大きさが内側に入ったので文字と※少し被ってますが、そこらへんは余白を調整するmargin,paddingでの微調整がもちろんできます。
※実体がない為被ります。borderは被るようにいろいろと設定しない限り被りません。
立浪の力がわかってきましたでしょうか？
いろいろと使い方はあるのですが、基本的な考え方さえわかれば一方向だけなどの応用も効くようになります。
きっと立浪が使えたら世界野球も逆転しました。
お疲れさまでした。
DH指名打者
