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

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

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

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

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

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

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

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

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

[CSS]見出し、本文、リストなど、文字周りをrem指定で簡単に設計できる便利なオンラインツール | コリス

2018/08/03 94 users コリス 小見出し 行間 マージン CSS

Webデザインで使用する見出し、小見出し、本文、リストなどフォントの基本サイズ、行間、それぞれのマージンなど、文字周りのデザインを実際のブラウザで確認しながら設計できる便利なオンラインツールを紹介します。 ルート要素を最初に定義して、それを元に見出しや本文を設計するので、rem指定も可能。また、SCSSもサ... 続きを読む

プログラマーから見た、SCSSの正しい(かもしれない)使いかた - Qiita

2017/09/12 138 users Qiita プログラマー CSS ところ メタ言語

SCSSとは SCSSというのは、CSSのアレなところを何とかしようという目的で作成されたメタ言語です。詳細は省略します。 でですね。 ここで大事なのは、こいつは要するにCSS周りの技術ですので、つまるところは基本「デザイナーさんが使う」ものである、というところです。 彼らは概して、非常におおらかで、健康的で、寛容です。私たちサーバーサイドエンジニアのように、細かいことで「こんな仕様は許されんな！... 続きを読む

CSSの裏技20選を一挙紹介！【必見！コツをつかんで効率的にWebサイトをデザインする】｜SeleQt【セレキュト】

2017/06/12 91 users SeleQt less セレキュト ローディング レンダリング

フロント・エンドの開発はセレクター選択と最小コードによる迅速なローディングとレンダリングにおいて、ますます効率性に特化しています。 LessやSCSSといったプレ・プロセッサは仕事をする上で役立ちますが、自然なやり方で最小かつ手早くCSSを記述する方法は数多くあります。 このガイドは20ProCSSをカバーしており、レイアウト全体でスタイルの流れを標準化し、効率的なだけでなく多くの共通した問題も解... 続きを読む

自動検出と自動修正でCSSを保守する - Qiita

2014/10/18 240 users Qiita CSScomb JSLint CSS 蔓延

CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。SCSS版のjslintやrubycopのようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコ... 続きを読む

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Webクリエイターボックス

2013/07/01 486 users Sass Mixin CSSコーディング Compass すそ

以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそ... 続きを読む

Prepros :: Compile Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown with live browser refresh.

2013/05/20 145 users Stylus Jade Sass CoffeeScript

Compile Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown with live browser refresh.Compile with easePrepros can compile Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown. ... 続きを読む

昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー

2013/05/04 249 users naoya Grunt less teppeis Yeoman

昨日の続き。こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするもの、つまり rake なんかと同じようなものと以前にチラ... 続きを読む

CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた ｜ Developers.IO

2013/03/21 119 users Sass less 野中 CSS Developers.IO

CSSレイアウトフレームワーク CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた NEW: 2013年03月21日 みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。 そういえばGoogle Readerが終了するとのことでとても残念ですね。 読者のみなさまも次に引っ越し先のツール探しで忙しいところだと思います... 続きを読む

【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 ｜ Developers.IO

2013/03/11 59 users Developers.IO Retina Display

すぐに使えるSCSS入門 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 NEW: 2013年03月11日 はじめに みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 前回はマインクラフトネタでフォントの作成について紹介しました。 今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。 前回作成... 続きを読む

SinatraとHamlとScssとCoffeeScriptでモダンなWeb制作環境を構築する #1 ｜ クラスメソッド開発ブログ

2013/01/28 95 users Sinatra Haml CoffeeScript

こんにちは山形です。 htmlやcss等を書いて静的なWebサイトを制作している方なら誰でも、より効率的な環境求めていると思います。 DreamweaverやAptana等のIDEを使うのも一つの手だと思いますが、より柔軟な環境構築としてご紹介したいと思います。 Rubyをインストールする Windowsの場合 Engineyard社が提供しているRailsinstallerでサクッと入れてしまい... 続きを読む

OneClickCSS

2013/01/07 340 users OneClickCSS less Sass HTMLソース

OneClickCSSはHTMLコードを元に、様々なStyleSheetを自動生成するサービスです。子孫セレクタ、小セレクタ、Less、Sacc、Scssを１クリックで自動生成します。What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサ... 続きを読む

コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 - YATのBlog

2012/10/31 437 users ベンダープレフィックス YAT コーディング CSS Sass

Sass、Scssのフレームワーク「Compass」に関しての記事です。ベンダープレフィックスの記述が不要など、コーディングのスピードアップに最適なその秘密を紹介しています。CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになって... 続きを読む

【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 ｜ クラスメソッド開発ブログ

2012/10/23 266 users Webデザイナ コーダー向け クラスメソッド開発ブログ 変数

はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回は... 続きを読む

ブラウザでJSX, CoffeeScript, SCSS, LESSをすぐに試せる魔法の1行 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/07/13 60 users less Mixin CoffeeScript jsx CSS

ブラウザだけでjavascript, HTML, CSSを書いて実行できるサービス「jsdo.it」が、ちょっとパワーアップしました！ これまでの言語に加え、JSX, CoffeeScript, SCSS, LESSを実行できるようになりましたー！！ 「ちょっと試したいけど環境を作るが面倒...」「SCSSのmixinをシェアしたい」などなどブラウザだけで解決できちゃいますよ♪ 使い方 コードの1... 続きを読む

(S)CSSの書き方メモ - Weblog - hail2u.net

2011/10/24 142 users Weblog hail2u.net CSS SCSSファイル

HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな…とか色々試してますが、なかなかこれ！というものに辿りつけません…。ということで、ここ最近の書き方をメモがてら晒してみる試みです。 実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルで... 続きを読む

Sass、そしてSassy CSS (SCSS)

2011/02/11 482 users Sass CSSフレームワーク CSS メタ言語

CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass(主にSCSS)の良さを解説する。CSSフレームワークSassSassy CSS aka SCSSSCSSでCSSフレームワーク2カラムレイアウトの作成clearfixやReset CSSの組み込みカラム幅の変更カラムの入れ替えSCSSで完結することの意... 続きを読む