Pure を使って 5分でレスポンシブな Blog テンプレートを作る
Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。 さすがに 5分はウソです すいません。でも簡単でしたよ。 Pure ： A set of small, responsive CSS modules that you can use in every web project. Pure とは Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。 また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択す
livedoor 相互 RSS を使ってアンテナページ作ってみた
livedoor 相互 RSS という、フィードを登録して簡単にお気に入りの Web サイトの更新情報を自分のページに表示できるサービスを使って、リンク集を作ってみました。 ホームページの時代が去って、ブログの時代になると、独立したリンクページを置くサイトは減った。僕はリンク集の代わりに、好きなアカウントの「はてなアンテナ」から良サイトの情報を得た。「あの人がアンテナに登録して更新チェックしているサイトなら、面白いはずだ」と判断して、新しいサイトに次々と出会えたのだ。 だが、今や独立したリンクページを持つサイトは少なく、あってもまず更新されない。はてなアンテナも、リンク切れサイトの名前が並ぶ廃墟と化している。 2013年の今こそ、ブログにリンク集を設置してほしい ： 幻視球ノート から引用 これ、今だとリンク集ではなくて相互RSSなんだと思う。「相互RSS」を知らない人も多いと思うが、2ち
CSS だけで作るタブ切替ユーザインタフェース
:target 疑似クラスを使って、JavaScript は一切使用せず CSS だけでタブ切替のユーザインタフェースを実装してみます。 タブ切替の UI は、よく使われますが、JavaScript で実装するケースが多いので、今回は全部 CSS のみで実装してみるテスト。目新しいことをやっているわけではありませんので、すでにやられている方もいるかもしれませんが気にせずいきます。 使うのは :target 疑似クラスで、IE9 以降は対応していますので、比較的動作環境も広いし、フラグメント識別子つきのリンク （要するに #hoge がついたリンクです） で、各タブを直接指定したリンクが簡単に張れるので、JavaScript でやるより楽に使い勝手のよいタブ切替が実装できる場合もあります。 実際のサンプルは下記に。 CSS だけで作るタブ切替ユーザインタフェース サンプル 最新の Firef
CSS だけで作るタブ切替ユーザインタフェース （float 使用版）
1つ前のエントリーで、:target 疑似クラスを利用した CSS だけで作るタブ切替 UI を実装してみるテストしてみました。詳しいことは下記のエントリーをご覧ください。 CSS だけで作るタブ切替ユーザインタフェース 先のエントリーで作ったサンプルは、position: absolute; を使って、各タブの内容を重ねちゃった上で表示を切り替えるっていう方法を使ったのですが今回は、float プロパティを使ったサンプルを紹介してみます。 実際のサンプルは下記に。 CSS だけで作るタブ切替ユーザインタフェース サンプル 最新の Firefox、Google Chrome、Safari、Opera など、:target 疑似クラスに対応したブラウザであれば問題なく動作するはず。IE は IE9 以降のみ。その他、スマートフォンなどでは動作に問題ないと思います。 HTML はほぼ変更なし
Flickr がリニューアルして 1TB 無料、Pro アカウントは廃止など
Flickr が UI の刷新をはじめ、無料で 1TB の容量が提供されるなど大幅にアップデートされました。Pro アカウントも廃止されています。 Flickr が UI の刷新をはじめ、大幅なアップデートをしたようです。見た目が思いっきり変わっていてちょっとビックリしました。さらに、今まで提供されていた Pro アカウントは廃止され、無料のアカウントでも最初から 1TB （テラバイト！） の容量が提供されるなどの変更も。 1TB の容量は太っ腹すぎて、写真の保管場所として使っている人にはうれしい。ちょっと忘れ去られ気味だった Flickr ですが、これで復活となるのでしょうかね。 A better, brighter Flickr ： Flickr Blog Flickr! 新しい Flickr のトップページ。思いっきり見た目が変わりました。 フォトストリームもこんな感じで、より写真を
Google Drive に Web ページから簡単にファイルを保存するボタン
Google Developers Blog で、Web ページ上にある画像やファイルを、ワンクリックで Google Drive に保存できるボタン、「Save to Drive」 ボタンが紹介されていました。 ボタンを設置する簡単なコードを追加するだけで、すぐに自分の Web ページに、このボタンを設置することが可能です。 An easier way to save files to Google Drive ： Google Developers Blog Starting today, Drive users can use the "Save to Drive" button to do exactly that. The "Save to Drive" button is an easier way to save files directly from a website.
Gmail から Google カレンダーに予定を簡単に追加できるようになるらしいよ
Gmail に、メール本文内に書かれた日付けから、簡単に Google カレンダーに予定を追加できる新機能が追加されるとのこと。 When you click on one of these underlined dates, you'll be able to preview your schedule for the day and change the title, date or time of the event. Clicking "Add to Calendar" will do exactly that -- add the event to your calendar, and for extra convenience, the calendar event will include a link back to the original email. Add even
jQuery Core 1.9 アップグレードガイド 日本語訳
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
iframe 要素の seamless 属性を試してみた
WebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。 Last week in WebKit: Inspector's sources panel and private names ： Surfin' Safari Add seamless layout code (and pass most of the remaining seamless tests) ： Changeset 118291 WebKit 現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド （Dev channel） の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページ
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
新しい Facebook ページを試してみた
Facebook でちょっと前に導入された 「タイムライン」 が、Facebook ページの方にも適用されるっていうお話が最近話題になったりしていましたが、先ほど、Facebook の自分が管理してるページに行ったら、その新しいデザインのプレビューができますっていうお知らせが出ていたので早速試してみましたよ。 新しいFacebookページのご紹介 ： Facebook ある日、この Blog の Facebook ページに行くとこんなお知らせが… 3月30日に全面切り替えみたいですが、その前にプレビューができますよという話。個人のページにタイムラインが導入されたときと同じ流れですね。「詳しくはこちら」 を押せば、新しい Facebook ページについての説明が見られます。 ページのブランドを構築 ユニークな写真を追加し、ページのタイムラインに大切なニュースやアップデートを掲載しましょう。
Dropbox にファイルを置くと自動で色々な処理を実行してくれる Dropbox Automator
Dropbox Automator は、Dropbox の指定したフォルダにファイルがアップロードされたときに、あらかじめ指定しておいた各種処理を自動的に実行できるサービスです。 あけましておめでとうございます。新年初エントリーですが、TechCrunch 等で取り上げられていた、「Dropbox Automator」 を試してみたので紹介。 Dropbox Automator は、Dropbox の指定したフォルダにファイルがアップロードされたときに、あらかじめ指定しておいた各種処理を自動的に実行できるサービス。例えば、画像をアップしたら自動的に Flickr にアップしてくれたり、文書ファイルをアップしたら、自動的に PDF に変換しておいてもらうといったことが可能になります。 Dropbox AutomatorはDropbox専用のIFTTTみたい Automatisiere dei
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
FTP の危険性に関して超簡単まとめ
今日話題になった Gumblar の亜種によって FFFTP の設定情報から FTP 情報が漏れる件で、FTP 自体の危険性と FFFTP 自体の特性、さらに Gumblar 対策という点で少し情報が混乱している状況が見受けられます。そこでその点を簡単にまとめてみました。 去年あたりから、「Gumblar （ガンブラー）」 に代表されるような、FTP のアカウント情報を何らかの手段で盗み出して Web サーバにアクセスし、Web サイトを改竄して被害を広めていくタイプのウィルスが問題になっていますが、今日になって広く利用されているフリーの FTP クライアントである 「FFFTP」 にアカウント情報漏洩の危険性が見つかったということで話題になっていました。 「FFFTP」のパスワードが"Gumblar"ウイルスにより抜き取られる問題が発生 ： 窓の杜 ただ、この問題で、FTP 自体の危険性
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
個人的に使っている Web サービスまとめ | WWW WATCH
日常的に使用している Web サービスをまとめて紹介 & 主要な使い道なんかを書いてみたいと思います。常用中のサービスとしては、そんなに珍しいサービスを使っているわけではないので掘り出し物はないと思いますが、同じサービスでも人によって使い方というか重視する点なども違うと思いますので何かしら参考になれば。 ちょっと個人的なネタですが。仕事柄、何か面白そうな Web サービスがリリースされると、とりあえずアカウントだけは作って色々試してみるわけですが、中にはそのままハマって使い続けるものもあれば、当然ながらあまり使わずに放置ってものもあります。 その中でも特に日常的に使用している Web サービスをまとめて紹介 & 主要な使い道なんかを書いてみたいと思います。常用中のサービスとしては、そんなに珍しいサービスを使っているわけではないので掘り出し物はないと思いますが、同じサービスでも人によって使い
5分でわかる Tumblr の始め方
すでに使っている人には今更なんですが、これから始めるって人向けに簡単なまとめ。 Tumblr といってもその用途は人それぞれ。自分の Blog として使う人もいるでしょうし、情報（ネタ）収集のツールとして使いたい人もいるでしょう。今回は情報収集 & クリッピングツールとしての使い方に主眼を置いて紹介してみようと思います。 アカウントを取得する とりあえず他の人をフォローしまくる ダッシュボードをしばらく眺めてみよう Reblog と Like Tumblr をもっと便利に使う Firefox を使え アドオン ： Tombloo と Greasemonkey を入れる ユーザースクリプト ： AutoPagerize, LDRize （+ Minibuffer）, ReblogCommand, play on tumblr を入れる マイページなんて飾りです iPhone と Tumblr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
