CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説

2023/04/19 27 users ネスト CSS Sass ネス ブラウザ

CSSのネストがついに、Chrome 112, Edge 112にサポートされました。 ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。 CSSのネストの基礎知識、便利な使い方を紹介します。ネス... 続きを読む

恐竜に教える現代のCSS – Part 2 | POSTD

2018/05/17 47 users POSTD CSS 実装 CSS自体 言語

###CSSプリプロセッサで新構文を使う 以上、CSSを使った基本的なスタイル指定とレイアウトを取り上げました。次に、CSS自体を言語として扱いやすくするために作られたツールについて説明します。まずはCSSプリプロセッサです。 CSSプリプロセッサを使うと、別の言語で記述したスタイルをブラウザが解釈できるCSSに変換する、ということが可能になります。これは昔、ブラウザへの新機能の実装が遅々として進... 続きを読む

とあるサイトの高速化についてフロントエンドでやったことまとめ。 | Toro_Unit

2015/11/27 736 users Toro_Unit フロントエンド 大小 高速化 急増

業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる！というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われ... 続きを読む

自分のHTMLやCSSのコーディング環境がベストか見直してみよう！作業を効率化する技術やツールの導入・使い方がよく分かるオススメの本 | コリス

2015/04/28 93 users コリス less BEM Git Sass

SassやLESSなどのCSSプリプロセッサ、OOCSSやBEMを使ったCSSの設計、Gitでのバージョン管理、gulpを使ったタスクランナー、Bootstrapなどのフレームワークの導入など、ここ数年でコーディング業界にさまざまな新しい技術やツールが登場しました。 なんだか便利そうなのは分かるけど、どこから手をつければよいのか分からない。似たようなものがあるけど、どれが自分にあっているのか？ コ... 続きを読む

俺的フロントエンド開発

2015/02/26 142 users フロントエンド開発 変数 エディタ JSフレームワーク CSS

Transcript 1. 俺的フロントエンド開発 2015/02/26 2. • HTML/CSSプリプロセッサ • 静的サイトジェネレータ • JSフレームワーク • エディタ アジェンダ 3. HTML/CSSプリプロセッサ • HTMLとかCSSとか生で書くのが面倒くさい • 少しでもタイプ数を減らして書きたい • あわよくば変数とかループとか使いたい 4. HTMLプリプロセッサ • H... 続きを読む

CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS - morishitter blog

2014/12/06 62 users rework PostCSS CSSプリプロセッサー CSS

2014-12-07 CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサー まずは用語の定義を確認する。CSSプリプロセッサ... 続きを読む

ピクセルパーフェクト、フラットデザイン、Sass、取り残された気分な方におすすめ「現場のプロが教えるWeb制作の最新常識」 | Webデザインのタネ

2014/04/08 43 users Sass CODA タネ SublimeText 現場

著者の一人、WEBCRE8.jpの酒井優さんより「現場のプロが教えるWeb制作の最新常識」をいただきました！自分でSassの解説をしておいて言うのもなんだかアレなんですが、最近のWeb制作まわりは変化が多いですね＞＜ それはCSSプリプロセッサを使うとか、ツール自体もAdobe一択だったのがSublimeTextやCodaに変わったりというコーディング面はもちろん、ビジュアル面でも立体的・写真みた... 続きを読む

Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開 | Another Sky

2014/02/17 55 users CSS grunt.js another sky 整形 公開

一昨日実験を行ったCSSプリプロセッサやポストプロセッサで出力されたCSSの整形をGrunt.jsで実行できるプラグイン、grunt-cssprettyを作成しましたので本日公開いたします。 使用方法 npm install --save-dev grunt-cssprettyを実行し、プラグインをインストールします。その後、gruntfile.jsやgruntfile.coffeeにて設定を行い... 続きを読む

CSSプリプロセッサやポストプロセッサで出力されたCSSの整形 | Another Sky

2014/02/15 31 users インデント Sass fragmentary ベンダー接頭辞

SassなどのCSSプリプロセッサやAutoprefixerのようなポストプロセッサを利用すると、プロセッサ規定のインデントや改行方法でCSSが整形されます。これについては@myakuraさんがAutoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentaryの最後で懸念事項として上げられていましたし、僕も2011年の年末にSassで出力するCSSファイルを自社のCSS... 続きを読む

チャットワークがLESSを使う理由

2013/12/05 27 users less ChatWork 経緯 チャットワーク ご存知

ChatWork デザイン部の赤堀巴絵です！ ChatWork Advent Calendar５日目を担当します〜。 ご存知の方もいらっしゃると思いますが、チャットワークアプリ側はLESSで運用されています。なんでLESSで運用してるの？と聞かれることがあるのでブログで紹介したいと思います。 チャットワークがLESSを選んだ経緯 まずCSSプリプロセッサの導入を社内で検討し導入しようとなった時期が... 続きを読む

今どきのGruntを使ったフロントエンド開発（HTML/CSS編） — MOL

2013/12/01 353 users りんど Sass MOL コンパイル Grunt

SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的... 続きを読む

CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ - Mitsu.log();

2013/04/13 79 users Co-Edo テー クックパッド CSS Nite パターン化

2013-04-13 CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ 4月4日に行われたCSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきました。この前ここにも書いたCSS Nite LP26のCSSプリプロセッサの回で、クックパッドの@tikedaさんのお話をもっと聞いてみたいなーと思っていたので、これは！！と思い。テー... 続きを読む

昔のCSSをLessとかSassにしたいの | WP-D

2013/02/15 55 users Sass less Stylus バカヤロー WP-D

昔のCSSをLessとかSassにしたいの ども、白です。ホワイトデーは来月です（はい）。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを... 続きを読む

CSSプリプロセッサでスタイルガイド - inkdesign

2012/12/07 62 users スタイ CSS Preprocessor 親和性 ツール 影響

07 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事です。 CSS PreprocessorとIAの親和性、という記事の影響を受けまして、こちらの記事で書かれていた、 CSS Preprocessor そのものを共通ドキュメントにしてしまうとか という点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。 スタイ... 続きを読む

はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog

2012/03/19 247 users tikeda CSSメタ言語 近年 導入 はてな

こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか ... 続きを読む