creatersnest

フラットデザインでテキストをかっこよく見せるCSSテクニックまとめ


JPEG や PNG などでテキストを加工していますか?
その手法、通信速度の遅いスマートフォンなどでは
なかなか表示されず、ユーザーをイライラさせてしまうだけです。

テキストのデザイン程度であれば、SVG や CSS で
かっこいい加工を行うことができます。

私はどちらかといえば SVG 派ですが、今回は CSS で
テキストの加工を行っていきたいと思います。

 

Google Fonts を使う

Google Fonts

Google Fonts

 

まず、手っ取り早くテキストのフォントを設定するには
Google Fonts を使うのが賢いです。

気に入ったフォントがあったら「Add to Collection」をクリックして
画面下部の「Use」をクリックしてください。

Add this code to your website: にあるコードを<head>内にペーストします。

次に Integrate the fonts into your CSS: にあるコードを CSS に記述します。
とりあえず、デモとして作成したイメージ画像はこちらです。

イメージ1

サンプルコードはこの記事の最後に紹介しますので、
そちらも参考にしてくださいね。

 

とりあえずイタリック体にしてみる

めちゃくちゃ基本的な加工ですね。

このコードを適用した後のイメージ画像はこちらです。

イメージ2

 (イメージに使ったフォントが悪かったかな…

次はローマ字で使える加工です。

 

スモールキャピタルの加工をする

スモールキャピタルの加工をすると、
アルファベットの小文字の部分が大文字を
縮小したような形で表示されるようになります。

まず、今までのイメージ画像に使用してきた文字は小文字ですが、
スモールキャピタルを指定することで自動で大文字になります。

スモールキャピタルを指定するには font-variant

を使用します。イメージはこちらです。

イメージ3

どんどんいきましょう。

 

文字に色をつける

これも基本ですね。color プロパティを使用します。イメージはこちらです。

イメージ4

 

テキストに影をつける

さて、ここを詳しく解説していきましょう。
まず、完成イメージからみてください。
イメージ5
文字に影ができていますが、よく見ると白い影とグレーの影の2つがありますね。
今回はこのようにコードを書いていきます。

まず、白い影をつけます。

続いて、グレーの影をつけます。今回は透過させるために rgba で指定しました。

どうでしょうか?なかなかいいものが出来上がったのではないでしょうか。

 

まとめ

最終的なコードはこのようになりました。HTML、CSS の順です。

簡単なテキストのデザインであれば JPEG などの画像を使用しなくても
CSS で組み込めることが理解できましたか?

もちろん、今回紹介したのは超初歩レベルなので
応用を重ねることで様々なデザインを作ることが可能です。
是非チャレンジしてみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Hello world! mlooking です!読み方は エムルッキング 。いろいろな情報を伝えられたらいいかなと思っています。

Next Article伝わるロゴをデザインするためのポイント10個