これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props

2022/04/05 189 users UIコンポーネント 一貫性 カスタムプロパティ 登場 くら

これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラ... 続きを読む

シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css

2022/02/07 352 users グラスレス ポートフォリオ CSSリセット HTML 超軽量

その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもし... 続きを読む

CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス

2019/11/28 278 users ライセンス フロントエンド コリス 翻訳記事 CSS

日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳... 続きを読む

CSSファイルから未使用のスタイルを削除する方法 | コリス

2019/09/26 328 users コリス ライブラリ CSSファイル スタイル アプリ

PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻... 続きを読む

CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..) - Qiita

2019/08/27 62 users Element Qiita Vuetify ブレイクポイント

CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..) いま開発している積読用の読書管理アプリでは、CSSフレームワークにBlumaを使ってる。 昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(´ω｀) ブレイクポイントのまとめ xs sm md lg... 続きを読む

2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス

2017/04/27 171 users コリス アクセシブル CSS 軽量フレームワーク グリッド

Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。 mini.css -GitHub mini.css テンプレート一覧 モバイルデバイスと最新のブラウザを考慮して設計された軽量（7KB）CSSフレームワーク。ほとんどの... 続きを読む

Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた！ - paiza開発日誌

2016/12/19 549 users フレームワーク paiza開発日誌 0310lan 軽量 人気

2016 - 12 - 19 Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた！ プログラミング初心者 プログラミング学習 開発ネタ どうも、まさとらん（ @0310lan ）です。 みなさんは、「 CSS フレームワーク 」を活用しているでしょうか？ いきなり フレームワーク と聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は 誰でも利用... 続きを読む

みんなのウェディングのCSS事情 — みんなのウェディングエンジニアリングブログ

2016/12/15 99 users ウエディング ウェディングエンジニアリングブログ 平岡 ドン

こんにちは。みんなのウェディングの 平岡 です。 みんなのウェディングでは自社開発したCSSフレームワーク「Esthe（エステ）」を利用して開発をしています。 今回はそのEstheの簡単な説明と導入までの流れを紹介したいと思います。 導入前までに抱えていた問題 案件が発生する都度すべてのデザインを作成していたため、デザイナーの作業が増えていく デザインガイドラインがないため、コンテンツ作成毎にトン... 続きを読む

【2016年版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10　｜SeleQt【セレキュト】

2016/11/17 492 users フレームワーク SeleQt リソース セレキュト 本稿

フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源（リソース）を効果的に分配するのもプロとして欠かせない姿勢です。 本稿では2016年版Webデザイナーのための「CSSフレームワーク」ベスト10をご紹介します！ フレームワークとは何か？ ファイルとフォルダを含むパッケージのことです。CSSフレー... 続きを読む

【CSSフレームワーク】Bootstrap3の管理画面用テンプレートまとめ【全部無料】 - ウェブと食べ物と趣味のこと

2016/06/16 132 users Bootstrap3 BOOTS ウェブ 食べ物 趣味

2016 - 06 - 17 【CSSフレームワーク】Bootstrap3の管理画面用テンプレートまとめ【全部無料】 サイト運営 シェアする Twitter Pocket こんにちは。Webデザインはあまり得意ではないケーです。 デザインが苦手なエンジニアでもレスポンシブ対応済みのページを割りと簡単に用意できるのがCSSフレームワークです。 そんなCSSフレームワークの中で最も有名なのがBoots... 続きを読む

初心者でもBootstrapを賢く使いこなす！基礎からカスタマイズ、無い機能の追加まで -これからのWebサイト設計の新しい教科書 | コリス

2015/04/03 81 users コリス Bootstrap フレームワーク 本書 カスタマイズ

Bootstrapは非常に便利なフレームワークですが、大切なのはその使い方。 Bootstrapの基礎知識をはじめ、カスタマイズ・無い機能の追加・運用、そしてCSSフレームワークの考え方や数多くあるフレームワークの選べ方まで、これからのWebサイト設計に役立つオススメの本を紹介します。 本書はBootstrapの完全マニュアルと言っていいほど、非常に充実した内容となっています。また、単に技術的なチ... 続きを読む

Bootstrap以外のCSS Frameworkを知らない人必見！CSSフレームワーク４４選 | エンジニア転職求人情報×IT人材紹介@SAK

2015/02/03 527 users CSS Framework Bootstrap グリッド

CSS Framework 2015年になったので、現状のCSSフレームワークをまとめてみました。Bootstrap以外にも沢山あります。 かなりの量があるのですが、単一機能のみ（グリッドだけとか）などもあります。 一通り見てみると、やはりBootstrapが良いなとは思うのですが、個人的にはSemantic UIが良いなと思いました。 名前空間の考え方や、設定はBootstrapが一番洗練されて... 続きを読む

ASCII.jp：シングルページをデザインする3つのポイントとワークロー (1/3)｜イシジマミキの実践！「シングルページ」デザイン塾

2014/09/01 58 users イシジマミキ コンタクト HTML スキル 最初

最近よく見かけるシングルページを作るデザイン塾。今回から、CSSフレームワークを使って実際にシングルページを作成していきます。第2回は、デザインツールを使ってページをデザインし、ベースとなるHTMLを作成します。 シングルページをデザインしよう 最初に、デザインソフトを使ってざっくりと全体のデザインを作成します。今回は、自分自身の経験やスキルを活用してボランティア活動をする人の意思表示やコンタクト... 続きを読む

npm + gulp + bower でビルド自動化 - GeekFactory

2014/07/01 113 users npm Gulp GeekFactory BOWER CSS

2014-07-02 npm + gulp + bower でビルド自動化 JavaScriptやCSSのビルドを自動化することで、手作業による無駄な時間やミスを削減できます。また、誰でもビルドできるようになるため、リリースのボトルネックを解消できます。 改善したいこと JavaScriptフレームワークやCSSフレームワークの依存関係を自動的に管理したい。ダウンロードして配置を手作業でやりたくな... 続きを読む

jagrid - Excel方眼紙をWeb上に再現！ MOONGIFT

2014/05/10 146 users MOONGIFT jagrid Excel方眼紙 断定 再現

これは凄いかも知れない…。 最近のCSSフレームワークは幅を12分割した上でデスクトップ、タブレット、スマートフォンに適応させるスタイルになっています。しかしこれでは緻密な画面設計を求められる日本の業務システムにはマッチしません。 日本の業務システムと言えばExcel方眼紙がデフォルトです（断定）。そのUIに慣れ親しんだ人のためのグリッドレイアウトフレームワークがjagridです。 jagridの... 続きを読む

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - ＠IT

2014/03/19 1069 users Bootstrap サンプルアプリケーション API 概要

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介... 続きを読む

爆捗！ WordPressテーマ作成ショートカット（5）：知って得するSass/Compassのインストールと使い方 (1/2) - ＠IT

2014/02/25 68 users Sass Compass Dreamweaver CMS 技術

爆捗！ WordPressテーマ作成ショートカット（5）：知って得するSass/Compassのインストールと使い方 (1/2) 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、SassベースのCSSフレームワーク「Compass」につい... 続きを読む

CSS拡張メタ言語「Sass」の概要と導入手順 （1/3）：CodeZine

2013/12/12 92 users CodeZine Sass Compass デザイナ CSS

本連載では、CSSの拡張言語であるSassの導入と、Sassを利用したメジャーなCSSフレームワークの1つであるCompassの導入をサンプルを交えて紹介し、最終的には実際にオイシックスで利用しているCSSをSassで書き直した際の実例をご紹介します はじめに　CompassはSassを拡張したツール集で、CSSのフレームワークといわれています。大手企業でも導入されていて、オイシックスでもデザイナ... 続きを読む

カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG

2013/11/19 305 users コンポーネント Sass UIパーツ デザイナー アツい

こんにちは。デザイナーのはるえです。 レスポンシブWEBサイトを作成する際に重宝されているCSSフレームワークですが、 「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込... 続きを読む

Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ | HTML5Experts.jp

2013/08/20 650 users グリッドシステム Bootstrap Bootstrap3

人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザイン... 続きを読む

Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用 － Publickey

2013/08/20 90 users Publickey グリッドレイアウト Bootstrap

複雑なCSSを自分で書かなくてもHTMLのマークアップで簡単に美しい比率のグリッドレイアウトを構成でき、分かりやすいボタン、パンくずリスト、メニューなどのWebページを記述できるCSSフレームワーク、「Bootstrap」の最新版「Bootstrap 3」が公開されました。 Bootstrap Bootstrap 3ではモバイルファーストを意識したデザインとなり、ボタンやメニューなどはフラットデザ... 続きを読む

フラットUI風、軽量＆レスポンシブ対応CSSフレームワーク『Pure』 | IDEA*IDEA

2013/05/29 145 users コンポーネント IDEA pure Yahoo 導入

Yahoo!が作っているCSSフレームワークですかね。軽量＆レスポンシブ対応ですよ。Bootstrap的に気軽に使えそうです。 ↑ 導入はリンク一発でOK。 ↑ ボタン。全体的にフラットUI風です。 ↑ メニューとか。 コンポーネントはあまり多くないのでシンプルなウェブ用だとは思いますが、覚えておいても損はないですな。 » Pure 続きを読む

あなたのデザインの自由度を邪魔しない、軽量なグリッドデザインフレームワーク「PocketGrid」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブロ

2013/04/08 83 users コンテン Bootstrap ソフトウェア エンジニア ベース

PocketGridは0.5KBの小さなCSSフレームワークです。レスポンシブWebデザインのベースにどうぞ。Bootstrapをはじめ多様なデザインフレームワークが出回っていますが、デザインの可能範囲が狭まってしまうのを嫌がる声もあります。そこでほんの基礎部分だけを提供してくれるグリッドデザインテンプレート、PocketGridを使ってみましょう。 サンプルです。左が30%、右が70%のコンテン... 続きを読む

今年流行りのフラットなデザイン制作に役立つCSSフレームワークやPSD素材まとめ8つ - W3Q

2013/03/22 209 users W3Q デザイン制作 Twitter Bootstrap

【Flatstrap】 Twitter Bootstrapをフラットデザイン化したCSSフレームワーク。 Flatstrap by Littlesparkvt.com http://littlesparkvt.com/flatstrap/ Flatstrap by Littlesparkvt.com 続きを読む

にわかデザイン（1）：HTML5＋CSS3は「メニューの作り方」を覚えるだけ！ (1/3) - ＠IT

2013/02/26 383 users HTML5+CSS メニュー デザイン Photoshop

Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思... 続きを読む