Retina対応にSVGを使う方法とリンクを張る時の注意点

Retina対応にSVGを使う方法や、SVGにリンクを張る時の注意点、Illustratorで書き出す時の注意点・軽量化について調べてみました。
こちらの記事は2012/9/24の記事を再編集し、情報を新しくしました。2015A/W年版です。
何気にハマりどころの多いSVG、3年越しにすっきり!

Agenda

  1. SVG「Scalable Vector Graphics」とは何か
  2. SVGが高...

Read more

Vagrantを使ってローカルでWordPressを立ち上げる

とにかく私がやりたかったことは、Wordpressをローカル環境に構築して思う存分デザインがしたい!テーマのバージョン管理がしたい!ということ。
そこで @machidaさんに相談してみると・・・「Vagrant にしましょう。」 え?!なんだか難しそう。。プログラマ界隈では当然の技術なんだろうな〜。MAMPでいいですかなんて言えないオーラ。
でもWordpressのローカル環境くらいならデ...

Read more

SassのデバッグにSource Mapsを使うべきたくさんの理由

SassやCompassをChrome Developer ToolsでデバッグしたいのにCSSしか参照できなくて困ったり、編集したコードをコピペするのが面倒、エディタに即時反映できたらいいのにって思ったことはありませんか? この悩みを、Source MapsとChrome拡張「Tincr」を使って解決する方法をご紹介をします。 一連の流れを動画に撮ってみました。

手順

  1. Source...

Read more

Layout、Paintingとは何か?レンダリングから学ぶWebサイトのパフォーマンス

どうしたらWebサイトのパフォーマンスを向上させることができるのか? レンダリングエンジンについて学ぶことで、その根拠を理解していきたいと思います。 前半ではレンダリングプロセスについて、後半ではJavaScript、CSSそれぞれの高速化、最適化について書きます。

1. レンダリングエンジンとは何か

レンダリングエンジンはHTMLドキュメントなどを解析し、画面に表示する、ブラウザの大...

Read more

HTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法

HTML5ではdata-*="value"の形式で属性名にプライベートな値を設定できるカスタムデータ属性の仕様と、そのカスタムデータ属性にJavaScriptからアクセスするAPIが定義されました。 でも実はJavaScriptだけではなく、jQueryはもちろんCSSからでもアクセスすることができるのです。 それなら私も私だけの属性作ってみたい!
ということで、今回から連載で、JavaScript...

Read more