CSS3のtransformを使ったフォントの変形
CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文に使うのは無理があるが、見出しなどには良さそう。特に@font-faceで気軽に変更できない(してもあまり効果的ではない)日本語の見出しには面白い試みなんじゃないかと思ったが、一番綺麗にしたいIE8で残念なので微妙。 Verdana Narrow? Demo: Verdana Narrow 単純に細くしたいブロックでtransform: scaleX(num);を使えば良い。 .narrow { -webkit-transform: scaleX(0.8); -moz-transform: sca
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)と
YUI 3: CSS Resetの問題
ブラウザごとのデフォルト・スタイルシートの違いを吸収するためのスタイルシートをメンテするのが面倒になったので、YUI 3のCSS Resetを使うことにした。が、このサイトではちょっとした問題が起こった。少し前にTwitterでつぶやいたりしたhtml要素にbackground-colorやbackground-imageを指定した場合、body要素の背景が描画エリアいっぱいにならなくなるというCSSの仕様絡みの問題。 この仕様によってbody要素に指定していたヘッダの背景画像がずれてしまった(ずれるサンプル)。ずれる理由は上記仕様によりbody要素の上下でmarginの相殺が起こり、marginの相殺が起こった部分は透明(親であるhtml要素)が透けて見える)ようになり、背景画像の開始点はそれに続くbody要素のコンテント・エリアになるから。 html { color: #000; ba
リデザインとborder-radiusとtext-shadow
でっかいロゴに飽きてきてヘッダをコンパクトにしたくなったので、少し前からサイトのスタイルを色々いじっていた。ナビと検索フォームとロゴを一段に並べるのはかなり難しかったので、ロゴをアイコンにして無理やり詰め込むことにした。border-radiusまくり。緑の流行はまだまだ続くらしいので色はこのままで。次はオレンジだな(適当)。 ヘッダ ロゴ・アイコンとナビをfloat: left;、検索フォームとTwitterとフィードのアイコンをfloat: right;。それぞれにborder-radiusを使って少し丸みをつけて、丸いロゴ・アイコンと並べてもあまり違和感が無いようにした。アクティブなナビはtext-shadowでエンボスっぽくしてみたんだけど、背景色の明るさがアレでうまくへこんでいるように見えない……。 最初、display: table-cell;で検索フォームの横幅をうまいこと可
pngcrushでPNGファイルから不必要と思われるメタデータを削除
PNGファイルにはメタデータとして様々な情報を埋め込むことができる。その様々な情報のうちガンマとカラー・プロファイルの情報はブラウザでの表示に影響を与えることがあるので、そこそこ使いやすいpngcrushで削除するのが無難。それら影響を与えることがあるメタデータを削除してやれば、WindowsのPhotoshopで作ったPNGファイルがMac(Leopard)のSafariで色がずれるなどといった現象を回避することができる。 pngcrushのWindows向けバイナリはダウンロード・ページの下の方にあるpngcrush-executablesの方からダウンロードできる(2009/07/03時点ではpngcrush-1.6.15-win32.zipが最新)。pngcrush-1.6.19.zipとかはソースのみなので注意。関係ないけどsourceforge.netは見づらくなった気がする…
hail2u.net - Weblog - Firefoxで素早くdel.icio.usへ投稿
Firefoxでは各ブックマークにKeywordを割り当てることができ、割り当てたKeywordをロケーション・バーで入力してEnterまたはGoボタンを押すことによってそのブックマークを開くことが出来る。このSmart Keywordsと呼ばれている機能はロケーション・バーから検索エンジンを利用した検索を行う場合などに利用する場合が多いが、Bookmarkletなどを含めどんなブックマークにも割り当てることが出来るので、del.icio.usへ投稿するBookmarkletにKeywordとしてdを指定すると、Alt+D D Enterという連続したキー・タイプでdel.icio.usに投稿できるようになる(Alt+Dはロケーション・バーにフォーカスを当てるショートカット)。知人が見ている時にこれを使ってdel.icio.usにササッと投稿するところを見せつけると「デキる男(女)」を演出
hail2u.net - Weblog - CSSで指定するフォント
CSSで指定するフォントは、訪問者のマシンにその指定したフォントがインストール済みでないと(大抵の場合は)反映されないため、手に入れやすいまたは多くのOSでインストールされているフォントを指定することが多い。手に入れやすいフォントとして代表的なものはCore fonts for the WebというMicrosoftが提供しているフォント群で、具体的にはArialやTrebuchet MS、Verdana、Georgia、Times New Roman、Courier Newなど。あえてLucida GrandeやTahomaを使うというのなら違和感の少ない代替になりそうなフォントを指定しておいて挙げると良いかもねとかいう話。 Core fonts for the Webに含まれる多くのフォントはWindows 98以降では予めインストールされており、Mac OSでもInternet Ex
Linksをサムネイル化した
Linksをサムネイル化してみた。各サムネイルはSimpleAPIのウェブサイトサムネイル作成API頼みなのでNOW PRINTINGばかりだったりするけど、それはそのうち解消されるはず。無駄にポップアップとかさせてみたり。 Simple APIのウェブサイトサムネイル作成APIが返す画像は決まったサイズなので、ポップアップはかなり前に考えたposition: relative;を利用したテクニックでやった。CSSのコードは、 div#contents div.story ul.thumbnail { margin: 1em 0; width: 100%; line-height: 1; list-style-type: none; } div#contents div.story ul.thumbnail li { margin: 0 1em 1em 0; float: left; wi
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
hail2u.net - Weblog - よく使うライセンス・フリーのフォント
OSより高かったりする値段のフォントを気軽に使えるわけがないので、ライセンス・フリーのフォントは重要。Webページでロゴやら何やらで使う分にはまるで問題ないクオリティなものを見つけては保存、見つけては保存てな感じ。その中で好んでよく使うものを5つ挙げてみる。 Lacuna Regular Italicの方がスタイリッシュで使いやすそうではあるけど、ところどころに独特の味があるRegularの方が好き。 MiloTF-Text 小さいサイズでもかなり使える。 Lexia Readable Comic Sans MSの系統だが、ふざけた感じが少ないため場所を選ばずに使える。 Fontin-Regular セリフのヒゲの部分のあしらい方がきれい。 Devroye スクリプト系ではあるけれどもしっかりした感じで使いやすい。 IdentifontのFree fontsとかライセンス・フリーのフォント
hail2u.net - Weblog - Amazon.co.jpの新しいアソシエイト・ツール: インスタントストア
Amazon.co.jpのアソシエイト・セントラルのトップ・ページに、なにやら「試してみよう！ インスタントストア(TM) ベータ版が登場！」という煽りが。どうやら簡単にオススメ商品のページを作成できるみたい。ストアを作ってみましょうといううたい文句になってるけど、どっちかっつーとリストマニアがトップ・ページなAmazon.co.jpのコピーサイトの作成みたいな。 インスタントストア(TM) ベータ版 Amazon.co.jpの商品で、あなたのショッピングストアを作ってみませんか？ インスタントストア(TM)なら、数分程度の簡単な設定で、あなただけのストアを作成できます。インスタントストア(TM)を使って、Amazon.co.jpの豊富なセレクションから、好みの商品やカテゴリーだけを集めたストアを作ってみましょう！ というわけで作成してみた。(ものすごく偏った)マンガで！誰も寝てはならぬは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
