タグ CSSフレームワーク
人気順 5 users 10 users 50 users 500 users 1000 usersこれまでとは異なるCSSフレームワークが登場! 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
これまでとは異なるCSSフレームワークが登場しました! Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数(カスタムプロパティ)で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラ... 続きを読む
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量(4kB)CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもし... 続きを読む
CSSを書くのが劇的に楽になる!ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳... 続きを読む
CSSファイルから未使用のスタイルを削除する方法 | コリス
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻... 続きを読む
2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス
Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。 mini.css -GitHub mini.css テンプレート一覧 モバイルデバイスと最新のブラウザを考慮して設計された軽量(7KB)CSSフレームワーク。ほとんどの... 続きを読む
Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた! - paiza開発日誌
2016 - 12 - 19 Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた! プログラミング初心者 プログラミング学習 開発ネタ どうも、まさとらん( @0310lan )です。 みなさんは、「 CSS フレームワーク 」を活用しているでしょうか? いきなり フレームワーク と聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は 誰でも利用... 続きを読む
【2016年版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10 |SeleQt【セレキュト】
フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源(リソース)を効果的に分配するのもプロとして欠かせない姿勢です。 本稿では2016年版Webデザイナーのための「CSSフレームワーク」ベスト10をご紹介します! フレームワークとは何か? ファイルとフォルダを含むパッケージのことです。CSSフレー... 続きを読む
【CSSフレームワーク】Bootstrap3の管理画面用テンプレートまとめ【全部無料】 - ウェブと食べ物と趣味のこと
2016 - 06 - 17 【CSSフレームワーク】Bootstrap3の管理画面用テンプレートまとめ【全部無料】 サイト運営 シェアする Twitter Pocket こんにちは。Webデザインはあまり得意ではないケーです。 デザインが苦手なエンジニアでもレスポンシブ対応済みのページを割りと簡単に用意できるのがCSSフレームワークです。 そんなCSSフレームワークの中で最も有名なのがBoots... 続きを読む
Bootstrap以外のCSS Frameworkを知らない人必見!CSSフレームワーク44選 | エンジニア転職求人情報×IT人材紹介@SAK
CSS Framework 2015年になったので、現状のCSSフレームワークをまとめてみました。Bootstrap以外にも沢山あります。 かなりの量があるのですが、単一機能のみ(グリッドだけとか)などもあります。 一通り見てみると、やはりBootstrapが良いなとは思うのですが、個人的にはSemantic UIが良いなと思いました。 名前空間の考え方や、設定はBootstrapが一番洗練されて... 続きを読む
npm + gulp + bower でビルド自動化 - GeekFactory
2014-07-02 npm + gulp + bower でビルド自動化 JavaScriptやCSSのビルドを自動化することで、手作業による無駄な時間やミスを削減できます。また、誰でもビルドできるようになるため、リリースのボトルネックを解消できます。 改善したいこと JavaScriptフレームワークやCSSフレームワークの依存関係を自動的に管理したい。ダウンロードして配置を手作業でやりたくな... 続きを読む
jagrid - Excel方眼紙をWeb上に再現! MOONGIFT
これは凄いかも知れない…。 最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。 日本の業務システムと言えばExcel方眼紙がデフォルトです(断定)。そのUIに慣れ親しんだ人のためのグリッドレイアウトフレームワークがjagridです。 jagridの... 続きを読む
HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - @IT
HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介... 続きを読む
カスタマイズ性抜群!Sassに対応したCSSフレームワークがアツイ! | 株式会社LIG
こんにちは。デザイナーのはるえです。 レスポンシブWEBサイトを作成する際に重宝されているCSSフレームワークですが、 「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込... 続きを読む
Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう! | HTML5Experts.jp
人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ! Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザイン... 続きを読む
フラットUI風、軽量&レスポンシブ対応CSSフレームワーク『Pure』 | IDEA*IDEA
Yahoo!が作っているCSSフレームワークですかね。軽量&レスポンシブ対応ですよ。Bootstrap的に気軽に使えそうです。 ↑ 導入はリンク一発でOK。 ↑ ボタン。全体的にフラットUI風です。 ↑ メニューとか。 コンポーネントはあまり多くないのでシンプルなウェブ用だとは思いますが、覚えておいても損はないですな。 » Pure 続きを読む
今年流行りのフラットなデザイン制作に役立つCSSフレームワークやPSD素材まとめ8つ - W3Q
【Flatstrap】 Twitter Bootstrapをフラットデザイン化したCSSフレームワーク。 Flatstrap by Littlesparkvt.com http://littlesparkvt.com/flatstrap/ Flatstrap by Littlesparkvt.com 続きを読む
にわかデザイン(1):HTML5+CSS3は「メニューの作り方」を覚えるだけ! (1/3) - @IT
Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思... 続きを読む
レスポンシブWebデザイン対応のCSSをカラム数やマージンを指定してダウンロードできる・34Grid - かちびと.net
昨日に続き今日も似たような内容 ですが。グリッドレイアウトの レスポンシブWebデザイン対応の CSSフレームワークですが、こちら はグリッドのカラム数やマージン を指定できます。 どんどん便利になりますね。最近同じ内容の記事ばかり書いてて自分がスパマーみたいな気分になってきましたが気にしないようにします。 34Grid グリッドレイアウト x レスポンシブなフレームワーク。DL前にカラム数などを... 続きを読む
今風のWebサイトが誰でも作れる!便利なCSSフレームワークのまとめ - NAVER まとめ
今どきはCSSフレームワークというのがあって、デザインが苦手でもそれっぽいウェブサイトを作ることが出来るらしいです。ということで、調べてみました。 更新日: 2012年07月09日RSS 続きを読む
これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 大人になったら肺呼吸
Twitterはじめに今、Twitter Bootstrapが一部のエンジニアで人気です。Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発/提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成することができます。そこで、これからTwitter Bootstr... 続きを読む
Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
個人的にいじっていて便利そうだったのでご紹介。 Bootswatchは、Twitter社が提供するTwitter Bootstrapのさまざまなテーマをダウンロードできるサイトだ。 Twitter Bootstrapといえば簡単に今風デザインのサイトを作れるCSSフレームワークだが、それで作ると「あー、黒いトップバーだし、Twitter Bootstrapね」的になってしまうのが難点だった。 最新... 続きを読む
レスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」 | DesignDevelop
様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に... 続きを読む
Twitter謹製のCSSフレームワーク『Bootstrap』が大幅バージョンアップ中! | IDEA*IDEA
以前ご紹介したBootstrapですが、良い感じにマイナーバージョンアップを繰り返しているようです。地味にウォッチしていたのですが、本日、v1.3.0になってかなり使いやすくなったので再度ご紹介。 ■ JavaScriptライブラリも出来た! これが一番うれしいぞ! 以前はドキュメンテーションがいまいちで、完全に動作させるにはデモページのJavaScriptを解析して・・・なんてことが必要だったの... 続きを読む
デザインが苦手なWebサービス開発者に朗報!今風のデザインがさくっと作れる『Twitter Bootstrap』が凄まじく充実している件 | IDEA*IDEA
土曜日の朝ですが、これはテンションがあがる!!! Twitter社から開発者むけに素敵なプレゼントですよ・・・これはすごい。今風のインターフェースがさくっと作れるCSSフレームワークですな。これだけでかなり高品質なデザインが実現できちゃうのではないでしょうか。 ↑ ここ最近で一番テンションあがった!Twitter△! すんごくたくさんの機能があるのですが、いくつかご紹介。 ↑ まずはグリッド。部品... 続きを読む
初心者の頃分からなかったWeb用語:フレームワーク … CSSからHTML5、WordPressまで
初心者の頃、フレームワークっていう言葉が難しくて、いまいち意味の分からないものでした。CSSフレームワークとか、HTML5+CSS3のフレームワークとか。ひょっとしたら私と同じようにフレームワークって何だろうって思っている人もいるかと思って、フレームワークについてブログにしてみました。Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどん... 続きを読む