この記事では、@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 …

2017年もいよいよ終わり、あと1時間半（笑） というわけで、このギリギリになってこの1年を振り返ってみようかと思います。 仕事 これが一番大きな変化でしたね。 去年の12月末で会社を辞めて、今年の1月からフリーランスに …

今日、珍しく友達とサシ飲みをしていて、話しているうちにちょっと思い出したことがあったので、メモ。 自己分析の話です。 その友達が「自分を冷静に眺めている感じで、あまり熱くなれないんだよねー」という話から発展したんですけど …

「一汁一菜でよいという提案」という本、だいぶ前に読んだんですが、今更ながら感想です。 「きょうの料理」などテレビや雑誌でも有名な料理研究家の土井善晴さんが書かれた本ですね。 レシピ本ではなく、エッセーのような内容になって …

「好きなことだけやって生きていく」と聞いて、どう思いますか？ そんなことできるわけない？ 好きなことだけで食べていけるのは一部の才能がある人だけだ？ そもそも好きなことなんてないし？ この本では、好きなことだけやって生き …

今日でフリーランスとしては1件目の案件の最終日でした。 最終日ともなると、引き継ぎも終わり、新しい仕事が振られるわけでもなく、手持ち無沙汰なまま時間が終わるのを待ってた感じでしたね。 プレミアムフライデーだったので、早め …

ひとりでいることが惨めだとか、ひとりでいるのは寂しいとか、そういう風に思う人が意外に多いのだということに、少し驚く。 僕自身はひとりでいる時間が好きだし、四六時中誰かと一緒にいるなんていうのは、鬱陶しくてたまらないと思う …

一昨日だったか、Twitterにも投稿したけど、Webサイトを公開しました！ フリーランスになって、9ヶ月経ってやっとかよ…… というツッコミは脇に置いておいてだ。 公開したWebサイトはこちら。 とくに過去の仕事とかの …