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

ウェブ開発ウェブデザイン CSS Javascript SEO

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

2016-07-29

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

ウェブ開発 javascript CSS HTML5 ダイエット

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

2015-07-16

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

CSS CSS3

.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…

2015-07-10

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

CSS ウェブデザインレスポンシブデザイン

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

2015-07-09

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

CSS ウェブデザイン

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

2015-07-08

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

CSS ウェブデザインマテリアルデザイン

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

2015-07-07

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

CSS SVG Javascript ウェブデザイン

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