サイト制作関連はてブサイト制作に関連するはてブ記事をタグで抽出しただけ

Sass

あなたが知らないかもしれない CSS 変数活用法

この記事は、技術書典 13 で頒布中の「Vivliostyle で本を作ろう vol. 6」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めくだ …続きを読む

2022/9/10 16:54

  • Pocket

【WordPress】Sass の @import が非推奨になるから、「おじいちゃん平成くさーいwww」とキッズから馬鹿にされる前に遅ればせながら滑り込みで @use に書き換えてみたよ【editor-style.css】

【2022/09/09 追記】 タイトルを編集しました。 いつものように Twitter を見ていたら(仕事中じゃないですよ)こんな投稿が目に飛び込んできた。 鹿野さんのツイート あーそうなのよ、そう …続きを読む

2022/9/6 09:26

  • Pocket

【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita

はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 …続きを読む

2022/9/4 11:04

  • Pocket

エンジニア向けチートシート集 - Qiita

はじめに 今回はエンジニア向けのチートシート集のまとめを紹介していきます。 チートシートを利用することで 作業効率が上がる 概要が掴みやすい 学習にもなる といった恩恵が得られます。 ただし前提として …続きを読む

2022/8/4 10:08

  • Pocket

Chakra UIを薄く軽量に使う

はじめに この記事で説明しているChakraProviderの使い方は公式ドキュメントで推奨されているものではありませんのでご了承ください。 概要 @chakra-ui/reactではなく@chakr …続きを読む

2022/7/26 17:46

  • Pocket

node-sassからDartSassへsassコンパイラの移行 / 開発者向けブログ・イベント | GMO Developers

要約 LibSassが公式で非推奨となったためDartSassへ移行名前空間の実装や除算の記法変更などに注意 経緯 Webプロモーション研究室のフロントエンドチームでは今までにSASS(SCSS)のコ …続きを読む

2022/4/18 08:38

  • Pocket

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

Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 は …続きを読む

2022/4/16 17:04

  • Pocket

Webエンジニア(コーダー)向けVite環境の紹介【初心者向け解説】

こんにちは!のせっち@nosecchi01です。 最近流行りのViteを導入し、Web制作に使える環境構築をしていきます。 Viteはとにかくコンパイルの早さが売りのようです。(vite:ヴィットはフ …続きを読む

2022/4/4 22:35

  • Pocket

【CSS設計】ゼロからわかるBEM超入門

はじめに この記事はCSS設計 BEMについて初心者の方向けにわかりやすく解説した記事です。 できるだけ正確な情報を記述することを意識していますが、間違ったこともあると思います。なのでこの記事でざっと …続きを読む

2022/3/10 11:21

  • Pocket

Rails 7: dartsass-rails gemはNode.jsなしで使える|TechRacho by BPS株式会社

週刊Railsウォッチ20220228でもお伝えしましたが、つい最近、dartsass-rails gemがRailsのGitHubリポジトリで正式に登場しました。 dartsass-railsは、本 …続きを読む

2022/3/2 17:31

  • Pocket

VSCodeのおすすめ拡張機能と便利な設定、キーバインド集

主にフロントエンドを開発している、ぼくがかんがえたさいきょうのVSCodeを紹介します。 便利な設定, キーバインド集だけでも参考にしていただけると幸いです。 拡張機能 まずは言語問わず使えるものを紹 …続きを読む

2022/2/15 21:40

  • Pocket

Dart Sassへの移行でつまづいたこととか - Qiita

公式ブログによると新しいモジュールシステム導入に伴い、これまで使用されていた@importルールは2021年10月には非推奨に、2022年10月にはサポートが終了する予定になっています。 これにより新 …続きを読む

2022/1/24 18:26

  • Pocket

DartSassがなかなか辛かったのでGulpを修正してみた|notes by SHARESL

DartSassがなかなか辛い 以前、「【Sass】@importを@useに置き換えてみる《FLOCSS対応》」というLibSassからDartSassへの移行について記事を書きました。 【Sass …続きを読む

2021/12/11 02:59

  • Pocket

PostCSS で先取りする、未来の CSS 7選

postcss-preset-env PostCSS のプラグイン postcss-preset-env は、未来の機能候補として実際に議論されている記法や機能を Polyfill するプラグインをま …続きを読む

2021/12/3 18:02

  • Pocket

npm-scriptsでDart Sassのコンパイル環境構築

概要 今回は、npm-scriptを使用したSassの環境構築手順を紹介します! 説明するにあたって、大切な前知識があるのでまずはその紹介から入ります。 1. npm-scripts での環境構築 S …続きを読む

2021/11/2 12:49

  • Pocket

Annimay

A collection of pure CSS3 lightweight animations that can be applied to links, sections, buttons and …続きを読む

2021/10/18 11:53

  • Pocket

CSSの@font-faceでGoogle Fontsのwebフォントを利用する方法 | Free Style

webデザインでwebフォントを利用してデザインを構築していくことがよくあります。 そこで使えるのがCSSの@font-face規則です。 @font-face規則はwebフォントを利用するために用意 …続きを読む

2021/10/17 15:11

  • Pocket

SCSSの@importは廃止に!?@useとの違いについて解説! - PENGIN BLOG

@importとは@importとは分割されたSassファイルを読み込み機能です。 このようにファイル内が分割されていても、@includeで一つのSCSSファイルに統合して、まとめてcssファイルに …続きを読む

2021/9/14 02:50

  • Pocket

Sassファイルの管理方法。ディレクトリ構造(フォルダ・ファイル構成) | Free Style

Web制作でSassを導入してCSSを生成していく中、ディレクトリ構造(フォルダ・ファイル構成)をしっかり作っておくと、Sass(scss)ファイルの管理がしやすくなります。 Sassを複数ファイ …続きを読む

2021/9/2 11:14

  • Pocket