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

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

Agenda

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

Read more

MiddlemanをHerokuで公開して独自ドメインにリダイレクトする

HerokuはRuby、Java、Python、Scala、Node.jsなどのアプリケーションをGitを使ってデプロイ環境を構築できるプラットフォームですが、Ruby製であるMiddlemanでつくったサイトもHerokuで公開すると便利です。

通常Middlemanでは、一旦ビルドした静的ファイルを手動でFTPへアップロードする必要がありますが、Herokuを使うとビルドからデプロ...

Read more

Chrome Developer Teamから学ぶサイトパフォーマンス

Frontrend x Chrome Tech Talk Night Extendedで、Addy氏、Jake氏、Paul氏のセッションに感動し、Frontrend Advent Calender 2013に参加させていただきました。9日目のRochasです。

昨今のモバイリズムの中、ユーザーの85%がデスクトップと同等かそれ以上にモバイルでの高速化を求め、57%以上がロードに3秒以上...

Read more

rbenvでRuby 2.0.0-p353にバージョンアップする

Ruby 2.0.0-p353にアップデートしたので、Rubyをバージョンアップしてみます。

HomebrewからRubyをインストールする方法は以前のブログに書きました。
rbenvでRubyを複数バージョンインストールする(2.0.0-p195)

1. rbenvをアップデートする

$ rbenv install -lでインストール可能なバージョンを確認してみたところ、まだ2.0...

Read more

Middleman + Slim + Herokuでブログをつくりました

記事はMarkdownで書いて、ビルド、デプロイまでを一気に行えるところに魅かれ、Middlemanでブログをリデザイン、Herokuにアップしました。

1. 静的サイト、ビルドツールとしてのMiddleman

MiddlemanはRuby製、Sinatraベースの静的サイトジェネレータです。Ruby on RailsのViewによく似ていますが、Model、Controllerはなく、...

Read more

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

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

Read more

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

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

Read more

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

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

Read more

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

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

Read more

高速で安全なjQueryを書くために今できること

先人達が模索し続けたjQueryの定説を、私はちゃんと理解できているだろうか?またそれはjQuery1.8~2.0世代の現在においても有効なのだろうか?
jsPerfよりベンチマークをシェアさせていただきつつ、パフォーマンスやXSS対策についても少しだけ。高速で安全なjQueryの書き方をまとめてみました。
jsPerfはベンチマークを自分で作成したり、他の方がつくったものをシェアできるツールで...

Read more

HTML5 Drag and dropを実装してみよう

HTML5のDrag and dropには7つもイベントがあってさぞや大忙し! なのかと思いきや、実装に必須なのは3つのイベントだけ。ブラウザ上でDrag and dropができるデモをつくってみました。 ドラッグ要素が複数でも大丈夫なように配列にしたり、好きな場所にドロップできるようにイベントの発生場所を取得しています。

Demo | HTML5 Drag and drop

Read more

background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン

background-size: coverを使って、たった3行のCSSで背景画像をフルスクリーンにフィットさせる方法をご紹介します。 フルスクリーン表示もレスポンシブウェブデザインもFluidレイアウトであり、background-sizeプロパティによって背景画像の表示サイズが指定できる、という原理を利用して、簡単なデモを3つ作ってみました。スマートフォンにも対応、IE8以下でも許容範...

Read more

Google Web Fontsのパフォーマンス

Google Web Fontsのフォントがどのくらいの人に見られているのか想像できますでしょうか?
なんと只今のTotal Font Viewsは272,279,056,925 。リアルタイムに上がり続けて留まるところをしりません。 1億以上のWebページで利用されているWebフォントは、そのWebページを通じて、1日に10億以上のPV数があるそうです。
さらに驚いたのが、PV数が上がるほ...

Read more