レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ

bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。

デモのキャプチャ

Restive.JS
Restive.JS -GitHub

表示しているデバイスを自動検出し、bodyや各要素に任意に定義したブレイクポイントごとのclassを付与します。ブレイクポイントはピクセルと解像度、プラットフォームやデバイスの種類や向きの判別にも対応。

続きを読む

Webアクセシビリティが今熱い!基本からしっかりと学びたい、より深く身につけたい人にオススメできる本

Webサイトやアプリにおけるアクセシビリティについて学んでみたい、そして身につけたい、と考えている人は多いと思います。

「WAI-ARIA」「Web標準」「セマンティック」など、アクセシビリティに関する用語の解説レベルだけでなく、実務ですぐに使える具体的な方法も数多く掲載されたオススメの本を紹介します。
アクセシビリティってこういうことだったんだ!と分かる一冊です。

本のキャプチャ

続きを読む

デザインで色の組み合わせを決めるのに役立つ便利なオンラインツールのまとめ

一つのカラーを元にそれにあったカラーパレットやグラデーションを作成したり、トレンドカラーを使った配色サンプル、アクセシビリティガイドラインに沿ったカラーパレットなど、配色設計に役立つオンラインツールを紹介します。

サイトのキャプチャ

Coolors

オススメの組み合わせを次々に表示してくれるオンラインサービス。
スペースキーor右のアイコンでランダムカラー、ロックでカラー固定、さまざまなファイル形式にエクスポートもできます。

続きを読む

[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll

コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。

スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。

サイトのキャプチャ

eco Scroll
eco Scroll -GitHub

続きを読む

描きこまれた小さな草花がかわいい!シームレスに使えるフローラル柄のテクスチャとパターン素材

小さい草や花が細かく描きこまれたフローラル柄のテクスチャ素材とパターン素材を紹介します。どちらもシームレスに使えるので、大きな画像として利用できます。

通常は有料ですが今週末まで無料なので、ダウンロードはお早めに!

素材のキャプチャ

Ditsy Floral Digital Paper & Pattern

続きを読む

Bootstrapで作られたとは思えないほど洗練されたデザインのWebサイトのまとめ

Bootstrapで作ると似たデザインになってしまうのでは?
と、使用するのを躊躇している人は間違い。使い方はあなた次第です。

Bootstrapを使用して制作され、さまざまなアイデアが盛り込まれた洗練されたデザインのWebサイトを紹介します。

サイトのキャプチャ

Imagina nas Ferias

サイトのキャプチャ

Drury Buildings

続きを読む

HTML5のW3C正式勧告に完全対応、読みやすい分かりやすい使いやすいと三拍子揃ったHTML5&CSS3のリファレンス本

HTML5とCSS3/2.1で利用できる要素やプロパティについて、機能や役割や対応ブラウザなど実装に必要な知識がコンパクトにまとめられたオススメのリファレンス本を紹介します。

リファレンス本って、気がつくと古くなってたりしませんか?
本書は2015年1月時点の最新情報が掲載されており、去年暮れリリースのHTML5のW3C正式勧告にも完全対応しています。

本のキャプチャ

続きを読む

ダウンロードしておきたい!新着満載フリーのデザインフォントのまとめ -2015年3月

最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。

フォントのキャプチャ

Chameli Sans Typeface
個人利用無料(商用も可か確認中)。

なんとレスポンシブ対応のフォントがついに!
文字の全体的な印象はそのままで、タブレット・スマホ、そして時計のような小さいスクリーンのそれぞれで美しく表示されるようデザインされています。

フォントのキャプチャ

Aileron
個人・商用利用無料。

16ウェイトが揃ったクセのないシンプルなフォント。

続きを読む

 1 2 3 4 5 ... 609 610 Next

top of page

©2015 coliss