レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説

レスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。

さらに複雑しているのが配置の名称。
Static, Absolute, Relative, Fixed、、、スタティックとはどこが静的なのか、アブソリュートはどこに依存するのか、それらがよく分かるアニメーションを使った解説を紹介します。

サイトのキャプチャ

Positioning in web design

続きを読む

[JS]簡単で楽ちん!さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs

CSS3を使った軽量でかっこいいさまざまなアニメーションでコンテンツを表示するタブコンテンツを実装するjQueryのプラグインを紹介します。

タブコンテンツのスタイルも豊富に用意されており、シンプルなHTMLで簡単に実装できる優れ物です。

サイトのキャプチャ

PWS Tabs -GitHub

続きを読む

2015年これからのWeb制作業界の流れ、伸ばしておきたいスキル、Webデザインのトレンドなどのまとめ

数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。

注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。

2015年これからのWeb制作業界の流れ、Webデザインのトレンドなどのまとめ

写真:re:splashed

続きを読む

Material Designに備えておこう!さまざまなUIコンポーネントが揃ってるPSDとSketch用の無料素材 -Android Lollipop UI Kit

2015年注目のMaterial Designをベースにした45種類のUIコンポーネントが揃ったAndroid Lollipopのユーザインターフェイス用のデザイン素材を紹介します。

iOS版Chromeも先日のアップデートでUIが一新され、Material Designが採用されました。
今年はフラットデザインから進化したMaterial Designがガンガンきそうですね。

サイトのキャプチャ

Android Lollipop UI Kit

続きを読む

2014年、デザインやコンセプトが素晴らしかったWebサイトのまとめ -Best Website Designs of the Year 2014

UIデザインの有益な情報を提供しているzitrusfrischから、2014年にそのコンセプトやデザインが素晴らしかったクリエイティブなWebサイトを紹介します。

サイトのキャプチャ

MMXIV -Best Website Designs of the Year 2014

続きを読む

商用利用無料!日本の文化を伝えるシンプルでかわいいアイコン素材、コリス限定全員にプレゼント!

お馴染みの freepik.com 提供によるベクター素材をコリス限定で全員にプレゼント!
もちろん個人でも商用でも無料で利用できます。

今回は、日本の文化を伝えるシンプルでかわいいベクターのアイコン素材!

素材のキャプチャ

続きを読む

レトロな感じがかわいい!ロゴのデザインにも使える日本語のフリーフォント -コーポレート・ロゴ

企業やサービスで使われているようなモダンでシンプルなロゴ文字をイメージしてデザインされたフリーの日本語フォントを紹介します。

刻ゴシック刻明朝」をリリースされている作者様の新作で、連絡をいただきました!

フォントのキャプチャ

フォント:コーポレート・ロゴ
イラスト:Japan Vector

続きを読む

[CSS]classの命名など気になるテクニックがいろいろ取り入れられているレスポンシブ対応のフレームワーク -Skyline

大規模サイトから個人のポートフォリオやブログまで、さまざまなデザインをサポートするための汎用性に優れたアーキテクチャで設計されたCSSのフレームワーク「Skyline」を紹介します。

サイトのアニメーション

Skyline
Skyline -GitHub

続きを読む

 1 2 3 4 5 ... 599 600 Next

top of page

©2015 coliss