Web制作者がチェックしておきたい！ 2022年版、CSSフレームワークのまとめ

2022/04/07 23 users グラスレス WEB制作者 GitHub 2022年版 印刷

ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。 Awesome CSS Frameworks -GitHub 下記は各ポイント... 続きを読む

これまでとは異なる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リセットとして利用するのもありかもし... 続きを読む

Tailwind CSS for Railsを使って、NodeをインストールせずにTailwind CSS 3を導入する

2021/12/24 7 users node Utility gem Tailwind CSS

みなさんこんにちは。この記事はRuby on Rails Advent Calendar 2021の20日目の記事です。 20日は誰も埋めていなかったようなので（と言いつつもう日付も変わってしまっているのですが）、Tailwind CSS for Railsというgemについて書きます。 Tailwind CSSとRails Tailwind CSSは最近流行のCSSフレームワークで、Utility... 続きを読む

2021年版！おすすめのCSSフレームワーク総まとめ。特徴や比較も！ | Web Design Trends

2021/07/15 8 users Web Design Trends CSS 比較 特徴 種類

CSSのコード記述量を減らして、効率的にスピード感を持ってWeb制作を行う助けとなるのがCSSフレームワークです。 現在公開されているCSSフレームワークの種類は非常に多く、それぞれの特徴や目的なども様々で、自分に合ったCSSフレームワークを見つけるのも大変です。 今回は、2021年現在でおすすめのCSSフレームワーク... 続きを読む

世界4位のCSSフレームワークを生み出したダーシノが副業やOSS活動に打ち込む理由 | Offers Magazine

2020/07/08 14 users ダーシノ Offers Magazine OSS活動 副業

キャリアアップのためには本業以外も全力で こんにちは。さくらインターネットで、フロントエンドエンジニアをしているダーシノ（@bc_rikko）です。 今は、本業に加えていくつかの会社で副業をしています。OSS活動にも積極的に取り組んでいて、2018年に開発したNES.cssというファミコン風CSSフレームワークは、GitHubのc... 続きを読む

2020年版：おすすめの人気CSSフレームワークと特徴の総まとめ | Web Design Trends

2020/06/09 10 users Web Design Trends 総まとめ 特徴 フォー

様々な種類のCSSフレームワークが公開されていますが、種類が多すぎてどれを選べばいいのか分からないというパターンは多いと思います。 今回は、2020年おすすめのCSSフレームワークと、それぞれの特徴について分かりやすくご紹介していきたいと思います。 CSSフレームワークとは CSSフレームワークとは、ボタンやフォー... 続きを読む

CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ | Webクリエイターボックス

2020/05/10 46 users CSSファイル Webクリエイターボックス CSS おなじみ

2020年5月11日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読... 続きを読む

CSSフレームワークからみる、フォーカス・インジケータの違いを考察 - ME to FE

2019/12/22 6 users インジケータ フォーカス 考察 Bulma 総評

CSSフレームワークからみる、フォーカス・インジケータの違いを考察 フォーカスってなに？ フォーカスの可視化について フォーカスのスタイル CSSフレームワークはどのような対応をしているのか？ BULMA 特徴 Bootstrap 特徴 Materialize 特徴 Pure.css 特徴 skeleton 特徴 CSSフレームワークの総評 1. Bootstrap 2. BUL... 続きを読む

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フレームワーク -Cutestrap | コリス

2019/09/29 32 users class グリッド プログレッシブ・エンハンスメント

シンプルなHTMLにclassを加えるだけで、さまざまなUIコンポーネントやグリッドが実装できる超軽量（2.7Kb）のCSSフレームワークを紹介します。 プログレッシブ・エンハンスメントが採用されており、新旧ブラウザの見え方を最適化して表示されます。 Cutestrap Cutestrap -GitHub Cutestrapの特徴 Cutestrapのデモ Cutest... 続きを読む

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... 続きを読む

echo.css : CSS framework optimized for CMS theming

2018/10/05 26 users SMACSS FLOCSS コンポーネント CMS 微調整

CMSサイト制作に最適化 "echo.css"は、SMACSS, FLOCSSを設計ベースとしたCSSフレームワークです。特に、WordPress等のCMSを組み込んだウェブサイトの制作に最適化しています。 CMSによく見られる機能を想定したコンポーネント、コンテンツの微調整を行う補助クラスを数多く実装しています。 ぜひ「スタイルガイド」をご... 続きを読む

CSSフレームワーク、モダンJavaScript、AmazonのUX…2017年のアクセス1位は？ - WPJ

2017/12/27 46 users WPJ 掛け算 マーケター チュートリアル Chrome

デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援するパスファインディング・メディア「WPJ」が2017年に公開した記事は、500本あまり。HTMLやJavaScriptのチュートリアルから、UXデザイン、ネット広告のトレンド解説記事まで、読者によく読まれた記事ベスト10を紹介します。 【1位】もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた Ch... 続きを読む

レスポンシブのテンプレートを計22個、会社・飲食・美容・LPの用途別に

2017/10/02 41 users テンプレート 飲食 用途別 コーポレートサイト レスポンシブ

ウェブ制作を時短できるテンプレートをCSSフレームワークとHTMLテンプレートに分けて集めました。コーポレートサイト、ポートフォリオ、LPにどうぞ。レスポンシブのテンプレートを久しぶりにあちこちと探してみました。会社、飲食、美容、LPの4つの用途別に分けて合計22種類を紹介します。 目次 今回選出したレスポンシブ テンプレートの分け方 CSSフレームワーク 4つ テンプレート まとめサイト 4つ ... 続きを読む

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

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

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

Web制作の時間を短縮できる人気＆定番のCSSフレームワーク8選 | フリーランス大学

2017/04/12 42 users フリーランス大学 Web制作 CSS 労力 クオリティ

サイトの規模にもよりますが、webサイトのデザインにはかなりの労力と時間を要します。特にCSSの設定は、サイト全体の見た目を左右するだけでなくSEO効果やアクセシビリティ向上にも影響してくるため、高いスキルが必要です。 しかし、CSSフレームワークを上手に活用することで作業時間は大幅に減り、クオリティも上がるため、利用しない手はありません。そこで今回は、人気の高いCSSフレームワークをご紹介します... 続きを読む

Reactコンポーネントをnpmパッケージとして公開、さらにGitHub pagesにDemoページを公開する手順 | ichimaruni-design

2017/04/12 10 users ichimaruni-design npmパッケージ 手順

Reactコンポーネントをnpmパッケージとして公開、さらにGitHub pagesにDemoページを公開する手順 2017年04月11日 WEB制作 フロントエンド , React.js , npm 前回の記事でもご紹介させていただいているのですが、Nimbus-jqueryというCSSフレームワークとNimbus-reactというReactコンポーネントライブラリをnpmに公開したので、その際... 続きを読む

レスポンシブなEメール向けのCSSフレームワーク・「Foundation for Emails」 - かちびと.net

2017/01/28 30 users net メールクライアント zurb Foundation

Foundation for Emails Foundation for EmailsはRWD対応のHTMLメール用フレームワークです。名前の通り、多数の方に愛用されるCSSフレームワーク、 Foundation を提供するZURBが公開しているもの。あらゆるメールクライアントで動作を確認しているそうで、Outlookでさえ問題ないとの事。テンプレートも用意してくれています。 スマフォの普及でHT... 続きを読む

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

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

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

Bootstrapだけじゃない！おすすめCSSフレームワーク6選まとめ！ | クラウドット株式会社

2016/12/18 24 users Bootstrap jQuery ゆえ 依存 デザイン

こんにちは。クラウドットデザイナーの野田沢です。 CSSフレームワークといえばBootstrapが有名ですよね。 Bootstrapはとても便利ですが、人気のフレームワークなため、依存しすぎるとどれも似たようなデザインのサイトになってしまいがち。 また膨大な機能を有するがゆえ（jQueryに依存）少々重いです。 ただとっても便利なのでこれまで部分部分で使用してきたのですが、調べてみると部分使用であ... 続きを読む

みんなのウェディングの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... 続きを読む