レスポンシブ対応、縦長ページで見かけるさまざまなUIコンポーネントを備えたHTML/CSSのテンプレート -Shards | コリス

2017/11/15 59 users Bootstrap コリス MITライセンス CSS HTML

最新のBootstrap 4をベースに、ランディングページやスマホアプリのプロモーションページなど、縦長ページでよく見かけるさまざまなUIコンポーネントを備えたHTML/CSSテンプレートで構成された無料のUIキットを紹介します。 もちろんレスポンシブ対応で、非常に軽量に構築されているので、快適に利用できます。 Shards Shards -GitHub Shardsは MITライセンス 、個人で... 続きを読む

最近よく見かけるレスポンシブ対応のUIコンポーネントやレイアウトがよく分かるHTML, PSD, Sketchの素材 -Now UI Kit | コリス

2017/06/13 66 users Bootstrap コリス psd Sketch レイアウト

最近のWebサイトやスマホアプリでよく見かける、Bootstrap 4をベースにした180種類以上のUIエレメントやコンポーネント、50種類以上のレイアウト、それらがPSDとSketchファイル、そしてHTMLも揃った無 ...記事の続きを読む 続きを読む

[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間 | コリス

2017/03/09 140 users パディング padding margin コリス マージン

CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？ Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。 下記のように3つの要素間にある2つのマージン指定も、first-childやlast-childでネガティブマージンを使わずに指定する巧い方法に、目からウロコです... 続きを読む

CSSの単位（em, rem）を使った、これから取り入れていきたい実装テクニックのまとめ | コリス

2016/09/23 409 users rem コリス UIコンポーネント CSS 単位

CSSの相対的な単位（em, rem）を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units ... 続きを読む

オラクル、エンタープライズアプリ向けJavaScriptライブラリ「Oracle JET」をオープンソースで公開。SPA、UIコンポーネント、レスポンシブ対応などを統合 － Publickey

2016/03/02 170 users Publickey ロケール SPA オラクル 統合

オラクルはエンタープライズアプリケーション向けのJavaScriptライブラリ「Oracle JET」（Oracle JavaScript Extension Toolkit）をオープンソースで公開しました。 Oracle JETは、28の言語と160以上のロケールを備えたアプリケーションの国際化やテンプレートベースのSingle Page Application開発などをサポート。同社が以前から... 続きを読む

[iOS 9] ノンコーディングで Storyboard を分割できる Storyboard Reference ｜ Developers.IO

2015/10/07 82 users iOS ノンコーディング UIコンポーネント iOSアプリ

はじめに こんにちは、モバイルアプリサービス部の荒川です。 この記事では、Xcode 7 から追加されたUIコンポーネントの1つ Storyboard Reference について紹介します。 iOS アプリ開発で UI の作成に Storyboard を使用している方を、主な対象読者とします。 Storyboard・Segue と聞いて何かわからないと言う方は、 [iOS]これからiOSアプリを... 続きを読む

ExpandJS - 多くのUIコンポーネントと役立ちメソッドを備えたJavaScriptライブラリ MOONGIFT

2015/07/19 90 users MOONGIFT Polymer UIコンポーネント 関数

最近のWebはフラットなUIが主流で、かつユーザのアクションに対して何らかのアニメーションを行うマテリアルデザインも取り込まれてきています。そのためにも多くのフレームワークが出ています。しかしそれらを導入するとしばりが強いと感じている人も多いでしょう。 そこでExpandJSの導入です。PolymerとGoogleのマテリアルデザインをベースに、80以上のカスタムエレメントと350を越える関数を提... 続きを読む

神アップデート！プロトタイピングツール「Prott」のワイヤーフレーム機能がめっちゃ良い！ | 男子ハック

2015/05/26 282 users プロトタイピングツール Prott プロトタイプ 男子ハック

@JUNP_Nです。超使いやすいと話題で多くの企業や教育機関が導入をしているプロトタイピングツール「Prott」が大型アップデートを実施。以前より導入が予定されていた「ワイヤーフレーム作成機能」をリリースしました。実際に触ってみると、今までのProttよりもはるかに便利にプロトタイプの作成が可能になっています。 iOS 8のUIコンポーネントなどを使えるワイヤーフレーム機能で、より速くプロトタイプ... 続きを読む

Illustratorをもっと楽しく！無料の高品質ベクター素材30個まとめ 2015年3月度 - Photoshop VIP

2015/03/24 56 users Illustrator テクスチャ UIコンポーネント 壁紙

不定期となりますがIllustratorで活用できる新作無料ベクター素材をまとめています。今回は、2015年3月度まとめとなります。 商用利用もできるiOS 8を完全再現したUIコンポーネントや、アイコン素材などウェブサイト制作でも重宝しそうなアイテムから、人気があるビンテージ系手書きデザインや、壁紙に利用したいテクスチャなどが揃っており、お気に入りのベクター素材を見つけてみてはいかがでしょう。 ... 続きを読む

JavaScript - Vue.jsで手軽じゃないアプリケーション構築 - Qiita

2015/03/16 107 users Qiita MVC MVVM AngularJS Vue.js

概要 Vue.jsは、MVVMというMVCの派生種を設計基盤として構築されたクライアントサイドJSフレームワークです。AngularJSと表面上は似ていますが、設計思想は全く異なるもので、作成したUIコンポーネントを組合せてページを構成することを前提にしています。 「Vue.jsで遊んでみた」のような記事はよく見るのですが、実際にプロジェクトとして走らせる場合に、アプリケーション構成からテストまで... 続きを読む

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

2015/01/23 70 users ユーザインターフェイス用 iOS版Chrome コリス

2015年注目のMaterial Designをベースにした45種類のUIコンポーネントが揃ったAndroid Lollipopのユーザインターフェイス用のデザイン素材を紹介します。 iOS版Chromeも先日のアップデートでUIが一新され、Material Designが採用されました。 今年はフラットデザインから進化したMaterial Designがガンガンきそうですね。 Android L... 続きを読む

iOSデザイン決定版！250個+のUIコンポーネントを収録した無料PSDキット「TETHR」 - Photoshop VIP

2014/09/08 107 users phot iPhone UIコンポーネント PSD素材

iPhoneで使われているOS、iOS 7で採用されている250種類以上のUIデザインを完全再現し、130種類のPhotoshopデザインテンプレートを収録したiOSデザインキット「TETHR – The Most Beuatiful iOS Deisgn Kit Ever Made」が公開されていたので、今回はご紹介します。 8つに分かれたPSD素材のファイルサイズも420MBと巨大で、Phot... 続きを読む

キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！ | HTML5Experts.jp

2014/07/07 139 users ionic AngularJS フレームワーク キミ とおり

連載： ハイブリッドアプリ開発最前線 (4) ionic 概要 ionicはそのサイトのデザインからも見てわかるとおり、シンプルかつ美しいUIを取り揃えたコンポーネント群で、Apache Cordova を拡張して作られているフレームワークです。 また、動的なUIコンポーネントを実装するために、 AngularJS を採用してる点もその特徴の1つです。 ionicがサポートしているプラットフォーム... 続きを読む

ニュース - HTML5モバイルアプリUIフレームワーク「Onsen UI」、アシアルがOSSとして公開：ITpro

2013/09/12 65 users ITpro TopCoat OSS フレームワーク アシアル

アシアルは2013年9月12日、HTML5ベースのモバイルアプリ用UIフレームワーク「Onsen UI」をオープンソースソフトウエア（OSS）として公開した。Onsen UIは、Angular.jsとTopcoatの2つのオープンソースソフトウエアをベースに、モバイルアプリ開発に特化したナビゲーション機能とUIコンポーネントを追加したフレームワーク。 続きを読む

PhoneGapで作ったアプリにネイティブのUIやアニメコードを呼び出させて高速化するSteroids.js | TechCrunch Japan

2013/08/21 72 users PhoneGap ネイティブアプリ AppGyver コード

Adobeのモバイルアプリ開発フレームワークPhoneGapは、HTML5とJavaScriptだけでモバイルアプリが作れるので、とても人気がある。しかし、一度書いたコードを再利用できてクロスプラットホームなのは結構でも、ネイティブアプリに比べると遅い。そこで、AppGyverが今日ローンチしたSteroids.jsは、PhoneGapのアプリがネイティブのUIコンポーネントや、ナビゲーション、ア... 続きを読む

モバイルアプリ向けJavaScriptフレームワーク「Junior」、Backbone、Zeptoなどを採用し、ネイティブのルック＆フィールを持つ － Publickey

2013/01/09 182 users Publickey Junior Backbone モバイル

Juniorは、Justin Martin氏が開発したフレームワーク。Martin氏は“My holiday project”としてJuniorを開発したとツイートしています。 Juniorの特徴は、モバイルに最適化したCSSトランジションによるスムーズな画像効果、zeptoやbackbone.jsなど多数のライブラリに依存していることなど。UIコンポーネントはRatchetを利用しているようで、... 続きを読む

ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI | コリス

2012/03/01 1316 users ウェブページ コリス UIコンポーネント オープンソース 通り

HTML5+CSS3+JavaScriptで制作されたオープンソースのUIコンポーネントコレクションを紹介します。 Chico UIの対応ブラウザは下記の通りです。 IE6には対応していませんが、十分でしょう。 対応ブラウザ Google Chrome Safari Firefox 4+ Internet Explorer 7+ Opera Chico UIのウェブページに使用するさまざまなUIコ... 続きを読む