「タグ：webフォント」記事一覧
超簡単！アイコンフォント Font Awesomeの使い方
2014/08/06
ひと昔前なら画像で表現していたようなアイコン。ウェブフォントの登場によって、描画速度が速く手軽に挿入できるテキストフォントとして使用できるようになりました。メニューや見出しなど、重宝するケースは非常に多いですよね。もちろん、ウェブフォントですから、iPhoneやAndroidなどスマホでもアイコン表示できます。今回はフリーのアイコンフォントで有名どころのFont Awesomeの使い方についてまと...
3分で設置できる！？CSS3の角丸グラデーションボタン
2013/07/26
CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像なしで表現できるようになりました。うれしいことにCSSを使用したボタンは簡単に生成できるウェブサービスまであります。border-radiusなどCSS3固有のプロパティなどを知らなくても手軽に装飾ボタンを作れるのです。いくつか有名どころがあり、まとめ記事などもよく見ますが、今回は実際にサイトに設置す...
webフォントの使い方
2013/06/30
HTML5+CSS3で注目度の高いwebフォントの使い方を紹介したいと思います。ここでいうwebフォントはgoogleやモリサワのTypeSquareなどクラウドフォントサービスではなく、自前でサーバにフォントをアップロードして使うスタンダードな手法です。（クラウドフォントサービスの場合はヘッダに専用タグを埋め込むという形になります）基本的にはスタイルシートでの指定となり、使い方としては和文も欧文...
日本語フリーwebフォント 表示サンプル（ゴシック編）
2013/06/26
無料のwebフォントとして使用できる日本語書体を紹介しているサイトはたくさんあるのですが、肝心の表示サンプルが画像でイメージがつかみづらいなと思っていました。そこで、実際にwebフォントを一覧で表示させるサンプルページを作ってみることにしました。webフォントといっても、基本的にウェブ表示専用に作られているわけではなく、WindowsやMacintoshなどのクライアントPCにインストールして使う...
Webフォントとは
2013/06/20
ウェブブラウザではそのパソコンにインストールされているフォントを使用してページを表示します。基本的にフォントの表現は機種依存であり、クライアントがWindowsかMac、もしくはLinuxかによっても見た目が異なってきます。このことはサイト制作者の意図したフォントで表示することができない場合があることを意味します。このため、見栄えのよいフォントで見出しなどを作りたいという場合には、画像化して使うと...
WEBサービスの構築・監修が生業の