Sassのビルド時にCSSの出力形式を指定する - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
最近学んだCSSメディアクエリについて - Qiita
はじめに 最近、初めてメディアクエリについて学んだことをメモとして残しておきたいと思います。 メディアクエリについて Webページを閲覧する際に、ユーザーはPCやスマートフォン、タブレットなど様々な端末を用いています。その際に端末に応じて、Webページ上に表示する内容を表示する必要があります。レスポンシブなWebページを作成するために、メデイアクエリが使用されます。レスポンシブなWebサイトを作成する際に使用される有名な例だとbootstrapが挙げられます。 QiitaをPCで表示した場合 Qiitaをスマートフォンで表示した場合 上記のようにPCとスマートフォンで表示した場合、それぞれのデザインが異なっています。 レスポンシブなWebデザインとは？ メディアクエリを調べた際に、レスポンシブなWebデザインと見かけることが多かったのですが、そもそもレスポンシブとは何かと疑問に思い調べまし
sassの繰り返し処理を使ったクラス付与のメモ - Qiita
.class0-0 { width: 0.0px; } .class0-1 { width: 0.1px; } .class0-2 { width: 0.2px; } .class0-3 { width: 0.3px; } .class0-4 { width: 0.4px; } .class0-5 { width: 0.5px; } .class0-6 { width: 0.6px; } .class0-7 { width: 0.7px; } .class0-8 { width: 0.8px; } .class0-9 { width: 0.9px; } .class1-0 { width: 1.0px; } .class1-1 { width: 1.1px; } .class1-2 { width: 1.2px; } .class1-3 { width: 1.3px; } .class1-
Webpack4でes6/sassをcompile - Qiita
webpack4でcssをsassにes6をes5にcompileさせる 処理内容 es6の記述をbabelでes5に変換 polyfillでasync/await対応 sassファイルをcssに変換 postcssのautoprefixでprefixを作成 css、jsファイルをbuildでminify imgファイルを圧縮 eslint導入 devServerでlocal作業 jQueryを一応入れてます ディレクトリ構成 { "name": "hoge", "version": "1.0.0", "description": "", "main": "src/js/app.js", "scripts": { "start": "webpack-dev-server", "dev": "webpack --mode development", "build": "webpack --m
堅牢で保守的な最低限度の CSS 設計 - Qiita
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 CSS 設計 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding （以降、BEM） 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component：Atoms Project：Molecules に分類します。
Ruby on Railsで外部のcssを読み込む方法 - Qiita
Ruby on Rails自分用備忘録 Ruby on Railsの既存プロジェクトを引き継いだ。そもそもRubyもRailsも触ったことがなかったけど、フルスタックフレームワークって何ぞやってことは、概ねDjangoで理解してたし、Rubyみたいなモダン言語は別に勉強しなくても、まあなんとなく雰囲気でいけるんじゃん。言語よりフレームワークの使用を覚えるのが面倒臭かった。ほら、フルスタックフレームワークって設計者の癖がより色濃く出るじゃんね。んで、早速「ん？」ってなった箇所があったので、書き留めておこうと思う。なんでもかんでも、できることなら正確に理解した今日この頃。 どうやってcssを読み込めばいいんだろう slimからcssを個別に読み込んでる感じ？とか思ったけど違った。slimからcssを呼び出してない。なのにcssが反映されている。なんじゃこりゃ。んで、勉強して知った。Railsで
【mac用】npmでgulpを使い、ejsとscssの環境を作る - Qiita
project ┃-ejs ┃ ┃-この配下にejsファイルを作成していく ┃ ┃-img(ここに画像を配置すると、自動的にhtml配下にもimgフォルダが生成され、軽量化された画像が出力されます) ┃ ┃-includes ┃ ┃ ┃ ┃ ┃ meta.json(meta情報の一括管理。ここでの説明は割愛。) ┃-html ┃ ┃-node_modules ┃ ┃-gulpfile.js ┃ ┃-package.json ┃ ┃-gulp_install.command ┃ ┃-css（ここにscssで変換されたcssファイルが格納されます） ┃-scss ┃ ┃-この配下にscssファイルを作成していく 必要ファイルについては下記順次説明していきます。 gulpで作成する制作環境に使うプラグイン ・browser-sync: ファイル変更の監視、ブラウザの自動リロード ・gulp-au
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sass mixin使って見たらすごく楽しかった。。 - Qiita
stylusについて - Qiita
SCSSの基本的な書き方 - Qiita
Nuxt.js + TypeScript + Sass でプロジェクトをスタートする - Qiita
gulpで静的サイトジェネレーター構築 - Qiita
【CSS scss】均等カラム割りレイアウトmixin - Qiita
gulpのタスクを追加して便利な環境にしよう - Qiita
PostCSSでSassをもっと楽に - Qiita
要素を左右に寄せる方法 - Qiita
要素を簡単に中央寄せする方法 - Qiita
background-imageをレスポンシブする際にpadding-topが認識されない現象を対処する(Edge) - Qiita
gulp+pug+scss+autoprefixerのコンパイルが突然できなくなったので、gulp4に移行した話 - Qiita
create-react-appでPostCSS環境を作る - Qiita
