The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
お久しぶりです。 しばらくLIGのブログ更新に参加できていなかった野田です。。 今回は、WEBや紙媒体の広告でよく見かけるようになった日本語フォントをまとめてご紹介させていただきます。 フォントは、デザイン全体のイメージを決める大事な要素でもありますので、常に流行を見ておかなければ、サイト自体もフォント一つで古いデザインだなーと思われてしまうことがあります。 っていうか僕はそういう細かいところを見るのが大好きです。 僕の妻もデザイナーのため、毎日のように「このサイトのフォントはあれだねー」なんて話をしています。 そのため、知ってて損のないよう、いくつかのフォントを簡単にご紹介させていただきます。 ご参考までにどうぞ! はるひ学園 素朴でかわいく、ポップさをもった書体です。 余白を目立たせ、素朴な空気感を活かしてあげると良いですね。 丸フォーク 明朝体に似ていますね。 きれいなラインで、シュ
twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。 今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。 実物は別サーバーにアップしていますので、こちらでご確認ください。 今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。 で、まず最初にアイコン形式のフォントを読み込む設定をします。 @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols-regular-webfont.eot'); src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webs
よく使うclearfixから、見出しの画像置換や見た目非表示の新しいスニペット、レスポンシブによく利用されるスニペットなど、スタイルシートのよく使用する有用なスニペットを紹介します。 A Collection of Handy CSS Snippets 下記は各ポイントを意訳したものです。 ショートハンドのclass デザイン関連のスニペット 開発関連のスニペット 印刷・Retina・検証用のスニペット ショートハンドのclass よく使用するショートハンドのclassから始めましょう。 ポイントはセレクタでエレメントを定義するのではなく、すぐに利用できることを前提にしています。 まずは、テキストと画像を配置する時に簡単に使えるfloatです。 .float-left /* こんな感じに直観的に分かる名前で */ { float: left; } .float-right /* こんな感じ
Typography on websites has become even more popular on the Internet in recent years. In the past, this was ignored, but with the different screens nowadays, this is an essential topic that should be dealt with. These days, with the options to use Web fonts like Google Fonts and Typekit, you can achieve cross-browser, stunning and high-resolution web texts without worrying the screen sizes. Your De
html5一見、コピーできるように見えますが、ペーストしてみると・・・。ツイートする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く