2013年9月9日のブックマーク (6件)

  • うつくし明朝体+オープンソースフォント商用可能

    フリーフォントうつくし明朝体+は商用可の日語書体 フリーフォントうつくし明朝体+フォントは、無料ダウンロードでき商用可能な漢字も入った日語書体。このフリーフォントは第二水準の漢字も含まれ、ワープロ、Adobe製グラフィックソフトなどのアプリケーションで自由に加工して使えます。ひらがな、カタカナをオリジナルで制作し、漢字をIPAex明朝で補完しています。 フォントのデザイン特徴について オールドスタイル明朝体は、基的に縦書きの美しい流れを重視してデザインされています。印刷物やデジタルデバイスなど日常生活において明朝体の横書きが主流になっており、今後はより横書きの需要が高まっていくと感じています。うつくし明朝体+は柔らかさ・レトロな味わい・漢字とかなのバランスなど求められるオールドスタイル明朝体のエッセンスは残しつつ、横へのつながりを感じさせるモダンなデザインにしました。垂直水平のライ

  • ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.js

    ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。 更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。 var favicon=new Favico({ animation:'slide' //アニメーションエフェクトの指定 }); favicon.badge(1);エフェクトは上記のようにセッティングします。 var favicon=new Favico({ bgColor : '#5CB85C',//背景色 te

    ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.js
  • ウェブサイトのヴィジュアルを定義するスタイルガイド用のテンプレート素材 -UI Style Guide Template

    UIスタイルガイドとはウェブサイトのヴィジュアルを定義するもので、コンテンツから切り離すことによりウェブサイトのスタイルを的確に確認するのに役立ちます。 UIスタイルガイドを作成する際にベースとなるテンプレート素材を紹介します。 UI Style Guide Template UIのスタイルを一括で管理することでデザインの作業時だけでなく、コーディングや検証の時にも重要なガイドになるでしょう。また、クライアントがヴィジュアルの変更を求めてきた際も、部分的にみるのではなく、全体を通して整合性をもった対応を行うことができます。 テンプレート素材にはカラースキームや背景をはじめ、さまざまなUIエレメントのスタイルが定義されています。

  • [報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ

    先日、勉強会でAdobe Bracketsをはじめて触ってきました! 私はST2に恋している身なのでそこまで興味はなかったのですgげふんげふん!これ、使ってみたらなかなか良かったのですよ…! なので、今日はそこで学んできたAdobe Bracketsの魅力と、コーダー必須アイテムであるEmmet(Zen-Coding)のインストール方法を皆さんにご紹介したいと思います!! というわけで、@stocker_jpさんがオープンされた教室『Stocker.jp / Space 』にて行われた@glatyouさんのAdobe Brackets勉強会にいってきました。 こういう勉強会に参加して、アプリケーションに触れてみるのって大事ですねー。ST2の時も触るまで微塵も興味なかったなぁ…w Adobe Bracketsとは Adobeから出ている無料のテキストエディタです。CCに加入している必要はなく

    [報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ
  • デザイナーさんの為のjQuery講座 Lv.2 [動かす編] | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    お盆休み中はリア充でした。 鳥よしです。 前回、記事を書いた際にテキストの編集じゃモチベーションが上がらん!との意見を頂いたので、今日は前回のおさらい(デザイナーさんの為のjQuery講座Lv.1)も兼ねて、色々動かしてみようと思います。 手を抜いているわけではないのです。 勉強会の内容を見直してもらえればいいのです。 1.前回の内容を駆使して、トグルしてみよう! トグルとは、ある同じ操作を繰り返すことで、機能や状態のON/OFFを切り替える仕組みのことである。 まずは何でもいいので、HTMLを用意してみましょう。 <body> <input type="button" id="toggle_btn" value="トグルさせる"><br /> <div id="text_1"> この夏の<br /> リア充な日々は<br /> もう<br /> 終わって<br /> しまったのです。 <

    デザイナーさんの為のjQuery講座 Lv.2 [動かす編] | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • デザイナーさんの為のjQuery講座 Lv.1 [入門編] | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    暑いですね。 鳥よしです。 あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。 サボってるわけではないのです。 勉強会の内容を見直してもらえればいいのです。 1.jQueryを使用するために まずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> これは、jQueryの実ファイルをgoogleさんから参照しているので、ネットにつながっていないと使用できない書き方ですね。 今回は何も考えずサクッと動かしたいのでこれで行きます。 これによってjQueryが使用できるようになります。 2.jQueryの書き方 jQueryの書き

    デザイナーさんの為のjQuery講座 Lv.1 [入門編] | 株式会社LIG(リグ)|DX支援・システム開発・Web制作