サイト構築
[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS
Post on:2015年4月27日
アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。 ↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。 びよ～んとなるのが、かなり気持ちい […]
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
Post on:2015年4月22日
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたア […]
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
Post on:2015年4月21日
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の […]
スマホ・タブレットのさまざまなデバイスの表示チェックに対応！レスポンシブの確認ができる無料オンラインツール -.resizr
Post on:2015年4月20日
iPhone 4, 5, 6, 6+をはじめ、Android各機種のスマホ、iPad, Surface, Kindleなどのタブレットのさまざまなスクリーンサイズをエミュレートし、それぞれのサイズでWebページがどのよう […]
[CSS]ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ
Post on:2015年4月16日
Webページを作成している時に、意図しないのにできてしまう隙間の原因とその解決方法を紹介します。 Mind The Gap: Six Causes of Unwanted Spaces In Page Layouts
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
Post on:2015年4月15日
YouTubeやVimeoやDairyMotionをはじめ、VineやTEDなどの動画、ツイート、CodePenやJSFiddleなどのコード、PDF、Googleマップなど、さまざまなメディアをWebページに簡単に埋め […]
ヘッダ、フッタ、ナビゲーション、見出しなど、Webサイトでよく使うパーツのデザインを集めたギャラリーサイトのまとめ
Post on:2015年4月14日
ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーション […]
グラフィックアプリは必要無し！ワイヤーフレームをHTMLベースで簡単に作成できる -Shireframe
Post on:2015年4月14日
IllustratorやSketchなどのグラフィックアプリ無しで、ワイヤーフレームをHTMLベースで作成できるスクリプト「Shireframe」を紹介します。 HTMLは通常通りでOK！ブラウザ枠や落書き風のスタイルは […]
reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
Post on:2015年4月13日
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェク […]
ロゴをデザインする時に役立つ！便利なオンラインサービス・無料素材のまとめ23選
Post on:2015年4月10日
個人ブログでも企業サイトでも新しいサービスを立ち上げる時に重要なのは、ロゴのデザインです。ロゴの作成は、デザインセンスがある人には簡単な作業でも、デザインが苦手な人にとっては悪夢かもしれません。 ロゴのデザインやカラーや […]
sponsors
