レスポンシブWebデザイン対応のメガメニュー
Result ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィンドウサイズ943px以上でデスクトップ向けに切り替わるように設定されています。非常にシンプルなコードですが代わりにCSSがやや複雑かもしれません jQuery$(document).ready(function () { "use strict"; //子のulを持ったliをチェックしてトグルアイコンの為のclass付与 $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon'); $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub'); //ウィンドウサイズをチェックしてスマフォ用と
レスポンシブWebデザイン対応のシンプルなイベントカレンダーを実装出来るスクリプト・「monthly.js」
monthly.jsはシンプルなイベントカレンダー実装の為のスクリプトです。jQueryに依存しています。レスポンシブWebデザインにも対応しており、デイトピッカーとして利用する事も可能となっています。少し触ってみましたが、作りがわかりやすく、日本語化も問題なく出来ました。イベントは別途用意したxmlを読み込む形なのでその辺は若干手間では有りますが、それ故に軽量サイズなJavascriptのみで実装する事ができています。あくまでシンプル性を重視しているようで、高性能なものが欲しいならFullCalendarあたりチェックしてみて、との事。ライセンスの明示はありませんでしたが商用個人共に自由、ただし転売はやめてね、との事でした。 monthly.js
jQueryを使わずに～したい、を調べられる逆引きリファレンス・「Plain JavaScript」
Plain JavaScriptはjQueryを使わずにDOM操作等を行う方法を調べることが出来る逆引きリファレンスサイトです。jQueryはJavaScriptに詳しくなくても容易にDOM操作を可能にしてくれましたが、様々なニーズに応えていったために肥大化しました。ちょっとしたDOM操作だけならわざわざ重いファイルを読み込まずに実装した方がパフォーマンスを損なわずに済みます。が、その方法がわからない、という方も少なくないかもしれません。そういった方の為に、jQueryを使わずに純粋なJavaScriptによるDOM操作の方法を調べられる、というもの。一部の方には便利な逆引きリファレンスサイトではないかなぁと思います。 Plain JavaScript
2011年・個人的に参考になったWeb制作向けの国内記事リスト - かちびと.net
来年の復習用の記事リストです。自分用。 年末ですし、だれかがまとめ記事を書く と思って待ってましたが、他力本願も あまり良くないので自分でリストを作る 事にしました。去年も作ったけどあまり 出来なかったんですよね。。 タイトル通り、個人的に参考になった記事で、来年の勉強用リストです。 去年の記事(2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ)と似たような感じだけど、必要な情報が偏ってきたのと、国内のRSS購読ブログ数が1/30になったのでリストも偏ってます。 リストの内容に関して この手の記事はいろいろご意見頂き易いので、ご覧頂く方に不毛なストレスを与えないように、内容に関して先に記述しておきます。 リストの内容ですが、単なるリソースの羅列のようなまとめ記事は個人的に参考になったことがないので割愛しています、というかこの記事自体そんな感じです。また、結果のみで解説
地図にマッピングし、指定した位置にコンテンツを表示出来る軽量jQueryプラグイン・CRAFTMAP - かちびと.net
使いやすそうだったので備忘録。 Googleマップライクに動かせて マーキング、その場にコンテンツ を表示させる事も可能な軽量 jQueryプラグイン・CRAFTMAPです。 ちょっと説明下手ですね・・ マーキングもデザインのカスタマイズも割と楽で色々なものに応用できそうです。商用は有料なのですが、もしかしたら使うかも。 メニューから選択するだけでなく、ドラッグ可能でマーカーをクリックすることでもスクロールしてくれます。地図コンテンツでたまに見かけるインターフェースですね。 特にGoogle Map API等は使用していません。シンプルに、地図の画像を作って、座標に応じてマーカーを設置する、というものです。ライブラリも軽量ですよ。 サンプル作ったのでどうぞ。 Sample コード <script type='text/javascript' src='https://ajax.google
商用も無料でリンク不要の日本語フォント・こども丸ゴシックと、無料で手に入るフォント配布サイトの早見表 - かちびと.net
はんなり明朝の作者さんより新作の ご連絡がありましたのでご紹介です。 丸みのある可愛らしい丸ゴシックの 「こども丸ゴシック」。今回も商用 でも無料でリンクなども不要と、 太っ腹なご提供です。貢献者さんで すね・・・頭が下がります。 さて、またも商用利用OK・リンク不要の日本語フォントが登場です。いつもご連絡頂き有難う御座いますー！ 現在漢字は創意製作中で、先行してひらがな、カタカナ、アルファベットをご提供頂きました。 かわいい丸ゴシックのフォントです。漢字は製作中とのことです。Twitterでフォロー(@typingart)しておくと見逃さないかもしれません。 テスト的に使って見ました。今年の漢字は「絆」なのでそんなニュアンス。コピーは思い付きです。手書き風のような丸みのあるフォントは人の声などを表すのに適してますね。子供や女性がターゲットのサイトで活躍してくれるかもしれません。漢字が出来
国内のiPhoneアプリでデザインが参考になったWebサイトいろいろ - かちびと.net
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
画像を画面いっぱいに広げてフェードエフェクトで切り替えるスライドを実装するjQueryプラグイン・slideshowify.js - かちびと.net
地味に良さそうだったので備忘録。画面 いっぱいに画像を広げてフェードエフェ クトでスライドショーを実装できるjQuery プラグイン・slideshowify.jsです。この 手のプラグインは沢山あるので選択肢 の一つとして・・ なんとなくよく見かけた画像のフルスクリーン表示を実装します。この見せ方は良い写真や画像なら飲食店やアパレル系などでは訴求力もあるし、よく見かけるのも当然といえば当然かもしれません。 キャプチャ見ても全然ピンと来ないと思いますのでSampleご覧下さい。 Sample 基本的には直接貼られた画像をスライド化します。※画像はmark sebastian氏より(CC-BY) 指定されたセレクタ外のコンテンツはpositionプロパティによって画像上に配置されている形となります。スライドしている画像はdisplay:none;を使用していますので各々の画像にリンクは貼れま
スタイリッシュでシンプルなデザインのWordPressテーマを無料配布する・WPEXPLORER - かちびと.net
スタイリッシュでシンプルなデザイン のWordPressテーマを無料配布している WPEXPLORERのご紹介。基本的には有料 ですが、一部を無料で配布してくれて いますので、好意にあやかろうかと 思います。 スタイリッシュで完成度も高いので組み込まれたスクリプトやコードも参考になりそうですよ。僕は独学なので、多くのコードは配布されているテーマから学びます。 以前は配布テーマを紹介していたそうですが、自分で作ったほうがいいのが出来る、という事で方向転換したそうです。その中で、一部を無料で公開（勿論GPLです）してくれているんですが、どれも有料のテーマ並みの出来で凄く参考になりますよ。 数自体は20個あるか無いかくらいですがどれも素敵なデザインです。以下に一部ご紹介します。 Showcaser クリーンでミニマルな2カラムギャラリーのテーマ。 CleanMag マガジン系のテーマ。無駄の無い
jQueryのフィルタを使った際の実装サンプルと基本的な機能のまとめ - かちびと.net
jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。 Basic Filter(基本フィルタ) Sample 基
iPhoneやAndroid向けのUIパターンギャラリー・Mobile Design Pattern Gallery - かちびと.net
カテゴリがしっかり分けられていて 凄く見やすかったのでご紹介。iPhone やAndroid向けのUIパターンギャラリー です。アプリデベロッパーさんや アプリデザイナー、モバイル向けの デザインの参考にいかがでしょう。 パターンギャラリーはもうすでにいくつもありますけど、ここは特にちゃんと分けてくれているので見やすい印象でした。 左サイドに大まかなカテゴリーがあります。それぞれには更に細かいパターンに分けられています。たとえば、ナビゲーションならリストタイプ、メガメニュー、カルーセル真紀など。 こちらは検索のカテゴリ。検索ボックスや、オートコンプリート、ソート機能付きなどなど。 インビテーション・・・サイトツアーみたいなやつです。こういうのあんまり紹介されてませんよね。 パターンはその場でLightbox風に表示するのでページ推移も必要ありません。 みたいな感じのパターンギャラリーです。
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
最近よく見てる国内のお薦めWeb制作やTips系ブログいくつか
ふと思い立ったので記事にしてみます。 最近よく見させて頂いてる国内のブログ をシェアしてみようと思って記事にして みます。僕はWeb屋さんなのでWeb屋さん 向けのブログだけになっていますが、 Web屋さん以外でも楽しめるんじゃないか と思っています。 というわけでお薦めのブログをご紹介。今までも色々なブログをご紹介していますので重複するサイトは割愛しています。 単純に自分の好みなので全然参考にならないと思いますが、お世話になってるのでご紹介したいなと。少なくともタイトルで釣っておきながら中身が無いようなしょうもないブログは1つも含まれて無いと思います。しょうもないブログとはこののブログの事なんですけどね。ドキッとした方は僕と一緒に悔い改めると幸せになれそうです。 僕自身、人様のブログ自体は殆ど見ない人間なので偏ってると思いますけど、新たな発見に繋がれば幸いです。 maka-veli.co
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ - かちびと.net
使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメニューは横に広がってくれます。 Horizontal Subnav Simple jQuery tabs コンテンツをタブで切
レスポンシブWebデザイン対応のjQueryイメージスライダー・FlexSliderがWordPressプラグインになってた
以前ご紹介した、iPhoneやiPadなど 様々なデバイスにレイアウトを自動 で対応するレスポンシブWebデザイン 対応のjQuery製のイメージスライダー FlexSliderがWordPressプラグインに なっていました。 高機能ってものではないですけど、似たようなものを作るつもりで放置してたのでありがたかったのでついでにシェアします。 Responsive Slider Plugin With FlexSlider for WordPress 簡単にWordPressに導入出来るようにしてくれました。 カスタム投稿タイプで管理 仕組みが凄く参考になりました。ちょっと発想が無かったんですが、カスタム投稿タイプで作成したコンテンツをショートコードで呼び出しています。いい方法ですねーこれ。 仕組み備忘録として簡単に仕組みをメモ。 カスタム投稿タイプを作るdefine('CPT_NAME'
地味に使えるCSS小技のメモ&サンプル集 - かちびと.net
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le
沿革や年表のようなタイムライン的なコンテンツをスライダーで実装するjQueryプラグイン・ jQuery Timelinr - かちびと.net
年表とか沿革とか、そういった時間の流れを 可視化したようなコンテンツをスライダーで 実装できる、というjQueryプラグインのご紹介。 jQuery Timelinrは、コンテンツのスライダー で、テキストで書かれた西暦が連動して 動きます。 まぁ沿革や年表に使わなきゃいけないわけじゃないんですが、こういうのも面白いかなと思ってタイトルに含めました。あとで自分で検索したいもので。 あ、別件ですが、今更ながらjQueryの記事カテゴリを作りました。RSSでもご購読頂けますので宜しければ。 こんな感じでパッと見はよくあるコンテンツスライダーなんですが、上にある年号が連動してスライドします。年号はナビとしても利用できます。年号はテキストで書かれていて、コンテンツに応じて色とフォントサイズが変わる、という仕組み。 縦もあるよ IE6とか7 IETesterでのIE6でも普通に動作しました。透過処理
アイコンやシルエット、矢印など、シンボルタイプのフリーフォントまとめ - かちびと.net
アイコンやシンボルなどの形をしたフリーフォント のまとめ。なかなか使い勝手が良いものがいつ のまにか増えていたので色々とまとめてダウン ロードしましたのでその過程で良さそうに感じた ものをシェアしてみます。まだお盆明けだったり お休み中な感じなので軽めの話題で・・ というわけでシンボルタイプのフリーフォントのまとめ。サクッとアクセント加えたい時にアイコン作ったり、というのも面倒なのでフォントで済むならそのほうが早いですし、いくつか覚えておくと便利なんじゃないかなと。 順不同です。ライセンスは各々でご確認ください。 SYMBOL SIGNS ピクトグラムとか標識でよく見かけるシンボルのフォント SYMBOL SIGNS NOTICE こちらも標識で見かけるタイプの角丸フォント NOTICE DINGBESTS 鉛筆や消しゴム、電話機など使い勝手の良いデザインフォント DINGBESTS GL
iPadアプリ専門のハイクオリティなUIを収集しているダイナミックなギャラリーサイト・Landing Pad - かちびと.net
iPadアプリの素敵なインターフェースを専門に 収集しているギャラリーサイト・Landing Pad のご紹介。とってもダイナミックな方法で閲覧 出来るので見てるだけでも楽しいです。クオ リティ重視のようなのでまだ数が多いとは 言えませんが、こういうサイトは覚えておくと 後で困らないですよね。 iPadのアプリを制作しているデベロッパーさんはご覧になってみてはいかがですか。大きな画像なのでイメージもしやすそうです。 Tumblrで作ってるんですねー。１カラムでダイナミックに表示してくれています。どれもクオリティの高いものばかり。 ずらーっと並べてくれてます。 お盆休みだったり、まだ明けたばかりなのでかるーくインスピレーション向上させてみるのも良いのでは。 Landing Pad
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年(2011年)参考になったWeb制作者向けのスライドのまとめ - かちびと. net
