Snapito!
Snapito!は指定したURLのスクリーンショットを撮ってくれるウェブサービス。同様のものは多くあるが、画像がキレイで日本語が通ってAPIがあって……となるとそこそこのお値段する。今のところSnapito!は無料でそれらの条件をクリアしている。良さそう。 APIの利用にはキーの取得が必要。取得に使ったメールアドレスのドメインで使用が制限されるっぽいので、動的なリクエストで使おうと思っている場合は気をつけた方が良さそう。またAPI経由ではスクリーンショットを撮る時にディレイをかけたりはできない(ウェブサイトにあるフォームからは可能)ので、非同期で実行しているJavaScriptによるDOM操作の結果は反映されない可能性が高い。他にもビューポートのサイズを設定できないなど自由度は高くないので、本当に特定のURLのスクリーンショットを撮るだけと考えておくのが良い。 そのうち有料化する模様。こう
favicon-cheat-sheetを日本語に訳した
知らないうちに増えるし、減らないし、勝手に決め打ちでリクエストしてくるし、ドキュメントのありかバラバラだし……と色々な面倒さがあるファビコン。その全般的なガイダンスであるfavicon-cheat-sheetの日本語訳を公開した。元文書がGitHubにあるためそれをフォークしたリポジトリで翻訳している。何かあったらプル・リクエストやイシューで報告してくれると楽で嬉しい。 うろ覚えだった知識をきちんと確認するのに良さそうだったので翻訳に手を出してみたのだけど、詳しすぎず、かといって「こう書けば良い！」だけではないちょうど良い詳しさで、おおまかに全容を把握するにはすごく良い文書だと思う。iOS 7でアイコンのサイズが微妙に変わることとかちょうど今の話とかも既に反映されており、そういう点でも実践的な内容になっている。 この文書では特に触れられていないけど、Facebookページのアイコン(180
Media Queries内で@extend使いたくなった
Sass 3.2では様々な機能強化が図られているけど、その一方で削除された機能もある。そのひとつが既に安定版である3.1でも警告が出るようになった@extendディレクテイブがMedia Queries内等で使えていた機能。ざっと削除に至った経緯を辿ってみたけど、実装と出力上の都合っぽい。まぁそういうもんか……とこの仕様変更を受け入れて書き直したりしてたけど、最近になってやっぱり必要なんじゃないかなーと思うようになった。 Media Queries内で@extendが使えない場合と使える場合で、ここの記事の情報(日付けやカテゴリを表示している部分)がどうなるかを例にしてみる。この記事の情報は狭い画面では一列でずらっとタイトルの直ぐ下に表示されるが、広い画面では本文の左にくっつくような形で表示されるもの。 使えない場合 %hanging-block { @media screen and (
media="only all"
SVGやMedia Queriesのサポートのこととか考えて嫌になってきたので、<link media="only all">でばっさりすることにした。media="not print"にした時に思いつかなかった……。456 Berea Streetでも@mediaディレクティブの方でonly screenを利用することで簡単な分岐を実現するというほぼ同じアイディアがつい最近取り上げられており、こちらもかなり便利。 <link rel="stylesheet" media="only all" href="style.css"> とするとonlyキーワードを解さないブラウザーは読まなくなる。media="not print"と違って印刷用スタイルシートを混ぜても大丈夫。 The keyword ‘only’ can also be used to hide style sheets fro
SVGで複数の画像をまとめる #2
前に試したのはRetinaを強く意識したものだけど、今度はCSSスプライトの代替を意識したもの。CSSスプライトの欠点のひとつに繰り返し背景を含めることが出来ないというのがあって、それをどうにか出来ないかなーと思ってSVGを使ってみたけど出来なかったという話。 Demo: Combine Multiple PNG Images with SVG CSSスプライトのHTTPリクエストの節約が最大の目的なので、それを崩す事の無いようにリンクは使わずData URIを使ってPNG画像を埋め込んだSVGを扱っている。デモの末尾に載せたようにFirefox 13だけうまくいく。Internet Explorer 9もそれぞれの画像のサイズを揃えればいける。Chroem 20とOpera 12はSVG自体の表示は可能だけどCSSからbackground-imageプロパティーを使って参照するとアウト。
Vimで全角や行末スペースをハイライト
今まで:matchで全角スペースのハイライトだけはやってたんだけど、行末のスペースを残したまんまなミスが最近多いのでそれもハイライトしようとした。ヘルプを見たら:2matchとかできるけど:3matchまでしかないからmatchadd()使ってねと書いてあった。matchadd()でやりたいことは実現できたんだけど、かなりちゃんとスクリプト書かないとマッチのリストが肥大化しちゃう感じでアレな気がしので、syntaxをふわっと追加する感じで実現することにした。 scriptencoding utf-8 " Additional highlights augroup AdditionalHighlights autocmd! " Trailing spaces autocmd ColorScheme * highlight link TrailingSpaces Error autocmd S
VimでNu Validatorを使う
HTMLLintはどうも更新する気なさそうなので、W3C Markup Validation Serviceを使うように戻すかと思いつつもインターフェイスがアレだなーと。で、Validator.nuの方を眺めてたら普通にGNU ErrorフォーマットやJSON、プレーンテキストでの結果を返す機能があったのでVimから簡単に使えるようにスクリプトを書いてしばらく使ってみる。 Download: nu-validator.pl and nu-validator.vim nu-validator.plをパスが通ったディレクトリに置いて、nu-validator.vimを~/.vim/compiler/に置く。最後に~/.vimrcに augroup NuValidator autocmd! autocmd FileType html compiler nu-validator augroup E
Sassのリスト
Sassではいわゆる「配列」のような複数のデータを格納するリストを作れる……というのだけど使ったことなかった。リファレンスでもさらっと流されてるし、リストを使う@eachの説明でもベタに並べてあるだけで、どうやって作ってどうやって使うのかイメージできなかった。変数の値を空白区切りにしたらリストな変数になるということはどう考えてもリファレンスからは読み取れないと思う。 基本 特に難しいこともなく空白(かカンマ)区切りで指定するとリストになる。 $lists: foo bar buz; .test { property: $lists; } リストな変数であってもそのまま参照した場合は普通の変数と同じようにそのまま(空白区切りのまま)出力される。 .test { property: foo bar buz } リストの特定のインデックスの値を参照するにはnth()関数を使う。 .test {
セレクターのネスト
Sass等のCSSプリプロセッサーではネストを使ってくだくだしい(単に長い)セレクターを意識することなく自然に書けてしまうので、あとでちょっとだけ上書きしようかなとか言う時に面倒なことになったりする。CSSのカスケーディングは魔窟だし！ 特にSassでは@extendでセレクターの順序が変わってハマるなどということもあるので、CSSの感覚にネストを組み合わせて書いていると簡単に破綻する。 つまりCSSプリプロセッサーによるセレクターの抽象化がCSSのセレクターの詳細度と順序を想像しづらくしてしまうということ。もちろんこれはCSSプリプロセッサー側の問題ではなく、ユーザー側がその抽象化プロセスをきちんと理解していないことが原因なんだけど。 また、セレクターのネストはHTMLのネストをそのまま再現するのに使ったりすると把握しやすいのだけど、それだとセレクターを書く手間が少し減る程度の利点しかな
Sassの!defaultフラグの使い方と使われ方
Sassを書く時には変数を多用することと思います。それら変数は自分で定義して自分で使うので、同じプロジェクト内で再定義する必要はあまりありません。しかし他人や自分の作ったSassファイルを流用する場合、その中で使われている変数の値を最適化する必要が出てきます。もしその変数がハード・コーディングされているだけだとしたらどうでしょうか？ その場合変数を直接書き換えることになるでしょう。こういったSassファイルの再利用における問題を解決するためにSassには!defaultというフラグが用意されています。 Less & Sass Advent Calendar 2011もついに18日目ですね。ゴールまであと少しです。 まずはSassリファレンスの!defaultを扱っている部分を読んでみましょう。参考にざっと以下に訳してみました。 変数の値を指定する時、!defaultというフラグを付けておく
adjust-rgb()というSassの関数を作った
Sassには色調節の関数が色々用意されています。その中にadjust-color()というRGBとHSLで色を割合ではなく指定量だけ調節できる汎用関数があるんですが、RGBをそれぞれ同じ量だけ明るく(暗く)したい時の引数指定が面倒です。というわけでそれをラップするadjust-rgb()という関数を作ってみました。 @function adjust-rgb($color, $dec: 1) { $num: 255 * $dec; @return adjust-color($color, $red: $num, $green: $num, $blue: $num); } 第一引数で色を、第二引数で係数を指定します。係数は-1から1の間で、負の値を指定すると黒に近くなり、正の値を指定すると白に近くなります。 .test { color: adjust-rgb(#369, 0.2); // re
mixxd()というSassの関数を作った
rgba()のエミュレートにはadjust-rgb()だけでは不十分なので、ちゃんと背景色と混ぜるmixxd()という関数を作りました。mix()の第三引数が小数のバージョンで、xdはBy Decimalの略です。ユーザー定義関数のうまい命名規則欲しいなぁ……。 @function mixxd($color-1, $color-2, $weight: 0.5) { $percentage: percentage(1 - $weight); @return mix($color-1, $color-2, $percentage); } rgba()やtransparentize()と同じ小数を引数に取ることが出来るので、%を引数に取るmix()よりも混乱しにくいんじゃないかと思います。 $bg: #f9f6f0; body { background-color: $bg; > footer
VimでのSCSSの構文強調を最新版のSassに対応させる - Weblog - hail2u.net
SassのSCSSを書いていて@functionや@eachが構文強調されないことにイラッとすることが増えてきたのでサクッと書いた。確認した範囲では大体うまくいっているような気がする。気が向いたらリポジトリ作る。 Download: ~/.vim/after/syntax/scss.vim 置く場所は必ず~/.vim/after/syntax/scss.vimで。vim-css3-syntaxを使ってない人は最初の方のruntime!で始まる行を全て削除するかコメント・アウトしないとエラる。after/syntax以下のシンタックス・プラグインも二重ロードのチェック必要だったかどうか思い出せないので、必要そうだったら後で追加する。 フルスクラッチで書いたわけではなく、デフォルトのランタイムに入っているsyntax/sass.vimとsyntax/scss.vimを踏襲して書いた感じ。なので
フロートした要素に続くリスト
通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。CSS 2.1仕様書のフロートの解説にある図Dがその例です。なので、通常フロートした要素に続くリストはそのブレット(や数字等)がフロートした要素の下に隠れてしまいます。この挙動には結構困らされることが多いですが、実はoverflow: autoとすると簡単に回避できます。 Demo: ul after floated element デモのようにリストにoverflow: autoするだけで、キレイにリストが配置されるようになります。overflow: autoを使った場合と使わなかった場合でどう重なりに違いが出るかわかるように、outlineプロパティーでピンクの線を引いておきました。 これはブラウザの挙動がたまたまそうなったということではなく、実にさり気なくCSS 2.1仕様書にも記述があります。 The bor
Style Guideを作った
今年の24 Waysの7日目のエントリー、Front-end Style Guidesを読んで触発されたので、このサイトのStyle Guideを書いてみました。元々テストするためのHTMLを書いてからスタイルを書くという手順をとっていたので、文言を無意味なLorem Ipsumからスタイルの簡単な解説文に変えただけですけど。 また少し前からCSSにコンパイルする前のSCSSファイル群をGitHubで公開し始めたので、コードそのものについてはそっちを参照すると、CSSにおいてもSCSSにおいてもなにか発見があるかもしれませんね。例えばSCSSでの論理的なファイルの分割とインポートであるとか。normalize.cssをベースにした形で書き直し終わったので、リセット系から乗り換える場合の参考とかにもなるかもならないかも。 こういう形のスタイル解説ならテストが即ドキュメントになるので、未来の自
Google Web Fontsにあるお気に入りのフォント5つ - Weblog - hail2u.net
Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで……というわけではないですけど、なんかの参考にでもなればと僕のお気に入りを5つだけ簡単な説明付きで紹介してみます。 Demo: Five Favorite Google Web Fonts Amaranth Amaranthはゆるやかにカーブのかかったグリフが特徴です。比較的小さなサイズからその特徴がはっきりと出るので、ロゴ以外にもナビゲーションなどでも使えると思います。斜体ではそのゆるやかなカーブがセクシーに強調され、また違った味わいがあります。 Arvo Google Web Fontsにはあまりスラブ・セリフがないですが、Arvoは唯一まともに使えそうなそれです。評価の高
lorempixel
簡単なクエリー・パラメーターで好きなサイズのランダムな画像を返してくれるlorempixelというウェブサービスを見つけた。主にウェブサイトのプロトタイピングに使うことになると思う。多少遅い気もするが、それに目をつぶってでも使いたくなる簡便さ。 クエリーは非常に簡単で、横320px・縦180pxのランダムな画像が欲しいなら以下のようにする。 http://lorempixel.com/320/180/ このエントリの最初の画像はこのクエリーでリクエストしたもの。指定できる縦横のサイズは最大1920pxまでのようだ。縦横のサイズ以外にもいくつかパラメーターがあり、 http://lorempixel.com/320/180/abstract/ とテーマ名を最後に付けると、 テーマで絞り込みができる。 http://lorempixel.com/g/320/180/ 縦横サイズの前にgを挟むと
カーソル位置の色を取得するAutoHotkeyスクリプト
カラーピッカーとか起動したくないし、常駐なんてもってのほか！ みたいな人なので、Win+Cでカーソル位置の色を取得してツールチップで表示とクリップボードへのコピーを行う簡単なAutoHotkeyスクリプトを書いて愛用している。 ; Win+C: Get Cursor Position Color #c:: MouseGetPos, MouseX, MouseY PixelGetColor, color, %MouseX%, %MouseY%, Slow StringMid, red, color, 7, 2 StringMid, green, color, 5, 2 StringMid, blue, color, 3, 2 red := "0x" . red green := "0x" . green blue := "0x" . blue SetFormat, IntegerFast,
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がアイコンの前景をつなげたスプライ
SCSSでの落とし穴
SassをSCSSで書いていてはまった落とし穴についてのメモ。 プロパティのネスト h1 { font { family: "Gabriola", sans-serif; size: 400%; } } とうっかり書いてしまうと、 h1 font { family: "Gabriola", sans-serif; size: 400%; } となる。プロパティのネストを使う時はコロンが必要で、他の部分と記述が違うので注意が必要。 h1 { font: { family: "Gabriola", sans-serif; size: 400%; } } SCSSではこの記述のみがCSSと比較するとかなり特異なので、使わないと決めてしまうのも良さそう。 負の値の計算 $gutter: 20px; margin: 0 0 0 -$gutter; だと、 margin: 0 0 -20px; にコン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
