FirefoxにおけるSVGの背景画像
結構前から21の現在に至るまでFirefoxではCSSで背景画像に指定されたSVGをうまく拡大出来ずにぼやける(ラスタライズしてから拡大してる)のはSVG使おうとすると普通にぶち当たるのでかなり有名。で、その対策として大きくSVGを作って縮小するというのがベスト・プラクティスっぽい感じだったんだけど、縮小でもアレなことに最近になって気づいた。環境依存な気がするので、とりあえずメモ。 Demo: SVG Background Resizing on Firefox SVGの公式ロゴは638px四方のもの。それを背景に仕込んで領域を基準にリサイズすると、49%ではギザギザになり、48pxではキレイに(Chrome 27やInternet Explorer 10と同じに)なる。僕のPCではHTMLやCSSをほぼ限界まで削っても再現するが、再現しないマシンがあったりして根拠がよくわからない。 アイ
Style Guide - hail2u.net
Posted on 07 Dec, 2011 in Web Design? hail2u.netで使われているスタイルの解説兼プレビューのページです。スタイルのコードそのものについてはその公開リポジトリを参照してください。このページのマークアップにはおかしいところが多々ありますが、その多くはやむを得ない事情によるものです。 コンテンツの見出しはh2でマークアップされます。ブログでは見出しに続けてfooterが配置され、更新日時とカテゴリをそこで示します。 FacebookのLikeボタンやはてなスターはその対象の最後にまとめて配置されます。つまり、それらが記事に対するものの場合はarticle要素内の最後になりますが、ページに対するものの場合はdiv#mainの最後になります。対してAdSenseの広告は常に最初のセクションの直後に挿入します。 ベース ブラウザーのデフォルト・スタイルシー
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
Sassの--precisionオプション
3.2以降のSassでは計算結果が少数になる場合、小数点以下5桁まで出すようになっている(それまでは3桁)。そこで--precisionオプションで小数部分の桁を制限してやることにより、ここくらいのコンパクトなCSSファイルでも0.5KB程度は節約できる。 0.5KBと言われるとやるだけ無駄感があるけど、規模が大きくなれば節約できるサイズはそれなりに増えるし、デメリットはあまりないのでやらないよりはやった方が良いような気がする。 3桁に制限したい場合は--precisionオプションで3を指定する。 $ sass --watch style.scss:style.css --precision 3 最後の桁は四捨五入される。3桁より下にもできるけど、3桁残すことにするとem単位でも1/100の詳細度が四捨五入されても正確になるので、最低でも3桁は残した方が無難。 ブラウザーごとに小数点の丸
Drawic
フッターのアイコンをSVGにした。GitHubにリポジトリも作っておいた。ぴくせる・ぱーふぇくとってなんでしたっけ……。 暗い背景向けの白いアイコンのみだけど、まぁそこは普通のSVGなのでエディターで開いてfillプロパティーの値を変えれば好きな色に変更できる。二種類ある矢印系には全方位を用意しなかったけど、transform属性でrotate()関数を利用して方向を調節できるのでそれで(若干中心をずらしてあるのでtranslate()も併用した方が良い)。 shape-rendering: crispEdges with crispEdges (Left) vs. w/o crispEdges (Right) Deliciousのアイコンはrect要素を組み合わせたものなので、そのままでは拡大・縮小すると端がぼやけることがある。そういう時はみんなが独自実装したCSSのimage-rend
Amazonの画像を拡大してリサイズし切り抜く
Amazonの商品画像は色々なパラメーターで加工できるのはよく知られている。大抵の場合はウェブサイトに合うようにサイズを変更したりとかが主なのでAA320やSX480とかを使うだけ。ただ非矩形な商品の画像の場合、余白がないことがあり白背景のウェブサイト以外ではサイズの変更だけでは上手くなじまない。それを拡大(SS)とリサイズ(AA)・切り抜き(CR)を組み合わせることにより適切に余白を追加してやろうというテクニック。頭悪そうなタイトル。 以下のデフォルトの画像では余白がなくキツキツでちょっとアレな画像を例にして説明する。 元の画像のサイズは500x221 https://m.media-amazon.com/images/I/31Eybjr97iL.jpg SSとAAというパラメーターによる画像サイズの変更は、元になる画像のサイズ(長辺が500pxのことが多い)を超えると余白が追加される。
IE10でのSVGのファビコン
SVGのファビコンで試した奴のWindows 8 Release Preview上のInternet Explorer 10での実験。Metro版とデスクトップ版共にSVGのファビコン自体は表示できるけど、単純にlink要素で指定してもダメで、ドメイン・ルートにfavicon.icoというファイル名でSVGファイルを置く必要がある。 IE10はMetro版では32x32を、デスクトップ版では16x16をそれぞれ使う。そのためSVGのようなスケーラブルなフォーマットだとより幸せになれるんじゃないかと思う。「faviconは16x16！」という時代の終わりの始まり。 Chrome 20やSafari 5、Opera 12がちゃんと対応しておらず今すぐ採用できるわけじゃないので、しばらくは32x32と16x16のマルチ解像度なアイコンで乗り切るのが無難。最終的にはiOS向けのアイコンやMetro
SVGのファビコン
Chrome 17と19では無視される。Content-Typeの問題かと思ったけど修正してもダメだったのでそういう話でもないようだ。Internet Explorer 9の挙動が怪しい。404だったらドメイン・ルートを見に行くようになってる模様。Opera 11と12では対応自体はしているのだけど、リサイズがうまくされないのであまり意味がない(キャンバスを16x16にすればいけるのかもしれないけどそれもアレ)。ということでまともに表示できるのはFirefoxのみということのようだ。 Internet Explorer10 PP4でも確認したんだけど、そもそもfavicon表示するGUIスペースがなかった……。 最近は高解像度のアイコンも含めたfavicon (だいたいのブラウザーで対応されている)を利用してるWebサイトも稀に見かけるけど、サイズでかくなりがちだしそもそも作るの面倒だし、
Vimでタブページの位置を変更する
Vimでバッファーごとにタブページを開くみたいなヌルい使い方をしているみなさんこん○○は。タブページを適当に開きまくるとたまに整理してやらないとごちゃごちゃになるので、簡単に位置を変えられないかなーとタブページのヘルプをちゃんと読んだら:tabmoveというまんまなコマンドでできることがわかった。 ただ:tabmoveは引数として正の整数しか受け取れないので、-1で左に動かすとかそういう相対的な移動はできない。1で1つ右に、-1で1つ左にループして動かせるようなラッパー関数を書いて使うことにした。 " Move tabpage function! s:MoveTabpage(num) if type(a:num) != type(0) return endif let pos = tabpagenr() - 1 + a:num let tabcount = tabpagenr("$") i
Sassの存在意義への補足
Sassの存在意義の話があんまりうまく伝わってない感じなので、3の別々に書けてSassで関連付けられるということについて少しだけ書く。抽象的な概念の話なので具体的な説明というのもなかなか難しいけど、CSSフレームワークを使う時にどうなるかみたいなことを取り上げる。 Twitter Bootstrapを始めCSSフレームワークはいくつもあるが、それらはだいたいユニークなクラス名を持っている。例えばTwitter Bootstrapで2カラムレイアウトを作る場合は以下のようなHTMLにしなくてはならない。 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> div要素はsectionやaside要素などを使っても良いが、クラス名はこうでなくてはならない。Sass (やLESS)があ
Sassの!defaultフラグの使い方と使われ方
Sassを書く時には変数を多用することと思います。それら変数は自分で定義して自分で使うので、同じプロジェクト内で再定義する必要はあまりありません。しかし他人や自分の作ったSassファイルを流用する場合、その中で使われている変数の値を最適化する必要が出てきます。もしその変数がハード・コーディングされているだけだとしたらどうでしょうか？ その場合変数を直接書き換えることになるでしょう。こういったSassファイルの再利用における問題を解決するためにSassには!defaultというフラグが用意されています。 Less & Sass Advent Calendar 2011もついに18日目ですね。ゴールまであと少しです。 まずはSassリファレンスの!defaultを扱っている部分を読んでみましょう。参考にざっと以下に訳してみました。 変数の値を指定する時、!defaultというフラグを付けておく
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
CSSコーディング・スタイル
「こういうスタイルがCSSを記述する時に便利だよ！ コンセンサス(つづりは知らない)も取れるし！」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になったんだけど。 とりあえずスタイル指定を取っ払う 各ブラウザ間でのデフォルトの状態での差異を考えると頭が痛くなってくるので、手始めに取っ払って勝負。 フォント・ファミリの指定は別ファイル 見出しはこのフォントで本文はこのフォントといったように、フォント・ファミリの指定はいろいろな要素にまとめて指定することが多いので、まとめて別ファイルに。 様々なところで使うスタイルはhiddenやwrapperなどというクラスでまとめる CSS側でこの要素ではclear: both;とかいうのでも良いのだけど、こ
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; にコン
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
Git Cheat Sheets JP
設定 基本 ブランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
