http://drewish.com/tools/vertical-rhythm/ という作成用のツールを見てて思い出したんだけど大きい文字サイズのテキスト（見出しとか）が複数行になったときに妙にスカスカしてたり詰まってたりするの気にならないのかなあ。 大きなサイズの文字は基本の2…

仕様を眺めながらこういうの妄想している。 article { -ms-text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis ideograph-space; text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric punctuation;…

たとえば @supports (font-family: "Hiragino Kaku Gothic ProN") { /* Mac/iOS 用のフォントファミリ指定 */ } とかできたりしないかなと思ったけど無理っぽいです。@hail2u_さんが作ったサンプル。 http://hail2u.net/pub/test/466.html

古い IE とかでアクセスされたらブラウザのアップグレードや乗り換えを薦めるあれ、いま使うなら候補一覧から Safari 消した方がいいと思うのですがどうでしょう。 古い IE で来るユーザってことは Windows 使ってるでしょうし。 ついでに Mac OS も薦めるな…

英数と日本語を違うフォントで表示したい場合。Edit -> Preferences -> Fonts Font にメインのフォント (Consolas とか) Backup Fonts に日本語フォントこれでメインのフォントにない文字はバックアップフォントで表示される。 優先度は番号の若い順。 メイ…

ロゴTRAJAN (少し手を加えて使っているらしい) http://www.myfonts.com/fonts/linotype/trajan/ http://store1.adobe.com/cfusion/store/html/index.cfm?store=OLS-JP&event=displayFontPackage&code=1952Photoshop とかアドビのソフト入れてる人はレギュラ…

12月16日、Windows 版 TextMate を目指して開発されていた(らしい)テキストエディタ Intype のバージョンが 1.0 になり、正式版としてリリースされた。Intype — The text editor we've all been waiting for元々言われていたように正式版はシェアウェアとな…

買ったので確認してみた。http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html ここで確認。画面サイズは 1920x1080 (440ppi) の約5インチ。 ブラウザは Chrome 18.0.1025.166 (Webkit/535.19) で試した。 device-width: 36…

CSS グラデーションの 内にある transparent キーワードは、通常の transparent キーワードとは異なる。 通常は rgba(0, 0, 0, 0) のショートハンドであるが、プリマルチプライド RGBA 色空間においては当てはまらない。 http://www.w3.org/TR/css3-images/#…

かなり前に Twitter で書いた話。今は視覚障害者向けのブラウザやスクリーンリーダがほとんどだと思うけど、ウェブサイトを音声で聞く状況が増えるかもしれないなーと思う。Siri を代表とした音声アシスタントがカーナビの替わりをするとかそういう話を見て…

順不同リストがあって、それをカンマ区切りで並べたい。 abc, def, ghi, jkl, mno みたいな感じ。 li { display: inline; } li::after { content: ", " } li:last-child::after { content: ""; } HTML を変更することができない状況だったので。

単にページ上で大きなメッセージ性を持つ画像に付ける名前ではないかと思うのですがどうでしょう。language history - Twitter Bootstrap: What is the meaning of "Hero"? - Stack Overflow参考 site: www.apple.com hero.png - Google 検索 site: www.appl…

それってどのバージョンの Internet Explorer ですか？

Webkit 系の主要ブラウザがサポートする CSS グラデーションの構文の話です。-webkit-gradient(linear[radial], ...) Google Chrome 4.0〜9.0 Safari 4.0〜5.0 iOS Safari 4.0.4〜5.0 (iOS 3.2〜4.2.1) Android 2.1〜3.0 -webkit-linear[radial]-gradient(..…

External Tool の設定方法はメインのブログで書いた WebStorm / PhpStorm から Sass をコンパイルする を見てもらうとして、今回はその出力先を設定する方法。 上記リンク先のように "$FilePath$":"$FileDir$\$FileNameWithoutExtension$.css" でやると、SCS…

元記事 http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ 紹介記事 http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html元記事の最後にこういう文があります。 Pe…

以前スラドがリンク先のドメインを表示してるのを見て便利かもなーと思った。 けど自分で使う場合に地の文に出すのはちょっと……となって、ならツールチップ使えばいいんじゃねと考えて作ってみた。http://unformedbuilding.com/demo/test/20120327/さすがに…

調べた日：2012年3月18日まあ@なんちゃらってツイートするときは代わりに at-foo みたいに書くか、@ の直後にスペースとかゼロ幅文字(​ / ‍ / ‌)とか入れるといいんじゃないですかね。@charset https://twitter.com/#!/charset 活動中。@medi…

PC でファイルサイズを変えたり、画像解像度を変更したりして色々やってみたけど、どれも上手くアップロードできた。 自分の結論としては PS3 で撮ったスクリーンショットはゲームでもブラウザのスクリーンショットでもアップロード不可というもの。500kb の…

昨日(02/08)、PlayStation 3 のファームウェアのアップデートがあって、ブラウザが新しくなった。 PS3、ファームウェアv4.10からWebKitへ。 - あまたの何かしら。そのブラウザで、たとえば PS3 で撮ったスクリーンショット画像をアップロードしようとしたが…

ちょっと前に書き方が変わったので表示テストしてみた。http://unformedbuilding.com/demo/test/20120123-linear-gradient/to ありキーワードの方は Opera 11.60 / Aurora 11.0a2 で表示されたのを確認。古い書き方でも大丈夫。 webkit は駄目っぽい。Chrome…

あとで自分のブログでも書きたいのでまとめておく。 とりあえずこのあたり見とけば大丈夫っぽい。WD (仕様) http://www.w3.org/TR/css3-3d-transforms/ED (仕様) http://dev.w3.org/csswg/css3-3d-transforms/MDN (仕様) https://developer.mozilla.org/en/C…

HTML と CSS は HTML5 Boilerplate をベースにした。 デザインに画像は使わなかった。 小さい画面向けのスタイルを書いて、@media で大きい画面向けのスタイルを追加していくのは予想以上に大変。 投稿のサムネイル画像は横幅が 300px より小さくなるように…

jQuery Lifestream http://christianv.github.com/jquery-lifestream/見てて面白いなーと思ったので、はてなブックマークも表示してみた。 他のサービスの取得方法がいっぱい書かれてるのでほとんどコピペですけどね……。 (function($) { $.fn.lifestream.fee…

ウィンドウが非アクティブになったりしたときに自動保存されるのを停止したい。 そういう場合の設定。Setteings -> IDE Setteings -> General -> Synchronization の中にある Save files on frame deactivation のチェックを外す。 ちなみにそのすぐ下の Sav…

なんか今さらですけど、気になったので試してみた。 var id = $('#test'); より var test = document.getElementById('test'); id = $(test); のほうが速い(みたい)。試したのはこれ。 http://jsperf.com/jquery-id

使いやすいと思った順に並べてます。 Ceaser - CSS Easing Animation Tool - Matthew Lein http://matthewlein.com/ceaser/ cubic-bezier.com http://cubic-bezier.com/ Visualize and manipulate CSS transition functions http://cssglue.com/cubic CSS cu…

http://msdn.microsoft.com/en-gb/ie/hh272902.aspx#_CSSTextShadowIE10 の text-shadow には spread distance の値があるみたいです。 ということは h1 { font: 18px bold; color: white; text-shadow: 0 0 0 2px black; } で擬似縁取りできたり h1 { font:…

今更な話題。 <ul> <li>List Item</li> <li>List Item</li> <li><del>List Item</del></li> <li><ins>List Item</ins></li> </ul> じゃなくて <ul> <li>List Item</li> <li>List Item</li> <del><li>List Item</li></del> <ins><li>List Item</li></ins> </ul> こうしたいなあと思いましたです。

WordPress のプラグイン WordPress Related Post for Japanese はとても便利なんですが、カスタム投稿タイプを使っている場合、そっちも対象としてしまうんですね。画像だけのカスタム投稿と普通の記事が混ざった状態で関連投稿が出たりするのはアレな気がす…