Vimのrenderoptionsオプション
最近のKaoriYa版のWindows向けgVimではどうやらrenderoptionsオプションを適切に設定すると、DirectWriteを使った描画に切り替えられるようだ。一年ほど前からパッチとして含められるようになっていたらしい。 有効にしただけではあまり劇的な効果を上げることは出来ないようだけど、追加で細かく設定を行える。例えば上のスクリーンショットのようにブワッとアンチエイリアスをかけたい場合は~/vimfiles/gvimrcなどで以下のようにすれば良い。 set encoding=utf-8 if has('win32') set guifont=MigMix_1M:h12 set renderoptions=type:directx,renmode:5 endif わかりやすそうなのでMigMix 1Mを例にした。デフォルトのGDI下では、上のスクリーンショットの様に特に縦
CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能
前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理
CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
InkscapeのCLIを利用してSVGからPNGへ変換
InkscapeにはCLIがあったらしい。これを利用するとSVGから様々なファイル形式、特にPNGへの変換を自動化しやすくなる。最初PhantomJSとcanvas使ってやろうかとか錯乱してた。後出しだけどSVG Advent Calendar 2014の12日目の記事ということにしておこう。 例えばin.svgを幅256ピクセルのPNGファイルとしてout.pngに変換したいとする。Inkscapeの実行ファイルのディレクトリーへパスが通っているとすると、以下のようなオプションで実行すれば変換される。 $ inkscape --without-gui --export-width=256 --file=in.svg --export-png=out.png --without-guiでGUIの起動を無効にし、--export-widthで幅を(高さはアスペクト比を維持してくれる)、--f
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の閉じタグだけ色を変えるとか)のだけど、ちゃんと理解してないので削
Sassの変数命名規則とBEM
$type-subtype-component-contextというような形でSassの変数を命名していたけど、これにもBEMを使うかという感じになってきた。ただでさえ長いのが、セパレーターで更に長くなるけど、元々そんなに短くないので気にしないことにした。BEMをクラス名で使うような形で単純に利用するケースと、3.3で導入される予定のマップを使って構造化して定義し、複雑に参照するケースを比較して検証している。 検索ボックスに使う、以下の8つの色の変数定義を例にする。 検索フォーム 背景色 入力フォーム 文字色 背景色 枠線色 フォーカス 枠線色 ボタン 文字色 背景色 オンマウス 枠線色 BEMを使った簡単な実装 $color-bg_searchbox: #f9f9f9; $color-fg_searchbox__input: black; $color-bg_searchbox__inp
Sassの変数名での-と_
SassでBEMを利用して変数名を付けようとして、今までハイフンのみでどうにかしていた変数名を書き換えていた時に気づいたんだけど、Sassの変数名ではハイフン(-)とアンダースコア(_)が同一視される。バグだと思ってIssue立てたら、3.0.0でSCSS記法を追加した時に入れた仕様だという返事だった。 -と_が同一視されるということはどういうことかというと、以下の変数はすべて同じとみなされるということで、すべての変数の値は最後に定義した変数の値になる。 $foo--bar: "foo--bar"; $foo-_bar: "foo-_bar"; $foo_-bar: "foo_-bar"; $foo__bar: "foo__bar"; .test-foo--bar { content: $foo--bar; } .test-foo-_bar { content: $foo-_bar; }
行ってきた活動
HTML Best Practices 保守しやすく、規模に依存しない、HTML文書の基本的な書き方をまとめた文書です。 vim-css3-syntax Vimのビルトイン・ランタイムに含まれるCSSのシンタックス・ファイルを拡張する形で、CSS3の様々なプロパティーなどに対応させます。 Color Blindness Emulation SVGフィルターを使い、画像やウェブページに対して8種類の色覚多様性を再現します。 hail2u-ipsum このウェブサイトの文章を利用して、アルファベットやカタカナが適度に混じった日本語の無意味な文章を生成します。 MN Google Fontsで公開されている等幅フォントを普通のウェブページで利用すると、どのような印象になるかを確認できるウェブサイトです。 Drawic SVGで描かれたアイコンの小さなセットです。 CSS MQPacker CSS
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
GitHubの2段階認証とhttpsアクセス
GitHubの2段階認証を有効にしたところ、httpsなURLのリモート・リポジトリへのpushが弾かれるようになった。ちゃんと記事読んだらトークンで認証させろと書いてあった……。指示に従ってアカウント設定のApplicationsからPersonal Access Tokenを発行し、パスワードの代わりにそれを使うようにしたところ、httpsでも元通り自動認証でpushできるようになったようだ。 "GitHub 2段階認証 https"で検索して見つかるGithubの2段階認証を有効にしてgitからの認証が弾かれる時の話には「毎回トークンを入力する必要があります」と書いてあるが、credential.helperを設定しているならそんなことはない。単純に今までのパスワードの代わりに発行したトークンを入力して、ヘルパー・アプリケーションに覚えさせれば二度と聞かれなくなる。 credenti
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
