2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ - かちびと.net
少し気が早いですが、今年も残すところ あと僅かです。ここで、Web制作をする にあたって、個人的に、とても参考にな った素晴らしいエントリーをご紹介します。 基本的にまとめ記事が大好物なので、 まとめのまとめ、という形になってしまい ますがご了承願います。 まぁ、単なる個人的なメモです。今年はお世話になりました、という感謝の意を込めてリンク&トラフィックで返したいのと、自分の復習用リンク集です。来年もたぶんお世話になる記事だと思いますので、備忘録も兼ねて。順不同です。 尚、当ブログのエントリは御礼の場であるこの記事では割愛しています。後日、別記事にてまとめさせて頂きますので、宜しければ御覧ください。 デザイン 読み物系が多いです。正月とかで見直す用。 配色パターンからWebデザインを考える ウェブデザインでこれは気をつけたいの35のポイント デザインQRコードの作り方 非デザイナーのための
わずか3STEP！誰でも簡単にjQueryを使ったLightboxギャラリーを作成出来るソフトウェア・Jquery Photo Viewer - かちびと.net
なかなか面白い試みだったので 備忘録。現在数多くのjQueryを 使用したギャラリーが存在し、その 中には多くのLightbox風ギャラリー が存在します。今日、ご紹介する のはそんなギャラリーを作成する ソフトウェアです。 jQueryを使用したギャラリーを作成するジェネレーターになりますね。ちょっとこの発想はありませんでした。 オンラインのジェネレーターではなく、ローカル環境で動かすソフトウェアです。使い方も凄く簡単ですよ。 言語も日本語に対応しています。 わずか3STEPで作成出来ます。 STEP.1 使い方はDLページにも書いてありますが、簡単にご紹介。おそらく直感で作成出来ます。ソフトウェアをDLしてセットアップすると上記画面が立ち上がります。ここにギャラリーにしたい画像をドラッグ＆ドロップしていきます。 STEP.2 画像を決めたら、上部のPublishをクリックします。すると
商用利用もOK！新しい、フリーの日本語ゴシックフォント・「フォントポにほんご」 - かちびと.net
先日御連絡頂きました。商用も OKの貴重な日本語のフリーフ ォントに新たに加わった「フォン トポにほんご」です。カタカナ、 ひらがなも漢字も使えますので ぜひ利用させて頂きましょう。 日本語フォントを作ることがどれだけ大変かを考えると、フリーでしかも商用OKで配布してくれる方を尊敬せずにはいられませんね・・・遠慮なく使わせていただきます！ 柔らかい印象のフォントでかわいいですねー。IPAフォントの漢字もOKですよ。これは即DLですね。 ゴシック系で使いやすい印象です。作成者さんからは 各種ウェブデザインやDTPにもお役に立てるのではないかと思います。 とのお言葉を頂いています。本当に感謝です。ライセンスが明記されたテキストファイルも同梱されていますので詳細はそちらをご確認下さい。 リンク先の下部、「フリーフォント ダウンロード.」でダウンロードできます。 Fontopo
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デザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net
Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi
クライアントに頼まれやすい機能を補えるWordPressプラグインいろいろ - かちびと.net
中小企業、店舗系のWeb制作が 個人的に最も多いので、そういった クライアントさんに頼まれやすい機能 を加えるWPプラグインのメモです。 大規模なWebサイトではまた別の需 要が出てくると思います。 羅列した全てのプラグインを入れる訳ではなく、「よく頼まれる機能」を補うプラグインをあげています。順不同。 WP-Add-quicktag 今更便利さに気がついた、という感じですが、最近よく使っています。基本的にはマークアップを補うプラグインなんですが、定型文の挿入に凄く便利なのでお勧め。こちらで設定してあげればクライアントさんはワンクリックで挿入できます。複数登録も可能なので重宝しますね。 addquicktag Ktai Style 携帯サイト作って欲しい！予算無いけど！みたいな要望があったとき、というか中小規模サイトの案件では多いのでKtai Styleは必須プラグインです。予算無いなら断
最近知ったフリーのHTML5テンプレート6個 - かちびと.net
ちょこちょこ紹介されている HTML5を使ったテンプレート で少しずつ学び始めていま すが、そんな中で最近知った テンプレートを備忘録的に記事 にまとめておきます。 いままでに出ているHTML5のテンプレートは以下の記事をご参照下さい。 ・HTML5で構築されたテンプレート・フレームワークいろいろ – DesignWalker ・10+ Free HTML5-CSS3 Website Templates 以下はここに紹介されて無いテンプレートです。実践で学ぶタイプの人間なのでこういったテンプレートはありがたいです。 Music Portfolio Template 音楽関連のサイト向けにデザインされ、コンテンツを作ってあります。jQueryと併用してかなり良い具合に作られています。 Music Portfolio Template Baseline HTML5で作られたグリッドレイアウトの
個人的に使いそうなPHP、CSS、HTML等のフレームワーク17個 - かちびと.net
個人的なメモです。今まであまり使って いなかったので少し使っていこうと思い、 いくつか自分でも使えそうなフレーム ワークを探しました。表題の通り、PHP、 CSS、HTMLやJS等しか僕は能力が 無いのでこの辺のフレームワークの まとめになります。 使いやすそう、使いにくそうというのは個人差が出そうだなぁと触ってみて思ったのですが、それぞれ良し悪しな感じもしたのでとりあえず気になったものだけメモしておきます。おそらく有名所ばかりだと思いますが個人的なメモなのでご了承下さい。 順不同です。 Blueprint CSSのフレームワークです。シンプルな設計ながら素敵なレイアウトが組まれている印象でした。 Blueprint Sass まだ触っていませんが、好評っぽいのでメモ。Railsみたいですが、CSSジェネレータ的な使い方もあるとの事でかなり気になる存在。Compassというのを一緒に使うの
Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選 - かちびと.net
Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Firebug Web制作といえばFirebugですが、僕はChrome派なのでChromeエクステンションのLite版を使っています。元々、Chromeにはデベロッパーツールがありますし、FxのFirebugも使いこなせてなかったのでこれで十分。 Fi
ページ内スクロールのjQueryプラグインいろいろ - かちびと.net
ページ内、要素間のスムースな スクロールを実装する事が可能な jQueryプラグインのメモ。使ってい るサイトも随分見かけるようになっ てきましたね。 個人的には特定のものしか使っておらず、いろいろと挑戦したいと考えているのでそのとき用にメモ。カルーセルとかギャラリーみたいなスライダータイプは今回割愛しています。 ScrollTo Posts With jQuery ページ内をダイナミックにスクロール。サイドのメニューっぽいところで操作します。 ScrollTo Posts With jQuery Create a Vertical, Horizontal and Diagonal Sliding Content Website with jQuery 3種類あります。div要素を1ページ表示してスムーズなスクロールで移動。 Create a Vertical, Horizontal an
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.net
ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 html5.jp ～HTML 5で導入されるcanvas要素の使い方～ 同じく教科書的なサイト。ありがたい。まだ、ざっと読んだだけですが、すごく分かりやすかったです。 ～HTML 5
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net
cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション webkit系でもmozでもIEでもcssのみでグラデーションを実装。 Cross-Browser CSS Gradient ハック、テーブルも使用しないドロップダウンメニュー シンプルなドロップダウンメ
Twitter関連ツール・まとめ - かちびと.net
Twitter関連の便利なツールがかなり 紹介されて来ていて、そろそろ混乱 してきたのでまとめます。 リンク先は日本語で解説してくれて いる記事にしています。されていない ツールやサイトは載せていません。 今現在は165個のツールがありましたが、今後追加していく可能性もあります。 TwitterWikiに載ってるサービスは極力載せていないつもりですが、若干被ってるかも。 全てのサービスを試したわけではありません。ＭａｃとiPhoneは持って無いですし。。。 また、リンク先を日本の記事にしたのは、海外のサービスに直接貼っても 使い方が分からなければ意味が無いと思った為です。 なので、リンク先がかなり偏っていますが重ねてご了承下さい。 ※コメント頂いたので１５個追加して180個更に20個追加して200個に育った。 ※8月アップデート＞17個増えて217個 ※9月アップデート＞30個増えて247
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
jQueryプラグイン探しの時間を短縮できるかも・デモのキャプチャでギャラリー形式に紹介するJquery Labs - かちびと.net
個人的にjQueryプラグインを探す 時に結構時間が掛かっている のでどうにかしたいと思っていま したが、なかなか素敵なサイトが ありましたのでシェア。プラグイン のデモをサムネイルでギャラリー 形式にして紹介しています。 デモから探せるので、Webデザイナーさんには重宝されそう。量もなかなか揃っているのでここから探す癖を付けようかと思うくらいです。どこかで見たけどブクマし忘れた、なんてときに見るのもいいかもしれませんね。 こんな感じでデモのキャプチャがズラッと表示されていますよ。上と下は広告です。 個別ページにはデモとソース、DLのリンクが用意されています。 カテゴリもメニューやギャラリー、チュートリアルなどが用意されていますよ。 タグクラウドでより絞り込める。 APIの確認も出来る。 情報量も300ほどあるのでなかなか重宝しそうです。今後益々増えてくれると嬉しいですね。久々にRSS登録
商用でも無料・ハイクオリティ・解像度高め、と3拍子揃った写真素材配布サイト・4freephotos - かちびと.net
久々に個人的にありがたいフリー写真 素材サイトがあったのでシェア。配布 されている写真がなかなかクオリティ が高く、使いやすそうです。ライセンス はパブリックドメインみたいですので、 安心して使えますね。 4freephotosは個人や商業サイトなどのプロジェクトに使える写真を共有しようと考えた写真家のグループが運営しているそうです。 クオリティも高く、解像度も横幅1000以上は当たり前っぽいので結構オススメです。ライセンスはクリエイティブコモンズのPublic Domain Toolsを使い、public domainにリンクしてありました。4freephotosにも Using the public domain images found on this website does not require a link back to us, but if you found them
12000種以上のPhotoshopブラシをストックしている検索エンジン・FindBrushes - かちびと.net
Photoshopのブラシを検索できる FindBrushesのご紹介。検索と 言うか、アイコンを探せる検索 エンジン、Iconfinderと同様で、 インデックスされたブラシを検索 する形ですが、量はかなりのもの。 目的から探せるのが検索系のいい所ですよね。FindBrushesには現在600セット以上、総計12000種以上もストックされているので覚えておくと役に立ちそうです。 シンプルな設計ですし、軽いので探すには最適かも。 カテゴリからも探せる 左上のメニューからカテゴリで探す事も可能なのでキーワードが思いつかない、という方はカテゴリで探してはいかがでしょうか。 例1・グランジ系を探したい グランジ系のブラシをお探しなら「grunge」で検索します。数は90と出ますが、ブラシはセットになっているので量としてはかなり豊富ですね。 例2・木のブラシを探したい treeで検索。検索スピード
最近見つけた完成度の高いフリーのWordPressテーマ - かちびと.net
最近知ったthemes2wp.comというサイト のフリーのWordPressテーマで、個人的 に完成度高いなと感じたテーマをいくつか ご紹介したいと思います。完全に主観が 入っているので参考にならなかったら ごめんなさい。 ここで言う”完成度が高い”、というのは「使いやすそう」「変更箇所が少なそう」という意味です。いいデザインにしたいけどカスタマイズは面倒・・・という方にお勧めです。11個あります。 [note]ワームのご報告を受けて全テーマへのリンクを削除しました。テーマは沢山ありますのでテーマカテゴリでお探しになってみてください。[/note] BlockStock Theme 非常に綺麗なテーマです。シンプル系がお好きな方なら殆ど変更する箇所無さそうな気がします。個人的に凄く好きなテーマです。 ※「誰がために鐘は鳴る」さんよりご指摘を受けてリンクを削除しました BlockStock
cssの情報・まとめ - かちびと.net
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ローカル環境にPHP+MySQL 、WordPress構築を実現するBitNami - かちびと.net