今回は文字装飾のCSSについて学習します。
HTMLでも文字装飾文字装飾はできますが、
CSSではさらに細かく指定できる他、HTMLファイルをごちゃごちゃさせないメリットもあります。
文字色の指定
・color:値
文字色を指定することが出来ます。
値は色コード、または色名を指定します。
色コードで指定
色コード(16進数)は、「#(シャープ)」に続けて
赤、青、緑の各色の分量を2桁ずつで指定します。
色の強弱は「0123456789abcdef」の16進数で表し、
「00」が最も弱く、「ff」が最も強くなります。
さて、なんのこっちゃって感じですよね(笑)
というわけで
イラストレーターのカラーパネルを見てみましょう!
色が強く出る、ということはより原色に近いという事。
赤は、赤色のみが一番強く出ている色なので、
#ff0000となります。
色コードについては、正直覚える必要はないです。
実際に目で見て色を決める方がいいからです。
赤はいくつ、緑はいくつ、青はいくつ…と数字で色が作れちゃうならいいですが
無理ですよね(笑)
色コードは、検索しても見つけられますし、
イラストレーターなどのペイントソフトを持っていれば、
カラーパネルなどから簡単に調べることもできます!
色名で指定
色コードではなく、
色の名前で文字色を指定することもできます。
色名 | 色 |
black | 黒 |
silver | 銀 |
gray | 灰色 |
white | 白 |
red | 赤 |
yellow | 黄色 |
lime | 黄緑 |
aqua | 水色 |
blue | 青 |
pink | ピンク |
green | 緑 |
もちろん他にもたくさん色名で指定することのできる色があります!
ただし、色名で指定する場合は、原色の色がほとんどなので、
ホームページが安っぽく見えてしまうデメリットもあります。
色名の良さは、
色コードだとコードを忘れてしまって色を統一できなかったりしますが、
色名なら間違えることもないですし、色の差などもないので、
何度も使う場合にはとても便利です!
また、英数字ではその色が何色かすぐに判別できませんが、
色名ならどんな色かCSSを見るだけでも判断できるので便利です。
メリハリを作って読みやすい記事に!
私の記事が読みやすいかは置いといて…(笑)
文字色を付けることで、
何を伝えたいのか、何を訴えたいのか、
を強調することが出来ます。
ホームページやアフィリエイトサイトを作る際は、
何を伝えるのか、はとても重要です。
コピーライティングでキャッチコピーを考えた後、
それをデザイン化するとき、
伝えたい部分を強調するかしないかでも反応は大きく変わります。
文字装飾は、手軽にできる”伝えたいことの強調”です。
基礎の基礎として、必ず使えるようになりましょう!
【個人的なお話】
最近、体重が急激に増加しておりまして…
アフィリエイトとわかっているのにもかかわらず、
ダイエット系のサプリに手を出しそうになってしまっています(笑)
運動が一番だとはわかっているのですが…
19歳の時、当時の彼氏に
「いつまで太るの?」と言われたくらいドスコイ化してた体を、
某軍隊式エクササイズで10kg絞りました。
あの頃の自分とは体力が大幅に変わっておりますが、
再チャレンジしようと思います!
目指せ-10kgをここで宣言!
夏には素敵な水着姿を披露できるように…!笑
この投稿は、以前運営していた同名のブログに当時書いたものを再掲載しています。
そのため、現在はデータがない画像などもあります。ご了承ください。
また、アフィリエイトやホームページの情報についてのブログですが、情報としても古いものが多いです。
過去の記事を改めて更新する予定はございませんので、ご承知おきください。