Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (4) 文字に影を付ける:Add text-shadow

2017年 08月 10日
DevToolsの右ウインドウにマウスポインタを持って行くと、各プロパティのチェックボックスの他に、各項の右下に「」のマークが出ます。

a0349576_13104042.png

このマークにマウスをポイントすると、下の様に5つの機能メニューが出ます。

a0349576_13112112.png

これらの機能は、ページのデザインで右ウインドウの編集で、よく使いそうな機能を用意したものです。 今回は、この左端の「Add text-shadow」を操作します。

今回も以下のページをサンプルにします。 実際にDevToolsを操作しながら読まれると、いっそう判り易いと思います。



 〔Add text-shadow〕 

このボタンを押すと、下図の右側の様な「影コントロールボックス」が表示され、右ウインドウには新しいプロパティ「text-shadow」が書き込まれ、Chrome画面(下図の左側)のタイトル文字には影が出来ます。

a0349576_12070198.png

簡単な操作で、「text-shadow」の雛形プロパティが出来るのは便利ですが、慣れた人はむしろ直接に書き込む方を好むかも知れません。 というのは、「影コントロールボックス」の動きが粗雑で少し使い難いのです。 左側の絵は誇張した「影」で、普通はもっと細かい範囲の影を使います。「影コントロールボックス」で微調整する時は、下の様に枠にカーソルを入れ、キーボードの「↑」「↓」「Tab」「Shift + Tab」で操作した方が簡単です。

a0349576_11482627.png

「影コントロールボックス」の操作は、Tools上のプロパティとChrome画面のタイトル文字の影にシンクロしています。「Enter」キーを押すか、ボックス外のToolsの何処かをクリックすると、プロパティの書き込みが完了します。 また「Esc」でボックスを開く前の状態に戻ります。

書き込まれた「text-shadow」プロパティの「値」には、それを示す「影マーク」が付きます。 下の様にこのマークをクリックすると、「影コントロールボックス」を開いてその値の再調整が出来ます。

a0349576_13435933.png

「text-shadow」を使う場合、私は下図の程度の小さな値にする事が殆どです。 またこの機能では、影の色は「black」になってしまいます。 これは強すぎるので、書き込まれた値を直接編集して「#aaa」(グレー)に書き換えました。 どうせ直接編集するなら、「影コントロールボックス」を開くよりも、全ての値を直接編集した方が早いですね。

値を小さめに調整して、少しは見栄えが良くなったと思います。

a0349576_11493163.png



 〔不要なプロパティの削除方法〕 

この機能などを使うと簡単にプロパティが増設されるので、下の様に失敗プロパティが幾つも出来てしまいました。 こういうのを消したい場合は「プロパティ名」をクリックして、設定枠の中をクリアーすると行全体が消えます。

a0349576_18380473.png

これはどんな場合でも使える方法で、「プロパティ名」を削除すればプロパティ行の全体が削除できます。




この記事は「スキン編集」にトラックバックしています。



[PR]
by Ataron | 2017-08-10 10:30 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/27041267
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。