フォームのselect要素で複数選択を簡略化できるjQueryプラグイン・jquery.multi-select - かちびと.net
フォームのselect要素で、直感で複数選択 出来るようにするjQueryプラグイン。複数 選択できるようにしたい場合は多くの場合は 選択項目が多く、Ctrlを使わせるのはあまり ユーザーフレンドリーとは言えませんので、 簡単に選べるようにする、というもの。 同じように複数選択を簡略化する方法は既出ですが、まぁ選択肢を増やすつもりで。IETesterでのIE6でも動作確認出来ました。 クリックすると、選択した項目が左カラムに移動します。マウスのみで複数選択出来るのでユーザーにも優しい設計では。 反対にキャンセルしたい場合は左カラムでクリックすれば右に移動します。 複数選択とかヘッダを加えるとか選択させないとかも出来るようですよ。 使いどころは限られそうですが、見た目もすっきりしているので割と便利かもですね。デモもあるのでご興味がありましたら。 jquery.multi-select
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする - かちびと.net
列全体がクリック可能で、Wikipediaに飛びます。セル内にアンカータグが含まれている場合はそちらが優先されます。Webサービスの料金プランなんかに使えそうでは。 jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); });
iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton - かちびと.net
なかなかシンプルで良かったので ご紹介。人気のデバイス、iPhone やiPadで閲覧してもレイアウトを綺麗 に保てるように設計されたWebサイト のスターターキット。内容物はHTML、 CSS、JavaScriptです。 シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。 HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。 デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。 Sampleサイト※別窓 iPhoneでアクセス iPhoneでアクセス。 ランドスケープ iPadでアクセス iPad
シンプル / ミニマルなデザインのWordPressテーマだけを専門に紹介するWebサイト・Simple Themes - かちびと.net
シンプル、ミニマルなデザインのWPテーマ のみをひたすら紹介しているWebサイト・ Simple Themesのご紹介です。ミニマルな デザインは最近凄く人気が出ている印象 なのでご興味の有る方は探してみては如何 でしょう。 一時流行った、大量の装飾を施したデザインも最近はあまり見かけず、無駄を省いたミニマルなデザインが好まれるようになってきている気がします。 今日ご紹介するSimple Themesは、シンプルやミニマルなデザインのWordPressテーマのみを紹介するサイトです。 シンプルなテーマのみを集めているサイトです。今まで当ブログでご紹介してきたテーマもありました。 無料テーマ専門と有料テーマ専門があります。サブドメインで分けられているので探しやすいかと思います。 無料テーマ ※公式サイトでの配布ではないので悪意あるコードにご注意くださいね。 Yoko Yokoは、css3のM
グリッドレイアウトのクールなギャラリーサイトを構築出来るWordPressテーマ・Grid Locker - かちびと.net
見かけたことのないWPギャラリー テーマがあったのでメモ。美しい グリッドレイアウトとダークでクール なデザインが印象的です。いろいろ 多機能で完成度の高いので、この まま使用しても全然問題なさそう。 ギャラリー用のテーマは沢山ありますけど、Grid Lockerも他のテーマに負けず劣らず完成度が高いです。 ブラックカラーをベースとしたクールで重厚感あるデザインです。可変するグリッドレイアウトで時系列を崩すこともありません。 Lightbox Lghtboxによる画像ポップアップ。サムネイルおよび、横長の画像はカスタムフィールドを使用しているようです。名前を「Thumbnail」として、値に画像URLを入力します。画像はcacheフォルダに格納されるみたいですのでご利用の際はパーミッションにお気を付け下さい。 イメージスライド コンパクトなイメージスライドの有無を選択できます。スライドの画
商用OK、リンク/クレジット表記不要・透過PNGの消しゴムハンコ画像を無料配布する素材サイト「ハンコでアソブ」
ご連絡頂いて、拝見させてもらったら凄く ツボだったのでご紹介。消しゴムハンコ を押したような可愛らしい画像を透過PNG で配布してくれている「ハンコでアソブ」。 商用でも利用できてリンクも不要ですよ。 なかなか珍しいタイプの素材ですね。 リンク・クレジット表記不要、商用OKの素材サイトは物凄く貴重ですよね。有りがたく使わせて頂きます。 はんこ！アルファベットや雑貨、お天気や服などいろいろ使いやすそうな素材がいっぱい有ります。 透過された素材は1枚のセット配布 こんな感じで1枚の透過された画像に素材が詰まっています。 解像度は大きくはありませんが、なかなか無いタイプの素材ですし、Webデザインのアクセントやアイコンとして重宝しそうです。 種類は色々 こんな汎用的な素材や、 こんなインテリアの画像など、他にもいろいろ。 太っ腹なことに商用OKでリンクも不要とのこと。自分で使いたい素材を切り取る
jQuery事始めvol.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる
以前に書いたjQuery事始め、という記事の 続編のような内容の記事です。基本を理解 したら今度はコードを真似して体で覚えて みるのも勉強方法の有効な手の一つだと 思います。ご自分で改変して遊べる程度の 簡単なコードなのでぜひチャレンジしてみて ください。 内容はjQueryを覚えたいけどなかなか時間が無い、というWebデザイナーさん向けです。多くのプラグインやチュートリアルが存在しますが、jQueryの基本中の基本と少しのアイデアだけでも十分出来ることがありますので、そこまで深く追求する必要は無い気もします。 少しでもハードルが低くなればと思って、コードを真似して、そこからご自身で応用出来るような簡単な内容を記事にしてみました。今回はよくあるマウスオーバーエフェクトを作ってみます。 サンプルまずはサンプル。画像にマウスを乗せるとアニメーションエフェクトがかかります。 確認出来ましたでしょ
閲覧しているHTML5製のWebサイトの構文チェックをサクッと行えるブックマークレット
構文チェックといっても、バリデーション サイトに飛ばす、というブックマークレット なんですが、あれば便利だなぁと思った のでシェア。HTML5 Validatorという WebサービスにURLを放りこんでくれる ブックマークレットです。 楽なので覚えておきたいですね。ブックマークレットも増えすぎると微妙ですけどね・・ HTML5 Validator Bookmarklet ご利用のブラウザにHTML5 Validatorをドラッグ＆ドロップしてください。 使ってみる 試しに使ってみます。上記は、designbitsさんのサイトで、HTML5で構築されています。ここでブックマークレットを使ってみます。 直ぐにHTML5 Validatorでの検証結果が表示されます。ワンクリックで済むので手間が省けていいですね、これ。designbitsさんは見事に問題無しでした。すてき。 という訳でHTML
複数選択するフォームのselectを見やすく使いやすくするjQueryプラグイン・jQuery UI Multiselect
良さ気だったので備忘録として。フォーム のselectで複数選択可能にする事もある と思いますが、これを見やすく、また、直感 で使いやすくする為のjQueryプラグイン。 IE6や7でも普通に動いてくれますので、 いろいろと使いどころがありそうです。 フォーム周りは覚えておくと便利ですよね。 jQuery UI Multiselectは複数選択するselectを見やすく使いやすくしてくれます。
cssの未使用セレクタをその場で複数ページ一括調査するブックマークレット・cssess
中小規模サイトの構築時に役立ちそうな ブックマークレットがあったのでご紹介します。 閲覧しているWebサイトで使用しているcss の未使用セレクタを教えてくれるブックマーク レットです。こういったWebサービスはあります が、その場でサクッと調べられるのは面倒が 無くて良いですね。 使いどころはやや限られますが、複数ページを一括で調査し、それぞれのページの未使用セレクタを知らせてくれますのでなかなか便利だなぁと感じました。 おそらくブックマークレットを使ったページからリンクされている同一ドメインページを読み込んでるっぽいのです。zipや#の付いたURLも含まれているのはそのためでしょうかね。こういうリンクがある場合はチェックをはずしてください。 ページごとに使っていないセレクタを教えてくれます。 ブックマークレットを使うと上記のような半透明のボックスが出ますので調べないページのチェックを外
商用もOKのPHP製投票システムをオンラインで作成⇒ダウンロード出来るWebサービス・Opineo
よくある投票システム、星のマークを クリックして評価するシステムを、Web 上で作成し、PHPでダウンロード出来る Webサービス、Opineoのご紹介です。 スターの形なども変更できるので覚えて ちょっとクールな投票システムを探して いた、という方は如何でしょうか。 投票システムを作成して使える、というシンプルなWebサービスです。ニッチですな・・そのまま使わないにしても、ｊQueryを使った見せ方なども参考になりますよ。 ☆の画像や、バーが伸びる際のスピード、色などを決めて、ダウンロードする、という流れです。デザインが苦手なプログラマーさん向けっぽい感じです。 変更すればリアルタイムで右のプレビューに反映されます。 バーの動作などに関しては、デモを用意したのでご覧下さい。 個人利用でも商用でも無料で利用できますが、リンクウェアとのことです。ご興味のある方は以下よりどうぞ。 Opineo
お手軽・簡単にブログやWebサイトを拡張出来そうなWebサービスいろいろ
以前、デザインとか加工とか出来ないから なんかいいの教えて、と言われて教えたツ ールいろいろという記事で、ブログを始めた 彼が今度はブログをパワーアップさせたい 的な事を言い出したので教えたWebサービ スです。知識がないから簡単に出来るやつ がいい、とのことでしたのでそんなWebサー ビスになっています。 パワーアップさせたい、としか聞かれなかったのと、僕もあまり時間がなくてさほど数は探せませんでしたが、喜んでくれていたので需要があるかと思って記事にしてみます。パワーアップって言われても、どうしたいのかよく分からないので機能を追加できる的なものを探してみました。 基本的にコピペで済むものがほとんどです。僕自身、あまり導入経験が無いので使用感抜きで書いていますがご了承ください。 zenback 国産（シックス・アパートさんですね）のWebサービスです。かなり色々なところで見かけますが、申請
日本のWebサイトの404ページデザインいろいろ+α - かちびと.net
気になって探したのですが、ググッても 9割は海外のデザインだったので、日本 の素敵な404ページを探してみました。 時間の関係でさほど数を揃える事が出来 ませんでしたが、少しでも参考になれば 幸いです。 404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。 どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。 では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。 株式会社サクラクレパス デザインも好評のサクラパレスの404ペ
商用利用もOK！新しい、フリーの日本語ゴシックフォント・「フォントポにほんご」 - かちびと.net
先日御連絡頂きました。商用も OKの貴重な日本語のフリーフ ォントに新たに加わった「フォン トポにほんご」です。カタカナ、 ひらがなも漢字も使えますので ぜひ利用させて頂きましょう。 日本語フォントを作ることがどれだけ大変かを考えると、フリーでしかも商用OKで配布してくれる方を尊敬せずにはいられませんね・・・遠慮なく使わせていただきます！ 柔らかい印象のフォントでかわいいですねー。IPAフォントの漢字もOKですよ。これは即DLですね。 ゴシック系で使いやすい印象です。作成者さんからは 各種ウェブデザインやDTPにもお役に立てるのではないかと思います。 とのお言葉を頂いています。本当に感謝です。ライセンスが明記されたテキストファイルも同梱されていますので詳細はそちらをご確認下さい。 リンク先の下部、「フリーフォント ダウンロード.」でダウンロードできます。 Fontopo
配色のアクセシビリティチェックを手軽に行えるシンプルなカラーツール・Contrast-A - かちびと.net
Web制作を行う前の配色チェック に手軽で良さそうでしたので備忘録 がてら記事にします。コントラストが 十分かどうか、などその配色がアク セシビリティガイドラインに沿ってい るかを示してくれるツールです。 Webツールとソフトウェアがあります。 目的はシンプルなツールですが機能はなかなかです。 Webサービスをご紹介しますが、無料でダウンロードして使えるAir製のソフトウェアもあります。 手軽に使える 基本的にマウスで操作できます。配色を左で決めて、明暗を右で調整、リアルタイムでプレビュー。 アクセシビリティチェックもリアルタイムで表示されます。 何かと使い勝手も良いのですが環境によっては横スクロール出るかもしれません。 パレット機能 パレット機能もあります。丸の数はチェックをクリアしているかを表しています。 ソフトウェアも Air製のフリーソフトもありました。まだ試していませんけど・・
不動産サイト構築がとても楽になる国産で無料のWordPressプラグイン見つけた - かちびと.net
ちょっと感動したので脊髄反射で ご紹介。日本の不動産サイト向け に作られたプラグインがかなり良い 感じです。不動産サイトの構築も かなり楽になりそうですよ。こういう ものは有料が多いですが、こちらは 無料で提供してくれています。 いつ有料になっておかしくない気がしますので今のうちにDLしておきました。お礼も兼ねて記事にさせて頂きます。 WordPress 不動産向けプラグイン もう、なんというか感謝です。このプラグイン入れるだけで、かなり楽になりますよ。 ざっと機能をご紹介。 専用の投稿画面 ↑ 通常の投稿画面とは別に、専用の投稿画面が用意されています。 画像を種類別に分けられる 不動産独特の画像の種類で分けられます。例えばキッチンとかトイレ画像とか。 管理用項目や詳細項目 物件番号、掲載日や制約の有無なども決められます。状態では空いてるかどうかの選択も。また、物件の種別、賃貸なのか分譲な
国産限定・カラー選定、配色支援などに役立ちそうなカラーツールいろいろ - かちびと.net
カラースキーム、配色関連のツールの 大半は海外サイトのものです。僕も海外 のサイトを利用していますが、やはり 日本語の方が良いよねという方も少なく 無いかと、ふと思いましたので国産の サイトでカラー選定、配色支援に役立ち そうなツールを探してみましたのでシェア。 海外のは海外ので似たような機能のカラースキームツールばかりにもなっているので国産に目を向けてみるのも良いかもしれませんよ。ツールの前に配色を学びたいという方はwebデザイナーの色彩スキルを磨くエントリーまとめというエントリをご参照ください。 NIPPON COLORS – 日本の伝統色 まだ出来たばかりのツール。和の色専門ツールですよ。デザインも使用感もかなり素敵です。環境によってはうまく表示されないかもです。 NIPPON COLORS – 日本の伝統色 色サンプル(色見本と配色) もっと評価されて欲しいツール。明暗や、系統でカ
Web制作者がクライアントにSEOの知識を与える事は自社の評判管理になり得る - かちびと.net
記事内容は一種の評判管理にうぶ毛の生えたような内容です。ネットリテラシーが高い方々には参考にならないと思います。。。多くの方が既知である事は存じていますが、敢えて記事にしてみようと思います。一言にWeb制作者と言っても、Webデザイナーさん、プログラマーさん、SEO屋さんなどなど様々です。どの専門であれ、せっかく獲得したクライアントが悪徳なSEO業者に騙される事で、そのクライアントからの信頼を失いかねません。特に悪徳なSEO業者さんの営業電話は非常に多く、被害が減少する傾向には無いのが現状です。 記事を書く切欠になったのは以下の記事。 SEO業者からの営業電話対応マニュアル それでも悪徳SEO業者に騙される人は減らない 営業電話の多いSEO業者さんの皆様に対応するマニュアルとそれでも被害者が減る事は無い理由が主な内容です。特に同感したのが以下。 それでも悪徳SEO業者に騙される人は減らない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用でも使えるシンプルで使い勝手の良さそうなソーシャルアイコンセット・JustVectorとFALというライセンスに関するメモ - かちびと.net
かちびと.net