URL指定可能なレスポンシブWebデザイン対応確認ツール・responsive.isと似たようなやつ何個か
ちょっと便利かも、と思ったのでメモ。 URL指定が出来るレスポンシブWebデザイン 対応確認ツールです。この手のツール はかなり増えているので今更感も否め 無いんですが、URL指定で直接見れるの で、人に見せるのには結構いいかも知 れないです。 というわけで、レスポンシブWebデザインの対応確認ツールです。他にいろいろ。先に紹介します。 ResponsivepxResponsive Design TestingSimple Media Queries TesterscreenflyResizer使い方の説明は多分不要です。これらは同じ目的で作られてますので使いやすいのを選ぶ感じで。 で、今日はresponsive.isっていうツールと、responsinatorっていうツールの2つをご紹介です。 ちょっとキャプチャだと分かりにくいんですけど・・・最上部にスマフォとかタブレットのアイコンがあ
15秒でHTML5のテンプレを作成出来るWebツール・InitializrがTwitter Bootstrap 2にも対応した模様です - かちびと.net
InitializrっていうHTML5のテンプレ を15秒で作成出来る(らしい)ツール があるんですが、このWebツールが、 話題のTwitter Bootstrap 2にも対応 したみたいです。人気のフレーム ワークなのでありがたいですねー。 土曜日ですし、軽い話題。15秒でHTML5のテンプレが作れる！と謳うWebサービス・・InitializrがBootstrapに対応してます。これは地味に嬉しいんじゃないですかねー。 右側になんか増えてた！Bootstrapやたら人気ですしね。こういうのは嬉しいんじゃないでしょうか？Initializrはその気になれば本当に15秒で作成出来るので使うといいですよ。性能とか特徴は使って実感してください。 作ってみた 試しに15秒で支度してみました。こんな楽でいいのかな・・・LESS版も選べるので設定項目は好みで設定してくださいませ。 因みに・・・ B
CSSのみで約900パターンものユニークなグリッドレイアウトをドラッグ&ドロップで作成出来るWebサービス・3x4grid - かちびと.net
3連休を如何お過ごしでしょうか。さて、 ちょっと面白いものを見かけたのでシェア します。Masonryのようなレンガ風の レイアウトをCSSのみでサクッと作れる Webサービス。パズルのように組み合わせ るので種類は900パターン近くになる そうですよ。 休日なので軽めの話題でも。 よくあるグリッドレイアウトのCSSジェネレーターと違って汎用性はありませんが、こういうサービスが出てきたのがちょっと面白いなぁと。jsも使わないし、直感で作れるのでお手軽といえばお手軽じゃないですかね。 このようにパズルのようになっていて、右のエレメントをドラッグし、左にドロップしてボックスを配置する、というもの。jsは使われず、CSSのみで作れます。 操作は直感で出来ると思います。 作ったらコードを発行してもらえます。 Example 960pxで作成されますので汎用的ではありませんが、これはこれで面白いかな
無料で手に入るECサイト向けのWordPressテーマいろいろ - かちびと.net
ご質問頂いたので記事にしてみます。ECサイト をWordPressで構築したいけど良いテーマや、 参考になるテーマはないだろうか、との事でした ので、無料で手に入るECサイト向けのWordPress テーマをいくつかご紹介します。ソースコードや デザイン、レイアウトなどを参考にしてみては いかがでしょうか。 というわけで無料で手に入るECサイト向けのWPテーマです。さほど数は無いですけど・・ECサイト構築用のプラグイン（WP e-Commerceなど）に依存したテーマなどもあります。 でもまぁ大半はtokokoo.comで配布されているテーマです。多くのテーマは有料ですが、一部の機能を削ってフリー配布してくれています。ダウンロードにはユーザー登録（無料）が必要です。 BuySell Theme 綺麗でシンプルですね。個人的には一番好きでした。キャプチャは商品ページです。要WP e-comm
iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
ノンプログラマー向けのWordPressカスタマイズハック用プラグイン・WP Total Hacks - かちびと.net
昨日Twitterにも情報流れてましたけど やっぱり便利なプラグインなので、改め てご紹介。僕やほかのブログでもよく 見かける、functions.phpにコードを追加 して行うカスタマイズを1つのプラグインで 管理できるようにしたもの。 デベロッパーは最近よくお話させてもらっている@miya0001氏。よく見かける、需要の高そうなfunctions.phpでのカスタマイズをプラグインで一括管理出来るようにしてくれました。 ページ推移も不要で、よく見かけるカスタマイズハックを簡単に行うことができます。 functions.phpに追記すればOKなものばかりですが、もともとコードがごちゃ付いてる場合も多々ありますが、PHPの知識が無いとなかなかテーマファイルに手を加えるのはハードルが高いと思います。そんなノンプログラマーさん向けに作られたプラグインです。 出来ることは以下。プラグインを有効化
美しいフォームデザインを実装する事が可能なjQueryプラグイン・Ideal Forms - かちびと.net
チェックボックスやラジオボタンなど、フォーム周り のデザインを美しくする事が出来るjQueryプラグ イン・Ideal Formsのご紹介。スタイルもいくつか 用意されており、フレームワークとして使えるよう です。デザインテーマもいくつか用意されている ので好みで選ぶことも出来ますね。 ボタン、セレクト、ラジオボタンやチェックボックス等のフォームデザインを変更できます。デザイの変更はcssのみで可能なフレームワークタイプなのでノンプログラマーな方でも気軽に使えそうですね。IE6以外は対応しているようです。 フォームのデザインをガラッと変えることが出来ます。よりデザインに統一感を出せそうですね。 テーマも用意されている Ideal Formsはフレームワークとしても利用出来るように、cssでデザインが変更できる作りになっています。現在は3つのcssファイルがテーマとして用意されていますのでそ
商用サイトでも無料の国内外のWeb制作に使える素材サイト総まとめ・2009 - かちびと. net
ローカル環境にストックしていた日本国内、海外サイトで商用OKなWeb素材を配布しているサイトのリンク集が結構な量になってきたので出来る限り多くの方とシェアしたいと思ってエントリーします。 懐の広いクリエイターさん方に感謝します。このリンク集は商用サイトでも利用が可能（Commercial use）なWebサイトの素材情報です。一応確認はしていますが、ご利用の際はご自身の目で必ずライセンスや利用規約（Terms of Use等）をご確認下さい。サイトごとに利用規約も異なります。当サイトは一切の責任を負いかねます。 日本国内、及び海外の商用OKなWeb素材配布サイトと日本語で紹介された海外記事のまとめです。 2度手間を防ぐ目的でリンクにマウスオーバーすると画像をツールチップで表示するようにしました。多少表示に時間掛かるかもしれません。 写真 商用サイトでも利用できるロイヤリティフリー、パブリッ
テーブル内の行やセルなどの要素をドラッグ＆ドロップで自由に配置できるスクリプト・REDIPS.drag
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
お手軽WordPress Tips：管理画面で追加できるウィジェットで不要のコンテンツを削除する - かちびと.net
誰でも手軽に出来るWordPress tips。 今日のお手軽カスタマイズは殆ど需要が 無さそうですけど僕に需要があったので 好き勝手に書いてみます。WPで作った Webサイトの納品先のクライアントさん側 でウィジェトを使ってもらうのですが、多く でよく分からないと言われたので消しました。 そういうわけで、管理画面→ウィジェットで使わないものを消す方法。要らない物は表示させても仕方がないので消しましょう的な内容になります。 はじめに：テーマでウィジェットを使えるようにする 分からない方用に、念の為ウィジェットをテーマで使えるようにする方法を書いておきます。テーマにウィジェットを対応させるにはfunctions.phpに以下のようなコードを記述 if ( function_exists('register_sidebar') ) register_sidebar(); さらに、サイドバー等に
「Webデザイン用のフリー素材をシェアしよう」がコンセプトのWebデザイナー専用コミュニティ・Designmoo - かちびと.net
無料でハイクオリティなPSD素材や フォント、テクスチャなどWebデザイン に欠かせないリソースを無料でDL 出来るコミュニティサイト・Designmoo のご紹介。コミュニティに参加せずとも 使わせてもらえますのでリソースサイト として覚えておくといいかもしれません。 「あなたの役に立つか分からないけど、よかったらリソースをシェアしよう」とのこと。フォントやテクスチャ、PSD素材やブラシなど多くのWebデザイン向け素材が無料で手に入ります。メンバー登録も不要ですよ。 メンバーになるには招待が必要みたいですが、素材のダウンロードは誰でも登録不要で出来るみたいです。 いくつかピックアップ Dyslexia 可愛らしいビットマップフォント Dyslexia 4 minimalistic notice styles ポップアップを優しい色合いに。 4 minimalistic notice st
Twitterのつぶやきを、3行のコードでWebサイトやブログに表示させる
お問い合わせを頂いたのでついでに ご紹介。Twitterのウィジェットのような ものをお探しだったようですが、現在の 公式のウィジェットではなく、色々とcss でカスタマイズ出来るようにしたいとい うご希望でした。Twitterの投稿を表示す るだけなら3行もあれば実装出来ます。 タイトルはやや釣りに近いです。知らない方向け。 Webクリエイターボックスさんで表示されてるような感じにしたい、というご希望でした。なぜ僕に質問して頂いたかは謎ですがお答えさせて頂きます。 ウィジェットやjQuery、RSSを使って～等、色々と方法はありますが、自分で表示もデザインしたい、シンプルでいいというのであれば3行もあれば表示させる事が出来ます。 APIキーを取得して～等の面倒な手順も要りません。 [note]statuses/user_timeline/ユーザーのアカウントID.jsonの形式のjson
フォームのバリデーション用jQueryプラグインいろいろ+α
個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
jQueryUIを使ってマウスオーバー時に背景色をアニメーションさせながら変更出来ると今更知った - かちびと.net
備忘録。マウスオーバー時に背景の 色をアニメーションしながら変更する、 というのをクロスブラウザ対応で実装 したい。css3を使えば簡単な事ですが、 ご存知のようにIEは非対応。で、色々 探してみたんですが、jQueryUIを使う のが一番良さそうな感じでした。 普通にググったらJquery Color Pluginというプラグインがあったのですが、動作はするけどIEでエラーが出ます。リファレンスを見ても そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。 (jQuery日本語リファレンス) と書いてあるし、Jquery Color Pluginを直すのも面倒だし、どうしようかなと思ったんですが、jQueryUIを使えば凄く簡単なんですね・・・素人ですみません。 コード <script type="text/javascrip
Webデザインやプログラミングなどの勉強に良さそうな国内のブログ記事やWebサイトいろいろ - かちびと.net
いよいよ2011年がスタートしました。 今年も去年同様、勉強することが 沢山あります。まだモチベーションが そこそこあるうちに勉強になりそうな 国内の記事をリンク集にしました。 迷ったときに見てみようかなと思い ます。 より最適な方法というのはあると思いますが、まずは扉を叩かない事には何が悪いかも分かりません。ということで、内容に拘らず、否の意見をスルーしてここに色々まとめさせて頂きました。 勉強したい気持ちはあるけど出来ない理由は「何を始めればいいのか分からない」という方も、何が出来るのか、どういった勉強法で出来るようになるかが分かればやる気が起きるかも知れません。 5分で分るシリーズ 以前も流行ったんですね。Web関連以外も含めてここにまとめられています。 5分で分かる PHP を知らない人が PHP の便利さを学べる記事を書いたよ 5分でわかる Ruby を知らない人が Ruby の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「WordPressのfunctions.phpによく書くコード」から必要なものだけを選べるサイトと、TinyMCE向けのLORUM IPSUMを発行できるサイト - かちびと.net
CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net
RSS全文配信してると記事を丸々転載されてしまうので、WPプラグインを使って逆に転載サイトを利用してみる - かちびと.net
ユーザーからの記事の寄稿を簡略化するWordPressプラグイン・User Submitted Postsと文字化けの直し方 - かちびと.net