タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
今年も残すところあと1月を切り、CSSもこの1年でさらに進化を遂げましたね。 CSSは普段、SCSSを使ってコーディングしている方も多いますが、 CSSの進化により、SCSS不要論も今年チラチラ見られるようになりました。 本当にSCSSがなくても問題ないのか、新しいCSSネストについて調べてみました。 CSSネストの基本 まずはCSSネストがなんなのかというおさらいをしておきましょう。 2つのクラスparentとchildがあり、parentより子の階層にchildクラスが含まれているときだけスタイルづけしたい時、普通のCSSだとこのように書きます。 .parent { min-height: 100dvh; width: 100%; } .parent .child { background: white; }
ペルソナ5 の UI かっこいいですよね。 今は ペルソナ5S が出ていますが、今回は ペルソナ5 のメッセージウィンドウを、 もしかしたら CSS で作れるんじゃないか、と思って作ってみました。 画像としてはこんな感じ これがゆらゆらアニメーションします。 特徴 自由変形した四角形。 白と黒で重なったウィンドウ 吹き出しの矢印の部分の複雑な形 不規則にそれぞれの枠が別々で動くアニメーション 動作サンプル( Codepen ) See the Pen Persona5 Message Window by ばりとん📛フルスタックエンジニア兼ITコンサル (@dd0125) on CodePen. ソースコード <link rel="stylesheet" href="persona5.css"> <body> <h1>ペルソナ5 メッセージウィンドウ</h1> <div class="me
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とほとんどのグローバル関数のサ
Visual Studio Code 通称「VSCode」で、Sass（Scss）を自動でコンパイルしてCSSに変換する方法をご紹介します。 セーブするたび自動でコンパイルしてくれるので非常に楽です。 すでに「VSCode」はインストール済みという前提で手順を紹介していきます。 まだインストールしてないよ！という方は、下記リンクよりインストールしてください。 Sass（Scss）の自動コンパイルに使用するプラグイン・Live Sass Compiler ひとつプラグインを入れるだけで、自動でコンパイルできるようになるとは、、 VSCodeめちゃくちゃ便利ですね。 Live Sass Compilerのインストールから設定まで全ての手順1.Live Sass CompilerをVSCodeに追加する画面左、黄色の点線のボタンをクリック。 Extension（プラグイン）の一覧が表示されるので
SE SCSSとはどんな言語なのでしょうか？ PM SCSSはプログラム言語ではなく、Rubyで作られたメタ言語のことです。実際のソースを見ながら理解を深めていきましょう。 SCSSとは何か SCSSとは、Sassの構文の一つであり、ウェブページのスタイルを指定するCSSをより効率よく記述するためのものです。 Sassとは「Syntactically Awesome Stylesheets」の略で日本語に訳すと、「構造的にすばらしいスタイルシート」という意味です。 SCSSは、CSSと同様「{…}」でブロックを作り、文末に「;」を使います。あらゆる構文を使うことができるCSSの拡張版です。 CSSはコーディングを進めるにつれて、より肥大化し、複雑になり、メンテナンスが難しくなっていきますが、SCSSはそれらを抑え、効率的に、読みやすくメンテナンスのしやすいコードを書くことができます。 SC
src/ |- assets/ | |- sass/ | | |- abstracts/ | | | |- _functions.scss | | | |- _mixins.scss | | | |- _variables.scss | | | | | |- base/ | | | |- _reset.scss | | | | | |- layout/ | | | |- _grid.scss | | | | | |- themes/ | | | |- _default.scss | | | | | |- main.scss | | |- prepends.scss | ... | |- App.vue
scssファイルの拡張子は.scssです。 SCSSのCSSへのコンパイルについてはWeb制作向けnpm-scripts をご参照ください。 ※Compassは個人的に使用していないので扱いません。 output-style SCSSをコンパイルしてCSSにした場合の形式は4種類あります。 元になるSCSS
GatsbyでSCSSを書いたり、Bootstrap4のような外部ファイルを読み込む方法。 GatsbyでSCSSを読み込むには Gatsbyの設定 まずは必要なモジュールをインストール。
Next.jsで使用しているのはdeprecatedなLibSassではなくDart Sassなので、@importではなく@useが使える。やったね！ ディレクトリ構成はとりあえず以下のようにしている。 src/styles以下にグローバルなSCSSを配置 アプリ全体で読み込むglobal.scss 色やサイズ等の変数（デザイントークン）定義 各種mixin 各コンポーネントのSCSSは各コンポーネントのファイルと同じフォルダに配置 グローバルなSCSSや定義のインポートをしやすくするため、tsconfig.jsonにエイリアスを定義
以前、Mac × Visual Studio Codeで始めるscss（sass）入門。環境構築も簡単にできる！という記事でも似た感じの内容の記事を書かせて頂いたことがありました！ Mac × Visual Studio Codeで始めるscss（sass）入門。環境構築も簡単にできる！では、「node-sass」というプラグインを使ってSCSS環境を構築する方法について書かせていただいています。 なぜ今改めて別のプラグインを使ってSCSSの環境設定についてのブログ記事を書くのかについては、一応歴とした理由があります。 実はsass（scss）公式からの情報発信を見てもわかるように、今後はnode-dassではなくdart-sassというものを推奨するという発表が既に出されています！ node-sassでは使用できた記法が、dart-sassでは使われなくなる、なんていう記法も存在していま
苦手なjsから初めてjQを触ったとき、なんて記述が楽なんだろうと感動した思い出があります。 そんなノリでcssもscssという拡張言語(メタ言語)が使えたら割と楽しかったので紹介してみようと思いました。 scssとは 記述の仕方どんな？ scssは基本cssとほぼ変わりません。ただ、cssの値に変数が使えたり若干プログラミングっぽいことができます。 ちなみに出来るからといって無理に変数等使わなくても、普通のcssの記述でも動くので初心者が始めやすい記述です。 はじめるには？ はい、環境構築必要です。これが一番めんどくさいですが無料ソフトやVSCodeというエディター使ってる方はプラグイン使えばscss使うことができるようです。ブラウザのツール等でもあるそうだとか。 自分は会社の先輩に手伝って頂いてローカルで環境構築しましたが、構築の完全理解に至って無いため、今回環境構築の話は割愛します 【
こんにちは。Eight でフロントエンドエンジニアをしている鳥山（@pvcresin）です。 ついこの間新卒で入ったと思ったら、もう 2 年目に突入していました。時が経つのは早いものです。 今回は Eight の Web フロントエンドで使っているスタイルのリンター（コードの静的解析ツール）を SCSS-Lint から stylelint に移行した話をしたいと思います。 SCSS-Lint Eight のフロントエンドではスタイリングに Sass（SCSS 記法）を使用しています。 そして、そのリンターとして SCSS-Lint を採用していました。 それをコードレビュー自動化ツールの Sider（旧 SideCI）と組み合わることで、PR（プルリクエスト）上で SCSS ファイルをチェックするように設定していました。 これによりスタイル定義の品質を担保していました。 SCSS-Lint
今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。 今回の完成形 今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。 .test-1 { margin-top: 16px; font-size: 16px; } @media screen and (min-width: 600px) { .test-1 { margin-top: 24px; font-size: 18px; } } @media screen and (min-width: 960px) { .test-1 { margin-top: 32px; font-size: 20px; } } .test-2
2020年の冬からSassが社内標準として採用されました。 最初は戸惑いましたが、慣れるとCSSを書くのがつらくなるぐらい便利です。 Sassのごく一部の機能しか使っていないな、と思ったので書き方をまとめてみました。 SassについてSass（Syntactically Awesome StyleSheet）はCSSのメタ言語です。CSSのメタ言語をCSSプリプロセッサと呼んだりします。 メタ言語は言語を定義したり、言語についての情報を記述したりするための言語です。CSSの機能を拡張した言語の1つがSassと言えます。 SassはCSSに変換（コンパイル）する必要があります。環境構築が面倒という方もGUIコンパイラやVSCodeのプラグインなどを使えば、気軽にSassを導入できます。 GUIコンパイラの使い方については、こちらの記事を参考にしてみてください。 Sass(SCSS)を始めよう
これは中級CSS&SCSSコーダー向けの技術記事ですー。 サクッとコピペして使ってもいいよー。 何？これまでもレスポンシブウェブサイトで文字サイズ可変をしていたのだけど、100vwに対する文字数で算出した値を使っていたので、1行あたり文字数でのコントロールはできてもピクセル単位での文字サイズはコントロールが出来てなかったのね。 そこで、ブレイクポイントごとに文字サイズをピクセル指定して、ブレイクポイント間はCSSで計算して補完させちゃおうというのを思いついたわけです。 なにはともあれ、デモをご覧くだされ。なお、便宜上ブレイクポイントを超えるごとに文字色が変わるようになっている。 事前に設定した5つのブレイクポイントと最小320pxに合わせて、500px, 200px, 150px, 50px, 20px, 5pxになるように変化を起こすんだけど、要素自体にあてるコードは @include
SCSSのファイル設計について Vol.1 SCSSのファイル設計について、解説します。 ディレクトリ構造は次のようなテンプレートとなります。 - scss - base - mixin - module - page - pulgins - setting style.scss それぞれのディレクトリの役割は、次のようになります。 baseディレクトリ ベースとなるスタイルが定義さているSCSSファイルを格納するディレクトリです。 mixinディレクトリ mixinが定義されているSCSSファイルを格納するディレクトリです。 moduleディレクトリ サイト共通で使用するモジュール別にスタイルが定義さているSCSSファイルを格納するディレクトリです。 pageディレクトリ ページ単位で使用するスタイルが定義さているSCSSファイルを格納するディレクトリです。 pulginsディレクトリ
このページをご覧になられたということは、SCSSでcalc()関数をご使用になられた方でしょうか。 そしてcalcの計算式に変数を入れたものの、上手く計算されないという状況でしょうか。 ご安心下さい、変数が含まれてても無事に計算できます。 以下の例はヘッダーの高さを80pxに固定し、メイン要素の高さをブラウザの高さに合わせて可変にしたい場合の計算式です。 赤線のcalcの計算式に、そのまま「$header-height」の変数を入れても、計算が上手くいきません。 それもそのはず、calcの計算式でSCSSの変数を使う場合、#{$変数名}と入力する必要があります。 以下ご確認ください。 See the Pen wvwrNNr by DoGgy (@DoGgy12) on CodePen. これで無事に計算が出来ました。 calcの四則演算のルール 実は上と別のパターンでも、calcの計算でハ
まいどです。バックエンドエンジニアのやなさんです。 さて、これまでNext.jsの環境構築、画面遷移、バリデーションについての記事を書きました。 実は、前回の実装と合わせて、login.tsxファイルにstyleを一部追加してました。 このなかの152〜155行目に下記のコードを追記しています。 .icon svg { height: 16px; } なぜ追加したかというと、onChangeイベントのsetStateしたタイミングで、iconのSVGのサイズがなぜか0*0のサイズになってしまい、ページから消えてしまう事象が発生していました。それを解消するためにstyleを追加しました。 はじめはSCSS記法で…… .icon { svg { height: 16px; } } と書いたのですが、Next.jsにpresetされているstyled-jsxは、Pure.CSSのみがサポートされ
SCSSの書き方をまとめてみました。 実際のHTML、SCSS、コンパイル後のCSSを例として記述しています。 SCSSの公式サイトはこちら
なぜ@importが廃止になるのか？ これまで、SCSSで外部のSCSSファイルをインポートする際には＠importを使っていました。 外部SCSSを読み込むことで、ブロックや機能毎にファイルを分割することができるので「このブロックに関するSCSSの記述はこのファイルを見ればわかる」という構成を作ることができ、保守管理がしやすくなります。 @importの使い方 このように、SCSSで外部ファイルのインポートの際に使う「@import」はとても便利な機能です。しかし、上記の通り2022年10月頃に「@import」は廃止されるようです。理由としては、 スタイルの定義がどのファイルにあるかわかりにくい。 （@importしたファイルをさらに@importできます。読み込み先のさらに先のスタイルまで読めてしまうので、どのタイミングで読み込まれたファイルにスタイルの定義があるかわかんなくなります
SCSSを使えばCSSよりも作業効率がUPすると分かっていても、コンパイルが必須と聞いて二の足を踏んでいる方も多いようです。そこで本記事では、SCSSで記述したファイルを自動的にCSSへコンパイルしてくれる「WP-SCSS」の便利さを解説したうえで、インストール方法やオプション設定、エラーが出た時の対処法などを解説します。 SCSS（Sass）とは？使用するメリット3つ 「WordPressのテーマを制作してみたい！」「自分好みにカスタマイズしたい！」という方なら、一度はSCSSに興味を持ったことがあるのではないでしょうか。 SCSS（Sass）とはCSSの拡張言語、いわゆるメタ言語の一種です。CSSの発展形といった方がイメージしやすいかもしれません。なお、SCSSには下記のようなメリットがあります。 ▼SCSS（Sass）のメリット 独自の書き方で関数が使える 変数が使えるだけでなく、値
SCSSとSASSは、CSSを使用する人にとって、耳にする機会が多い言語ではないでしょうか。効率的なコーディングを行う上で、便利であるという評価を知っているものの、まだ触れたことがないという人もいることでしょう。使いはじめるとすっかりその便利さにはまってしまうと思いますので、ぜひ触れておきたいところです。今回はSCSSとSASSにスポットをあてて、2つの違いや書き方、導入方法など必要となる基本的な知識をまとめました。コーディングに対する認識が大きく変わるかもしれません。これから入門を検討されている皆様のお役に立てていただければ何よりです。 SCSS／SASSとは SCSSとSASSは、Sass（Syntactically Awesome Style Sheets）というRuby製のCSSメタ言語です。Sassはハンプトン・キャトリン氏が設計、ネイサン・バイゼンバウム氏が開発したものとして知
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と比較した上での最大のメリット・「ブラウザにも
SCSSのファイル設計（BEM設計からFLOCSS設計に） 昨年(2018年)の5月ごろに、吉本式BEM設計という考え方のガイドラインコンテンツをまとめました。 一部の表現の甘さなどにより予期せぬ方向で話題になってしまいましたが、設計の考え方に関しては、それなりに評価していただけたのかなと思っています。 実は、吉本式BEM設計のガイドラインコンテンツを発信した頃には既に、実務では吉本式BEM設計は採用しておらず、FLOCSS設計の考え方で独自にカスタマイズしたSCSSファイルの設計でやっていました。 誤解のないように補足しておくと、吉本式BEM設計は長年BEM設計をやってきた中でカスタマイズしたものですので、完成度はそれなりに高いと思っており、また美しいファイル設計になっていると自負しています。 その中でFLOCSS設計の考え方に移行した理由は、BEM設計の考え方以外にも実務として経験して
Honeycombはあらゆる画面サイズに対応できるよう設計されたモバイルファーストなscssフレームワークです フォントやレイアウトなど、どんなサイズのモニタでも見栄えがよく分かりやすいUIを提供してくれるとのこと 他にも便利なヘルパー機能なども備えられています。シンプルで使いやすそうな印象でした。ライセンスの記載は確認できませんでしたので必要な場合は開発者にお問い合わせください Honeycomb
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめにこんにちは。胃もたれすることが増えてきたような気がしている 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; } } 最近のト
Nuxt + Stylelint + Prettier + VSCode で、保存時に SCSS を自動フォーマットする 動作確認した環境 OS Windows 10 Pro Editor VisualStudioCode ( v1.14.1 ) Package Manager Yarn Packages Create Nuxt App ( v2.12.0 ) Nuxt ( v2.11.0 ) Stylelint ( v13.0.0 ) やることまとめ Nuxt パッケージ導入 yarn create nuxt-app # 設定は自由に yarn add -D node-sass sass-loader yarn add -D [email protected] @nuxtjs/stylelint-module yarn add -D stylelint-config-standard st
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
SCSSのファイル設計について Vol.2 前回の記事の続きです、SCSSファイル設計について解説していきます。 必要なディレクトリ構成は次になります。 - scss - base - mixin - module - page - pulgins - setting style.scss 前回の記事で、baseディレクトリ、mixinディレクトリ、moduleディレクトリについて解説しました。 baseディレクトリに関しては、リセットCSS用の_reset.scssとサイト全体のベースとなる_base.scssが格納されます。 mixinディレクトリには、別Blockで同じスタイルが必要になった場合にmixinを定義するというルールで、mixinファイルを作成します。 moduleディレクトリには、サイト共通で使用するモジュール単位（Block単位）で定義されます。 また、吉本式BEM設
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ページを開く
![敢えて言おう、「非常口」のないソーシャルメディアは（Blueskyであろうと）カスであると | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4f1cb66270004e470f1bbc8ed28a45b7a7e69c4/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F12%2Ffire-exits.jpg)
