CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
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
SimpldR: livedoor Readerをシンプルに
しばらく前からユーザー・スタイルシートとユーザー・スクリプトのコンビネーションでlivedoor Readerをシンプルにして使うようにしていて中々快適なのでまとめてエントリにしてみる。キーボードでサクサク操作できて快適ウハウハとかじゃなくてシンプルな画面でマウス・ホイールを使ってひゅいんひゅいん読む感じ。 ユーザー・スタイルシート ヘッダの色などを排除するのがメイン。userContent.cssに以下のCSSを追加する。 /* livedoor Reader ----------------------------- */ @-moz-document domain("reader.livedoor.com") { * { font-family: "Lucida Grande", "Trebuchet MS", sans-serif !important; } pre, code,
git commitで既に起動しているgVimの新しいタブを開く
すぐ忘れる。というかついさっき忘れて1時間近くGoogleと格闘して見つからなかった……。Undeleteで2か月くらい前の.gitcomfigを発掘してどうやれば良いのかわかったので、次忘れたときのためにメモ。 単にgVimでコミット・メッセージを書くファイルを開くだけなら以下のように書けば良い(gvimはパスの通ったところにあるとする)。 $ git config --global core.editor gvim これを元に既に起動しているgVimの新しいタブで開こうと以下のようなオプションを指定してもうまくいかない。 $ git config --global core.editor "gvim --remote-tab-silent" コミット・メッセージを書くファイルをタブで開くこと自体は行えるが、その編集を待ってくれない(すぐにAborting commit due to e
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
CSS color previewをrgb()に対応させた
VimでCSSを編集中に色をインライン・プレビューしてくれるCSS color previewというスクリプトをrgb()に対応させてみた。一応rgba()にも対応しているような感じで、透明度を無視してプレビューされる。hsl()とかも対応しようと思ったのだけどRGBからHSLへの変換が面倒になってすぐに諦めた。hsl()とか使わねーよ。 Download: rgb()/rgba()に対応したCSS color preview インストールは$HOME/.vim/after/ftplugin(Windowsでは$HOME/vimfiles/after/ftplugin)にcss.vimとしてコピーするだけ。インストールしてCSSファイルを開くと、 というように背景色でインライン・プレビューされる。プレビューの通りrgba()の透明度は反映されない。matchlist()で書こうとしたのだけ
Vimで"gf"をスラッシュで始まる相対URLに対応させる
Vimではファイル名らしき箇所でgfを押すと、見つけることができればそのファイルを開いてくれる。この機能はとても便利なのだが、HTMLファイルにスラッシュで始まる相対URLでCSSファイルやJavaScriptファイルのURLを書いた場合は、そこでgfを押してもうまく開くことができない。これを解決するためにvimでHTMLとかを編集するときに絶対パスのファイルを開くで公開されているプラグインをちょっと使っていたのだけど、どうやらpathオプションとincludeexprオプションを設定することでも対応できるようだ。Vimすげー。 とりあえず設定から。 autocmd FileType html :setlocal path+=W:/www/test,W:/www/hail2u.net,W:/www/blosxom.info autocmd FileType html :setlocal i
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
Vimのstatuslineを最適化する
FuzzyFinderのbufferモードやmrufileモードの補完メニューでパスの真ん中が省略されているのがわかりやすかったので、statuslineにも導入してよりわかりやすくしようという試み。インストール済みのGreasemonkeyスクリプトをちょっと編集する時など、ものすごく長いパスのファイルを編集する時のみ便利。 Vimのデフォルトのstatuslineは以下のようなもの。 これにファイルの種類や文字コード・改行コードなどあると便利な情報を追加した上で、ファイル名を先頭に持ってきて、残りのパスを%<を利用して省略させるようにすると、 こんな感じになる。このstatuslineのコードは、 set statusline=%{expand('%:p:t')}\ %<\(%{expand('%:p:h')}\)%=\ %m%r%y%w%{'['.(&fenc!=''?&fenc:&
Web開発周りのVimの設定
HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType html :compiler tidy autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\" tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。 HTMLファイルのインデントをやり直す gg=G ノーマルモードではggでファイ
リデザインとborder-radiusとtext-shadow
でっかいロゴに飽きてきてヘッダをコンパクトにしたくなったので、少し前からサイトのスタイルを色々いじっていた。ナビと検索フォームとロゴを一段に並べるのはかなり難しかったので、ロゴをアイコンにして無理やり詰め込むことにした。border-radiusまくり。緑の流行はまだまだ続くらしいので色はこのままで。次はオレンジだな(適当)。 ヘッダ ロゴ・アイコンとナビをfloat: left;、検索フォームとTwitterとフィードのアイコンをfloat: right;。それぞれにborder-radiusを使って少し丸みをつけて、丸いロゴ・アイコンと並べてもあまり違和感が無いようにした。アクティブなナビはtext-shadowでエンボスっぽくしてみたんだけど、背景色の明るさがアレでうまくへこんでいるように見えない……。 最初、display: table-cell;で検索フォームの横幅をうまいこと可
FirefoxのuserChrome.cssネタ #12
久々。Firefox 3になったときにずいぶん減らしたんだけど、だんだん増えてきたので整理しつつここではまだ書いてなかったものだけ。別のところで書いたやつもあるけど、ここでは初出ということで。 ロケーションバーや検索バーでIMEをオフにする #urlbar input, #FindToolbar input { ime-mode: inactive !important; } 「g 検索語」などキーワード検索機能を多用する場合、IMEがオンだと悲しいことになるので設定。検索バーでもオフにするかどうかは好みで。 進むボタンを無効な時は隠す #forward-button[disabled="true"] { display: none !important; } 進むは戻るを使った時にしか有効にならないので、ほとんどの時間は無効。そのためにスペースを割くのはもったいないので無効なときは削除す
XPIファイルにapplication/x-xpinstallを指定した方が良い？
このサイトで公開しているFirefoxの拡張のXPIファイルにはMIMEタイプとしてapplication/x-xpinstallを指定しているので、FirefoxでXPIファイルへのリンクをクリックするとインストールの許可を求める情報バーが表示される。しかしこういった多くの人にとって得体の知れないサイトでは指定しない方が良いんじゃないかと最近になって考えるようになった。 そこらへんのサイトでXPIファイルにMIMEタイプとしてapplication/x-xpinstallを設定すると、アドオンの管理がそのサイトだけで完結し、アップロードした最新のXPIファイルを直ぐにユーザーにインストールしてもらえるようになったりする。そのためアドオン開発者的にはそこそこメリットがあると思う。ただ最近のAMOの急激なパワーアップによって、これらのメリットは薄れつつある。 一方で、ユーザーにそのそこらへん
HTTPエラーページに意味を持たせよう
Translation of: Adding meaning to your HTTP error pages! by Stuart Colville This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license はじめに ウェブ上で何かを検索しようとすると、既に存在しないページしか検索結果になく、それらへのリンクをクリックすることはよくあるだろう。その開いたページにデフォルトのエラー・メッセージの他に何も情報が載っていなかった場合、多くの人々は戻るボタンを押し次の検索結果を開こうとするだろう。 サイト製作者である我々はもっと訪問者に意味のあるエラーページを作成することができる。そうすればたとえエラーページであっても訪問者をサイトに留まらせ、彼ら
無料で400以上のフォントを手に入れよう！
インターネット上で公開されている無料のフォントは数多くある。しかし、それらを効率的に探すとなると大変だ。無料のフォントをまとめたサイトやページは数多く見つかるが、50程度のまとめのものであったり、ライセンスについてあやふやなだったりする。そこで便利なのがMyFontsの検索機能だ。MyFontsではフォント名や作者、その他色々な条件で検索できるが、その条件のひとつに値段があり、その条件だけで検索することができる。何も考えずに"$0以下"という条件で検索するだけで400以上見つけることができるのだ。 検索結果のページでは任意の文字列でのプレビューをすることもできる。オプションとして色やサイズの指定もできるので、サイトのロゴに良さそうなフォントを探している時などはとても重宝するだろう。多くはないがSmall-Capsなどのファミリを持つ場合はそれらのプレビューに切り替えることもできる。Gall
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
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の閉じタグだけ色を変えるとか)のだけど、ちゃんと理解してないので削
既に起動しているgVimの新しいタブでdiffを行う
Vimのdiffがすごく楽なので使いまくり始めた。単にgVimを新たに起動してdiffを行うだけならば、-dオプションとファイルを2つ渡してやれば良い。が、既に起動しているgVimの新しいタブでdiffを行う方法がわからない。--remote-tab-silentオプションを追加するだけではうまくいかないようだ。色々調べたところ、公式MLのアーカイブにあったスレッドで、--remote系のオプションではExコマンドを1つ指定して実行することができるので、それを利用してvertical diffsplitを実行してやれば良いことがわかった。 つまり、foo.txtからbar.txtとの差分を既に起動しているgVimで開く場合は、 $ gvim --remote-tab-silent +"vertical diffsplit bar.txt" foo.txt とする。foo.txtを既に起動し
gVimのラッパーを作った
gVimをタブを常に表示させ、-p --remote-tab-silentをコマンドライン・オプションに指定して、タブでファイルを開くようにしているのだけど、このオプション指定が面倒。送るにショートカットを置くとか関連付けの指定とかはさほど面倒ではないのだけど、何かしらのソフトウェアでエディタを指定する時にコマンドライン・オプションを指定できないようになっている場合とかあると途端に面倒なことになる。なので、-p --remote-tab-silentを付けてgVimを起動するだけのラッパーを作った。JavaScriptで！ Download: gvim-wrapper.zip ソースは同梱されている。必要があったらそこで更新するつもり。それほど大きなものではないのでGitHubにリポジトリを作る気はあんまりない。ライセンスはMITライセンス。gVimのパスはソース内で決め打ちなので、違うパ
Vimを使い始めた
思うところがあってVimをメインに使い始めた。とりあえず今まで適当だったvimrcの整理から始めて、blosxomの新規記事を公開したり既存記事を更新するコマンドを作り、コーディングのために補完関連などを覚えたり調べたり設定したりした。そしたらいつのまにか3日経っていた。とりあえずはあまり困らないくらいまでにはなった……ような気がする。 カラー・スキームはIR_BlackをCursorLineをちょっと明るくしたりとかPmenuThumbを追加したりとか少しカスタマイズしたものを使っている。 プラグインは、 autocomplpop.vim commentout.vim eregex.vim mru.vim だけ。autocomplpop.vimは細かい挙動に慣れるのがちょっと大変そうだけど、すぐにすごいなーと実感はできた。commentout.vimは同じキーバインドでコメントアウトと削
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
