CSS3 関連情報・総まとめ
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～
記事をサムネイルのみのギャラリー風⇔縦並びのブログ風に切り替え可能なWPテーマ・Sight - かちびと.net
良さそうなWordPressテーマがあった のでシェア。ブログ記事を、サムネイル のみのギャラリー風と通常の縦並びの ブログ風にユーザー側で切り替え可能 なテーマ・Sightです。デザインもミニマル ですごく素敵。コンテンツスライダー付き です。 もう、そのまま使ってもいいレベルじゃないかなと思います。記事部分をブログ⇔ギャラリーでユーザーが切り替えられるミニマルデザインのテーマ。IE6のみ、切り替えボタンの表示が崩れますが、動作はするのでcssでなんとかしたいところですね。 通常はこんな感じ。ミニマルデザインでとても見やすいです。記事部分の右上に切り替えボタンがあり、ここで切り替えます。 こんな感じで綺麗にグリッドに合わせて表示してくれます。ブログ風Ver.の時のサムネイルを並べて切り替えられるように、というアイデア。発想が面白いので真似してみたいです。他にもプルダウンするメニューやコン
Webデザインやプログラミングなどの勉強に良さそうな国内のブログ記事やWebサイトいろいろ - かちびと.net
いよいよ2011年がスタートしました。 今年も去年同様、勉強することが 沢山あります。まだモチベーションが そこそこあるうちに勉強になりそうな 国内の記事をリンク集にしました。 迷ったときに見てみようかなと思い ます。 より最適な方法というのはあると思いますが、まずは扉を叩かない事には何が悪いかも分かりません。ということで、内容に拘らず、否の意見をスルーしてここに色々まとめさせて頂きました。 勉強したい気持ちはあるけど出来ない理由は「何を始めればいいのか分からない」という方も、何が出来るのか、どういった勉強法で出来るようになるかが分かればやる気が起きるかも知れません。 5分で分るシリーズ 以前も流行ったんですね。Web関連以外も含めてここにまとめられています。 5分で分かる PHP を知らない人が PHP の便利さを学べる記事を書いたよ 5分でわかる Ruby を知らない人が Ruby の
パターン画像を簡単に自作出来るイラストレーターテンプレート・MadPattern
パターンは背景画像に重宝するだけでなく、 様々な場所で役に立ってくれます。そんな パターン素材をイラストレーターで簡単に 作れるようになるテンプレートがありました のでご紹介します。MadPatternを使えば 直感で手軽にパターンを作成出来そうです。 イラストレーターのテンプレートなのでWeb以外でも用途がありそうですね。 スキル次第でサクッと素敵なパターン素材も作れそうです。 試しに悲しい気分になるパターンを作りました。簡単に悲しい気分になれました。素晴らしいです。 MadPattern Tutorial from matt handler on Vimeo. 使い方の動画もあるので説明は不要ですね。 ライセンスはAttribution-NonCommercial-ShareAlike 3.0ですので商用不可でリンク必須です。 以下より無料でDL出来ますよ。ぜひお試しになってみてくださ
InstagramとFrickrにクロスポストされた写真をギャラリー化しているgramjunction - かちびと.net
gramjunctionというサイトがInstagram の写真をギャラリーにしてまとめてます。 Instagramで撮られたもの全部ではなく、 Frickrにクロスポストされた写真のみに なっているようですが、見せ方がなかなか 素敵だったのでメモがてらエントリー。 Instagramは写真投稿型SNSです。iPhoneで撮影→トイカメラ風に加工し、そのまま投稿します。TwitterやFacebookにもクロスポスト出来ます。アプリは無料ですのでぜひお試しください。 そんなInstagramに投稿された写真を可愛いデザインでギャラリー化しているWebサービスがありました。 めっちゃかわいい。TOPに全て羅列されるのではないみたいです。FrickrのIDで検索する事もできます。 ページ推移の必要もなく、スクロールすれば自動で表示してくれます。 写真ごとにFacebookの「いいね！」も可能。
WordPressを写真やアイコンなどの画像販売サイトに出来るプラグイン・Image Store - かちびと.net
まだ試していませんが、個人的に 凄く気になったので備忘録。良く ある写真の販売サイトをWPで構築 出来るようになるプラグインです。 画像専用のショッピングカートっぽ い感じ。スクリーンショットを見る限 りではなかなか高機能な感じです。 まだWeb上で使っていないのと、ドルだけなのを、円に対応させる必要があるので実用化まではまだかかりそうですが、以前記事にしたWordPress凄いな・・と改めて思ったプラグインやテーマという記事に加えたいところ。色々出来るようになって行きますね・・ やろうと思えば現状のECサイト系プラグインなどでも出来る気がしますが、画像、写真の販売用のショッピングカートシステムのようなので期待したいですね。アイコンの販売とかも出来そう。 画像の大きさで値段も変える、などの設定も出来るようです。日本で見るのは手数料の取られる写真販売サイトが殆どなので自分のサイトで販売出来る
多機能では無く、地味だけど個人的にマストなフリーのソフトウェア7つ - かちびと.net
無きゃ無いで困らないけど、なかなか 便利で使用頻度も高めなソフトウェア のご紹介です。多機能とは言えない、 地味な機能だけど個人的に重宝して るソフトを人に教える用にメモ。地味 かどうかは主観が入っています。 無くても困らない、というのは他にも似たようなアプリがあるので、これじゃなきゃダメ！というものでは有りません。不便にはなっちゃいますけど・・ 無料、シンプル、軽量さが気に入って使っているソフトを7つご紹介。 ColorCop 以前記事にしたカラーピッカーです。ピッカーソフトもいくつか存在しますが、個人的にはこれがお勧め。やや広めな範囲で吸い取ったり、7色まで保存できたり。 ColorCop Ditto クリップボードマネージャー、と言える程高機能ではなく、単にコピーしたテキストの履歴を残し、コピペして使えるというもの。それだけだけど地味に便利。キャプチャも対応しています。 Ditto
知っておいて損しない、地味に便利なWordPressのデフォルト機能 - かちびと.net
存在は知っているけどあまり 使われていない印象、という WordPressのデフォルト機能 のご紹介。個人的な印象なの でもしかしたら凄くポピュラー な機能かもしれませんが・・ 殆どは知られていると思いますので期待しないで下さい。1つでも「これ知らなかった！便利！」と思ってくれる方がお一人でもいれば幸甚です。 やや地味な機能なのですが、知っておいて損しない便利な機能です。順不同。 Press This Press Thisというブックマークレットがお使いのWPの管理画面→ツール→ツールからインストール出来ます。これが結構便利で、引用したいと思った他サイト等でブックマークレットを使えばその場で上図のようなWYSIWYGがポップアップします。 リンクは既に作成済みなので下書き保存してあとで編集すれば記事執筆のハードルも低くなるかも知れません。 記事を複数ページに分割 テーマファイルを触る必要が
Adobeの有料ソフトを買う前に、代替になる無料ソフトでコツを掴もう・使い方まとめ - かちびと.net
デザイン等に一般的に利用されているPhotoshopやDWなどのAdobe製品は高機能で仕事では必須のツールです。しかしながら高額で、手軽に購入出来るという訳には行きません。無料で手に入る代替ソフトがありますので、まずはコツを掴むのにフリーソフトから使ってみてはいかがでしょうか。 全く同じとは行きませんが、例えばPhotoshopの代替ソフトとして有名なGIMPはPhotoshop専用の拡張子であるPSDファイルも開く事が出来ますし、GIMPで作ったファイルをPSDに変換する事も可能です。勉強からスタートするおつもりなら無料のソフトから、という形もありではないかと思います。 そこで、各Adobe製品の代替ソフトとなるような無料のソフトと、その使用法が書かれたサイトをまとめておきます。 代替ソフトに関しては無料で使えるAdobeCS3の代替ソフトという記事を参考にさせて頂きました。 Phot
直感でWebサイトを作成できる6つのフリーWebサービス - かちびと.net
気になって調べたのでメモします。 HTMLやCSSの知識を必要とせず、 ドラッグ&ドロップで作成するなど 直感操作でWebサイトを作成できる フリーのオンラインサイトビルダーを いくつかご紹介致します。 基本的に、作成したサイトはそのサービスのサブドメインまたは独自ドメインを登録して運営します。使用して気が付いた点をメモしておきますが全ての情報ではありません。 yola ネタ帳さんの記事（有料ソフトとデザイン作業を無力化させる30のブックマークまとめ）で知ったサービス。直感で操作、独自ドメイン（yulaで取得、年19$程度）の利用も可能。日本語も文字化けしません。 yola Moonfruit ドラッグ&ドロップで作成。HTMLもCSSの知識も不要。日本語は使えませんが、上記のように、画像や特殊なテキスト部分も変更できる。 Moonfruit weebly 独自ドメインの利用も可能。メール
Flashのような8種のエフェクトを選べる汎用的なjQueryギャラリー・AviaSlider - かちびと.net
Flash製のギャラリーなどでよく 見かけるようなエフェクトが8種 用意されているjQueryを使った スライドギャラリーのAviaSlider をご紹介します。 若干怪しいですけどIEでも動きました。懲りすぎてない、汎用的なギャラリーです。
css3を直感で学べそうなフリーのジェネレーターを公開しているCSS3 Sandbox
話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基本 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 話題のcss3ですが、そのcss3 関連のジェネレーターを4つ公開 しているCSS3 Sandboxで基本 を学ぶのもいいかな、と思ったの でメモ的に記事にします。 直感でグラデーションやドロップシャドウを作成、リアルタイムでプロパティが変わってくれるのでいい勉強になりそうです。CSS3 Sandboxの4つのジェネレーターをご紹介します。 Linear Gradients グラデーションを作成出来ます。左上でWebkit(SafariやChrome)かFirefoxを選択、その下でプロパティを決めます。実装画面下部に実際のプロパティが表示されるのでどのような数値でどう変化するか、というのが分かると思います。 Text Sha
スライドや動画など、HTML5のサンプルいくつか - かちびと.net
個人的なメモです。スライドや 動画などをHTML5を使って 実装したサンプルをいくつか 備忘録的にメモします。こうい うサンプル見てると未来が楽 しみになりますね。 スタイル出来ないブラウザがある限り、微妙ではありますが、HTML5 を IE や Firefox 2 でも使えるようにする方法等も出ているので頭に入れるくらいはしておいて損ないかも。 サンプルは結構あるのですが、気になったものをいくつかメモ。特にFlashに対応しないipadやiPhoneでも動画を再生できるのは素敵かも。 This presentation is an HTML5 website キーボードの矢印キーで動くスライドのサンプル。 This presentation is an HTML5 website CanvasVideo Canvasを使ったビデオ。画面をクリックすると割れるエフェクト付き。 Canvas
携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 サンプルを元に解説してくれているので分かりやすいです。 携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 携帯サイトの作り方 5年前の情報なので参考程度に。今は随
ブラインド式に画像が切り替わるjQueryプラグイン・jQuery Blinds - かちびと.net
IE6,7でも動いてくれるので 実用性あるかなと思ってメモ。 ブラインド式に画像が切り 替わってくれるjQueryの プラグイン、jQuery Blinds。 なかなかスムーズな動きです。 IE6でも7でもスムーズに切り替わってくれますよ。いろいろ凄いプラグインありますけど結局使うのはブラウザに対応してるプラグインになりますよね。。 外に広がるようにスムーズに切り替わってくれます。なかなかよさ気。デモ作った。画像に他意は無いです。 マークアップも簡単。 <div class="slideshow"> <ul> <li><img src="1.jpg" alt="1" /></li> <li><img src="2.jpg" alt="2" /></li> <li><img src="3.jpg" alt="3" /></li> <li><img src="4.jpg" alt="4" />
[cssメニュー]マウスオーバーで滑らかに別要素をドロップダウンさせるjQuery・Fluid Navigation
最近存在を知ったのでメモ。 1ヶ月も前の情報ですけど、 今更ながらなかなか良さそう なプラグインです。 最近存在を知ったのでメモ。 1ヶ月も前の情報ですけど、 今更ながらなかなか良さそう なプラグインです。cssメニュー でのマウスオーバーで使う jQueryプラグイン。 デモを見ていただいたほうが早そうですね。マウスオーバー時にリスト内に書いたdiv要素に切り替えつつドロップダウンさせるjQuery。なんとなく説明が難しい。。。 マウスを乗せると別の要素が滑らかに降りてきます。デモは画像不使用です。なかなか良いのでは。 IE6~8も動く事は動きますが、若干挙動が怪しい。。 [sexy-lightbox href=’http://kachibito.net/wp-content/demo/fluid-menu/fluid-menu.html?TB_iframe=true&height=65
![[cssメニュー]マウスオーバーで滑らかに別要素をドロップダウンさせるjQuery・Fluid Navigation](https://cdn-ak-scissors.b.st-hatena.com/image/square/5822cbe70e419f31b0cf82163d82314142f2ee7c/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2010%2F03%2Fcss-jquery01.jpg)
電球をテラリウムにする方法と電球のアートいろいろ
以前見かけた画像の中に 電球をテラリウムにしていた のを見て真似したいと思って いたのですが、その方法が 公開されていたのでいつかの 為にメモします。 テラリウムとはガラス瓶などの中で植物を栽培する方法で、そのガラス瓶に電球を使っています。 How to Make a Tiny Terrarium in a Light Bulb いいすねー。素敵。同記事では作り方を公開してくれています。 ↑ 余計なものを取り除いて・・ ↑ ちゃんと固定 ↑洗って乾かした砂を入れる 続きはWebでどうぞ。こういうのを作る時間が欲しいところです・・ How to Make a Tiny Terrarium in a Light Bulb 電球を使ったアート作品先ほどのテラリウムのように電球を使ったアート的なものをdeviantartから。Photoshop加工的なものも含めています。 Aqua Bulb Aq
フリーで配布されているPhotoshopのパターンいろいろ
以前、必要になった時に探したサイトをメモ。 Photoshopのパターンを配布してくれている サイトのまとめです。多くの場合はセット配布 や、Photoshop関連の専門サイトなので まとめのまとめという形になります。全て無料 ですが、著作権は個別にご確認下さい。 何かと重宝するPhotoshopパターン。全てフリーでダウンロードできます。 208 Retro Photoshop Patterns レトロなPhotoshopパターン208種。 208 Retro Photoshop Patterns 200+ free beautiful Photoshop patterns hand-picked 200以上ものPhotoshopパターンまとめ。 200+ free beautiful Photoshop patterns hand-picked Web treats Web treat
フルFlashサイトを作成出来るフリーソフト・AuroraFlash
結構凄いと思ったのでご紹介です。 フリーソフトでフルFlashサイトを作れ るAuroraFlashを試してみましたが、 これがなかなかよさ気。まだアップ ロードはしていませんが、作成時で は日本語でも問題なく表示されます。 adobe不要でFlashサイトを構築できるフリーソフト、AuroraFlashの簡単な使い方を記載しておきます。 まずはダウンロードしてセットアップを行います。が、至極簡単に進められますのでここでは割愛し、使い方をあげておきます。 セットアップ後にデスクトップにアイコンが表示されますのでダブルクリックをして起動させます。以下の画面になればビルダーのセットアップは完了です。 右側が操作ボードになります。左側で動作を確認する事が可能です。一番上でコンテンツの変更作業を行います。真ん中は音声ファイルで、削除したり追加したり。一番下はテーマ（テンプレート）です。 テーマを選
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
class名を変えるだけでデザイン変更可能な、css3で作られた沢山のボタンを公開しているWe Love Buttons - かちびと.net