サイト構築
手書きのようなSVGアニメーションの作り方 -文字や図形を一筆書きのように線・ラインで描く
Post on:2017年4月4日
文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。 下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミング […]
CSS Grid Layoutに触れてみよう！ CSS Grid Layoutのテンプレート定義を簡単に作成できるジェネレーター
Post on:2017年4月3日
Webページをレイアウトする際にfloatを使って、そして去年あたりからはflexboxを使っての実装が増えてきたと思います。 CSS Grid Layoutはようやくすべてのデスクトップブラウザでサポートされたばかりで […]
Web業界は進化が速い！自分がHTML, CSS, JavaScriptで何を知らないか、スキルをチェックができる -Know it all
Post on:2017年4月3日
HTML, CSS, JavaScriptをはじめ、Web制作に必要とされる知識で何を知らないかが分かり、自分のスキルをチェックできる「Know it all」を紹介します。 自分の現状を知ることで、次に何をすべきかに役 […]
神は細部に宿る、デザインの徹底的なこだわりがすごいクリエイターたちのポートフォリオサイトのまとめ
Post on:2017年3月30日
Webデザインのセンスを磨く方法の一つは、優れたデザインを数多く見ること。 デザインの細部に至るまでの徹底的なこだわり、気持ちのいいインタラクションやアニメーション、素晴らしいアイデア満載のUIを備えたWebサイトを紹介 […]
[CSS]Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意
Post on:2017年3月30日
ブラウザごとに異なるHTMLの各要素のスタイルを消去（Reset）するのではなく、スタイルを正常化（Normalize）するNormalize.cssが、2017年3月26日にアップデートされました。 2016年10月3 […]
CSS Gridを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか
Post on:2017年3月29日
CSS Gridは先日リリースされたChrome 57がサポートし、デスクトップ用のすべてのブラウザで利用できるようになりました。 floatやflexbox、vertical-alignやinline-blockなど、 […]
ランディングページをデザインする時に役立つレイアウトのアイデアがまとめられたPhotoshop, Sketch対応の素材
Post on:2017年3月28日
企業サイト、プロダクト、コマース、ポートフォリオ、ブログなど、ランディングページ用の120種類のレイアウトとUIエレメントのデザインのアイデアがまとめられたUI素材を紹介します。 高価な有料素材ですが、今週末まで無料なの […]
[CSS]デスクトップ・スマホ対応、浮かんだり光ったりアニメーションするボタンを簡単に実装できるスタイルシート
Post on:2017年3月28日
外部ファイルを一つ加えるだけで、さまざまなボタンを簡単に実装できるスタイルシートを紹介します。 鋭角や角丸の矩形、楕円形、ハンバーガーメニューに使われる円形、グラデーションやフラット、ゼリーみたいなボタンもあります。 B […]
[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！
Post on:2017年3月27日
文字の半分で異なるカラー、ブラックとホワイトにするCSSのテクニックを紹介します。もちろん、他のカラーでも利用でき、レスポンシブにも完全対応しています。 最近増えてきた2分割のレイアウトにも使えますね。 Vertical […]
最近のWebを象徴するカード型コンポーネントをデザインする時のポイントまとめ
Post on:2017年3月24日
ここ1, 2年で、カードのコンポーネントを採用しているWebサイトは非常に増えました。レスポンシブとも相性がよく、情報を分かりやすく整理でき、テキストや画像だけでなく、動画などのマルチメディアも要素として配置することがで […]
sponsors
