タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。 下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul
@importとは @importとは分割されたSassファイルを読み込み機能です。 このようにファイル内が分割されていても、@includeで一つのSCSSファイルに統合して、まとめてcssファイルにコンパイルすることができます。 @importの廃止予定時期 便利な@importですが、公式で廃止予定であることが明言されています。 （日本語訳） Dart SassとLibSassの両方がモジュールシステムのサポートを開始してから1年後、またはDart Sassがモジュールシステムのサポートを開始してから2年後、いずれか早い方（遅くとも2021年10月1日）に、@importと、モジュールを介して行われる可能性のあるグローバルなコアライブラリ関数の呼び出しを非推奨にします。 この非推奨措置が実施されてから1年後（遅くとも2022年10月1日）には、@importとほとんどのグローバル関数
SE SCSSとはどんな言語なのでしょうか？ PM SCSSはプログラム言語ではなく、Rubyで作られたメタ言語のことです。実際のソースを見ながら理解を深めていきましょう。 SCSSとは何か SCSSとは、Sassの構文の一つであり、ウェブページのスタイルを指定するCSSをより効率よく記述するためのものです。 Sassとは「Syntactically Awesome Stylesheets」の略で日本語に訳すと、「構造的にすばらしいスタイルシート」という意味です。 SCSSは、CSSと同様「{…}」でブロックを作り、文末に「;」を使います。あらゆる構文を使うことができるCSSの拡張版です。 CSSはコーディングを進めるにつれて、より肥大化し、複雑になり、メンテナンスが難しくなっていきますが、SCSSはそれらを抑え、効率的に、読みやすくメンテナンスのしやすいコードを書くことができます。 SC
Next.jsで使用しているのはdeprecatedなLibSassではなくDart Sassなので、@importではなく@useが使える。やったね！ ディレクトリ構成はとりあえず以下のようにしている。 src/styles以下にグローバルなSCSSを配置 アプリ全体で読み込むglobal.scss 色やサイズ等の変数（デザイントークン）定義 各種mixin 各コンポーネントのSCSSは各コンポーネントのファイルと同じフォルダに配置 グローバルなSCSSや定義のインポートをしやすくするため、tsconfig.jsonにエイリアスを定義
苦手なjsから初めてjQを触ったとき、なんて記述が楽なんだろうと感動した思い出があります。 そんなノリでcssもscssという拡張言語(メタ言語)が使えたら割と楽しかったので紹介してみようと思いました。 scssとは 記述の仕方どんな？ scssは基本cssとほぼ変わりません。ただ、cssの値に変数が使えたり若干プログラミングっぽいことができます。 ちなみに出来るからといって無理に変数等使わなくても、普通のcssの記述でも動くので初心者が始めやすい記述です。 はじめるには？ はい、環境構築必要です。これが一番めんどくさいですが無料ソフトやVSCodeというエディター使ってる方はプラグイン使えばscss使うことができるようです。ブラウザのツール等でもあるそうだとか。 自分は会社の先輩に手伝って頂いてローカルで環境構築しましたが、構築の完全理解に至って無いため、今回環境構築の話は割愛します 【
2020年の冬からSassが社内標準として採用されました。 最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。 Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。 Sassについて Sass（Syntactically Awesome StyleSheet）はCSSのメタ言語です。CSSのメタ言語をCSSプリプロセッサと呼んだりします。 メタ言語は言語を定義したり、言語についての情報を記述したりするための言語です。CSSの機能を拡張した言語の1つがSassと言えます。 SassはCSSに変換（コンパイル）する必要があります。環境構築が面倒という方もGUIコンパイラやVSCodeのプラグインなどを使えば、気軽にSassを導入できます。 GUIコンパイラの使い方については、こちらの記事を参考にしてみてください。 Sass(SCSS)を始めよ
なぜ@importが廃止になるのか？ これまで、SCSSで外部のSCSSファイルをインポートする際には＠importを使っていました。 外部SCSSを読み込むことで、ブロックや機能毎にファイルを分割することができるので「このブロックに関するSCSSの記述はこのファイルを見ればわかる」という構成を作ることができ、保守管理がしやすくなります。 @importの使い方 このように、SCSSで外部ファイルのインポートの際に使う「@import」はとても便利な機能です。しかし、上記の通り2022年10月頃に「@import」は廃止されるようです。理由としては、 スタイルの定義がどのファイルにあるかわかりにくい。 （@importしたファイルをさらに@importできます。読み込み先のさらに先のスタイルまで読めてしまうので、どのタイミングで読み込まれたファイルにスタイルの定義があるかわかんなくなります
SCSSの書き方をまとめてみました。 実際のHTML、SCSS、コンパイル後のCSSを例として記述しています。 SCSSの公式サイトはこちら
SCSSを使えばCSSよりも作業効率がUPすると分かっていても、コンパイルが必須と聞いて二の足を踏んでいる方も多いようです。そこで本記事では、SCSSで記述したファイルを自動的にCSSへコンパイルしてくれる「WP-SCSS」の便利さを解説したうえで、インストール方法やオプション設定、エラーが出た時の対処法などを解説します。 SCSS（Sass）とは？使用するメリット3つ 「WordPressのテーマを制作してみたい！」「自分好みにカスタマイズしたい！」という方なら、一度はSCSSに興味を持ったことがあるのではないでしょうか。 SCSS（Sass）とはCSSの拡張言語、いわゆるメタ言語の一種です。CSSの発展形といった方がイメージしやすいかもしれません。なお、SCSSには下記のようなメリットがあります。 ▼SCSS（Sass）のメリット 独自の書き方で関数が使える 変数が使えるだけでなく、値
こんにちは。 どうも柴田です。 みなさん clamp() は使っていたりしますか？ 僕は結構使ってたりします。 これは、IE11とかはダメなので、IE11にも対応するような案件では使えませんが、 まぁ、今やほとんどないと思うのでそろそろ使っても問題ないと思います。 これは、min() や max() を組み合わせて代用できるのですが、最小値と推奨値、最大値を指定してサイズを調整できるCSSの関数です。 例えば、基本的には 5vw のようにウインドウの幅に対して可変するようなサイズにしたいけど、20px より小さくはなってほしくないし、100px より大きくはなってほしくない。 みたいな時に活用できます。 font-size で上記のようなことをしたければ、以下のようなCSSになります。
SCSS（dart-sass）で知っておきたい@useと@forwardの基本的な使い方。 2020/10/15 2021/5/16 HTML&CSS, プログラミング こんにちは！ケインコスゲ（@keinkosuge）です！ 本日はSCSS（dart-sass）で知っておきたい@useと@forwardについてブログにしてみたいと思います！ @useと@forward、どちらも「特定のSCSSファイルに別のSCSSファイルを読み込みする」ときに使用するものです！ これまでnode-sassなどでは「@import」というものが使用されてきました。 ですが、@importは今後廃止に向かうという話もあります。 そのため、早い段階で今後のSCSS標準である@useと@forwardの使い方をしっかりと抑えておきたいところですね！ SCSSをCSSと比較した上での最大のメリット・「ブラウザにも
はじめにこんにちは。胃もたれすることが増えてきたような気がしている kimizuy です。今回は Stylelint のバージョンを 13 から 14 に上げる機会があったので、そこで得た知見をもとに v14 の変更点や設定のサンプル（SCSS と CSS-in-JS）をご紹介します。 前提VSCode で普段開発しているのですが Stylelint の拡張機能 に以下の警告が出るようになっていました。 Stylelint version 13.12.0 is no longer supported. While it may continue to work for a while, you may encounter unexpected behavior. Please upgrade to version 14.0.0 or newer. See the migration gui
言いたいこと 今更ながら、CSSを便利に活用する為にSCSSとBEM記法を活用してみよう sass、scssとは CSSのアレなところを何とかしようという目的で作成されたメタ言語 Syntactically(構文が) Awesome(イケてる) Style Sheets の略 ネスト、変数、ミックスイン、セレクタ継承な便利な拡張を使うことができるようになる SCSS（Sassy CSS）構文型とSASS構文型がある //CSS .btn { display: block; } .btn span { display: inline-block; } //SASS .btn display: block span display: inline-block //SCSS .btn { display: block; span { display: inline-block; } }
stylelintをSCSSとVSCode(Stylelint拡張機能)に導入しようと思ったんだけど、14系[1]には破壊的変更[2] が含まれてるらしく、ドキュメント通りにやってもエラーが出てしまったり、ネットで検索しても出てくる記事が13系以前のものだったりして苦労した。何とか導入することができたのでどうやったかを記録したいと思う。 やりたいこと SCSSにstylelintを導入する yarn stylelint hogehoge.scssとかやったらSCSSファイルにstylelintを実行できる プロパティのソートもやってくれる VSCodeにstylelint拡張機能を導入する エディタ上にリアルタイムでエラーを出してくれる 保存時に自動で修正してくれる 結論 インストール yarn add -D stylelint stylelint-config-standard-scss
BLOG ブログ ホーム ブログ dart-sass 採用に伴い scss ディレクトリ構造を考える scss でファイルを呼び出す際に使っていた【@import】は廃止され、代わりに【@use】【@fowerd】を使うように推奨されています。 なので【dart-sass】を採用します、それに伴って scssディレクトリ構造 や ファイルの紐付け に関してをルール化しようと思います。 dart-sass 環境準備 私は通常、指定がない限りタスクランナー(gulp)を使用して構築しています。 gulp を使用する場合であれば【gulp-dart-sass】【gulp-sass-glob-use-forward】各々のパッケージをインストールする必要があります。 gulp-dart-sass gulp-sass-glob-use-forward scss ディレクトリ ┣━ style.scs
CSSのmin()やmax()はとても便利ですが、SCSSで使用するとコンパイルエラーが起きます。 ではSCSSでmin()とmax()は使えないのか？ いいえ、そんなはずはありません。unquote関数と併用することで解決できます。 とても簡単で以下のように書くだけです。
今まではgulpを使ってきたのですが、最近はnpm-scriptsが流行りつつあります。 というのも、gulpだとどうしてもパッケージを大量に管理する必要があったり、gulpfile.jsがかなり複雑になりがちです。 package.jsonにある程度まとめて記述することで、管理するファイルも少なくなり、開発環境もシンプルになります。 今回はそんなnpm-scriptsで、SCSSのコンパイル方法についてまとめておきます。 npm scriptsを使う準備gulpを使ったことがある人であれば問題ありませんが、npmを使う必要があるのでNode.jsをインストールしている必要があります。 過去にいくつか記事にしているので、まだインストールしていない人はそちらを参考にインストールしてください。 現時点では、nodenvを使ってインストールするのをオススメしています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
