個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき

これならjQueryじゃなくてもいいんじゃ 無いか、っていう記事です。短くて使い やすいスニペットなんですが、まぁ用途 は人それぞれだと思うので適当に流して 下さい。自分が使いやすいようにまとめ たいだけです。 そのコードおかしいわーみたいなのあったらすいません。まぁその程度の記事です。というわけでいろいろとツッコミどころ満載かもですが、あんまり気にしないで下さい。じゃあ記事書くなよって話ですけどｗ デモの見方 jsfiddleというサービスを好んでよく使うのですが、あまり見慣れないかもなので一応デモの見方を。上図の○で囲った部分、Resultを押せばデモ画面に、再生ボタンでリロードします。 簡単なコードなので実践で使うにはもう少し工夫が必要です。また、jQueryの勉強にもなるかもしれません。jsfiddleはフォークできるので宜しければ改善や動作の勉強等にご利用下さい。 こういうスニペ

珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script>で、マークアップ <canvas id="bgCanvas"></canv

cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef

なんとなく情報が少ない気がするので試しに 書いてみます。WordPressで運営している サイトでYoutubeをよく貼るようなことが多い ならちょっとお得、というか管理が楽になる かも知れないTipsをいくつかご紹介。自分 でも動画を使うサイトには取り入れたいカス タマイズです。 Youtubeをよくはってるサイトやブログを良く見かけますので少しでも効率が良くなればなぁと思ってTipsをいくつか書いてみました。コードばかりで何があるか分かりくいですが内容は以下になります。 ショートコードで動画を貼るカスタムフィールドで管理するz-indexが自動で効くようにしてあげるレスポンシブWebデザインに対応させるYoutubeのサムネイルを取得する管理画面で固定の動画を管理するショートコードで動画一覧をドバッと出せるプラグイン・TubePressショートコードで動画を貼るショートコードでYout

ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合に

jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では なく、参考サイトなど一貫性無い感じですが。 整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。 ページ移動にAjaxを使わないようにするプラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/

以前書いたWordPressでWeb制作する際 の手順リストが少し古い情報込みだったり するので改正版を書きます。先日、WPも 3.2のリリースを迎えましたので、手順リスト もアップデートすることにしました。多少考え が変わっているので内容も少し変更有ります。 以前のリストの改正版です。加えて他の情報も一緒に載せておく事にしました。 【2011・07・11】 WordPressインストールサーバーを用意（PHP5.2.4 以上 / MySQL5.0 以上）DBを作成WordPressをダウンロードし、解凍wp-config-sampleをwp-configにリネームし、内容をDBに合わせて変更プリフィクス（接頭語）を変更する（wp_→foodblog_）FTPソフト等でサーバーにアップロードサイト名やパスワード、IDを決める（adminは避ける）作成したユーザー名でログインダッシュボードの

少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 →　黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib →　よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を

今さらですけど、「SEOってどんなもの？」 っていうおさらい的な記事を書いてみます。 一部の業者さんによってSEOへの認識は まったく違うものになってしまい、頭の良い 人まで勘違いするようになってしまいました。 残念な事です。 というわけで、おさらい。SEOとは何か、について簡単に。とくに釣られたわけではないでｓ SEOとはSEOはサーチエンジン最適化の略称です。現在はもうGoogleが主流なのでGoogleに最適化するのがSEO、という認識で大体あってます。勿論、人が使う検索エンジンは他にも沢山ありますが。 では、「最適化」とはどういったものを指すのでしょうか、という話なんですが、まぁ最適化する為の施工なので、 ユーザーにとって有益でないコンテンツを表示させないようにするクローラーにsitemapを送信してインデックスするのを助けてあげるURLの変更等で、適切なリダイレクト処理を行うそも

なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ

Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery

人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本

css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～

いくつか知っておいた方が、必要な時に 探しやすいと思ってメモします。Webサイト のデザインをヘッダーやフッターなど、 パーツ別に収集しているギャラリーサイトが いくつかあるのでまとめます。 そんな大量に有るわけではないですけど。パーツのデザインはいつも迷うのでこの手のギャラリーはいくつあっても結構重宝しますよね。 ブブンデザインアーカイブ 国内でおそらく唯一のパーツ別デザインギャラリーです。ナビゲーションやフッターなどで探せて、収集しているサイトも国内メインなので参考になるのでは。 ブブンデザインアーカイブ MephoBox ヘッダーやフッター、ナビゲーションやフォームデザインだけでなく、404やカレンダーなど全てのコンテンツをカテゴリにしてパーツデザインを収集しています。おすすめ。 MephoBox Pattern Tap こちらもナビゲーションやボタン、フォームデザインなどに分けてデ

いよいよ2011年がスタートしました。 今年も去年同様、勉強することが 沢山あります。まだモチベーションが そこそこあるうちに勉強になりそうな 国内の記事をリンク集にしました。 迷ったときに見てみようかなと思い ます。 より最適な方法というのはあると思いますが、まずは扉を叩かない事には何が悪いかも分かりません。ということで、内容に拘らず、否の意見をスルーしてここに色々まとめさせて頂きました。 勉強したい気持ちはあるけど出来ない理由は「何を始めればいいのか分からない」という方も、何が出来るのか、どういった勉強法で出来るようになるかが分かればやる気が起きるかも知れません。 5分で分るシリーズ以前も流行ったんですね。Web関連以外も含めてここにまとめられています。 5分で分かる PHP を知らない人が PHP の便利さを学べる記事を書いたよ5分でわかる Ruby を知らない人が Ruby の便利

ちょっと感動したので脊髄反射で ご紹介。日本の不動産サイト向け に作られたプラグインがかなり良い 感じです。不動産サイトの構築も かなり楽になりそうですよ。こういう ものは有料が多いですが、こちらは 無料で提供してくれています。 いつ有料になっておかしくない気がしますので今のうちにDLしておきました。お礼も兼ねて記事にさせて頂きます。 WordPress 不動産向けプラグイン もう、なんというか感謝です。このプラグイン入れるだけで、かなり楽になりますよ。 ざっと機能をご紹介。 専用の投稿画面 ↑　通常の投稿画面とは別に、専用の投稿画面が用意されています。 画像を種類別に分けられる 不動産独特の画像の種類で分けられます。例えばキッチンとかトイレ画像とか。 管理用項目や詳細項目 物件番号、掲載日や制約の有無なども決められます。状態では空いてるかどうかの選択も。また、物件の種別、賃貸なのか分譲な