webフォント 一覧

超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。
ウェブフォントの登場によって、描画速度が速く手軽に挿入できるテキストフォントとして使用できるようになりました。

メニューや見出しなど、重宝するケースは非常に多いですよね。
もちろん、ウェブフォントですから、iPhoneやAndroidなどスマートフォンでもアイコン表示できます。

今回はフリーのアイコンフォントで有名どころのFont Awesomeの使い方についてまとめてみたいと思います。

続きを読む

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像なしで表現できるようになりました。

うれしいことにCSSを使用したボタンは簡単に生成できるウェブサービスまであります。
border-radiusなどCSS3固有のプロパティなどを知らなくても手軽に装飾ボタンを作れるのです。
いくつか有名どころがあり、まとめ記事などもよく見ますが、今回は実際にサイトに設置するまでを実践してみたいと思います。
驚くほど簡単に設置できます!
続きを読む

webフォントの使い方

HTML5+CSS3で注目度の高いwebフォントの使い方を紹介したいと思います。
ここでいうwebフォントはgoogleやモリサワのTypeSquareなどクラウドフォントサービスではなく、自前でサーバにフォントをアップロードして使うスタンダードな手法です。(クラウドフォントサービスの場合はヘッダーに専用タグを埋め込むという形になります)

基本的にはスタイルシートでの指定となり、使い方としては和文も欧文も変わりありません。 続きを読む

日本語フリーwebフォント 表示サンプル(ゴシック編)

無料のwebフォントとして使用できる日本語書体を紹介しているサイトはたくさんあるのですが、肝心の表示サンプルが画像でイメージがつかみづらいなと思っていました。

そこで、実際にwebフォントを一覧で表示させるサンプルページを作ってみることにしました。 続きを読む

webフォントとは

ウェブブラウザではそのパソコンにインストールされているフォントを使用してページを表示します。基本的にフォントの表現は機種依存であり、クライアントがWindowsかMac、もしくはLinuxかによっても見た目が異なってきます。

このことはサイト制作者の意図したフォントで表示することができない場合があることを意味します。

このため、見栄えのよいフォントで見出しなどを作りたいという場合には、画像化して使うという手法が用いられてきました。 続きを読む