継続は力なり＃３６

2020年4月4日 08:37

ボックスに影をつける

「box-shadow プロパティ」を使用すると、text-shadowプロパティと同様の指定方法でボックスに影をつけることができる
box-shadow プロパティでは４つめの数値として影を拡張させる距離が指定でき、「inset」というキーワードを指定することで影をボックスの内部に表示させられるようにもなっている

box-shadow に指定できる値

・inset
影をボックスの内側に表示させる
この値を指定しなければ、影はボックスの外側に表示される

・単位付きの実数
影の「右方向への移動距離」「下方向への移動距離」「ぼかす範囲」「上下左右に拡張させる距離」は単位付きの実数で指定する

・色
色の書式に従って影の色を指定できる

・none
影を表示させない

数値は、影の「右方向への移動距離」「下方向への移動距離」「ぼかす範囲」「上下左右に拡張させる距離」の順に半角スペースで区切って指定
「ぼかす範囲」と「上下左右に拡張させる距離」は指定しなくても構わない
キーワード「 inset 」と影の色は、これらの数値全体の前または後ろに順不同で半角スペースで区切って指定できる

例

HTML

<p>
<textarea id="sample1" rows="5" cols="30">
</textarea>
</p>
 
<p>
<textarea id="sample2" rows="5" cols="30">
</textarea>
</p>

CSS

#sample1 {
   box-shadow: 5px 5px 10px #999;
}
#sample2 {
   box-shadow: inset 5px 5px 10px #999;
}

アウトライン

パソコンを操作していると、テキスト入力欄をクリックしたときやボタンの上にカーソルを乗せた時などに、その周りに線が表示されることがある
例として、テキス入力欄がたくさん並んでいても、今キーボードを打つとどのテキスト入力欄に入力されるのかが一目でわかるようになっている
そのような用途で使われている線が、アウトライン
アウトラインは、見た目はボーダーとよく似ているが、ボックスの一部ではなくボックスの上に表示される
アウトラインを表示させてもボックスの大きさが変わったり、レイアウトが崩れたりすることは一切ない
表示される位置は、ボックスのボーダー周り（外側）となる
ボーダーのように上下左右を別々にすることはできず、上下左右の線種・太さ・色　は常に同じになる
アウトライン関連としては次のプロパティが用意されている
各プロパティに指定している値はボーダーとほぼ共通しているが、線種に「hidden」が指定できない点と、色に「invert」が指定できる点だけが異なっている

outline-style に指定できる値

・none
アウトラインを表示しない

・solid
アウトラインの線種を実線にする

・double
アウトラインの線種を二重線にする

・dotted
アウトラインの線種を点線にする

・dashed
アウトラインの線種を破線にする

・groove
アウトラインの線自体が溝になっているようなボーダーにする

・ridge
アウトラインの線自体が盛り上がっているようなボーダーにする

・inset
アウトラインの内側の領域全体が低く見えるようなボーダーにする

・outset
アウトラインの内側の領域全体が高く見えるようなボーダーにする

outline-width に指定できる値

・単位付きの実数（５px など）
アウトラインの太さを単位付きの実数で指定

・thin,　medium, thick
「細い」「中くらい」「太い」という意味のキーワードで指定できる
（実際に表示される太さはブラウザによって異なる）

outline-color に指定できる値

・色
色の書式に従って任意のアウトラインの色を指定

・invert
反転させた色にする

outline に指定できる値

・outline-style の値
outline-style に指定できる値が指定できる

・outline-width の値
outline-width に指定できる値が指定できる

・outline-color の値
outline-colorに指定できる値が指定できる

例

HTML

<p>
<textarea rows="7" cols="40">
</textarea>
</p>

CSS

textarea:focus {
   outline: 3px solid #6cf;
   box-shadow: 0 0 15px 5px #6cf;
}