この記事では、@at-rootの使い方を解説します。 @at-rootはネストして書いているセレクタを、親セレクタやメディアクエリを除外して、ルートの位置に戻すことができます。 これだけの説明では、よくわからないと思いま …

最近のWebサイト制作ではほとんど必須となっているモバイル対応。 そのモバイル対応でレスポンシブWebデザインを実装する場面の多くなってきていると思います。 そこで画面サイズに合わせてスタイルを変えるために、メディアクエ …

Sassではセレクタだけでなく、プロパティもネストして書くことができます。 例えば、marginやborderなどショートハンドが存在するプロパティは、ハイフンのところで区切ってネストができます。 CSSで上下左右のマー …

前回までで、子孫セレクタ、隣接セレクタ、間接セレクタ、直下セレクタをネストして書く方法を解説しました。 ここまでは、HTMLの構造的にも親子関係や兄弟関係にあるタグに対して、ネストの親子関係を使って記述してきました。 そ …

CSSには子孫セレクタ以外にも、隣接セレクタ、間接セレクタ、直下セレクタといった指定方法があります。 これらもSassでネストを使って書くことができます。 それでは、子孫セレクタ以外のセレクタをネストして書くにはどうした …

Sassの大きな特徴として、入れ子構造があります。 ここでは、入れ子構造、ネストの書き方の基本を解説します。 Sassには、Sass記法とSCSS記法の2種類がありますが、この講座では特に明記しない限り、SCSS記法で解 …

Sassはそのままではブラウザから読み込まれないので、コンパイルしてCSSに変換する必要があります。 ここでは、Gulpというタスクランナーを使って、SassをコンパイルしてCSSにする方法を解説します。 Node.js …

【フロントエンドエンジニアのための「Sass」講座】では、Sassの基礎から応用までを網羅的に解説していきます。 ここでは、Sassとは何か、その概要と歴史、利用するメリットなどについて解説します。 Sassの概要 Sa …

最近、Vue.jsをいろいろ触ってみてるわけですが、Nuxt.jsもやってみようと、npmコマンドを叩いたら、エラーが…… nodebrewでnode.jsをインストールしたときに、PATHは通して確認したはずなのに。 …

Vue.js での条件分岐のやり方、基本のきです。 条件分岐にも応用編はあるのだけど、まずは基本から。 【参考】 Vue.js 公式ドキュメント：条件分岐とループ 実際の、動作サンプルは こちら。 条件分岐 「v-if」 …

フロントエンドの開発で使われるIDEはいくつもありますが、Atomエディタを使っている人も多いのではないでしょうか？ DreamWeaverなどの重厚なツールよりも、最近はAtomやSublime Text 3のような軽 …

今回は、Vue.js で DOM の class や style などの属性を動的に変える方法です。 前回使った、中かっこ２つ {{ msg }} この記法では、属性の変更はできません。 [crayon-651c6dc9 …

最近、仕事でVue.jsを勉強する必要があり、　少しずつ理解が進んできたので、この機会に記事にしておこうと思います。 Vue.js とは何か？ そもそも、Vue.js とは何かって話からです。 Vue.js はWebサイ …

Homebrewも入れたし、node.jsも無事入ったし、というわけで、次はgulpとGruntを入れるかー、と思ってたんですが、ちょっと待てと。 さっきから使っているターミナルがデフォルトのままだったことに今さら気づい …

次はgulpとGruntをインストールするかー、と思ったんだけど、昨日入れたHomebrewでnodeがエラーになっているのが気持ち悪いので、こいつらを入れる前にnode.jsをnodebrewに変更することにします。 …