CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer - かちびと.net
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer - かちびと.net
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方 まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script> で、マークアップ <canvas id="bgCanvas"></ca
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
作業効率が上がったと実感したので毎日使うようになったブラウザショートカットキー
GoogleChromeでブラウジング している時に良く使っているショート カットキーをご紹介します。基本的 には左手でショートカットキーを使う ので良く使うのも左手で出来るもの が中心となっています。「そんなの 基本じゃん」という方はスルーの方向で・・ 使い易さ等は個人差が生じるので参考程度という事で。。。WindowsユーザーなのでWindowsでのショートカットになります。 コピー(Ctrl+C)、ペースト(Ctrl+V)、切り取り(Ctrl+X)、undo(Ctrl+Z)、全選択(Ctrl+A)、Ctrl+マウスの上下でページの拡大縮小などなど基本的なショートカットは割愛します。 [note]一応キーボードの画像を載せますが、キーの場所は共通ではありませんので参考イメージとしてご覧下さい。[/note] リロード Ctrl+R ページをリロードします。Fxでも使っていました。F5で
2009年・かちびと.netのTOP10いろいろ - かちびと.net
今日が今年最後のエントリーです。 今年の5月後半より始めたこのブログ も無事に年を越す事が出来そうです。 約7ヶ月と中途半端な期間の統計 となりますが参考になれば幸いです。 Googleアナリティクスでの解析によるTOP10記事を上げます。はてブ数は右サイドにあります。 PV数 Twitter関連ツール・まとめ 68,250PV / 44,527セッション 名刺を自作したい方の為のフリーの名刺テンプレートやツールいろいろ 62,066PV / 47,035セッション ネットで出来るだけ物を安く買える方法やサイトを調べた 51,282PV / 36,191セッション ついつい長居してしまう専門的なサイト25選 45,271PV / 35,808セッション 国産限定・Web制作時に覚えておくと便利な14のフリーのWebサービス 29,083PV / 22,722セッション 国内の商用利用可能な
LivedoorリーダーにさよならしてGoogleChromeエクステンションのあるFeedlyにした - かちびと.net
RSSリーダーはFirefoxをメインブラウザ として使っている頃から使用していました が、現在はGoogleChromeが中心になって いるので、変更ついでに重いLivedoorリーダー ともさよならしました。 で、新しいRSSリーダーはなんとなく避けていたGoogleリーダーに変更。ついでにFeedlyを利用開始です。 Feedlyかなりお勧め どんなWebサービスでも僕は動作と見やすさ、使い勝手で決めています。多機能ならいう事なし。Feedlyは僕にぴったりのWebサービスでした。Fxアドオンもありましたが、他にも色々入れていたので重くなるかなと思い入れていませんでしたが、Chromeエクステンションなら全く重くならない、という事で抵抗無くインストール。 その場で各種ソーシャルサイトに投稿できるのもありがたい。 今日はLivedoorからGoogleリーダーへの移行作業のとFeedl
cssのちょっと小粋なテクニック13個 - かちびと.net
小粋の定義は分かりませんが、ちょっと「おっ」と思えるcssのテクニックをいろいろと。以前、記事にさせていただいた、ｃｓｓとHTMLのみで3D効果を実現したテクニックで他にも無いかなと思って同様に驚いたテクニックです。 3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのｃｓｓを使った良アイデアや高度なテクニックなど。 ざっとしか見ていませんが、多分jsは使ってないと思います。 Film strip gallery with information text ネガポジ加工された画像にフィルムのような枠をつけてマウスオーバーで写真を表示するギャラリー。 Film strip gallery with information text Super animation – just for the fu
Twitter関連ツール・まとめ - かちびと.net
Twitter関連の便利なツールがかなり 紹介されて来ていて、そろそろ混乱 してきたのでまとめます。 リンク先は日本語で解説してくれて いる記事にしています。されていない ツールやサイトは載せていません。 今現在は165個のツールがありましたが、今後追加していく可能性もあります。 TwitterWikiに載ってるサービスは極力載せていないつもりですが、若干被ってるかも。 全てのサービスを試したわけではありません。ＭａｃとiPhoneは持って無いですし。。。 また、リンク先を日本の記事にしたのは、海外のサービスに直接貼っても 使い方が分からなければ意味が無いと思った為です。 なので、リンク先がかなり偏っていますが重ねてご了承下さい。 ※コメント頂いたので１５個追加して180個更に20個追加して200個に育った。 ※8月アップデート＞17個増えて217個 ※9月アップデート＞30個増えて247
国産限定・Web制作時に覚えておくと便利な14のフリーのWebサービス - かちびと.net
最近、国産のWebサービスも かなり勢いがあるなぁと思ったので ちょっとまとめてみました。よく 紹介されるのは海外製ですが、 それに劣らないMade in Japanの Web制作者が知っておくと便利そうな フリーのWebサービスをご紹介します。 順不同です。日本語が完全に通じる海外Webサービスも今回は省いて純国産のWebサイト制作に一役買ってくれそうなWebサービスをご紹介したいと思います。出来る限り高性能だったり多機能なWebサービスのみにしたつもりですが主観入ってます。 Color of Book 国産サービスで一番多用しています。AmazonAPIを使って雑誌の表紙を抜き出し、その表紙からカラーチャートを生成。アイデアが素晴らしいですね。雑誌は表紙のデザインや色で惹きつけるよう考えられている事が多いのでWeb制作時のカラー選定にかなり参考になるのでは。 Color of Book
ネットで出来るだけ物を安く買える方法やサイトを調べた - かちびと.net
今更ながら不況なのでネットで 安く買えるEコマースサイトや 通常よりも安く済ませる方法などを 調べたのでシェアしたいと思って エントリします。殆ど既出な情報です。 ほんとにお金が無い時には役に立たない 情報かも知れません。 仕事の過程で物入りな時に探した情報です。何かと出費を抑えたい時代。少しでも安く済ませられるよう、激安ネットショップやモノを安く買う方法等の情報をまとめました。順不同です。 生活応援通販のヒラキ とにかくココは絶対に紹介したいサイト。金額が異常なほど安い。スニーカー180円で有名なサイトです。他にも雑貨80円均一、女性用ブーツ780円などなど。配送はクロネコヤマト等なので送料が高いという罠も無し（多分）。更に5250円以上で送料も無料とまとめ買いにもうってつけです。 生活応援通販のヒラキ ロヂャース ディスカウントで有名なロヂャースのオンラインショップ。実店舗同様、安い商
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
