ウェブサイト作成に役立つことをいろいろと

かなり前のことかもしれませんが、Page Speed Onlineからベータの文字が取れていたので今さらながらご紹介。知らない人はぜひチェックしてみてください。

Page Speed Online ― Google Developers

最近よく見かけるようになったスクロールをしたときの動きが変わったサイトを集めてみました。パララックスやら多重スクロールなんて呼ばれているのですかね。見ていて楽しいです。

Mario Kart Wii Experience

マリオカートの歴史などが道に沿って紹介されていきます。とても滑らかで走っているような感じがうまく表現されています。

画像を一切使わずCSS3で表現した横メニューを作ってみました。順を追って説明していきますので参考になればと思います。

「リストに1pxのラインを追加するだけで、印象がぐっとよくなる」、「CSS3の勉強になるかも！？画像を使わないボタンの作成手順」が好評だったので、第3弾ということで。

Media Queriesを使ったレスポンシブなサイトを個人的な好みで集めてみました。今回は変化のパターンが多くて、最終的にスマートフォンでもうまく見られそうなサイトを中心に集めています。

Media Queriesを使っているサイトは、Webフォントなど他にも新しい技術がたくさん使われており見ているだけで楽しいですね。

CSS-Tricks

CSS3を使うにあたってネックになるのがIEの存在です。このブログで何回も言っているように、CSS3への対応が遅い上にユーザーのバージョンアップも進んでいません。

しかし、このブログではIEのことはあまり気にせずCSS3を使っています。このブログのユーザーは一般的なサイトに比べてIEユーザーが極端に少ないというのも理由のひとつとしてありますが、プログレッシブ・エンハンスメントという言葉を意識するようになったのが最も大きな理由です。

CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？

ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。

このブログでも多用しているtransitionですが、変化の仕方を表すtransition-timing-functionについては、違いが分からないという人もいるのではないでしょうか？

今日、CSS3の勉強になるかも！？画像を使わないボタンの作成手順という記事を書いたのですが、IEに対応していないと残念に思われた方もいらっしゃるようですのでIEでも作ってみます。

CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。

先日書いた「配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう！」が予想外にたくさんのアクセスをいただきました。ありがとうございます。

そのなかで、1pxのラインがあるだけで印象は大きく変わってくる、という記事がありましたので、簡単を出来るリストのサンプルを紹介します。