webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ

CSS

よくある構成のサイトを高速化してPageSpeed Insightsで100点を取る方法

写真はうちのみーこ。 サイト制作でよく使われる以下のライブラリ/CSSに依存したサイトを高速化してGoogleのPageSpeed Insightsで100点を取る方法を説明します。 Google Fonts jQuery Bootstrap FontAwesome 実際にどのぐらい速度に違いがあるのかデモページ…

夏だしダイエットしたいから痩せれるウェブアプリを作った

写真はうちのみーこ。 今年も夏がやってきました。毎年この季節になると思うことはなんでしょうか? そう、ダイエットですよね。 海にプールにフェスにビアガーデンと夏特有のイベントがあるたびに痩せなきゃ!と気を引き締めるのですが3日後にはすっかり忘…

CSSアニメーションで動く「うさぎ」がかわいい

.bunny{ font-size:7px; /*> size */ position : absolute; width : 16em; height : 20em; margin : -10em 0 0 -8em;} .bunny::before, .bunny::after{ content : ''; display : block; width : 1em; height : 1em; margin : -1em 0 0 -1em; } .bunny::befor…

2016年6月時点。おススメのレスポンシブCSSフレームワークを紹介

Photo credit: eva101※2015/11/8: 最新の情報に更新。 ※2015/10/20: 現状に合わせて内容編集と追記。 ※2016/6/18: 現状に合わせて内容編集と追記。重量級から軽量なもの、全てコミコミからミニマムなものと、レスポンシブデザインの実装で利用するCSSフレー…

高品質なCSSスタイルガイドラインをまとめた(日本語訳付き)

去年今年と各社から高品質なCSSのスタイルガイドラインが公開されています。この記事ではオリジナルのURLと、その日本語翻訳されたURLを合わせてまとめています。この記事は定期的に更新する予定です。

"MUI"Googleのマテリアルデザインガイドラインに則った軽量CSSフレームワーク

GoogleからMaterial Design Liteが発表された直後ですが今年登場して頻繁にアップデートが繰り返されているマテリアルデザインの軽量CSSフレームワーク"MUI"の紹介です。※見た目についてはGoogleマテリアルデザインのガイドラインに則っているため特に紹介し…

かっこいいSnap.svgを使った紙ひこーきが飛ぶデモ

SVGを使ったアニメーションです。SVGなので多くの主要ブラウザで問題なく動作します。codepen.ioSnap.svgはJavascriptでSVGを操作するライブラリで以下サイトのGetting Startで使い方が丁寧に説明されています。ライセンスはApache2でオープンソースです。Sn…

カッコよく素数を表示するCSS3 + Javascript "Fun with Primes"

カッコよく素数(Prime)を表示しています。色つきになっている数字が素数です。codepen.io実装はJavascriptで数字カウントしながら素数だったらclassを指定して、あとはタイムアウトとCSS3のアニメーション(translate3d)を使ってエフェクトを実現しています…

軽量CSSコンポーネント"basscss"、ImmutableCSSに見る未来。

basscss 最近は軽量シンプルなCSSフレームワークが好まれる傾向にあって、その中の1つが"basscss"です。2015/6/30にバージョン7がリリースされました。サイドエフェクト(副作用)がないと書いてあるのが嬉しいです。

ウェブ/アプリに使える今風アイコンフォントの紹介。

メジャーに使われているアイコンフォントと、最近登場したアイコンフォントを中心に紹介していきます。アイコンフォントを使うとフォントファイルと1つのCSSファイルで多数のアイコンを導入できるので便利です。 1. GLYPHICONS Bootstrapで使われているので…

小さくてシンプルなレスポンシブCSSフレームワーク「Skeleton」。Bootstrapに疲れた人はぜひ。

「Skeleton」はMITライセンスの軽量CSSフレームワークです。ページ内ではcsフレームワークではなくboilerplate (ボイラープレート)と説明されています。 小さくてシンプル=分かり易くて、使い易い。例えばランディングページやコーポレートサイトで最小限…