今月6日、Adobeが提供するフォントライブラリサービス｢Typekit｣にて、新たにモリサワとTypeBankのフォントが使えるようになりました。
今回追加されたフォントはモリサワ10書体、TypeBank10書体の計20書体です。
これで、Typekitで使用可能な日本語Webフォントは全部で34種類に増えました。
既存のフォントや利用方法に関しては以前の記事でも触れていますので、今回は新しく増えたフォントについてご紹介したいと思います。
カテゴリー：デザイン
CSSで作るシンプルな矢印アイコン29個
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。
CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。
今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。
HTML＋CSSだけで作るエアメール封筒
前回、CSSで作る郵便切手と消印風スタンプをご紹介しましたので、今回はエアメール風の封筒デザインを同じくCSSだけで作ってみたいと思います。
せっかくですので、前回作った郵便切手やスタンプと一緒に合わせて、ブログの記事風にレイアウトしてみました。
コピペで簡単！CSSだけで作れる郵便切手と消印風スタンプ
今月7月は別名「文月」と呼ばれ、特に23日には「文月ふみの日」として様々なイベントが行われます。
今回はそんなお手紙と関係の深い7月にちなんで、CSS3を使って画像を切手のように装飾したり、消印風のスタンプを作成する方法をご紹介したいと思います。
好きな風景をパレットに！Adobe Color CCの使い方
Webデザインを作り始めるときにいつも迷ってしまうのがサイトの配色です。
外出先で見かけた風景など、ふとした瞬間に「あ！この配色いいな。今度のWebサイトで使ってみよう」と思っても、その場ですぐ記録する方法がなく、結局デザインする頃には忘れてしまっていたり…。
今回は、配色テーマ作成ツールでおなじみの「Adobe Kuler」が新しく「Adobe Color CC」とサービス名を変更し、とても使いやすくなっていましたので、スマートフォンでの使い方を中心にご紹介したいと思います。
6月23日に終了するFacebook Like BoxからPage Pluginへの移行で気をつけたい事
ホームページなどに表示してFacebookページへの「いいね！」を促すソーシャルプラグイン「Like Box」ですが、このLike Boxは現在deprecated（非推奨）とされており、2015年6月23日にサービスが終了します。これに代わるFacebookプラグインとして新たに、｢Page Plugin」が提供されています。
ここではLike BoxからPage Pluginへの移行で、何が変わるのか、何に注意すればよいのかを見てみましょう。
無料でもOK！手軽に使えるTypekitの日本語Webフォント14個
源ノ角ゴシック・小塚ゴシック・小塚明朝など、AdobeのTypekitにて14種類の日本語Webフォントの提供が始まりました。今までTypekitの日本語フォントはアプリケーションでの利用に限定されていたため、Webフォントとして使えるのは今回が初めてです。
まず、1つから始めましょう 〜レスポンシブWebデザインのブレークポイントについて〜
最近、お客様にご説明する機会の多い『レスポンシブWebデザイン』ですが、基本的に（現時点で）弊社では、PC向け、スマホ向けの2種類の見た目をご提案しています。
つまり、『タブレットにはPC向けの表示を縮小表示するということでいかがでしょうか』という事です。
ものすごくざっくり言うと、レスポンシブWebデザインは、1つのソースコードで、いろんな閲覧環境で見やすい表示になるように対応してみようという試みです。
ImageMagickでCSS Sprite用の画像を作る。
フリーのアイコンを使ってWebサイトを作るとします。感謝しながらアイコンを使っていますが、残念ながら、一つ一つ画像が分かれている場合もあります。別にそのまま使えばいいのですが、サーバーの負荷やクライアント側での速度を考えるとCSSスプライトでやりたいですよね。
自分はプログラマーですし、PCにフォトショップなんて入っていませんし、大体、たくさんのアイコンを一つの画像になんてめんどくさくてやってられないです。当然、デザイナーの方も嫌でしょう。やることはアイコンを並べるだけで単純かつ繰り返しなので、こういう作業こそプログラマーの出番ですよね。
そこで、ImageMagickを使って アイコンを結合します。以下の様なコマンドをコマンドプロンプトやbatファイルで実行して、appendしていけば画像の右にどんどん追加されていきます。[0]がついていますが、つけなくてもいいです。これがついていると元画像がアニメーションgifだった場合に1枚目の画像をappendするようになります。