jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery

私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違

Illustrator を使い始めるにあたっての、予備知識や基本操作をまとめてみました。Illustrator って簡単ではないと思うんですけど、Webデザイナーなら使いこなしたいソフトウェアのひとつですよね。これからWebデザインで Illustrator を使ってみようという人が、少しでも Illustrator に親しんでくれればいいなーと思って書きました。 私はいつも Web制作の時には、Photoshop と Illustrator を使っています。ずっと前、Webデザインを勉強しはじめた頃、私は Illustrator より先に、まず Photoshop から使い始めました。そしてそのあと初めて Illustrator に触ったとき、Photoshop よりもとっても難しく感じて、基本操作もなかなか覚えられなかった想い出があります。 もちろん ベジェ曲線 や パス など、Ill

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

最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で

色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基本的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね！ 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル

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

私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー（私）によるDTPデザイン注意書き：Webと

Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。

WordPress のテーマを自作するときに、よく使っているコードのまとめです。主に functions.php に書いている基本的なコードばかりです。私は仕事で Webサイトを作っているので、後半はクライアントさん向けの Webサイト用コードです。 私、Evernote を使ってるんですけど、WordPress をカスタマイズするコード … たくさんクリップしてあって、ちょっとごちゃごちゃしてきたので整理しました … X( その中から一般的に使えるコードだけまとめてみました。個人的によく使うコードなど、一カ所にまとめておきたいなーと思ったのでメモ書きです。全部 WordPress 3.2 になってから、テスト済みです。 WordPress のよくあるカスタマイズ 目次 セッティング関連 ソーシャルボタンを追加 抜粋表示、the_excerpt 関連 タイトルの文字数を制限して表示する 特

私も大好きな WordPress。これから WordPress を始めてみようかなと思ってる人や、インストールまではしたけど ... という人向けの記事です。カスタマイズなどについての記事ではないので、いつもの読者さん向きの記事ではないかもしれません。 このブログ – Webデザインレシピ、WordPress というキーワードで訪問してくれる人がとても多いんです。でも「WordPress」だけで、複合キーワードなしで訪れてくれているので、WordPress についての何を調べているのかなー …。 なので、今回は WordPress そのものについて、知ってる範囲でまとめてみました。WordPress って何？という漠然とした疑問を持ってる人、または、初めて WordPress を使う！という人向けの記事です。 初めての WordPress 目次 WordPress って何？ WordPre

WordPressのカスタマイズコードでよく見かける add_filter、add_action という関数。これは WordPressのプラグイン API という仕組みを利用したもの。プラグイン API - アクションフックやフィルターフックについて、大雑把ですがまとめてみました。 WordPress を使ってWebサイトを作る時、デフォルトの WordPress の動きを変更したいなーという時が多々あります。WordPress のデフォルトの動き（WordPress Codexでは振る舞いという言い方がされています。）でよく知られてるのは、記事を書くと自動的に <p> タグが入る … とかでしょうか。とにかくそういう WordPress の振る舞いを、何とかしたい場合ってありますよね。 こういった WordPress 独特の振る舞いは、WordPress のコアファイルと呼ばれてるとこ

Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS

Webデザインは、紙の上のデザインと違うところも多いと思います。でも同じデザインですから、歴史ある DTP デザインから学ぶことはいっぱいあります。デザインの基礎の基礎、レイアウトについて、デザインするときに気をつけたい基礎の部分の注意書きです。 毎日インターネットを見ていると、素敵なデザインの Webサイトに出会います。ときにはひと目惚れしちゃうようなこともあります。そんなデザインにあったとき、どうして素敵なのかなーと考えるのも勉強のうち。そう思って素敵なデザインはストックしておいて、自分なりにそのデザインが素敵な理由を考えてたりします。 デザインの理由 どうしてそういうデザインをしたのか … デザインには理由があります。気まぐれに色を選んだり、要素を配置したりしないからです。なので自分のデザインの理由、どうしてそういう風にしたのかということを、口で説明できないとダメだと言われます。もち

CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない

WebデザインレシピのCSSサンプルのページです :D ヘッダーに入れるものがなくなってしまった w ど、ど、ど、どーしよー X( まぁメインのページじゃないからいいことにしよう ... 1. 行間の指定：line-height の小技 ブログのタグクラウドなどで、一行の中にサイズの違う文字がある場合などに、行間がはっきりしないで文字同士がぶつかってしまうことってありますよね。 下にふたつのサンプルを作ってみました。 1.1. 文字同士が重なっている状態 以下はline-height に 1.5.em を指定した状態です。リセットCSSなどの指定方法によってはこうならない場合もあります。 PHP Javascript WordPress Design Art CSS MySQL Illustrator Photoshop 1.2. 全部の文字に line-height が適応された状態 以

このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ

CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし