読者です 読者をやめる 読者になる 読者になる

仕事は母ちゃん

どーってことない脳内と日常の垂れ流しです

MENU

CSSで文字を修飾してみる

ネット・CSS

お祭りに今年から若衆として参加する次男。その次男が「祭りに穿くズボンと地下足袋買うからお金ちょうだい」と言ってきました。しかし長男はもう祭りに出なくなった人のお下がりをもらったのでズボンの値段がわからない。でもまあ1万円あったら足りるだろうと次男に渡したさっこさんですこんにちは。駄菓子菓子!1万円で足りなかった…。昔、自分で購入した夫によるとズボンは5千円ぐらいって話だったんですが、なんと7千円もしたそうで。地下足袋も2千円ぐらいかなあと思ったら3千円近くしたので、消費税合わせたら1万円越えちゃったと。次男が自前の財布持っていて良かった…。まあ足りなかったら長男がついてたので長男にお金借りてたろうけど。

とまあ諭吉さんがひとり旅立った本日は、CSSで文字を修飾する方法をメモ代わりに書きとめます。自分でも長いこと使わなかったら忘れちゃうんで、自分のブログでまとめとけば後々便利かなと。というわけでこれからちょくちょくこういうエントリーを書くつもりです。

参考サイト

基本的なCSSの使い方や解説で使われる言葉の意味はこちらのサイトを見ればわかると思います。

文字色を変える

まあ基本的なやつですね。カラーコードは下記のサイトを参照してください。

いろずかん

サンプル

仕事は母ちゃん

/*HTMLサンプル*/
<p>仕事は母ちゃん</p>
/*CSSサンプル*/
p{
   color:#5882b5;/*文字色*/
}

HTMLは同じなので、これ以降はCSSサンプルだけ記述します。

文字の太さを変える

これはfont-weightというプロパティを使います。normalが普通の太さ、boldが太字です。ただ、私が確認した範囲ではAndroid版Yandex Browserでは半角英数字しか太さは変わらないようです。まあブラウザによってバグがあるのはよくあることさ。

サンプル

仕事は母ちゃん

p{
   color:#5882b5;/*文字色*/
   font-weight:bold;/*文字の太さ*/
}

先頭の文字だけ修飾する

先頭の文字だけサイズを変更したり色を変えたりすることができます。これにはfirst-letterという疑似要素を使います。今回は色を変えてみましょう。

サンプル

仕事は母ちゃん

p{
   color:#5882b5;/*文字色*/
   font-weight:bold;/*文字の太さ*/
}
p:first-letter{
    color:#00a0ff;/*先頭の文字の色*/
}

先頭文字の直前に内容を挿入する

beforeという疑似要素を使うと先頭文字の直前に文字や画像などを挿入できます。今回は記号を挿入してみます。記号はそのまま記述しても反映されますが、ブラウザによっては文字化けする可能性があります。というわけでUnicodeで指定するのがいいでしょう。Unicodeがなんなのかわからないよ!という方でも下記のサイトの「content 設定値の Unicode 変換ツール」を使えば簡単にコードを取得できます。記号を入力して「変換」ボタンをクリックするだけでOK。

beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

サンプル

仕事は母ちゃん

p{
   color:#5882b5;/*文字色*/
   font-weight:bold;/*文字の太さ*/
}
p:before{
   content:"\002618";/*挿入する記号*/
   color:#00b368;/*記号の色*/
   padding-right:5px;/*記号と先頭文字の間隔*/
}

文字をぼかしてみる

text-shadowという文字に影をつけるプロパティがあるんですが、これを応用すると文字をぼかすことができます。

サンプル

仕事は母ちゃん

p{
   color:#5882b5;/*文字色*/
   font-weight:bold;/*文字の太さ*/
   text-shadow:0 0 1px;/*1pxの数値を大きくするとよりぼかすことができます*/
}
p:before{
   content:"\002618";/*挿入する記号*/
   color:#00b368;/*記号の色*/
   padding-right:5px;/*記号と先頭文字の間隔*/
}

最後に

検索すると「コピペするだけで使える」と解説されてるサイトがありますが、コピペしてもうまくいかないときに理由がわからなくて困ることもあると思います。ですからできるだけCSSの使い方の基本だけは押さえておいたほうがいいです。全くCSSについて知らなかった私でもこの程度なら独学で覚えられたので大丈夫。そんなに難しくはないですよ。手始めによく使ってるサイトにユーザースタイルシートを適用してデザインを変えちゃう、というのはどうですかね。練習にはもってこいですよ。簡単な使い方は下記のエントリーを参考にしてね。