こんにちは。
今日は金曜日ですね!
今日も今日とて書き出し、文字起こし作業です^^
さて今日は文字起こしの時、ついでに色情報を抜く方法についてお話しします。
初歩的なことなのでわざわざ書くような内容ではないかも知れませんが忘れないためにも共有します!
なぜ色情報を抜くかというと、文字の色や背景色も一緒に抜いておくとコーディングの際にいちいち調べなくてもいいので楽になるからです。
メモのようなものなのでHTMLに直接スタイルを書いています。(※実際のコーディングでは直接スタイルを書かない方がいいです)
<p><span style=”background-color:#ccc;”>スポーツ</span>ダミーダミーダミー</p>
のような感じです。(例はスポーツというカテゴリーの背景色が違う場合)
ではさっそく背景色、文字それぞれ色情報の抜き方を見ていきましょう!
背景色の場合
「属性」の項目に選択した色情報が出ます。
(今回は赤の背景の部分を選択しました)
画像を見ると赤くなっている箇所がありますね。
ここをクリックすると下記のような状態になります。
ここで、レインボーになっている箇所をクリックします!
すると下記のウィンドウが開きます。
ここで色の数値をコピーして貼り付けたらOKです^^
文字の場合
こちらはわかりやすいですね。
「文字」の項目にカラーという色情報が出ます。
(今回は黒の文字を選択しました)
こちらも同じようにクリックするとこのようなウィンドウが開きます。
このまま数値をコピーして貼り付けたらOKです!!
注意
文字の項目なのですが、狭まっていてカラー情報が見えていない場合もあるので、そういう時は広げましょう!(実際わたしは見つけられませんでした・・・^^;)
最初は色情報をとるのにスポイトツールを使っていたのですがこちらの方が簡単で確実だと思いました!
今日はここまで^^
コメント