そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています

2024/04/02 127 users Has カスケードレイヤー ネスト ワークフロー 変数

2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。 ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされ... 続きを読む

CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた

2023/07/13 116 users vanilla-extract React state 相性

私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていたCSS開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State ... 続きを読む

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/18 168 users ネスト CSSネスト CSSコーディング CSS ブラウザ

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。 続きを読む

【2022年最新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）

2022/09/22 229 users コーダー vscode SCSS CSS HTML

Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 普段の業務では、HTML、CSS、Sass(SCSS)... 続きを読む

よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由

2022/04/16 206 users SCSS CSS ルール 理由

Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただ... 続きを読む

私が「Web制作にはMacが適している」と思う理由 | Stocker.jp / diary

2019/11/07 222 users Stocker.jp diary iPhone Mac 理由

iPhone / Mac 私が「Web制作にはMacが適している」と思う理由 Thursday, November 7th, 2019 【土曜開催】「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講座」ではWeb制作で必須となったSassと効率... 続きを読む

本当に簡単にできて驚いた！面倒な設定は一切不要、秒速でWeb開発用のサーバーが構築できる -Zero Server | コリス

2019/03/13 230 users コリス Markdown React TypeScript

Node.js、React、TypeScriptをはじめ、HTML、CSS、Sass、Markdownなどが利用できるWeb開発用のサーバーが秒速で簡単に構築できるZero Serverを紹介します。 必要な依存関係は自動インストールされ、ReactやSassは置くだけでコンパイル、マークダウンも設定は一切不要です。サーバーを構築する時間が無い人、設定に明るく... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin コリス 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め | カレリエ

2018/12/17 131 users vscode SCSS コンパイル カレリエ SCSSファイル

VSCode(Visual Studio Code)でSASS/SCSSファイルをコンパイルする拡張機能「Easy Sass」が便利だったので紹介します。 この拡張機能「Easy Sass」は便利なのですが、一番の恩恵はこの拡張機能を利用することで、スタイルシート言語の「SASS/SCSS」の導入が簡単になることです。通常であれば「SASS/SCSS」で書かれたファ... 続きを読む

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company

2018/10/28 243 users box-shadow Minecraft メンテナブル 下図

CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJa... 続きを読む

Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ | Stocker.jp / diary

2018/09/27 253 users Sketch Thursday Illustrator 基礎

Webデザイン Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ Thursday, September 27th, 2018 「スマートフォン時代のWebコーディングスクール」開催！PC・タブレット・スマートフォンに対応したHTML・CSS・Sass・JavaScriptを基礎から学べます！ 【日曜開催】「1日で分かるSassとBEM講... 続きを読む

2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査 | コリス

2018/05/15 107 users コリス デベロッパー npm Webpack CSS

フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどの... 続きを読む

最新版で学ぶwebpack 4入門 - スタイルシート(CSSやSass)を取り込む方法 - ICS MEDIA

2018/03/05 144 users Webpack モジュールバンドラー CSS 焦点 ウェブ

ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート(CSSやSass)のバンドルもできます。ICS MEDIAの記事「 最新版で学ぶwebpack 4入門 」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します... 続きを読む

CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス

2018/02/07 137 users less CSSプリプロセッサー カスタムプロパティ 変数

2018年2月7日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数の使い方と注意点をまとめていきます！ CSS変数とは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properti... 続きを読む

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ | コリス

2018/01/30 162 users コリス コンポーネント rem ナビゲーション Flexbox

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった... 続きを読む

QiitaのCSS構成2017 - Qiita

2017/12/27 156 users Qiita PostCSS CSS 去年 構成

この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年では プリプロセッサーとして Sass (node-sass)... 続きを読む

Webデザイン初心者がランクアップするためのCSSのコツ10選｜ferret [フェレット]

2017/03/01 106 users Ferret less フェレット CSS 関数

ブログ を始めたりホームページを自作したりするために勉強しはじめると、さらにデザインを凝ったものにしたくなります。 また、ある程度カスタマイズが進めば、表示速度をもっと早くしたり、より短いコードでコーディングしたりしたくなります。 そこで必ず話題に上るのが、 CSS です。 もちろん、LessやSassのような CSS プリプロセッサー(関数を使ったりしてプログラミングコードのように書くことができ... 続きを読む

Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ | Webクリエイターボックス

2017/02/23 115 users Mixin Webクリエイターボックス 小技 関数 デフォルト

Sass がデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「 効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら... 続きを読む

これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges | コリス

2016/12/12 125 users コリス Mixin レスポンシブ対応 テクニック SVG

縦長ページなど、コンテンツを積み重ねてレイアウトする際に、コンテンツ間の区切りを斜めにするSassのMixinを紹介します。 斜め線はSVGなので、デスクトップでもスマホでも美しく斜めに表示されます。 Angled Ed ...記事の続きを読む 続きを読む

JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita

2016/07/16 433 users Qiita rollup Babel Gulp Webpack

近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。「お膳立て」の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる... 続きを読む

Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek

2016/04/22 428 users North-Geek Git Gulp Emmet 流行

最近フロントエンドの流行がどうのこうのという記事をよく目にしますが、実際に現場で 必要となるスキルと開発環境 を紹介していきます。これくらい知っていると全く問題ない。といったことですね。 主にWebサイトを制作のスキルは、 HTML・CSS、CSS3、Sass、SublimeText、Emmet、gulp、Git についてのスキルがあれば開発がしやすく流行の開発環境ではないかと思います。 さて、そ... 続きを読む

現場で役立つ実践Sass（1）Sassの環境を整える | Adobe Creative Station

2015/11/24 104 users CSSプリプロセッサー 実践Sass CSS 割合 統計

CSSを強力にパワーアップするCSSプリプロセッサー「Sass」 ashleynolan.co.ukの記事「The State of Front-End Tooling – 2015」の統計（2015/10/12付）によれば、CSSだけを使っている “No Preprocessor” の割合がは約15%となっており、約85%は何らかのCSSプリプロセッサーを使っているようです。中でもSassは全体... 続きを読む

Sprocketsを捨てたい

2015/07/05 111 users Sprockets プリプロセッサ freee altJS

Transcript 1. Sprocketsを捨てたい！！ 2. 自己紹介 • 名前: joe-re(じょうあー、じょー) • freeeという会社でクラウド会計作ってます。 • ぶっちゃけRubyよりJavaScriptの方が好き。 3. そもそもSprocketsってなん だっけ • Ruby製のアセットのプリプロセッサ • Rails3.1から導入 • AltJSやSassなどのcompi... 続きを読む

やる夫がデザイナーの作ったPSDにお怒りのようです | WebTecNote

2015/06/17 125 users WebTecNote psd DoJo memo jQuery

カテゴリー CSS (53) Compass (2) Sass (1) Custom (8) Dojo (1) GoogleMap (23) HTML&XHTML (12) HTML5 (1) Information (19) Javascript (42) jQuery (9) Material (9) Memo (71) やる夫がデザイナーの作ったPSDにお怒りのようです (5) MooToo... 続きを読む

やる夫がデザイナーの作ったPSDにお怒りのようです | WebTecNote

2015/06/17 340 users WebTecNote psd DoJo memo jQuery

カテゴリー CSS (53) Compass (2) Sass (1) Custom (8) Dojo (1) GoogleMap (23) HTML&XHTML (12) HTML5 (1) Information (19) Javascript (42) jQuery (9) Material (9) Memo (71) やる夫がデザイナーの作ったPSDにお怒りのようです (5) MooToo... 続きを読む