Dart Sass @use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins'; $default-grid-gutter: 2%; .grid { @include flexbox-grid-mixins.grid($gutter: $default-grid-gutter); > .grid__col-3 { @include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter); } > .grid__col-9 { @include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter); } } LibSass @import 'node
Babel7.4.0 から、長いことお世話になってきた @babel/polyfill が非推奨となりました。加えて、@babel/preset-env と @babel/ransform-runtime が core-js@3 に対応したようです🎉 これらに伴いpolyfill周りの設定方法が変わったので、その内容をメモしておこうと思います。 Babel と core-js の関係のおさらい これからのpolyfill設定方法 1. preset-env と useBuiltIns:usage で必要なpolyfillだけ読み込む方法 2. preset-env と useBuiltIns:entry で全polyfillを読み込む方法 3. transform-runtime を使う方法 Proposal の使い方 参考 Babel と core-js の関係のおさらい Babelが
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク webpackとBabelの基本を理解する(1) ―webpack編― webpackとBabelの基本を理解する(2) ―Babel編― webpackとBabelの基本を理解する(3) ―webpackとBabel編― webpackとBabelの基本を理解する(4) ―React編― webpackとBabelの基本を理解する(5) ―Sass編―（本記事） 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール SassのコードをコンパイルしてHTMLに埋め込む方法を知る バンドルされたCSSファイルを別ファイルに切り出す方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解してい
This content is not yet available in English - I'm working on it. ※ Babel 7.4.0で @babel/polyfill が非推奨となり、その修正とあわせて記事全体を加筆・修正いたしました。（2019/10/2） ES6で開発を行うにあたりwebpackやBabelを使用した環境を、公式サイトやブログを参考にしながら整理しました。普段ボイラープレートとして使用しています。 対応するもの ES6をES5に変換 jQueryなどを使用する場合はプロジェクトのJSファイルとは別にバンドル SASSを使用 CSSファイルはJSファイルとは別に出力 CSSのベンダープレフィックスを自動で付与 開発時はローカルサーバーを起動してホッとリロードさせる 環境・ツール webpack Babel Sass ESLint 設定方法 /**
※こちらの記事が「先月もっとも多く読まれたノート」の一つに入りました。ありがとうございます！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 ✔︎この記事の内容 実務、学習のため問わず、Web制作をするに当たって便利なツールと使いかたをご紹介します3年ほど独学でWebサービスを作り運用したり、フリーランスとしてお客さまのサイトを作る中で、様々なツールを見つけました。 初心者の方ほどこうした作業効率が上がるツールを知っていた方がいいと思うのですが、周りにエンジニアがいないため情報が流れてこなかっ
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
CSS設計の影響範囲は？ CSS設計はWEBアプリケーションの品質維持に大きく関わり、長期に渡ってチームメンバーに影響がある話です。それは、viewを組み立てる際のDOM構造設計そのもので、様々なコードからDOMが参照されます。ご存知の通り、グローバル汚染と脆い性質上、命名規則や規約・概念をもって乗り切るしかないのが現状です。 CSS Modules がこの問題を解決してくれる日も遠くない様に思いますが、しばらくの間はこの問題と向き合わなければいけません。本稿は新しいCSSプリプロセッサーの話も無ければ、CSS in JS の話もありません。「こんなCSS設計にするにはどうすれば良い？」と考え書き起こしたガイドラインの話です。 破綻しない。無駄が無い。運用し易い。拡張し易い。同じ記述が少ない。 同じバグを踏まない。多デバイスで共有出来る。リニューアルにも堪えられる。 有名なCSS設計から、
目標 この記事のゴールは、Webpackで以下のことができる設定を紹介することです。 SPAではなく複数のHTMLをPugを利用して生成する 複数のJSをそれぞれBabelでトランスパイルする(1つにはまとめない) 複数のSassもそれぞれコンパイルする(1つにはまとめない) CSSにAutoprefixerなどのpostcssをかける CSSを部分的にインラインにもしたい トランスパイルしないファイル(.pngみたいなもの)も扱いたい 先に結果から とりあえず webpack.config.jsを貼っておきます。 // yarn add apply-loader autoprefixer babel-core babel-loader babel-preset-env copy-webpack-plugin css-loader extract-text-webpack-plugin g
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
シングスブログ 中小企業のマーケティングやブランディングのコンサルティング。事業開発 (ビジネスモデルの開発)、デジタルマーケティングやウェブサイト改善など事業の持続的・長期的な成長・発展に貢献できるサービスを提供しています。 スタイルシートの Flexbox を使ってグリッドレイアウトが生成できる Sass Mixin「Flexbox Grid Mixins」をリリースしました。 グリッドを自由自在につくりたい どういうものかというと、以下のサンプルのような HTML と Sass があると、サクッとグリッドの CSS をつくってくれます。 HTML <div class="grid"> <div class="grid__col-3"> 3 </div> <div class="grid__col-9"> 9 </div> </div> Sass @import 'node_modul
CSS div.flex-container { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-pack:center; -moz-box-pack:center; -webkit-flex-pack:center; -moz-flex-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; -moz-justify-content:center; justify-content:center; }
CSS3のFlexboxでグリッドレイアウトしてみる Flexboxベースのグリッドシステムもいろいろで出てきている昨今でありますが、整理も兼ねて一度挑戦してみたいと思います。 投稿日2017年02月28日 更新日2017年04月25日 単純な横並び row というクラスの div の中に col というクラスの div を並べます。 クラスの命名には行を表す row と、列を表す col がよく使われています。 HTML <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div> CSSは row に display:flex を指定します。 col の width は 100% にします。 CSS .row { display: fle
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up alignment in CSS with Flexbox utility classes by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSで面倒なのは要素を整列させること Flexbox以前 Flexboxで簡単に CSSで面倒なのは要素を整列させること CSSで面倒なのは、要素を整列させることでした。しかし、Flexboxが登場して、理にかなった方法で整列させることが可能になりまし
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
Vertical Rhythm（バーティカルリズム）とは要素の配置に一定のリズム（パターン）を取り入れた手法のひとつです。具体的には行の高さ（CSSではline-heightの値）を1つの単位として、要素間の余白を決めます。ノートの罫線をイメージすると分かりやすいと思います。 Gridloverのようなサービスを使うと簡単に作成することもできますが、レスポンシブには対応していません。今回はSassを使用してレスポンシブに対応したVertical Rhythmを生成したいと思います。デモはCodePenで確認できます。 See the Pen Responsive Vertical Rhythm by ManabuYasuda (@gaku) on CodePen. ブレイクポイントを定義したマップ マップはkeyとvalueのセットを定義できるSassのデータ型のひとつです。ここにブレイク
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
この記事を書き始めたのは、現在使われているCSSの命名規則やスタイルの融合についての見解を Atomic OOBEMITSCSS という題名で風刺的な記事にまとめ、SitePointに投稿した数週間後です。それが8月頃のことだったのですが、この投稿はその後の私の生活に影響を及ぼしました。冗談のつもりで「 Atomic OOBEMITSCSS 」という題名をつけたがために、世間の人々はその題名を取り上げ、話題にしたのです。（正直言って、その内容について直接人々に質問することは、私にとって非常に愉快なことでした）。そして今年のSassConfで @extend の利用について議論したことがきっかけで、この見解を再検討する必要性に気づきました。 Classy CSSについて 上記で紹介した記事（「Atomic OOBEMITSCSS」）では、コンポーネントをマークアップする方法について（Pint
4月から勤務時間を減らしてもらい、パートのおばさんになりました。疲れが溜まると右腕が炎症を起こして寝…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
