【CSS】リンク関連擬似クラス（テキストリンク）は複数設定可能なので訪問済み＋マウスオーバーも設定できる | バシャログ。
今週末は地域の餅つき大会、つくことより食べることに専念しようと思っているishida です。やっぱ、つきたての餅はあんこにかぎるよねっ！ とある案件にて、ほぇー。知らなかったわーとなったのでメモメモ。 :link 、:visited、:hover、:activeとテキストリンクに関連する疑似クラスがありますね。 この擬似クラス、複数設定することも可能でしたので簡単にご紹介。 まずはおさらいってことで、上のようなテキストリンクがあるとします。 CSSを記述すると以下のようになります。 a:link { /* 通常テキストリンク */ color: #0066FF; text-decoration: underline; } a:visited { /* 訪問済みテキストリンク */ color: #800080; text-decoration: underline; } a:hover {
2012年をシンプルに生きるための12の切り口
今年の一つの挑戦は「本業をもっているブロガーとしてどこまでできるか」その限界をみることでした。 結果についてはそれなりに満足しているのですが、それでもやはり無理が続いたり、自分自身以外の人に負担がいったりと反省することもたくさん起こった一年になりました。 「生産性」について考えるとき、とかく「たくさんの仕事をする」ということばかりに目が行きがちですが、むしろインパクトの大きな仕事を少数行うという方法だってありえます。 このことをシンプルに教えてくれたのが、もう数年前に発刊された Zen Habits の Leo の本、「減らす技術 」です。 私は Leo のブログは時として口当たりのよい言葉ばかり並んでいる気がして敬遠していたこともあるのですが、その素朴な言葉は単純に「正論ばかり！」と切り捨てることができない力をもっていることも認めないわけにはいきません。 今日はその「減らす技術」の根幹を
これはすごい！Chromeの履歴が見違えるほど使いやすくなるエクステンション「Better History」 - Chrome Life
ChromeのシェアがFirefoxを抜いたことで、メインブラウザとして乗り換える人も増えてきたように思います。 そんな人からは、Chromeは軽くてシンプルなので使いやすいという声をよくききます。 しかし、Chromeがリリースされた当初は、あまりにも機能が少なくてこれだけで使い物になるのか？と疑問に思っていた時もありました。 それが今では、Chrome自体の機能も他のブラウザに匹敵するぐらい使えるものに進化したのには正直驚いています。 筆者は、今のChromeで十分満足しているのですが、ただ１つだけ不満な機能があります。 それは、 Chromeの履歴機能が貧弱すぎる！ という点です。 Chromeでアクセスしたページの履歴が確認できる機能なのですが、画面を見てみるとわかるように手を抜いて作ったのではないかと疑ってしまうぐらい貧弱ですw 履歴が新しい順で並んでいるだけで、検索機能はありま
Twitterで振り返る2011年 ホットトピック発表
今年はどんな1年でしたか？ Twitterが今年人気のあったハッシュタグを発表しています。どんなものがあったかな？ #egypt #tigerblood #threewordstoliveby #idontunderstandwhy #japan #improudtosay #superbowl #jan25 日本とエジプトの状況は、やはりTwitterでも世界中が注目するニュースとなりました。ハッシュタグの他にも、テレビ、スポーツ、芸能人など各分野でTwitterで話題となったトピックがまとめられていますよ。日本語ハッシュタグだけにしぼるとどんなものが人気あったかなぁ？ [Twitter] そうこ（Casey Chan 米版）
超最強コンビ「GoodReader」と「i文庫」活用法。自分だけのフォトアルバム・雑誌を作ってポケット書斎を充実させてみました。 - isuta（イスタ） -私の“好き”にウソをつかない。-
HOME無料アプリ超最強コンビ「GoodReader」と「i文庫」活用法。自分だけのフォトアルバム・雑誌を作ってポケット書斎を充実させてみました。
光から移動まで、すべてCSSで作る光るアニメーション
ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」 意匠部ME課あらため、HTMLファイ部所属となった比留間です。 今回は、先日リリースした「アーバンリサーチ」のキャンペーンで 「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。 簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。 内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、 というとてもシンプルなゲーム型キャンペーンサイトになっています。 さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。 さて、今回この記事でご紹介したいのは、 このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を 簡単に説明し
通知センターにアプリや設定、URLやメール電話へのショートカットを置けるアプリが便利すぎる！[App Switcher解説] - isuta（イスタ） -私の“好き”にウソをつかない。-
HOME有料アプリ通知センターにアプリや設定、URLやメール電話へのショートカットを置けるアプリが便利すぎる！[App Switcher解説]
![通知センターにアプリや設定、URLやメール電話へのショートカットを置けるアプリが便利すぎる！[App Switcher解説] - isuta（イスタ） -私の“好き”にウソをつかない。-](https://cdn-ak-scissors.b.st-hatena.com/image/square/22696c376ebc03dfa3f03aa793331209f8735900/height=288;version=1;width=512/https%3A%2F%2Fisuta.jp%2Fcategory%2Fiphone%2Fwp-content%2Ftmp%2Fvol%2F2011%2F12%2Fswitcher1.png)
JavaScriptをブラウザ上で開発、その場で実行できるJSBinがオープンソースで公開されてたのでインストールしてみた
基本的にはjsfiddleメインなんですが、 依存するのが基本的に不安なのでロー カル環境で同じような環境を作りたか ったのですが、同様のサービスのJSBin がOSSで公開されてましたので試しに インストールしてみました。 まだちゃんと使うかは分かりませんけど、折角入れてみたので手順をメモ書き。 以前、ブラウザ上でjsを開発、URLを発行するjsfiddleをご紹介しました。jsDoitみたいなやつですね。 で、この2つ以外にも以前からJSBinっていう同じようなWebサービスがあるんですが、このJSBinがオープンソース（MIT）で公開されています。 見た目も自分用に使いやすく変えられるし、開発もスニペットの保管も出来るかなと思って、試しにローカル環境に入れてみました。 左側にJavaScriptコードやHTML、CSSを書けば、右側に結果として反映される、みたいなやつです。 JSBi
Google Web Fontsにあるお気に入りのフォント5つ - Weblog - hail2u.net
Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで……というわけではないですけど、なんかの参考にでもなればと僕のお気に入りを5つだけ簡単な説明付きで紹介してみます。 Demo: Five Favorite Google Web Fonts Amaranth Amaranthはゆるやかにカーブのかかったグリフが特徴です。比較的小さなサイズからその特徴がはっきりと出るので、ロゴ以外にもナビゲーションなどでも使えると思います。斜体ではそのゆるやかなカーブがセクシーに強調され、また違った味わいがあります。 Arvo Google Web Fontsにはあまりスラブ・セリフがないですが、Arvoは唯一まともに使えそうなそれです。評価の高
Wordpressでちょっと手の込んだブログが出来るまでのチュートリアル＆お役立ちリンク集 – コトリブログ
2週間ぐらいWordpressいじくり倒して、やっとのこのコトリブログを完成させることが出来ました。ぱちぱち。これからみなさん、よろしくお願いします−！ と言うわけで今日はいつもとは変わって、Wordpressをカスタマイズしてこのブログを出来るまでの実際の流れをチュートリアルのような感じに簡単に(？)まとめてみました。 僕がWordpressを構築した時の工程はこんな感じです。 サーバーにWordpressをインストール＆ドメイン取得 ピンとくるテーマをなんとか探し出す テーマのコードを読んで要らないところを削って 自分の思い描くデザインとか動きになるようにコードを書き足す プラグインを追加しながら調整する 作ったWordpressをFacebook OGPに対応させる TwitterやFacebookと連携させる 最後の仕上げ ・吐かれるHTMLをちょっと綺麗に(<head>とか)し
[CSS]ol要素に頼らないナンバリングするスタイルシートのテクニック
掲載するコンテンツにナンバリングをつける際にまず思いつくのは、ol要素を使うことでしょう。確かに、ol要素はナンバリングするのに非常に合理的です。 ここでは、そのol要素を頼らずにナンバリングするテクニックを紹介します。 Numbering In Style [ad#ad-2] 下記は各ポイントを意訳したものです。 ol要素を使用しないでナンバリングをするコンテンツは、例えばデモにあるようなFAQのリストです。 このFAQのリストは、dl要素で実装されています。 dl要素でナンバリングしたデモページ ※実装は、下記で紹介。 ナンバリングの実装には擬似要素と「counter-increment」を利用しており、アイデアの元となったのは「Styling ordered list numbers」の記事です。 Styling ordered list numbers デモページ このデモでは入れ
リリースされたばかりのjQuery 1.7.1に対応したチートシート
先月、リリースされたばかりのjQuery 1.7.1に対応したチートシートを紹介します。 即ダウンロード、即保存ものですね。 jQuery 1.7 Visual Cheat Sheet [ad#ad-2] jQuery 1.7.1は1.7のバグフィックス版で、リリース情報は下記をご覧ください。 jQuery 1.7.1 Released jQuery 1.7 Released jQuery 1.7のAPIで大きく変わったのは、.on(), .off()が追加されたことです。これは既存の.bind(), .unbind()に代わるもので、他にも.on()は.delegate(), .live()、.off()は.undelegate(), .die()に代わります。 これらは1.7.1でも利用できますが、これからは.on(), .off()を使用することが推奨されています。 チートシートでは
Croppyの作り方
Web サイト構築のためのトータルデザイン誌 Web Designing 2011年 12月号 に、jQuery × WordPress 活用事例ということで Croppy の作り方を掲載させて頂きました。 記事は2ページしかない関係でほんの一部の情報とソースしか掲載出来なかったため、こちらの記事で色々と補足させて頂きたいと思います。 ちなみに、この記事は WordPress Advent Calendar 2011 という「12月1日から12月25日のクリスマスまで一人一つずつ自分のブログにWordPressについて何かしら書いてくイベント」で昨日の @horike37 さんに続き、6番バッターとして執筆しています。 目次 なぜ WordPress で作ったのか 記事の追加はどうやっているのか 記事の削除はどうやっているのか Web Designing記事の補足 色彩分析などの情報はどう
ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ:phpspot開発日誌
Path menu in pure CSS3 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ path.comのメニューというのは次のようなもので、クリックするとアニメーションしながらビローンと開くようなものです これをCSS3で実装したデモが公開されています。 アニメーションもしてJavaScriptも使っている気がしますがピュアCSS３とのこと。 気持よく動きます スマホサイトに導入してみるといいかもしれませんね。 関連エントリ フリーのCSSメニューテンプレートとチュートリアル集 リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 CSSのナビゲーションメニューサンプル５５
初心者でも分かる一般的な WordPress をインストールする方法
WordPress のテーマをカスタマイズするにはローカルにインストールした WordPress を使うのが良いです。最近は便利なソフトがあるようですが、ソフトを学ぶより一般的なインストール方法を知りたいという人向けに書いていきます。 開発環境を構築する 開発環境にインストールする人は開発環境を用意します。まだ作ってない人は以下の環境を構築してください。リモートサーバーにインストールする人は要件だけ確認して読み飛ばしてください。 PHP バージョン 5.2.4 以上 MySQL バージョン 5.0 以上 ※WordPress 3.2.1 時の要件です。 構築の仕方が分からない人は以下の記事を参考にしてください。 Windows / Mac / Linux で PHP + MySQL の開発環境を構築する WordPress のファイルをダウンロードする 今回は http://example
お役立ち！PC/スマートフォン/ガラケー/IE6のみとしてWebサイトを検証するブックマークレット·mecalint MOONGIFT
mecalintはPC/スマートフォン/ガラケー/IEのみという視点でWebサイトを検証してくれるブックマークレットです。 mecalintはPC/スマートフォン/ガラケー/IE6のみとして任意のWebサイトを評価してくれるブックマークレットです。W3Cの検証とはまた異なる基準でWebサイトを検証してくれます。 ブックマークレットを実行しました。ページ下にツールバーが表示されます。 PC向けで評価したところです。IEのPNG、classの小文字キャメルケースで大きな減点が… スマートフォン向けとして評価したところです。若干低いといった程度です。 PC向けサイトを携帯電話向けとして評価するとやはりすごい点数が。 mecalintでは全部で20項目のテストを行ってくれます。ついやってしまいがちなミスを防ぐのに役立ちそうです。特にスマートフォンとガラケーの違いをまとめてチェックしてくれるのが便利
MacのChromeとSafariで「引き下げてリロード」を実現する拡張機能 - RyoAnna
Tweet via OS X Daily iPhoneのTwitterアプリなどでよくある、引き下げてリロードする動作。それをMacのGoogle ChromeとSafariで実現する拡張機能が登場した。 Extension for Chrome Extension for Safari 対応しているOSは10.7以降のLion。上のリンク先から拡張機能をインストールして、ブラウザを再起動すると有効になり、二本指で画面を引き下げるとリロードされる。シュボッという音も再現してくれるといいのだが。 ちなみに、Chromeはリンク先から「View Raw」をクリックすれば拡張機能がインストールされる。Safariは方法が分からなかったので、インストールに成功した方がいたら教えて欲しい。 ▶ この記事をGoogle+でシェア 関連記事 Google Readerの外観をMac OS X Lion風
素敵な配色を見つける・作る、カラースキーム設計やグラデーション・パターン作成に役立つ -ColRD
さまざまなカラーパレット、グラデーション、パターンを見るだけでなく、作成して共有することもできるColRDを紹介します。 ColRD [ad#ad-2] カラーを見つける カラーを作る カラー作成に役立つツール カラーを見つける まずは、ColRDの「Discover（見つける）」から紹介します。 ColRDでは、カラーに関する4つのカテゴリが用意されています。 Discover Color Discover Palette Discover Gradient Discover Pattern
たった一行のJavaScriptでガラケー向けWebサイトをスマートフォンに最適化·sparrow.js MOONGIFT
sparrow.jsは既存のガラケー向けWebサイトをスマートフォン向けサイトに変換してくれるJavaScriptです。 sparrow.jsを使うと既存のガラケー向けWebサイトをスマートフォン向けサイトに変身させてくれます。それもたった一行のJavaScriptタグを追加するのみです。 ガラケー向けサイトをiPhoneで表示したところです。いわゆる普通の携帯電話向けサイトとしての表示です。テンプレートは「携帯専用無料テンプレート配布中 ： フリースタイル 携帯無料レンタルサーバー」よりお借りしました。 sparrow.jsを適用した表示です。デフォルトではフォントサイズや画像の表示が最適化されるのみとなっています。 sparrow.jsではその他、Viewportの自動挿入、スマートフォン向けのCSS定義、半角仮名を全角に変換、ページ内リンクをアニメーションに、絵文字を絵文字画像に変換
jsdo.it企画 CSSで必殺技に参加しています。
ども。僕です。タイトル通り「jsdo.it企画 CSSで必殺技に参加しています。」 URLは http://jsdo.it/panicdragon/23cU（第2弾） http://jsdo.it/panicdragon/zh69（第1弾） panicdragon というネームに参加させていただいております。 jsdo.it http://jsdo.it/ そもそもなによ そもそもjsdo.itってなんだよ？それって言う方の為、説明させて頂きます。 jsdo.itとは株式会社カヤックさんが制作されたもので、WEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティになっています。 web上で編集し、保存でき作品を公開できます。 ソースを共有しあって、分からないところなども相談にのってくれたりします。 そのjsdo.i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Good night, Posterous
はてなまとめ（仮）
Victor Coulon : Mon blog High Tech
ごりゅご.com
adakoda.com
HugeDomains.com