以前はWhatFontでフォントを確認していたけど、最近ではブラウザの開発者ツールでレンダリングされているフォントを確認できる。けっこう有名だと思っていたけど、そうでもなかったのかなーと思って書いてみる。 WhatFont ChromeのExtensionがあるし、クロスブラウザなブックマークレットもある。IE9でもちゃんと動く。 WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu WhatFontについては、けっこう前だけどここに書いたので割愛。さらっと確認した感じでは、そんなに変わってないと思う。 Web Fontsの歴史と使い方（2）：好みのWeb Fontsが使えるツールを探そう - ＠IT Chrome 気になる文字を選択して、右クリックのメニューから「要素を検証」を選択する。もち
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
Web フォントは「Web サイトにフォントを埋め込む」ための技術です。 先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。 ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。 ４種類のフォーマット 一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
これはすごい。Web ブラウザのアドレスバーに以下を入力し Enter すると、 今表示されている内容を直接編集できる。Firefox 3.0.14 と IE8 で出来 ることを確認した。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集 追記(2009-10-04): 戻す方法はないものかなあ。‘false’ と ‘off’ では出来なかった。 追記(2009-10-17): 「戻す方法」というのは、「編集モードから閲覧モードに戻す方法」のこ とです。端折った書き方ですみませんでした。もう少し楽な方法が見つかっ たので、以下に追記します。 IE では、以下を入力し Enter
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
2009年04月29日 WEB開発者がSleipnirを絶対に使ってはいけない７つの理由 カテゴリ：WEBデザイン Sleipnirは使いやすい、すばらしい･･･などと絶賛するユーザがいますが、果たして本当にそうなのでしょうか、私はそれは有り得ないと断言します。 ◆読む前に WEB標準だの、コーディングだのAcidだの･･･訳がわからない方は、そのままSleipnirを使っていてOKです。 判りやすく言うと、SleipnirはアナログSafari、Firefoxなどは地デジぐらいの違いがあります。 という説明をしますので、開発者以外の方には『ふーん』程度に思っていてください。 では。 １：表示結果がWeb標準でない。 上の写真は、左から『Firefox、Safari、IE6、Sleipnir』をAcidという確認ツールで見比べた結果です。 Firefox、Safariについてはほぼ同じ
Mozilla Labsは30日、「Firefox」の外観を手軽にカスタマイズできる拡張機能「Personas for Firefox」の最新版v1.0を公開した。「Firefox」v3.0以降に対応するフリーソフトで、現在本拡張機能の公式サイトやライブラリサイト“Firefox Add-ons”からダウンロードできる。 「Personas for Firefox」は、「Firefox」のツールバー領域とステータスバーに背景画像を設定する簡易的なスキン機能を追加できる拡張機能。本拡張機能に対応するスキンは“ペルソナ”と呼ばれ、“テーマ”と異なり「Firefox」の再起動を必要とせず、ステータスバー上の本拡張機能のアイコンから手軽に「Firefox」を“衣替え”させられるのが特長。 今回の主な変更点は、“ペルソナ”の素材として、画像だけではなくWebページを利用可能になったこと。「Firef
柏木泰幸の個人ページです。 Sleipnir とか Grani とか PictBear とか作っていました。 今は の代表として Sleipnir/Grani を作っています。 カスタマイズに特化した Sleipnir 2.x (上級者向け) ダウンロード / ユーザーからの感想 カスタマイズに特化した Sleipnir 1.66 (上級者向け) ダウンロード / ユーザーからの感想 軽くて十分な機能を持つペイントソフト PictBear SE ダウンロード / ユーザーからの感想 他のフリーソフトたち... ← 夢を実現できるよう頑張ります!! みなさんも泥棒やクラッキングには注意しましょう。。。 事前の対策が重要です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く