WordPressをCMSとして利用する際、固定ページの親ページと子ページに共通のナビゲーションを作るTips - かちびと.net
CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer - かちびと.net
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
商用OKで、Webフォントにも使用可能な、シンプルで汎用的なアイコンタイプのフリーフォント・Modern Pictograms - かちびと. net
ここ最近、この手のフォントがかなり増えてき ましたが、こちらも良い感じでしたのでご紹介。 Webフォントにも使用できる、アイコンフォント です。シンプルで汎用的なのでなかなか使い 易いのではないかなと思いました。セマンティ ック的側面では反対の声も見かけますけど。。 こういう、アイコンタイプのフォントもかなり目立ち始めましたね。以前、同じくWebフォントに使えるWeb Symbols typefaceというフォントをご紹介しました。また、先日公開されたソーシャルメディアアイコンのフォント・Socialicoも素敵でした。※Webフォントに使えるかは調べてません。 今日ご紹介するModern Pictogramsも汎用的なデザインで、Webフォントにも利用可能です。 シンプルで使いやすい感じです。Webフォントにも使用できますので、CSS3と合わせてスマートフォンアプリで応用したり、管理画面
タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS - かちびと.net
たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり、シンプルなフレームワークとしても良いかもしれません。 以前ご紹介したsimplelibと同様にパッケージ化されているので選択肢が増えた印象です。 シンプルで装飾も自由に出来るのでなかなか汎用的ではないかなと思います。ライセンスもMITなのはありがたいですね。 備わっている機能 機能はこんな感じ。どれも良く探している機能じゃないかなと思いますが、これらの機能を1つのjsファイルで使うことが出来る、
WebサイトのCSSをインタラクティブに修正したり保存出来るツール・CSS Pivotがなかなか便利
なかなか便利だったのでシェアがてら ご紹介。WebサイトのCSSをプレビュー を見ながら修正したり、そのコードを 保存することが出来るツール・CSS Pivot のご紹介。似たような機能のChromeの エクステンションを普段使用しています が、乗り換えるかもしれません。 URLを入力すると、そのWebサイトのレイアウトに仮想的にCSSを加える事が出来ます。インタラクティブに修正出来て、保存も出来るのでなかなか便利そうですよ。ブックマークレットも用意されてるのでサクッと使えるのも魅力です。 シンプルでいい感じです。URLを入れてOpen URLを押せば編集画面になります。 boxにcssを書いてプレビューを押せば適応されます。cssには強制的に!importantが付いてくれるので、修正が気に入ればそのままコピペすればいいだけ。特に、人に教えるときにもいいかもですね。ここをこう直せばうまく
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
jQuery事始めvol.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる
以前に書いたjQuery事始め、という記事の 続編のような内容の記事です。基本を理解 したら今度はコードを真似して体で覚えて みるのも勉強方法の有効な手の一つだと 思います。ご自分で改変して遊べる程度の 簡単なコードなのでぜひチャレンジしてみて ください。 内容はjQueryを覚えたいけどなかなか時間が無い、というWebデザイナーさん向けです。多くのプラグインやチュートリアルが存在しますが、jQueryの基本中の基本と少しのアイデアだけでも十分出来ることがありますので、そこまで深く追求する必要は無い気もします。 少しでもハードルが低くなればと思って、コードを真似して、そこからご自身で応用出来るような簡単な内容を記事にしてみました。今回はよくあるマウスオーバーエフェクトを作ってみます。 サンプルまずはサンプル。画像にマウスを乗せるとアニメーションエフェクトがかかります。 確認出来ましたでしょ
まとめ記事やTipsなど、ひたすらjQueryの情報を配信しているブログ・jQuery4u
jQueryのプラグインのまとめ記事 や、Tipsなど、jQuery関連の情報 のみをひたすら配信しているブログ jQuery4uをご紹介。即効RSS購読 でした。まとめ記事も多数あるので 暇を見て全部見まわっていきたい。 まだ大量の記事数ではありませんが、今後に期待したいところ。以前書いた「jQueryプラグインを探す際にだいたい見て回る巡回サイトまとめ」にも加えています。 jQuery情報のチェック先に。 いくつか良かった記事をご紹介。 フォーム系プラグイン30個 バリデーションとかフォームデザインとかいろいろ jQuery Forms > 30 Examples and Plugins 画像拡大系プラグイン10個 画像を拡大する的なプラグインいろいろ 10 jQuery Image Zoomers jQuery Mobileを使った5つのテクニック jQuery Mobileのテクニ
実際に大きな地震にあって感じたこと
まずはお亡くなりになった方にご冥福 をお祈り申し上げます。ご存知のとおり 大変大きな被害をもたらした東北・関東 における地震が3/11(金)に起こりました。 僕は、生まれも育ちも東京で、現在は 世田谷区の下北沢に住んでいます。 世田谷区は震度5弱を観測しました。 [note]緊急地震速報と余震の関係で寝れない為、ほぼ殴り書きで思うことを綴っています。内容にまったく期待できないと思って読んで頂ければ幸いです。[/note] 阪神大震災の時も東京は大きく揺れましたが、ここまで自分の身の危険と、家族や大事な人の安否で混乱したのは生まれて初めてです。 昨日の自分の状況地震の影響で電話が使えず、仙台に出張でよく行く兄や、マンションの11階に住んでいる足の悪い姉、還暦を過ぎた両親、手術を予定していた祖父、子供の面倒をみる仕事している連れ合いの安否を確認したかったのですが、地震後、数時間経っても全く把握
お手軽・簡単にブログやWebサイトを拡張出来そうなWebサービスいろいろ
以前、デザインとか加工とか出来ないから なんかいいの教えて、と言われて教えたツ ールいろいろという記事で、ブログを始めた 彼が今度はブログをパワーアップさせたい 的な事を言い出したので教えたWebサービ スです。知識がないから簡単に出来るやつ がいい、とのことでしたのでそんなWebサー ビスになっています。 パワーアップさせたい、としか聞かれなかったのと、僕もあまり時間がなくてさほど数は探せませんでしたが、喜んでくれていたので需要があるかと思って記事にしてみます。パワーアップって言われても、どうしたいのかよく分からないので機能を追加できる的なものを探してみました。 基本的にコピペで済むものがほとんどです。僕自身、あまり導入経験が無いので使用感抜きで書いていますがご了承ください。 zenback 国産（シックス・アパートさんですね）のWebサービスです。かなり色々なところで見かけますが、申請
わずか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
ミニマルやシンプルなデザインの参考になりそうな名刺いろいろ - かちびと.net
ちょっと調べ物をしたついでにメモ。 シンプルなデザインの名刺や、ミニ マルなデザインの名刺の例です。 インスピレーション用として残したい ので記事にします。多数あるのです が、特に気になった名刺デザインを 40ほどご紹介します。 という訳で、シンプルデザイン、ミニマルデザインの名刺デザイン例。使用されているロゴがシンプルだから名刺もシンプルになってるだけのような気もしないでもないですが、それはとりあえず気にしないようにしました。順不同です。 Lappin Properties モノグラムなロゴを背景にも並べています。 Lappin Properties papirus 裏表で反転。 papirus Novia 24pt インパクトと色合いが素敵。 Novia 24pt GS Stirling 好みのデザイン。素材も良さそうですね。 GS Stirling T&T 厚さをやや多めに取って色付
偶然映ってしまったアザラシの憎めない写真 - かちびと.net
休日なのでネタ。偶然 出てきたアザラシが全てを 持って行ってしまった1枚の 写真です。かわいい顔が 何とも憎めません。 以下がその写真です。 Crasher Seal Photobombs Group Of Penguins かわええ。 本当はペンギンの集合写真を撮る予定だったそうですが、偶然にも穴から出てきたアザラシがフォーカスを奪ってしまいました。これはどう見ても「ペンギンの集合写真」では無くて「イタズラ好きなアザラシ」の写真にしか見えませんよね。。この表情がなんともたまらない。 以前、リスが同じような事をしていましたが、偶然とは怖いものです。 Crasher Seal Photobombs Group Of Penguins (PHOTO)
Twitterに登録したけど使い方が分からない方にお勧めの3記事 - かちびと.net
先日とくダネ！でもTwitterが 紹介されていて今後益々 Twitterの利用者が増えそうな 気配ですが、やはり使い方が 分からず混乱しやすいツール なのは変わりません。シンプル故 か最初は戸惑う方も多そうです。 既にネット上には数多くの「Twitterの使い方」の記事がありますが、どのサイトを見ればいいか分からず、使わないまま放置というのは残念なので分かりやすい記事を3つだけご紹介。 この3記事さえ読めば概念やある程度の使い方、最初にどうすればいいかも分かるかと思います。周りに「Twitterがよく分からない」という方がいましたら、この3記事を教えてあげてください。 とにかく多すぎず、余計な情報も無く、分かりやすい記事を厳選。他の情報は使えるようになってからでも困りません。 How To Use Twitter（Twitterの使い方） かなりお勧めです。ほぼ全ての機能を分かりやすく説
貴方の写真を様々なタイプのポラロイドに変換してくれるROLLIP - かちびと.net
かなり様々なサイトで既に紹介 されているのですが、サイトの 運営者さんからわざわざメールフォーム から御問い合わせ頂いたので記事に します。写真をポラロイドにしてくれる オンラインジェネレーター、ROLLIPの紹介。 頂いたメールは以下。 Suggestion for Kachibito Hello, We at Rollip.com have developed a new site that lets you give any digital photo the classic look and feel of a vintage or Polaroid picture. We’re trying to spread the word about our service, and we think readers of Kachibito would be interested in
リマインダーに最適・予約投稿が可能な国産TwitterサービスTwit Delay - かちびと.net
物忘れが激しい僕にとって、とてもありがたいTwitterサービス、Twit Delayをご紹介します。Twit Delayは予約投稿が可能な国産のTwitterサービスです。 Twit Delayは僕が仲良くさせて頂いているさくらさんの作。Twitterに予約投稿が可能ですので、ランチしてシエスタした後、何するか忘れる僕の病的なライフスタイルにぴったりなサービス。用途はもちろん、リマインダーとして最適ですが他にもいろいろ応用できそう。 機能紹介 機能はいたってシンプルです。キャプチャを用いてご紹介します。 ※現在は本リリース前のパブリックベータテスト中ですので機能の変更もあるかも 分刻みで予約投稿 指定した日時につぶやく、を選択すると、カレンダーから日時、時間を指定して予約投稿可能です。2008･08・21現在は30日先まで指定可能。仕事は普段使うタスク管理ツール、プライベートはTwit
PSDのWebサイトテンプレートを無料でダウンロードできるサイトいろいろ - かちびと.net
PhotoshopでWebサイトを構築出来る（語弊あるかな？）ようにPSDファイルでWebサイトのテンプレートを無料で配布してくれているサイトをいくつかご紹介します。僕には今まであまり馴染みが無かったので備忘録的にまとめておきます。 ライセンスはそれぞれのサイトやテンプレートごとにご確認下さい。 PSDthemes 18個のテンプレートをフリーで配布。かなりハイクオリティです。要登録。 PSDthemes Freepsd 20数個のフリーテンプレート。WPも2つほど。 Freepsd Templates Rain 使いやすそうなデザインがいっぱい。 Templates Rain deviantART deviantARTにもかなり多くあります。リンクは「web PSD template」で検索をかけたページですのでWebサイトテンプレートでは無いのもまぎれていたり、有料もあるかもしれません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料でユーザー登録も不要。Webサイトのモックアップを直感で作成、PDFやjpgで保存できるLumzy - かちびと.net