タグ エレメント
人気順 5 users 10 users 100 users 500 users 1000 users[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス
2017/11/06
92 users
コリス
Flexbox
フレームワーク
コンポーネント
CSS
既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。 デザインにも幅広く対応してい... 続きを読む
プロペラがすごい！よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller | コリス
2017/02/28
74 users
フレームワーク
コンポーネント
Flexboxベース
コリス
最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。 Propeller Propeller -GitHub Propellerの特徴 Propellerのスタイル・コンポーネント Propellerの特徴... 続きを読む
ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma | コリス
2016/02/05
444 users
フレームワーク
Flexboxベース
CSS
Bulma
全部
外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワークを紹介します。 一部だけ利用してもよし、もちろん全部を利用 ...記事の続きを読む 続きを読む
これは面白い！Photoshopで高性能なHTML/CSSエディタが使えるようになるプラグイン -HTML Block | コリス
2015/09/10
107 users
Bootstrap
コリス
Photoshop
CSS
コード
PhotoshopのPSD上に、HTMLとCSSのコードでエレメントを作成できるPhotoshopのプラグインを紹介します。 外部スタイルシートにも対応した高性能で、Bootstrapのエレメントをといった使い方もできます。 HTML Block HTML Blockの特徴 HTML Blockのダウンロードとインストール HTML Blockの使い方 HTML Blockの特徴 HTML Blo... 続きを読む
Sketchを更に便利にパワーアップするプラグインのまとめ | コリス
2015/07/17
111 users
Photoshop
エフェクト
コリス
オブジェクト
フォント
Sketch Toolbox (無料) Photoshopで言うところのExtension Managerで、Sketch用のプラグインマネージャーです。プラグインを探すのにもインストール・アンインストールするのにも非常に便利なアプリです。 Sketch Measure (無料) テキストやエレメントなど、さまざまなオブジェクトのサイズ、形、カラー、エフェクト、フォントの種類・サイズなどの情報を1... 続きを読む
[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js | コリス
2015/06/30
90 users
コリス
script
プルダウン
Body
Step
デモページ 物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。 Dynamics.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="dynamics.js"></script> </body> Step 2: JavaScript 適用するエレメントを指定... 続きを読む
デザインの参考になるUIエレメントが揃ってる！次のプロジェクトに役立つユーザインターフェイス用の無料素材 -Elixir | コリス
2014/12/22
92 users
Elixir
コリス
UIエレメント
Photoshop
参考
さまざまなバリエーションが揃っており、デザインのクオリティも素晴らしく、商用サイトにもそのまますぐに利用できるUIエレメントが揃ったPhotoshopのPSD素材を紹介します。 単に使用するだけでなく、レイアウトのバリエーション、エレメントの展開など、デザインの勉強にも役立ちます。 Elixir -PSD UI Kit デモ版と有料版があり、デモ版でもその充実度はかなりのものです。 ダウンロードで... 続きを読む
iOS8のデザインに役立つ！iPhone 5s/6/6Plusでの主要なエレメントが揃ったPSDとSketchの無料素材 -iOS8 UI Design Kit | コリス
2014/12/05
94 users
コリス
psd
Sketch
iOS8
iPhone 5S
スマホやWebなどのUXデザイナーのためのプロフェッショナルツールを数多くリリースしている「UX Pin」の中の人から、「iOS 8のUIキットをリリースしたよ」と連絡を受けたのでご紹介。 UI/UXを研究している彼らな...記事の続きを読む 続きを読む
[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate | コリス
2014/11/26
54 users
Modernizr
コリス
head
jquery.js
デモ
デモ：Safari/OS Xで表示 フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="j... 続きを読む
Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize | コリス
2014/11/11
237 users
ユーザエクスペリエンス
Materialize
コリス
商用
最近のWebページでよく使用されているさまざまなコンポーネントやエレメントがフラットにデザインされたCSSベースのフレームワークを紹介します。 オープンソースで、個人でも商用でも無料で利用できます。 Materialize Materialize -GitHub MaterializeはGoogleが提唱する「Material Design」をベースに、ユーザエクスペリエンスにフォーカスされたCS... 続きを読む
スタイルガイドや指示書に便利！エレメントやマージンのサイズを書き出してくれるPhotoshopのスクリプト -Size Marks | コリス
2014/10/30
80 users
コリス
ink
マージン
Photoshop
スクリプト
エレメントやマージンなど、指定した箇所のサイズを新規レイヤーに書き出すPhotoshopのスクリプトを紹介します。 個人でも商用でも無料で利用でき、ライセンスはMIT licenceです。 Size Marksを使ってるアニメーション（偶然両方とも173pxになってびっくり！） 以前紹介したInkも同様にサイズを書き出してくれますが、ベクターとテキストのデータのみです。エレメントがベクターならIn... 続きを読む
Bootstrap 3をベースにしたフラットなかわいいデザインのHTMLとPSDが揃ってる無料のUI素材 -Druken Parrot UI Kit | コリス
2014/10/27
365 users
コリス
psd
GitH
Bootstrap
free
BootstrapのさまざまなエレメントがかわいくフラットにデザインされたUI素材を紹介します。 Drunken Parrot UI Kit Lite (free) Druken Parrot UI Kit -GitHu...記事の続きを読む 続きを読む
これはイイ！150種類のさまざまな美しい光のエフェクトが描けるPhotoshopの無料ブラシ -ArDesign | コリス
2014/10/20
89 users
コリス
LIG
Photoshop
エフェクト
イイ
文字やエレメントに加えたり、背景に添えたり、デザインのちょっとしたアクセントにぴったりな美しい光のエフェクトが描けるPhotoshopの無料ブラシを紹介します。 アニメとかマンガの閃光や爆発にも使えそう。 150 Lig...記事の続きを読む 続きを読む
UIデザインの腕が上がるPhotoshopのチュートリアルのまとめ | コリス
2014/10/14
224 users
ブラー
縦長
コリス
ディテール
Photoshop
UIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザイ...記事の続きを読む 続きを読む
Webページで使用されている63種類のUIデザインの特徴と実装の注意点がまとめられた無料のeBook -UXPin | コリス
2014/10/01
112 users
UXPin
コリス
ebook
ワイヤーフレーム
本書
Webページで実際に使用されている63種類のさまざまなUIデザインのパターン、エレメントの使い方、コンテンツの見せ方・そしてそれらの実装の際の注意点などを一冊のPDFにまとめた無料のeBookを紹介します。 Web UI Design Patterns 2014 本書は以前、紹介したUXPinのシリーズで、ウェブ制作の参考になるPDFが他にも無料でダウンロードできます。 ワイヤーフレームや最近のU... 続きを読む
SVGや動画、CSSアニメーションを使った面白いアイデア満載！じっくりチェックしておきたい最近のWebサイトのまとめ | コリス
2014/09/24
77 users
コリス
SVG
アニメーションエフェクト
ベクターデータ
動画
まだまだ魅力溢れるスクロールエフェクト、SVGなどのベクターデータや動画を使った演出、ユーザーを楽しませたり注目を得るアニメーションエフェクトなど、面白いアイデア満載のWebサイトを紹介します。 Garden 制作のコンセプト：Garden Estúdio 秋を感じるカラースキームとイラストだけがこのサイトの魅力ではありません。公園のモニュメントをモチーフにしたSVGの素敵なエレメント、スクロール... 続きを読む
[JS]エレメントやスライドにさまざまなアニメーションを適用できるスクリプト -Pogo Slider | コリス
2014/09/17
53 users
コリス
jQuery
div
head
jquery.js
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link re... 続きを読む
配色のセンスも参考になる！今チェックしておきたい「ソリッド」を効果的に使ったUIキット・ページレイアウトのまとめ | コリス
2014/08/05
114 users
コリス
矩形
ソリッド
ダイアモンド
PSDファイル
ソリッドなラインを使ったアイコン、テキストを矩形で囲ったゴーストボタン、ラインで描いた幾何学模様など、ソリッドを使ったUIキット、Webページやアプリのレイアウトやテンプレートを紹介します。 いくつかはPSDファイル（無料/有料）もダウンロードできます。 BrandaLoka 斜めのグリッドをはじめ、ダイアモンドやサークル状のエレメントなどにソリッドを取り入れたスタイリッシュな縦長1ページ用のテン... 続きを読む
これは貴重！商用利用無料のかっこいい動画素材がダウンロードできる -Mazwai | コリス
2014/07/31
274 users
Mazwai
コリス
スクリプト
配慮
背景
背景いっぱいに動画を表示したページを作りたい！ でも動画をつくるのは大変、、、そんな時にはかっこいい動画素材が揃った「Mazwai」。 Mazwai Mazwaiの紹介の前に、、、動画をページに使いたい時は、先日紹介したスクリプトがスマホも配慮されており簡単です。 動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide MazwaiではまさにWebページで... 続きを読む
[CSS]ぼよよーんと気持ちいいアニメーションでエレメントをページに表示させるスタイルシートのテクニック | コリス
2014/07/29
64 users
ょー
アニメーションgif
見出し
コリス
アニメーション
パネルを構成する画像、ラベル、見出し、テキスト、そして全体をそれぞれ個別のタイミングでぼよよーんと気持ちよく弾むアニメーションで表示するスタイルシートのテクニックを紹介します。 使いどころは限られるけど、こういうの好き。 上記はデモをアニメーションgifにしたもので、実際の動作は下記ページでお楽しみください。 bounceIn animated 実装はこんな感じになります。 HTML HTMLは、... 続きを読む
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide | コリス
2014/07/25
171 users
jQuery
div
WebM
vide
代替
,mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 Vide Vide -GitHub Videのデモ Videの使い方 Videのデモ デモでは、動画がブラウザいっぱいの背景として表示されています。 モダンブラウザ、IEは9+で... 続きを読む
Web制作時に備えておくと便利なチートシートのまとめ（iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ） | コリス
2014/07/24
526 users
GitHub
Git
iOS
Emmet
コリス
iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。 Web制作時によく使うサイズとかスニペットとかショートカットとか、チート... 続きを読む
ワイヤーフレームをIllustratorで作成している人に！100種類以上のエレメントが揃ったスマホ用ワイヤーフレームのベクター素材 | コリス
2014/07/16
70 users
コリス
ワイヤーフレーム
Illustrator
iOS用
今週末までの期間限定で、通常有料のiOS用のワイヤーフレームのベクター素材が無料でダウンロードできます。 Indranil Wireframe ダウンロードできるワイヤーフレーム素材には20ページ分のワイヤーフレームと100個のグラフィックエレメントが含まれています。 20ページ分のワイヤーフレーム Retina対応で高解像度 素材のフォーマットはAIで、拡大・縮小はもちろん、編集も可能です。 I... 続きを読む
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ | コリス
2014/06/24
146 users
コリス
Codrops
SVG
ウェブページ
チュートリアル
最近は海外だけでなく、日本でもSVGを使用しているサイトを見かけることが多くなってきました。SVGをアイコンやエレメントに使ったり、アニメーションと組み合わせた面白いエフェクトを取り入れたりなど、さまざまです。 いつかプロジェクトで使いたくなるようなSVGのチュートリアルをCodropsから紹介します。 Creating a Border Animation Effect with SVG and... 続きを読む
商用にも無料で使える！レスポンシブ用の200種類以上のコンポーネントが収録されたPSD素材 -Sally Blocks | コリス
2014/06/10
83 users
コリス
フォーマット
各エレメント
コンポーネント
テキスト
200種類以上のコンポーネントに、さまざまなエレメントやブロック、スタイルが収録された、レスポンシブ用にデザインされたPSD素材を紹介します。 Sally Blocks PSD素材には、レスポンシブ用のさまざまなエレメント、コンポーネント、スタイルが収録されています。 各エレメントはベクターなのでサイズやカラー変更、テキストの変更なども簡単におこなえます。 ダウンロードできるファイルのフォーマット... 続きを読む