CSSの簡略プロパティー - Weblog - Hail2u.net
CSSの標準仕様では一部のプロパティーに簡略(ショートハンド)プロパティーが用意されている。marginやbackground、fontプロパティーなどがそれ。うまく使うとCSSをかなり短くできるので、積極的に使いたいけど、なかなかの複雑さでそうもいかない。かといって機械的に処理するのも、CSSは人が簡単に書けることを想定して仕様が作られている節がある(根拠はない)のでまた難しい。 先日知ったCSS Shorthand Generatorの内部で使われているshrthndパッケージはまさに機械的に処理するためのもの。でも予想通り、全然ちゃんと機能するものではなかった。 例えばshrthndパッケージでは複数のfont-*プロパティーをまとめることができることになっている。 .test { font-family: serif; font-size: 1.5em; } このように書くと、以下
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
入力と出力
ウェブでの活動は入力と出力をどう表現するかみたいな感じに集約されることが多い。ウェブログやTwitter、GitHub、Forrstは出力の場、リンクログやDelicious、Readability、Pinterestは入力の場。FacebookやTumblrは両者を混ぜたカオスな場なのかな。ウェブログの記事(出力)をDelicious (入力の場)へそのまま渡すとか、Readabilityで読んだもの(入力)をそのままTwitter (出力の場)に流すとかちょっとやってみたけど違和感(と罪悪感)しか湧かなかったのでやめた。 僕は整理されている状態が好きで、「これはここ」みたいにぴったりと収まる感じのウェブサービスを探すことが多い。なので機能やコミュニティーなんかよりも特化型のそれにしか使えないものを好む傾向がある。別のとこでもちょっと書いちゃったけど、そういう特化型ウェブサービスを組み合
Markdownなど
Markdownは、Markdownを知らない人が適当に書いたテキストでもなんとなく良い感じにHTMLにできちゃうみたいなものだったように思う。HTMLを簡単に書くための記法ではなくて、メールとかで使われてきたプレーンテキストなりの記述方法を良い感じにHTML化してくれるツール。巷に溢れるMarkdownモドキは、HTMLを簡単に書くという目的を持って拡張してしまっているので、その記法がちょっとなーという気がしてあんまり使いたくなかったりする。 有名所だとGitHub Flavored Markdownのフェンス型コード・ブロック記法。```...```とか覚えやすいし書けるけど、「えーこれはなんなんだろう……」という感じしかしない。jQueryで書いていると思いきや、突然のinnerHTML的な気持ち悪さがある。そこだけ違和感が満載というような。 プレビューとかも要らない気がしてしょうが
Tumblrテーマ: Optica
最近よく見るTumblrのテーマが気になったので、そのソースからテーマ名を探したところOpticaというテーマらしい。そのプレビューを見るとすぐにわかるが、とてもクリーンで、ブログとしての必要最低限の機能がバランス良くキレイにまとめられてるなという印象。すごく良い。 プレビューはシングル・カラムのものだけど、カスタマイズでLayoutをGridにすると、Pinterestのような敷き詰め型のマルチ・カラムのレイアウトにもできる。こっちもキレイ。他はヘッダーのスライド効果のオン・オフくらいしか大きなカスタマイズはできないけど、そのままですごく良いんじゃないかと思う。 画像メインのにも、文章メインのにも、引用メインのにも勧められる。
プレースホルダーがラベルで、コントラストが低く、余白がない入力フォーム
プレースホルダーをラベルにしたフォームや、コントラストが低いフォーム、余白がなかったりするフォームはそれぞれよく見る。特にプレースホルダーをラベル代わりにするのは、すっきりするので多用されている印象。使いたい気持ちはわからなくもない。けどこの3つが組み合わされると、なかなかひどい感じになるという実例をGoogleで見てしまった。 Internet Explorer 10ではこのような感じになる。ページの読み込み直後にメールアドレスを入力するフォームにフォーカスが当たり、プレースホルダーの文字列がその時点で消える。この状態だと、すぐ下のパスワードというプレースホルダーが、あたかもその上の入力ボックスらしきものに対するラベルのように見えないだろうか？ 実際に「パスワードを入れたのにログイン出来ない！」などと言う人はいた。 ラベルのように見えてしまう大きな原因は、その低コントラストでフラットな入
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
アニメーションGIFの再生にGPUは使われるのか
動画ファイルの再生は今時のデバイスだとGPU的な何かにより再生支援が行われ、CPUへの負担は少なくなる。「じゃあそれアニメーションGIFにも効いたりするの？」と某所でピンク色の髪の毛の女の子が襲ってくるアニメーションGIFを見た時に疑問を持ったので、雑に調べた。 雑な検証にはRRRRRRRROLL_GIFのArchiveページを利用した。 Chrome 29: ひたすらCPUを消費し、まったくGPUを使わない Firefox 23: CPUとGPUをモリモリ使う Internet Explorer 10: 数個のアニメーションGIFだとほとんどCPUを消費しない IE10ではGPU使って再生しているような挙動だが、20程表示させるとCPUの負荷がどんどん上がる。負荷を減らす工夫がありそうではあるが過信はできなさそう。いずれにせよアニメーションGIFはモリモリCPUを使う可能性が高く、環境に
opacityとz-index
opacityプロパティーで1より下が指定された要素はその重なり順が変化するという仕様があるようだ。擬似要素を複数組み合わせて紙をずらして重ねたようにロゴをちょっと改悪した時に初めて知った。いつものChromeのバグかと思った……。 仕様ではpositionプロパティーがstatic以外の要素でopacityプロパティーを1より下にするとz-indexプロパティーが0であるとみなされるようになっている。そのためその要素でz-indexプロパティーを-1にして背面に移動するようにしたり、100等で意識的に手前に持ってきたりするようにしている場合、その重なり順が壊れてしまう。 と、こう書くと結構単純な感じなんだけど、実際には0とみなされた上で新たな重なり順が作られるので、いくつかの要素をまとめて半透明にして重ねまくってたりすると、どういう重なり順になるかとてもイメージしにくい。ので余程の理由が
List Colors #3
かなり昔に書いたページ内で使われている色をリストアップするブックマークレットをquerySelectorAll()とgetComputedStyle()を使って書き直しました。Chromeでも動くように適当に手直しして使ってたんですが、hsla?()等に対応したとこなどツギハギだらけで色々アレだったので……。表示の仕方も右肩にちょっと出るとかではなくて、起動したページ全体を差し替えるように変わっています。Google Chrome 15.0.874.102 mではちゃんと動いているようです。 Bookmarklet: List Colors 例えばこのサイトで起動してみると、「わぁ色少ないかと思ったら意外に使って……ない」という普通の結果が表示されます。 Bookmarkletへの変換にはClousure Compiler Toolを使いました。rgba()の時に透けて見える画像はData
Hashbang(#!)なURLの恐怖
諸方面からお叱りの言葉しかいただけない#!なURLは様々な問題をはらんでいますが、来るべき未来(もうすぐですよ！)におけるメンテナンス性という問題についてAdactioで取り上げられていました。#!の表面的な凶悪さに思考停止していて、こういった本質的な問題についてはまったく考えていなかった気がします。 その問題というのは、#!なURLからHistory APIなどを利用してクリーンなURLに乗り換えよう(戻そう)としても、古い#!なURLを有効なままにするためにはサーバー側の何か(単純なリダイレクトやmod_rewriteなど)ではどうしようもないので、クライアント側での(JavaScriptを利用した)リダイレクトを提供する機能を提供し続けなければならないというメンテナンス性の悪さです。 この#!なURLのメンテナンス性の悪さという問題は、URLの#以降はクライアント側の扱いなので、クラ
さようなら、LastPass
長いこと使ってきたLastPassをやめて、ローカルのパスワード管理に戻した。きっかけはパスワード流出したかも騒動だけど、それが利用をやめた理由ではなく、すぐに移住できるように保存していたログイン情報をエクスポートしようとしたところ、正常にエクスポートできなかったから。 パスワード流出したかも騒動を耳にした後、まずはパスワードのエクスポートを行い、いざとなったら移動できるようにしようと準備をした。LastPass暗号化ファイルでのエクスポートは問題なかったものの、CSV形式でのエクスポートがかなりひどく、いくつかの保存したサイトでユーザーネームとパスワードが空になってしまった。もちろん環境依存なのかもしれないし、僕の保存しているデータがおかしくなっているだけなのかもしれないが、僕の環境では起こってしまったので、ちょっと信頼しづらい。ウェブからのエクスポートとLastPass Pocketの
Twitterのテキストのリンク張り
Twitterではツイートの表示にいくつか規制がある。例えばTwitterの鳥さんを表示しなければならないとかユーザーのプロフィールへのリンクでは#!/のアレはダメだったりとかかなり細かい。ということでユーザー名やURL、ハッシュタグにまとめてリンクを張るJavaScriptをjQueryで普通に書いてみた。 まず正規表現の定義。 var url = "https?://\\S+"; var mention = "@[0-9a-zA-Z_]{1,15}"; var hashtag = "#[0-9a-zA-Z]+"; var re_url = new RegExp("^" + url); var re_mention = new RegExp("^" + mention); var re_hashtag = new RegExp("^" + hashtag); var re_token =
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
物事をシンプルにするます
ヘッダが主張しすぎな感じとかがちょっと飽きてきたので、ちょっとだけリニューアルした。ロゴとヘッダ変えただけ。緑ももうやめようかな……とは考えたが面倒になったのでそのままで……。Ctrl+F5！ ロゴ 手持ちのフォントで"h"だけを打ち出して良さそうなのを選んだだけという。使ったフォントはJandlesで、MyFontsから無料で手に入る。ベベルるかグラデるか迷った末グラデった。もうアルファチャンネル付きのPNGファイルでいいよね？ いいよね！ ロゴの配置はちょっと悩んだ。マージンに負の値を入れてfloatさせればいけそうな気がしたが、それではコンテンツとかぶさるように配置するのは無理な感じだった。また、コンテンツの左右のマージンが一定ではないので、absoluteでも正確に配置できない。とりあえず親要素をrelative、ロゴ部分をabsoluteにしてやって、親要素を基準にしてロゴを絶対
それYQLで出来るよ！
トップページに表示されているRecent Weblog Entriesは、jsというflavourを作ってやっていたのだけど、YQLでフィードからJSONPにコンバートしてゴニョゴニョするものに変えた。フィードはFeedBurnerにあるのでサードパーティのウェブサービスとクライアントサイドのスクリプトで完結するのが良いところでもあり悪いところでもあり。 フィードのJSONPへのコンバートはYQLに専用の機能があるので、 select * from rss url='http://feeds2.feedburner.com/hail2u/blog' という式でOK。JSONPで出力して貰えば、コールバック関数に渡されるオブジェクトのquery.results以下にフィードのitem要素が配列でずらっと並ぶ。RSSモードを使うとchannel要素とかはどっか行ってしまうので、そっちも(が)欲
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
CSSのプロパティをソートするPerlスクリプト
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
Vimカラースキーム: h2u_black
Vimを使い始めるきっかけのひとつになったカラースキーム、ir_black。その行番号と本文の背景が一緒だったりするところとか、カーソル行の色があまり明度に差がないこととか微妙に気になったところに手を入れつつ、色を覚えやすい単純なものにしたh2u_blackを作った。実はir_blackのテイストのまま256色にしてやろうと思ったものの途中で投げ出したものの名残りだったりする。その割にはターミナル向けの色設定を書くのが面倒になってgVim向けのカラー設定しか書いてなかったりするとかいう……。 Download: h2u_colorscheme hi linkとか使ってないのには特に理由はない。hi linkのが速いとかあるのかなぁ。ir_blackにはRubyとかJava、HTML向けに色々設定が書かれていた(例えばHTMLの閉じタグだけ色を変えるとか)のだけど、ちゃんと理解してないので削
Aex: Amazon.co.jpの全商品から検索するよ！
Amazon Product Advertising APIのItemSearchオペレーションのパラメータとしてSearchIndex=Allが日本でも利用できるようになったらしいので、とりあえずAexという名前でAmazon.co.jpの検索サイトを作ってみた。これでドロップダウンでカテゴリを選択とかいう腐ったUIから解放される。 SearchIndex=Allを指定すると全商品からKeywordsに指定した文字列で検索してくれる。SearchIndex=Blendedとはまったく違い、カテゴリごとに検索結果が分けられて返ってきたりはしない。色々検索してみたところ、Amazon.co.jpでの検索と同じ結果で、概ね期待通りの検索結果が返ってくるようだ(ItemSearchオペレーションのデフォルトではCondition=Newなので中古商品などが含まれないというような違いはあったりもす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
