CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js
久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。 何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。 C
無料・商用OK・リンク不要の、やわらかい印象の日本語フォント・はんなり明朝
以前ご連絡を頂いたフォントポ日本語の 作者さんから新作のお問い合わせを頂 いたのでご紹介。やわらかい印象の明朝 系フォント、「はんなり明朝」です。こちら も商用で利用できるとのことです。なんとも 太っ腹ですね・・ フォントポ日本語の作成者さんからまたまたご連絡いただきました。いつもありがとうございます:D 商用で利用できる日本語フォントに新しく仲間入りです。 かわいいですねーｗきりっとした印象の明朝ですが、こちらは少しふんわりとした印象を与えられそう。明治時代の築地体を参考に作られたそうですよ。 利用規約利用規約は 当サイトのフォントはすべて無料です。個人・商業用途での利用について特に制限はございませんので、どうぞお気軽にご使用ください。ただし、フォントデータの改変はおやめください。また、フォントの使用によって生じたいかなる結果や損害につきまして、一切の責を負いませんのでご了承ください。
地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
設定も簡単・軽量(5KB)・シンプルな、Webサイトのフォントサイズを変更できるjQueryプラグイン・Font sizer
なかなか便利かもと思ったのでメモ。よくある、 フォントサイズを変更できるやつなんですけど、 設定が凄く楽で軽量なjQueryプラグインです。 導入も楽なので積極的にうまく入れて行きたい ですねー。正直使ってもらえるか分からない ものですけど、あれば誰かに役に立つかも 知れませんし。 軽量でシンプルなフォントサイザーです。クロスブラウザで動作してくれて細かい設定も簡単に出来ます。ライセンスはMITとGPLのデュアルライセンスとなっています。 これこれ。よく見かけますよね。多くの場合は小、中、大となっていますが、これはもっと細かい設定を簡単に行えます。ボタンは若干分かりにくいのでその辺は工夫してみてください。 設定を変えるプラグイン（jquery.fontSizer.js）を開いて20行目あたりの変数定義の部分です。 var defaults = { maxSize: 30, minSize:
アイコンやシルエット、矢印など、シンボルタイプのフリーフォントまとめ
アイコンやシンボルなどの形をしたフリーフォント のまとめ。なかなか使い勝手が良いものがいつ のまにか増えていたので色々とまとめてダウン ロードしましたのでその過程で良さそうに感じた ものをシェアしてみます。まだお盆明けだったり お休み中な感じなので軽めの話題で・・ というわけでシンボルタイプのフリーフォントのまとめ。サクッとアクセント加えたい時にアイコン作ったり、というのも面倒なのでフォントで済むならそのほうが早いですし、いくつか覚えておくと便利なんじゃないかなと。 順不同です。ライセンスは各々でご確認ください。 SYMBOL SIGNS ピクトグラムとか標識でよく見かけるシンボルのフォント SYMBOL SIGNS NOTICE こちらも標識で見かけるタイプの角丸フォント NOTICE DINGBESTS 鉛筆や消しゴム、電話機など使い勝手の良いデザインフォント DINGBESTS GL
Media Queryを使用したレスポンシブWebデザインの構築時にはResponsivepxっていうツールが超オススメです
たまたま見つけたツールが泣きそうなくらい 便利だったのでシェア。Media Queryを使用 したレスポンシブなWebデザインの構築時 にとっても役に立ってくれるツールです。URL を指定するだけで、あとは幅を調整しながら レイアウトの微調整が可能です。ページ推移 も不要なのが大きいですね。 今日ご紹介するResponsivepxは、インタラクティブに指定幅の表示を確認出来るWebサービスです。Media Queryを使用したレスポンシブなWebデザイン構築時に、微調整したいときはかなり効果を発揮しそう。 Kristaliaでテスト。URLを入力するとそのサイトが表示されますので、あとはマウスでバーを動かして好みのサイズに変更するだけ。 MediaQueryを使ったレスポンシブなWebデザインのサイトなら設定値に達した時点でMediaQueryが適応され、レイアウトが変化しますので、微調整
スマフォとかミニマルデザインに特化した、これからお世話になりそうなWebデザインギャラリー
自分の中で課題があって、その為に 必要なインスピレーションを得るため のギャラリーサイトをまとめます。いち いちブックマークから探すのが面倒に なってきたのでちょっと整理がてら記事 にします。 というわけで個人的なリンク集です。スマフォとかミニマルデザインとかのWebデザインギャラリーいろいろ。デザインギャラリーですけど、目的はデザインというよりも、技術をどうやって上手く取り入れているかを見たい、という感じです。 ミニマリズム / シンプルミニマリズム、シンプルデザイン専門のギャラリー。 MNIMAL とにかくここ自体もミニマルなギャラリーです。よく見に行ってます。 MNIMAL siiimple シンプルレイアウトなWebデザインのみを集めています。 siiimple Minimal Exhibit ミニマルデザインを収集。少々カテゴリの分け方がアレ。 Minimal Exhibit m
HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS
なかなかユニークだったのでメモがてら。 HTML5で実装する動画コンテンツに字幕 を加える、というjsライブラリです。思いつき ませんでしたけど、こう言うことも出来てし まうんですね・・・HTML5ってやっぱり凄い かも・・（今さらですけどｗ なかなか面白い発想ではないですかね。動画そのものにいれるのが一般的ですけど、簡単なものでいいならこの方法も有りかなと。 上部にHTMLでキャプションが入っています。再生すると、動画が進み、場面に応じてテキストが分かります。 時間がたつと別のメッセージが表示されます。 キャプションの埋め方$(document).ready(function(){ //Slides object with a time (integer) and a html string var slides = { 0: "This is the first subtitle. Y
最近よく使ってる、Web制作に役立つWebサービス的なやつ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
Node.jsをベースとしたCMS・Calipsoというソフトウェアがオープンソースで公開されてるみたいですね
暇がなくてまだ触ってないのでご紹介 するか迷ったんですけど・・node.jsを ベースとしたCMSがオープンソースで 公開されていました。Calipsoという ソフトウェアで、WordPressやDrupal にインスパイアされたそうですよ。 以前書いたようなちょっとしたアプリケーション（リアルタイムで付箋メモを共有できるオープンソースのWebアプリ・Scrumblr）なら見かけましたが、CMSのような、割と実用性のあるソフトウェアがオープンソースで公開されているのはまだ無い気がしますね・・（あるのかな？ サーバサイドJavaScriptの本命とも言われるNode.jsをベースとしたCMSだそうです。こんなのも作れるんですね・・ OSはUbuntu、データベースはMongoDBを使うみたいですね。ライセンスはMITです。 [note]※下記はインスコ手順じゃなくてリンク先を自分用にメモった
Androidのパスワード入力のインターフェースを再現するjQueryプラグイン・DontType!
Androidでのパスワード入力時の インターフェースをWeb上で再現 するjQueryプラグイン・DontType のご紹介。マウスのみでパスを 入力するのでDontType!な訳です ね。IEには完全に非対応ですが、 なかなかユニークなプラグインです。 土曜日なのでややネタ的。IEは完全非対応（canvas使ってるようです）、といっても、通常のパスワード入力になるだけなのでモダンブラウザの方だけ楽しめます（？）。 こんな感じ。Androidユーザーの方なら分かりますよね。僕は持ってないので画像検索しましたｗ 丸い部分をマウスでクリックしてパスワードを入力するのでタイプする必要がないんですね。 使い方<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.mi
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition対応ブラウザ：webkit系(GoogleChrome、Safari等)JavaScript：未使用（※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-in-
デスクトップっぽいUIをブラウザ上で再現するjQueryプラグイン・jDesktop
ユニークなライブラリでしたのでメモも 兼ねてシェア。PCのデスクトップのよ うなUIをブラウザ上で再現するjQuery プラグインです。特にWinのような、と かMacライクな、といったものではあり ませんが・・ご覧頂いた方が早いかと 思います。 正直、使い道あるのかな？とも思ったんですが、iPadのようなタッチデバイスのタブレットなんかで動作すればちょっと面白いこと出来そうな気がしますね・・ PCでアクセスした状態です。アイコンはドラッグで移動できます。デスクトップっぽいUIなので直感で操作できるのが最大の利点でしょうか。触っていただければ分かると思いますが、特にWin風でもMac風でも無い感じです。 アイコンはアクセサリーのようなコンテンツが用意されていて、それを起動するボタンです。上画像では電卓を起動しています。 ゲームなんかもあったり。 iPadでアクセスしてみた 気になったので試
HTML5を実際に使用しているサイトを集めたHTML5専門のWebギャラリー5つ
ふと、HTML5を実際に使用しているサイトの 現状が気になって調べ物をしたので、ついで にシェアします。HTML5を使っているWebサ イトのギャラリーを5つほどご紹介します。 実例からIEへの対応なども学べるので導入 予定の方はチェックしてみては如何でしょう。 日本でもHTML5で作られたサイトを稀に見かけるようになってきました例えばローソンのサイトはHTML5ですね。Twitterでも一部のユーザーに人気のie6botのサイトもHTML5です。 海外では結構な数になってきているようですので実例を見て学びたいと思い、ギャラリーから探しました。 101 Best HTML5 Sites HTML5で出来たサイトのベスト100を掲載しているサイトです。サムネイルも中くらいのサイズで見やすいのでお勧め。 このサイトはシリーズ化していて、他にもTwitterアプリ、iPhoneアプリサイト、An
Webフォントを使ってみよう！@font-face 関連の情報いろいろ
Webフォントを使う機会があった のでついでに備忘録的メモです。 @font-face関連の情報いろいろ。 と言っても、まだそんなに情報が 無いので触りを理解するための まとめ的な記事です。 Webフォントの良い所は、編集作業が不要、コピペも可能でテキストだからSEO的にも有利になりますけど、アンチエイリアスはフォントに依存しますし、日本語フォントはどうしても少なくなってしまうデメリットもあります。 クロスブラウザでWebフォントを利用するには /* IE */ @font-face { font-family: abc; src: url(abc.eot); } /* Firefox, Opera, Safari */ @font-face { font-family: abc; src: url(abc.ttf) format("truetype"); }としてあげるといいみたい。IE
広告等に使えそうなjQueryプラグインいろいろ
広告表示などにうまく使えそうな jQueryプラグインのまとめです。 諸事情で調べたのでついでに メモしておきます。応用すれば 画像を使ったものは全て広告に 使えますが、その中でも特に 良さそうだったものを中心に。 広告に使えるというか、クリック率を高めそうとか目立たせるとかそういう類のプラグインになります。曖昧なまとめですが個人的なメモになりますのでご了承下さい。順不同です。 Cycle Plugin 省スペース内で画像を切り替えるプラグインです。エフェクトもいつくか選べます。 Cycle Plugin jQuery.popeye こちらも省スペースに置けるギャラリー。マウスを乗せるとキャプションが出てそこにリンクも貼れます。 jQuery.popeye Step Carousel Viewer シンプルなカルーセルです。複数の広告をまとめて表示するのに使いやすそう。 Step Caro
無料且つ、ハイクオリティなアイコンを山のようにストックしているIconEasy
アイコンサイトは数多くありますが、 こちらも負けず劣らず、素晴らしい サイトです。クオリティの高いアイ コンが山のようにストックされてい るIconEasyのご紹介。 アイコンサイトは数多くありますが、 こちらも負けず劣らず、素晴らしい サイトです。クオリティの高いアイ コンが山のようにストックされてい るIconEasyのご紹介。 基本的にはデスクトップアイコンみたいですが、5種類の大きさのPNGも配布されています。アイコンはWeb制作に重宝しますのでこういったサイトはいくつ覚えておいても損しないですね。全て無料ですが、ライセンスは異なりますのでDL前にご確認下さい。 綺麗で見やすいサイトですよ。こちらの特徴はハイクオリティながら、数が膨大であることです。 1つのカテゴリでも2万。カテゴリそのものも多くあります。基本的にはセットになっているのでページ数は大量では有りませんが、数そのものは
ページ移動の必要が無くなるページング系jQueryプラグイン・Pagination Plugin
ページングのユーザビリティを あげたいけど、オートタイプは 嫌だ、と言う方にオススメの jQueryプラグインがありました。 選択肢の一つに如何でしょう。
JavaScriptを上手くデザインに生かしたサイトのみを集めているギャラリーサイト・Not Coffee
JSを使ったWebデザインをしたい方 のインスピレーションに良さそうだっ たので記事に。jQueryやmootools、 Prototypeなど、人気のライブラリを 駆使したサイトのみをショーケース化 しているギャラリー、Not Coffeeの ご紹介です。 数はさほど多くは有りません（150~160ほど）が、今後に期待したいギャラリーです。デザインも素敵なものばかりなのでインスピレーションと更なるjsの使い方の勉強にもいいかもですよ。 ギャラリー形式になっています。jQuery、mootoolsなどのカテゴリで分けられているのでライブラリ別で探せます。 サムネイルにマウスオーバーすると必要な情報が出てきます。どのライブラリがどこに使われているか（これはタグで分けています）などが直ぐに分かりますので探しやすいですね。 以下のようなサイトが掲載されていました。 Alex Buga’s Liv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
動きがかわいいcss3+jQueryのコンテンツスライダー・Pretty Simple Content Slider
