Columnコラム2018.03.12HTMLとCSSで作れる!見出しに使えるおしゃれな文字装飾サンプルCSS3がほとんどのブラウザでサポートされるようになり、今まで画像で再現するしかなかったデザインがCSSでも表現できるようになってきています。大昔にさかのぼると、角丸も作れない、なんて時代がありましたが、今となってはCSSを書くだけで実現できます。CSSでこれだけのことができるよ!と紹介したいのですがキリがないので、今回は「文字の装飾」にしぼってご紹介します。Webでかわいくておしゃれな見出しを作るとなると、昔はデザインデータから画像を切り出して・・・と作業していましたが、HTMLとCSSで表現できれば色の変更などの編集や複製がとっても楽ですよね!また、ホバーエフェクト(マウスオンで色が変わるなど)の適用も画像を使うより簡単です。ここでは皆さんに「CSSだけでここまでデザインが再現できる」ということを知っていただきたく、いくつかサンプルを作ってみました。はじめに全スタイル共通で使用するHTMLはこちらです。class="《任意のクラス》">テキストTEXTtext</p>写真を文字の形に切り抜く背景画像を文字の形にマスクして、文字に写真を重ねたような効果も、CSSで表現できます。transparent;}グラデーション上記の写真と同じ方法を使っていますが、背景にグラデーションを敷いています。transparent;}影をつけるtext-shadowで影をつけただけですが、影を二重にするととたんにおしゃれ度がアップします!これは水色の文字+白のシャドウ+薄い水色のシャドウをつけました。0.4);}縁取りtext-shadowで8方向に影をつけています。影をつけるのが上下左右だけだと文字の角が切れているように見えるので、8方向に影&1pxぼかしを入れて切れ目を目立たなくしました。#ff9800;}上記の縁取りを応用。ピンク文字+白のシャドウ+4方向にグレーのシャドウで縁取り。女性誌の見出しに使われていそうなデザインができました。#5d6f77;}ちょっと別バージョン。白文字+グレーで縁取り+黄緑の影です。そこはかとなく青春風味が感じられるのは私だけでしょうか。青春風味をアップさせるためにCSSで傾けてみました。rotate(-4deg);}画像+影のMIX技!文字に画像を重ねた上にシャドウをあわせて、パターンつきの影ができました。黒文字とうっすら見える白い影をtext-shadowで表現しています。#fff;}さいごにCSSで作れる文字装飾のデザインは意外とあるんだなと再認識しました。今までスルー気味だったtext-shadowは意外と奥が深い!無限の可能性を秘めていますね・・・。一覧に戻る通知を受け取るお問合せ以下のフォームにご入力の上、送信ボタンをクリックしてください。すると会員専用記事を読むことが出来ます。会員限定記事を全文お読みいただけます。パスワードを忘れた方へログインIDを入力してください。ログインIDを正しく入力してください。パスワードを入力してください。パスワードを正しく入力してください。ログインID、パスワードが間違っています。ログイン実行中ログイン完了!ページを再読込します。