[B! ツール][css] kenzy_nのブックマーク

超便利！確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度

海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい

kenzy_n 2020/01/09

リンク

びっくりするほど簡単！HTMLやCSSの作業なしで、Bootstrap 4のさまざまなページを作成できる無料ツール

さくっと短時間で、慣れれば1分！デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。短時間で、Bootstrap 4ベースのページを作成してみる用意されているコンポーネント短時間で、Bootstrap 4ベースのページ

kenzy_n 2018/04/20

リンク

デベロッパーツールの賢い使い方！テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ

CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。要素に与えられたclassを切り替えるコンテンツの量でデザインが崩れないかテストする指定した要素を非表示にするデザイン要素のスクリーンショットデザインのカラーを変更する CSSの変数を使用する（カスタムCSSプロパティ）「filter: invert();」で要素のカラーを反転する C

kenzy_n 2017/04/20

デザインの道は検証と修正の連続

リンク

Web制作者はおさえておきたい！CSSの基本テクニックから実務に役立つ便利ツールまでのまとめ

さまざまなUIを実装するCSSの各プロパティの基礎知識や使い方をはじめ、実装時のスタイルシートの問題点をチェックしたり、重複している箇所を見つけたり、見やすいように整形したり、コードを圧縮・展開したりなど便利なオンラインツール・リソースを紹介します。 CSSのリファレンス・基礎知識系 CSSの調査・分析系 CSSの整形・圧縮・展開系 CSSのリファレンス・基礎知識系