サイト構築 -実装
Googleフォントで好みのフォントを見つけるのはなかなか大変だけど、これを利用すると簡単に探せる！ -Font Library
Post on:2015年8月5日
Googleフォントでフォントを探す時は名前が分かっていれば簡単ですが、デザインやスタイルから探す時はなかなか大変です。 フィルタのカテゴリは、5つしか分類されていません。 Googleフォント
[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js
Post on:2015年8月5日
スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。 ランディングページや使い方ページで […]
ベジェ曲線が苦手な人に！PhotoshopとIllustratorのペンツールで思い通りに描けるようになる知って得する2つのこつ
Post on:2015年8月4日
ペンツールは、PhotoshopとIllustratorで最も重要なツールの1つです。ペンツールを楽に使えるようになると、デザインの新しいチャンスが広がり、ワークフローも大きく改善されるでしょう。 PhotoshopとI […]
Bootstrapで最近人気の高いレイアウトやコンポーネントを簡単に実装できるテンプレートのまとめ
Post on:2015年7月31日
上部固定のScrollspy対応ナビゲーション、アニメーションがかっこいいオフキャンバスメニュー、ブラウザの高さいっぱい・半分に画像を配置、複数のコンテンツを配置するレスポンシブ対応のコンポーネントなど、最近よく見かける […]
Webデザイン、プレゼンや企画書に効果がある空白スペースを活かしたデザインの作り方
Post on:2015年7月30日
空白スペースとはテキストやイメージや飾りがないスペースのことで、明瞭や強調、グルーピングといったあなたのデザインを助けることができる重要なデザイン要素です。 デザインのセンスがアップする空白スペースを活かしたデザインの作 […]
[JS]画像を拡大表示するLightboxの進化形、デバイスごとに異なる設定も可能な高性能な軽量スクリプト -Chocolat
Post on:2015年7月30日
デスクトップ、タブレット、スマホのそれぞれに合わせた方法で、指定したエリアやウインドウいっぱいに画像を拡大表示したり、そのまま複数の画像を表示するスライダーにすることもできる、軽量で高性能な画像を拡大表示するスクリプトを […]
High Performance HTML -さまざまなデバイスに配慮されたクリーンで簡潔なHTMLの書き方
Post on:2015年7月28日
多くのWeb制作者はパフォーマンスというと、JavaScriptや画像の最適化、サーバーの設定、CSSなどのファイルの圧縮や結合を検討します。そして、Webページのコアとなる言語にも関わらず、HTMLは無視されがちです。 […]
これでもうアイコンを探す手間がなくなる！PhotoshopやIllustratorで利用できるアイコン素材を簡単にダウンロードできる無料アプリ -Icons8 App
Post on:2015年7月27日
Macだとツールバーから、Winだとタスクバーから、14,700個のアイコンがコピペやドラッグ&ドロップでPhotoshop, Illustrator, Sketch, Officeなどのさまざまなソフトウェアで […]
[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル
Post on:2015年7月27日
レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 Breadcrumbs & Multi […]
CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ
Post on:2015年7月24日
大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分が見ても分かる、メンテナンス性に優れ、一貫性のあるCSSを書くのに役立つガイドラインやスタイルガイドを紹介し […]
sponsors
