私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕

数年前にジャンクでRAW画像を撮影できるデジカメPowershot G1/G2を入手し触れて以来、猫さん。はRAWで写真を撮る様になってしまいました。 いまやこのサイト、ブログの写真のほとんどをRAWからおこしています。 RAWで撮るとJPEGと違って一旦PCにデータを移行してそこで"現像"する必要があります。 なので普通にJPEGで撮るのと比べて手間がかかりますが、色や解像度などをその時々に応じて自分が納得できる写真に仕上げられるのが魅力です。 そんなRAW画像を扱う事に慣れてくると猫さん。はデジカメが勝手に生成するJPEG画像に納得できなくなっていました。 そしてある時、 持ち歩けるRAW対応のデジカメが欲しい・・。 ふとそんな思いを抱く様になりました。 Powershot G1/G2は性能面において十分な代物ですが、古い機種なので電池の持ちもそれほど良くありませんし何より重くて

とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート

CSSのセレクタの記述例とそれがどのように適用されるか、実例を見ながら学べるサイトを紹介します。 各ブラウザのサポート状況も掲載されています。 Learn CSS Selectors interactively ※閉鎖してしまったようです（2014年11月）。 [ad#ad-2] サイトに掲載されているセレクタをいくつか紹介します。 :first-of-type この疑似クラスは、指定されたエレメントの最初の子エレメントにマッチします。 記述例 #target p:first-of-type {color: #36de4e;} 表示 対応ブラウザ Firefox Chrome Safari Opera Internet Explorer [ad#ad-2] :first-child この疑似クラスは、親エレメントの最初の子エレメントである場合のみマッチします。 記述例 #target p:

2012年に入り、ロングテールSEOを実践しているサイトのアクセス数が増えている事を踏まえ、今まで以上にロングテールSEOの重要性を感じている今日この頃ですが、根気があれば誰にでもできるロングテールキーワードを上手く拾う方法をまとめておきます。 ロングテールSEOって何よ？という方は、「ロングテールSEOの重要度が増している」や「ロングテールSEOで重要となるドメインパワーと情報の鮮度」をご覧下さい。 私が日頃行なっていることで、ロングテールSEO重視の人の多くが既に実践していることだと思いますが、これから挑戦するという人や上手くアクセスアップしないという人のためになるべく詳細に解説していきます。いつにも増して長文になりますがご容赦ください。 タイトルにWordPressと入っていますが、WordPressサイトに限定したことではありません。個人的にWordPressが好きなのと、ページタ

Target an element and animate its properties. scrollorama.animate('#example1',{ duration:400, property:'opacity' }).

WordPressをカスタマイズするにはちょっと予備知識が必要です。HTML、CSS、PHPなどの知識はもちろんある程度必要ですが、それ以外にも WordPressならではの "テーマ" に関する知識が必要です。初めて WordPress のテーマをカスタマイズするときの手順をご紹介します。 WordPress を使えば、オリジナルデザインの自分だけのブログを作ることができます。でも WordPress で作られたブログをカスタマイズするためには、何をどうすればいいのでしょう？今回は WordPress のカスタマイズするための基礎知識、“テーマ” について見ていきながら、WordPress ブログのオリジナルテーマの作り方の手順を見ていきます。 まず、インストールしたばかりの状態の WordPress では、デフォルトのテーマが選択されていて、すぐにでもブログを書いて公開することができま

「Webサイトを作れるようになりたいけど何から始めればいいかわからない」そんな人のために完全な素人の人がひとりでWebサイトを作れるまでに必要な本や記事集めました。 この記事テーマは３つの記事に分かれています。 一つ目は今回の、 完全素人がひとりでWebサイトを作れるまでに必要な本や記事集めました 　〜①デザイン編〜 後日公開予定の、 〃　〜②コーディング編（HTML&CSS）〜 〃　〜③集客・Webマーケティング編〜 以上の３つです。 Webサイトの制作手順 初めての方は「Webサイトをどういう順番で作るか？」について知らないと思いますので、説明します。Webサイトを作成し、公開してたくさんの人に見てもらうまでには大きく７つのステップがあります。 ①どんなWebサイトにするか考える（企画） Webサイトを作るためにまずはどんな目的で、誰に、どんな情報やサービスを届けたいのかを考え

ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix free via: PrefixFree: Break Free From CSS Prefix Hell [ad#ad-2] Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。 .download { background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3

弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし