読者です 読者をやめる 読者になる 読者になる

webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

ウェブデザイン

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

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

小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ3選。

写真はうちのみーこ。スマホでも見やすいグラフを使う機会があるプログラマ・デザイナーの皆さまへ。小さいグラフを綺麗に描画できるJavascriptのライブラリを紹介します。 1. Peity http://benpickles.github.io/peity/HTMLの要素をSVGの小さいチャートに変…

マテリアルデザインのアニメーション大全サンプル集付き。

Photo credit: Gattou - Lucie Provencher※2015/11/9日時点の情報です。いま流行中のマテリアルデザインの肝は?と聞かれるとやっぱりアニメーションですよね。シンプルなアニメーションによってユーザーインターフェイスの意図が伝わり易くなります。マテリ…

水滴がみずたまりに落ちて広がるCSS3エフェクト

.drop { position: relative; width: 20px; height: 20px; top: -30px; margin: 0 auto; background: #FFF; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -moz-animation-name: drip; -webkit-animation-name: drip; anima…

マテリアルデザインの構成を3Dに配置した動くイラスト

最近3Dに表示して少しアニメーションさせるエフェクトが人気です。CSS3で実装されています。codepen.ioアニメーションがあると次にどうなるんだろうとユーザーの注目を集めます。いままでは画像がぼんやり表示されたりするエフェクトや、パララックスのよう…

express-dustjs+JSONで作られたシンプルな個人プロフィールサイト

個人のポートフォリオを掲載したりするプロフィールサイトを無料サービスを使ったり、ちゃんとサイトを作ったりと準備しているエンジニア/デザイナーも多いと思います。christophior/JSONConfigurablePersonalSiteはexpress-dustjs+JSON(プロフィールデータ…

はてなブログは直接CSSを書けるのでCSS3のデモを試す

@import url(http://fonts.googleapis.com/css?family=Lobster); @-webkit-keyframes fly { to { transform: rotate(180deg); } } @-webkit-keyframes shadow { from { text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); } to { text-shadow: 4px 0 0 rgba(0, 0, 0,…

スクロールすると背景画像がぼやけて文字が上にのるエフェクト

数行のjavascriptと短いCSSで作られた背景画像をぼやかして文字が上によるエフェクトです。codepen.io文章を読ませるエフェクトとして良いですね。

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

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

プラズマが揺らめくHTML5グラデーションのデモ

HTML5のcanvasのcreateRadialGradientを進使ったデモです。短いjavascriptで作られています。codepen.ioCanvasはGoogleChromeだとだいぶ高速化がんでだいぶ使いやすくなっていますが、Firefoxなど他ブラウザだとやっぱり遅い…

ブラウザにログを美しく表示するrtailが良い感じ

rtailはターミナルに出力される内容をそのままウェブブラウザで(美しく)表示することができるnode.jsで作られたツールです。Terminal output to the browser in seconds, using UNIX pipes.rtail.orgkilianc/rtailgithub.com

はてなブログのタイトル部分にCSS3で回るリングエフェクト追加してみた

はてなブログのデザイン変更でブログタイトル部分にCSS3でゆらゆら回るダブルリングのエフェクトを加えてみました。この記事ではこのカスタマイズ方法を説明します。 PCでの見た目 PCブラウザで見るとタイトルの文字の中心をぐるぐる回っています。 スマホで…

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

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

マテリアルデザイン(Material Design)フレームワークのリンク集

マテリアルデザインのガイドラインを出していたGoogleから公式のフレームワークも登場するなど、今年に入ってマテリアルデザインフレームワークが充実してきました。マテリアルデザインが盛り上がる背景として、ウェブページとアプリの両方で使いやすい(特…

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

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

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

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

ウェブページでマインドマップを見せるにはjsMindがベスト

jsMindはJavascriptで作られたマインドマップです。HTML5とCanvasを使っています。ライセンスは3条項BSDライセンスです。

Bootstrap + jQueryでレスポンシブ対応のカウントダウンするプラグイン

カウントダウンするプラグインはたくさんありますが、これはBootstrapで使うことを前提としたプラグインです。MITライセンスです。使い方は以下の通りです。分かりやすくて良いですね。 jQuery(window).load(function () { $('#countdown').countdown("2015/…

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

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

メール開封のCSSアイコンがぐりぐり動く

封筒を押してみてください。メールを開くエフェクトが表示されます。codepen.ioHTMLとCSSで実装されておりJavascriptを利用していません。keyframesなどCSSアニメーションを使った実例が増えるにつれて、仕組みがだいぶ分かりやすくなってきましたね。

マテリアルデザイン風ボタンがプレステのコントローラーのような4つの小さなボタンに分かれるCSS

"+"の箇所にマウスカーソルを合わせてください。マテリアルデザイン風アクションボタンが4つの小さなボタンに分割します。プレステのコントローラーみたいです。codepen.ioアイコンはfont-awesomeを利用していますが、ボタン分割のエフェクトはCSSだけで実装…

背景画像を今風にぼかす軽量jQueryPlugin"background-blur"

背景画像をぼかす(Blur)jQueryPluginの"background-blur"の紹介です。使い方は簡単でjsファイルを読み込んで上書きする要素(id='some-element')を指定するだけです。 <script src="jquery.min.js"></script> <script src="background-blur.min.js"></script> <div id='some-element'></div> $('#some-element').backgroundBlur({ imageURL : 'http://URL-of-the-image', blu…

D3でビジュアライゼーション好きのみんなに朗報。"awesome-d3"が登場。

カテゴリー別に厳選されたリンク集"awesome-x"シリーズのd3.js版が登場しました。

130種類以上!WEBフレームワーク/ブランド/アプリのSVGアイコン "SVGPORN"

Font-AwesomeにはWEBのアプリ/フレームワーク/ブランドのアイコンが100種類以上登録されていますが、"SVGPORN"にはSVGでアイコンが100種類以上、登録されています。ライセンスはCC0 1.0 Universal。著作権なしです。全てSVGファイルですのでどんなサイズで表…

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

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

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

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

アクセシビリティを見える化するJavascript "tota11y"

tota11yはウェブページのアクセシビリティを見える化するJavascriptで作られたツールキットです。MITライセンスで提供されています。 tota11y – an accessibility visualization toolkit by Khan Academykhan.github.io ウェブページ/ウェブブラウザの進化に…

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

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

マテリアルデザイン(Material Design)のcssやフレームワーク

ぼくはbootstrap + Paperを使う事がおおいのですが他にも良さげなcss/フレームワークがありますのでこの記事にまとめて行きます。 1.Materialize Documentation - Materializematerializecss.com bootstrapを使わずにレスポンシブなマテリアルデザインに向い…