あなたは見分けられる！？定番フォント代わりに使えるGoogle Fonts 27書体 | WebNAUT by Beeworks
※この記事は2014年1月6日に執筆された記事です。現在は内容が異なる可能性があります。 あけましておめでとうございます！定番フォントを愛してやまない、デザイナーのタカハマです。今月からTypeSquareの「MORISAWA PASSPORTプラン」が始まるようで、国内サイトでもWebfontの使用が一気に増えそうですね！ そこで今回は、WebNAUTでも使用しているWebfontサービス「Google fonts」から、定番フォントの代わりに使えそうな書体をリストアップしました。 定番フォントをカタチ別にピックアップ 今回は定番フォントの偏りを防ぐために、誠文堂新光社「ABCのみほん〜かたちで見分けるフォントガイド〜」を参考に次のようなカテゴリで分類させて頂きました。 Historical Script 歴史的書体 Serif セリフ書体 Hybrid ハイブリッド書体 Sans Se
Webフォント「Google web fonts」の使い方・実装手順メモ
商用・非商用を問わず無料で利用できるWebフォント、「Google web fonts」の実装方法をさっくりメモっておきたいと思います。 Google Web Fonts Google web fontsとは Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。 Googleの提供するGoogle Web Fontsはアカウント登録の必要も無く、実装が非常に簡単なそれの一つです。商用・非商用ともに無償で利用が可能と言うのもポイント:) ちなみに当サイトでも日付の表示とサイドバー・フッターの見出しにGoogle web fontsの「Coda」を使用しています。 Google web fontsの実装方法 実装の手順は3ステップ。 1.使いたいフォントを選択する 2
[JS]単に縮小して表示するだけではない、レスポンシブ対応の画像ギャラリーのスクリプト -Gamma Gallery
単にウインドウのサイズに依存して縮小するのではなく、コンテナのサイズに応じてグリッドを最適化し、そのサイズに最適な画像を表示する画像ギャラリーを実装するスクリプトを紹介します。 Gamma Gallery: A Responsive Image Gallery Experiment デモページ Gamma Galleryのデモ Gamma Galleryの使い方 Gamma Galleryのデモ まずは、デスクトップで表示したデモからご紹介。 画像の配置にはMasonryを使用しており、高さが異なる画像を一定の隙間で配置します。また、無限スクロールにも対応しており、下部にスクロールするとローディングバーが表示されます。 デモページ：スマフォで表示 Gamma Galleryの使い方 Step 1: 外部ファイル Gamma Galleryのスクリプト自体はjQueryのプラグインではありま
スマホ用のQWERTY配列の物理キーボード「TREWGrip」がかなり画期的なデザイン
スマートフォンやタブレットなどのモバイルデバイスは、PCのキーボードに比べて文字入力がしづらいと感じる場合があるため、モバイルデバイス用のキーボードでは、巻き取り式のものや、紙に印刷して使えるキーボードなど多くのソフトウェアキーボードではない物理キーボードがあれこれと考案されています。そんな物理キーボードで、人間工学に基づいた画期的なデザインかつ、QWERTY配列の操作感で使える物理キーボードが「TREWGrip」です。以前にKickstarterで出資を募集していたものの、資金が集まらずプロジェクトは頓挫したかのように見えていたのですが、見事に自力で製品化直前まで到達しています。 TREWGrip Mobile QWERTY http://www.trewgrip.com/ TREWGripの表側はこんな感じ。真ん中がモバイルデバイスのマウントスペースで、キーボードは右と左に分かれたデザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[2013年3月] AppStore 日本版にあるアプリ数は77万3千本、3月中に2万本増加![[2013年3月] AppStore 日本版にあるアプリ数は77万3千本、3月中に2万本増加](https://cdn-ak-scissors.b.st-hatena.com/image/square/1451c4e4740605ad079f7f40b565f3011c88c5e2/height=288;version=1;width=512/https%3A%2F%2Ftools4hack.santalab.me%2Fmedia%2Fuploads%2F2015%2F03%2Fappstore-japan-hits-apps-analysis-2013-01to022.jpg)
