超便利！確認しておきたい最新CSSツール、リソースガイド 2018年度
ここ数年起こっているCSSの変化と急速な進歩により、絶え間なくリリースされている膨大な量のオープンソースのツールには驚かされます。 制作時間を節約、短縮できるCSSライブラリやフレームワーク、およびツールは、制作をより手軽に、より簡単にすることを目的に構築されており、理解できていないCSSに関しては学習用ガイドなども数多く提供されています。 このコレクションでは、2018年にリリースされた50種類のお気に入りCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。ユニークなアイデアを形にできるツールがきっと見つかりますよ。 1. CSS レイアウトフレームワーク 2. CSS Flexbox フレームワーク 3. CSS ライブラリ 4. お役立ちCSSユーティリティ 5. オンラインCSSツール/生成ツール 6. CSS画像エフェクトツール 7. CSS学習リソース
FlexboxベースのレスポンシブStylus/CSSフレームワークBasisをつくったので設計思想や特徴など
これまで Basis は Sass/CSS フレームワークとして開発していましたが、先日書いた記事（SassからStylusに乗り換えてみたので違いや躓いたところなど）のとおり Stylus がなかなか良さ気だったので Stylus 版の Basis を作りました。 その中で、Stylus でやるなら単純に Sass を書き換えるだけじゃなく設計から変えたほうが良いのではないか？という気がして内部的には結構書き換えを行ったりしたので、その辺りも含め、Basis とは何か、どういう思想に基づいて開発しているのか、等改めてまとめてみたいと思います。 Basis Stylus 版ドキュメント https://getbasis.github.io Basis の設計思想 Basis は「どんな Web サイトの制作にも適用でき、簡単に使え、邪魔にならない CSS フレームワークが欲しい」との思いか
なんちゃってフロントエンド開発者が、Bourbon, Neat, Bitters, Refills, Proteus – Gulp を触ってみた | unlimited text works, the 3rd.
はじめに 自分は Twitter Bootstrap にさほど疑問を感じていない…例えば、（クソ）マークアップ問題やデザインが同じ様になる 1 …その辺は後述…程度には、フロントエンド開発に疎い事だけは。 つまりは「お前は何を言ってんだ」だろうなぁこの投稿…中途半端な知識を振りかざしてる感満載じゃないかと。 さて。 何で知ったか覚えてないけど、 Refills を試してみたいと。 しかし前提条件として、 Bourbon と Neat が必要との事で、これらが意味する事は何となく分かるけど、これらを踏まえた上でどうやって使うのかがピンと来なかった。 日本語情報を漁っても、Bourbon、Neat、更には Bitters までは情報として得る事ができても、フロントエンド開発に疎い自分には、Refills本家サイトにコピペ用コードがあるとはいえ、具体的にどの様に手を動かしていけば良いのかがさ
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
Flexboxベースの軽量レスポンシブCSSフレームワークBasisをつくりました。
Flexbox ベースの軽量レスポンシブ CSS フレームワーク Basis を公開しました。もともと Bootstrap が好きでよく使っていたのですが、いろいろ「ん？」となることがあって、別のフレームワークを探してみたりもしたのですがなかなか条件にあうものが無く、それならいっそ作ってしまえ！ということで作りました。 導入方法・マニュアルは下記をご参照ください。 ということで、既存のフレームワークの何が不満だったのかということも交えつつ、Basis の特徴など。 Basis の特徴 Flexible box ( Flexbox ) ベースのグリッドシステム Basis はグリッドシステムが float ベースではなく、Flexible box ( Flexbox ) ベースとなっています。今でこそ Flexbox ベースのグリッドシステムが使えるフレームワークがいくつかでてきていますが、
レスポンシブ対応のCSSフレームワーク22選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
AIさくらさん | 対話型AIチャットボット・アバター接客でDX推進
多くの人が集まり落とし物が多発する施設や公共機関などで、対応が追いつかず、返却までに長期間かかってしまう
JavaScriptフレームワークについて個人的な思い - 当時を振り返りながら - albatrosary's blog
HTML5 Experts.jpでエンタープライズ特集が組まれたことは承知だと思います。やはり注目すべきところはJavaScriptフレームワークの見解ではなかったかと思います。JavaScriptフレームワークについては人それぞれ考えがありますので、一概にこれとは言えませんが、私が感じているところを記載したいと思います。 世の中の動向と以前の判断 Googleトレンドを見る限りではAngularJSのひとり勝ちのように思えますが、身の回りの案件ではBackbone.jsが多いのではないかと思えます。１年半前にHTML5プロジェクトを行ったときに選定で残ったのが Backbone.js AngularJS Sencha Ext JS でした。最終的に利用したのはBackbone.JSだったのですが理由がjQueryベースで入り易かったということが上げられます。AngularJSは独特な記法
2014年 Webアプリケーションフレームワークトレンド（PHP / Java / Ruby / Python / Perl） - Qiita
2014年 Webアプリケーションフレームワークトレンド（PHP / Java / Ruby / Python / Perl）JavaRubyPythonPerlPHP はじめに 一昨日、FIFA15 でサイドバックが前線に放ったフィードが直接入って80m強の超ロングシュートとなって困惑しました。 さて、話は変わりますが、2014年12月時点の TIOBE Programming Community Index によると、昨年と比較して最もランクアップしているプログラミング言語は、Visual Basic なんですね。 そんなプログラミング言語上位20位ですが、Webアプリケーションを構築するにあたって、どの言語を採用するかというのと同じく悩ましいのがどのフレームワークを採用するかということ。 フレームワークの選定基準はアプリケーションの要件はもちろんのこと、環境や開発者、その他にも様々な
ラクするWeb制作「CSSフレームワークなにソレ？」な初心者へおすすめ7個
注：今回の記事は初心者向け、Web制作を効率化＆スピードアップしてくれる「便利なHTML／CSSフレームワーク」の紹介です。 CSSフレームワークとは？ 2021年のおすすめCSSフレームワーク7個 CSSフレームワークの選び方 上の3点をお伝えしていきます。 それなのに、なぜ、カレーの画像で始まるの？ その理由は、「CSSフレームワークって何？」を知ると理解できます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 💬 𝕏（twitter）はよくフリーランスの人たちにフォローされてるようです。 Follow @websae2012 CSSフレームワークって何？ CSSフレームワークは、言い方を変
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ 白石 俊平（HTML5 Experts.jp編集長） 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン
『如何算平码』 · MSC地中海邮轮“华丽号”东西地中海全览15日之旅-Mobile
澳门澳门澳门精准大全(中国)有限公司董事、生物医药首席技术官Christian Bachofen先生接受了《制药业》专访 “客户的成功就是我们的主要目标。”近日，澳门澳门澳门精准大全(中国)有限公司董事、生物医药首席技术官Christian Bachofen先生接受了《制药业》专访时说道。以下为采访原文，转载自《制药业》公众号。 制药企业建设制药设施需要大量的投资，如果设施建设能够符合国家规范要求，实现成本可预测，缩短产品上市时间，而且具有未来重新规划的灵活性，对于制药企业来说意义重大。 Christian Bachofen先生 国际知名生物医药设计规划专家、澳门澳门澳门精准大全工程科技集团董事、生物医药首席技术官 一个项目从筹划到完成，前期设计在其中发挥着举足轻重的作用。工程行业通常将概念设计和初步设计统称为前期设计，作为详细和施工图设计的基础。Christian Bachofen指出，
オリジナルテンプレート・ビルド環境2013年版の作成メモ｜Blog｜Skyward Design
オリジナルテンプレート・ビルド環境2013年版の作成メモ Posted by Hideki Abe at 2012年12月29日 20:02 タグ： gruntサイト構築効率化 来年に向けて、Webサイト構築時に利用するオリジナルテンプレート・ビルド環境の2013年版を整備しました。作業中に考えたことなどをメモし、2012年の研究成果の一つとしたいと思います。 テンプレート・ビルド環境の構成 tmpl-grunt-website ├ htdocs // ドキュメントルート │ ├ _scss // mixin・カスタムSass関数/モジュール等をサブモジュールとして取り込み │ ├ index.html │ └ robots.txt ├ .bowerrc // Bowerの設定ファイル ├ _scss_tmpl // Sassのテンプレート ├ config.rb // Compassの設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
初心者向け！CSSフレームワークFoundationのSass版を使用する為の環境構築。 | デザイニングラボ
Webページでよく使うさまざまなコンポーネントが簡単に利用できるCSSベースのフレームワーク -Materialize
Helium Responsive HTML5/CSS3 Template by MooseThemes | ThemeForest
UIkit
10 Useful Responsive CSS Frameworks