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がアイコンの前景をつなげたスプライ
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
未整理のブックマークをブックマークツールバーに表示
最近はブックマークを適切なフォルダに整理することを放棄して、どんどん未整理のブックマークに放り込み、ロケーションバーから絞込みしやすいように適当に半角英数でタグ付けするだけな感じで生活している。これで大抵の場合は問題ないが、Fx3.5では未整理のブックマークには履歴とブックマークの管理のウィンドウからしかアクセスできない(よね？)ので、一覧したい時などにかなり不便。ブックマークツールバーにでも表示させられれば良いのになぁとちょっと調べてみたら結構簡単に出来たのでメモ。 未整理のブックマークはFirefox内では以下のようなで参照されているので、これをブックマークすれば良い。 place:folder=UNFILED_BOOKMARKS 具体的には下記スクリーンショットのようにしてブックマークを作成するだけ。いきなりブックマークツールバー上に作成すると、フォルダにならずクリックしても「pla
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)と
はてなブックマークのブックマークレットをlightbox化
はてなブックマークのデフォルトのブックマークレットはiframeでオーバーレイ表示されるが、サイズ的にも位置的にも見づらい気がするので、ユーザースタイルシートをいくつか書いてみた。最初はオーバーレイ表示ではない旧バージョンのブックマークレットを使い、そのページのスタイルシートを書き換えてみたのだけど、見やすいことは見やすいがイマイチな感じだった。そこでもっと単純にオーバーレイ表示のサイズと位置を変更するだけのものを書いたりしてみたが、これもイマイチ。最終的にlightboxっぽく表示してやれば良いんじゃないかと思い、試してみたらなかなか良さそうな感じだった。 投稿フォームはブラウザ・ウィンドウのど真ん中に表示される。調節するのが面倒だったのでサイズの変更はしていない。ユーザースタイルシートのコードは以下の通り。 .hatena-bookmark-bookmarklet-container
Firefox 3.6以降でＭＳ Ｐゴシックを無効にする
CSSの@font-faceではユーザーがインストールしていないフォントをウェブ上に用意してやりそれをダウンロードさせてページ上で利用することを主眼としているが、ローカルのフォントを置換、つまりＭＳ Ｐゴシックをメイリオに置換するなどということもできる。Firefoxでは3.6から可能になった(Beta版でももちろん可能)。ユーザー・スタイルシートでの利用が中心になると思う。 ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。 @font-face { font-family: "ＭＳ Ｐゴシック"; src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック"); } @font-face { font-family: "MS PGothic"; src:
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
Bookmarklet: List Colors #2
出力する表を色を背景にしたシンプルな表になるようにした。文字色は明度(ブライトネス)をチェックして明るい色なら黒、暗い色なら白を設定するようにしたので、文字が読めないって事はないと思う。まぁ満足のいくものが出来たのでこれで終わり。 Bookmarklet: List Colors ちょっとすっきりする感じ。 明度差のチェックは、Techniques For Accessibility Evaluation And Repair ToolsのCheckpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and w
hail2u.net - Weblog - CSS2 Specificationでのプロパティの出現順序
少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。大体のところはソラで覚えているのだけど、font-weightとfont-sizeはどっちが先だっけとかは忘れるので、備忘録がてら序列付きリストにしてみた。 margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-bottom border-right border-left border-width border-top-width border-right-widt
hail2u.net - Weblog - FirefoxのuserContent.cssネタ
Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。 _blankなリンクのカーソルを変更 a[target="_blank"] { cursor: alias !important; } cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。 View Page Sourceのフォントを固定する body#viewsource * { font-family
hail2u.net - Weblog - del.icio.us sidebar
先日、提供が開始されたde.icio.usのJSONフィードを利用して、Firefoxのサイドバーを作ってみました。現状ではダラーっとただ表示するだけ説。本当はもうちょっと作りたかったんだけど「Pandoraすげぇぇぇぇぇぇ」とか「JSONによるフィードをIETFに！！！！！」とかでほとんど何もやってないものな罠。もしAjaxとRSSの流行る順番が逆だったら、JSONによるフィードがデファクト・スタンダードという時代だったかも！？ いや知りませんが。 リンク先のHTMLファイルをダウンロードして、適当なところに保存し、 http://del.icio.us/feeds/json/hail2u となっている部分(42行目)を、 http://del.icio.us/feeds/json/{ユーザー名} に書き換えてやれば自分のものになります(当たり前)。CSSはかなり適当で、色はOSのカラー
OPML 1.0 Specificationの勝手な日本語訳
この文書はOPML 1.0 Specificationの勝手な日本語訳です。本文中の誤りはすべて勝手に日本語訳をしたKyo Nagashimaに責任がありそうです。かなり私的な解釈が混ざっている訳ですので、正確な情報を得たい方は原文を読んでください。 この文書について この文書は、アウトライン・プロセッサー・マークアップ言語あるいはOPMLと呼ばれる、XML 1.0に文書のアウトラインを格納するためのフォーマットについて記述です。 この文書において、アウトラインとは、文字の値を持つ名前付けされた属性のセットを含むノードのツリー構造ことです。 成り立ち アウトラインは長い間コンピューターについての情報を整理するポピュラーな方法でした。アウトライン・ソフトウェアの歴史は不明瞭ではありますが、大まかな成り立ちは示すことが出来ます。 おそらく、最初のアウトライン・ソフトウェアは、1960年代にAu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
