CSS記述を高速化して時間に激務にゆとりを。Sassの基礎と書き方入門【Webデザイン】|最果てデザイナーの今更はじめるライフスタイルデザインデザインCSS記述を高速化して時間に激務にゆとりを。「Webデザインのもう一歩踏み込んだスキルを身につけたい。「制作効率を上げて、連日の深夜までの作業から抜け出してゆっくり眠りたい。「Sass正直どんなものかよく分かってないから笑ってごまかしてる。」この記事はそんな方へ向けて書いています。Webデザインを含めた制作系のお仕事。締め切りが近づいたり、取引先から無茶な要求や仕様変更に振り回されたり...。作業が深夜まで及んだり、徹夜しなければ締め切りに間に合わない様な状況におちいっていませんか?僕自身、ついこのあいだまで取引先の無茶な要求に振り回され、徹夜作業を強いられていました。それなりの経験をつんできたつもりでいてもこんな状況を強いられるので、駆け出しのWebデザイナーの方は本当に寝る間も惜しんで作業しなければならない場面が多くあると思います。制作系の仕事にとって作業スピードや効率を上げていく事は、平穏で健康的な生活を送る為の死活問題になります。同じ時間内で作業効率を高める為のちょっとしたコツやスキルを身につけておく事で、最終的な完成品の質も高まり、自分の市場価値も高める事ができます。今回はそんな作業を高速化する為の1つのコツ。CSSを効率良くコーディングするための「Sass」について、基本的な概要と書き方を解説しています。「Sassって耳にする事はあるけど、正直どんなものかよく分かってない。」そんな方は是非参考にご覧ください。5分でざっくりつかめる!Sassの基礎と使い方。Sassリファレンス。具体的な書き方と使い方。疑似セレクターは「&」で表記できる。まとめ:Sassをマスターして、ぐっすり眠れる健康的な日々をスポンサーリンクたった5分でざっくりつかめる!Sassの基礎と使い方。Sassとは?CSSを効率的に書くことができる言語。拡張子が「.scss」のものと「.sass」と2種類ある。本記事では現在主流の「scss」について解説。Sassを使う為には「ruby」のインストールが必要。Sassとは、Webサイトを装飾する為の言語、スタイルシート「CSS」を効率的に書く事ができる言語です。プログラミングライクな書き方ができ、プログラミングを勉強した後にWebデザインをはじめた方にはSassの方が書きやすいと感じるかもしれません。Sassには種類が2つあり、拡張子が「.sass」のものと「.scss」のものがあります。rubyっぽく書ける「.sass」から始まっていますが、現在はCSS3っぽく書ける「.scss」が主流です。本記事では基本的に「.scss」の基礎や書き方について解説しています。「CSSファイル」といった様な流れで、Sassでコーディングしたファイルを最終的にCSSファイルに変換して使用します。「Sassの書き方を覚えたから、今日からCSSをSassで全部書いていくぞ!」という訳にはいかない場合があるのでご注意を。Macにはデフォルトでrubyが使えますが、Windowsは別途rubyが使える環境の設定が必要です。Sass公式サイトruby公式サイトSassを使うメリットって何?プログラミンライクに効率良くCSSを書く事ができる。関数、変数などを定義する事ができる。これらの事から、CSSコードを再利用しながら、まとめて短くシンプルに書く事ができる。Sassは簡単に説明すると、CSSをプログラミングライクに効率良く書ける様にしたものです。定義する事ができます。こっちゃ?」となるかもしれません。簡単に説明すると、変数とは、イメージ的には値を入れておく箱の様なものです。「赤くておいしいリンゴ」という文字列を「a」という名前の付けた箱に入れておけば、次からは「a」という一文字でを「赤くておいしいりんご」を表す事ができます。関数とは、よく使う処理をまとめたものを指します。いった、プログラミングで確立されている、頻繁につかう値や処理をまとめる事で効率の良くコーディングする方法。SassはCSSのコーディングでもそういったプログラミングライクな効率の良いコーディングが実現できる様にしてくれています。修正のしやすい短くシンプルなCSSコーディングができる様になります。」と感じるかもしれません。「自分でもできそうだな」と感じていただけると思います。実際にどんなコードを書く事になるのか?次項から載せていってみます。Sassリファレンス。具体的な書き方と使い方。基本的な書き方と構造scssで書いたスタイル上記scssと同じ意味のcssスタイル上記コードはscssで書いてみたスタイルと、同じ意味のCSSスタイルです。scssの一番のポイントは、htmlと同じ様にネスト(入れ子)構造なっているところです。人によってはCSSよりとっつき易い書き方に感じるかもしれません。a」としていたセレクターが、scssではネスト構造を活用し「a」だけで指定する事ができます。視覚的にも後から見た時に、親子関係が分かりやすくなっています。疑似セレクターは「&」で表記できる。scssで書いたスタイルscssで書いたスタイルマウスをホバーした時に色を変えたりする為に使う「疑似セレクター」。scssでは、スコープ内なら「li:hover」といった指定を「&:hover」と書く事ができます。「アクセントカラーのカラーって何色指定してたっけ...。#FF6347、いや、#EE6347だっけ?」となった事はありませんか?scssなら簡単にその問題を解決できます。方法は「変数」を利用してその色を定義しておくだけです。あとは、その色を呼び出したい時に設定しておいた変数、上記コードだったらアクセントカラーなら「$accentColor」といった覚えやすい名前をつけておき、呼び出す時にその変数を入力するだけで迷う事なくコーディングを進める事ができます。mixinで、スタイルをまとめておいて使い回すmixinを使って、複数の要素に適用する予定のスタイルをまとめておき、必要な時に呼び出す事で便利に使い回す事ができます。上記コードを例にすると、幅が300pxでパディングを20px、さらに5pxの角丸をつけた要素を複数配置する予定がある場合に、「@mixin」をつかってそのスタイルをまとめておく事で必要な時にそのスタイルセットを呼び出して適用させる事ができます。変数名()」で呼び出します。mixinには「引数」を渡す事もできます。「角丸を一つだけ10pxのものをつくりたい」そんな場合は、予め初期値として角丸を5pxの定義を、@includeで呼出す再に引数として10pxを渡して上書きする事で実装する事ができます。継承などもSassでは使用する事ができます。50%);→指定した色より50%明るい色といった感じで、CSSでは数行に渡って書かなければいけなかっり、調整がややこしかったりしたものが一発で指定できたりできます。まとめ:Sassをマスターして、ぐっすり眠れる健康的な日々を日々締め切りと戦いながらがんばっているWebデザイナーの方へ向けて、少しでも効率的に作業をすすめ、徹夜や深夜までの作業から開放される為のワザの1つ。「Sass」の基本的な書き方やどんなものなのか?ということについて、入門編としてざっくりと構造や代表的な使い方をまとめてみました。マスターすれば、本当に便利にCSSコーディングができる様になるとともに、修正や変更にも強いコーディングができる様になります。Sassを利用できる環境をつくる為には「Ruby」と「Sass」をインストール、設定する必要があります。僕も最初はMacで使える様にする為の設定で無駄に手こずったりしました。次回はまたその辺りについて記事にしてみたいと思います。この記事を誰かのお助けになれば幸いです。楽天ブックスで見るAmazonで見るKindleで見るhontoで見る紀伊國屋書店で見るMacでSassがエラーでインストールでできない問題を解決した話【一瞬で解決するかも】cssのコーディングを効率化する「Sass」。MacでSassを使える様にする為にインストール作業をしていたところ、エラーで無駄に苦しめられました。わかれば解決方法はとても簡単でした。エラーの内容と解決方法を備忘録として残しておきます。同じ様なエラーでお困りの方は是非一度ご参考にご覧下さい。スタイルシートスポンサーリンクスポンサーリンク【無料】プログラミングなんて自分にできるの?一番簡単に最短でスキルを身に着ける方法。こがねさん「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしないゾ...。」AIソルトくん最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です。した基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます。今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。「最短でプログラミングスキルを身に付けたい。「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。「一緒に切磋琢磨できるプログラミング仲間が欲しい。「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。プログラミングのオンラインスクールも探せば色々選択肢があります。その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。1つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。スキルは奪われないし裏切りません。その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。関連記事デザイン・プログラミングなどこんなに簡単でいいの!?オリジナルグッズの作成・販売が一瞬でできる「SUZURI」が便利すぎる。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなどSQL入門者向け構文リファレンス。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなどphpプログラミング学習1日目。無料開発ソフトで環境を整える方法。最果てデザイナーの今更はじめるライフスタイルデザインデザイン色の組み合わせでお困りなら。配色の効果や相性を判断する為のコツ。まとめて指定「メソッドチェーン」の書き方のアドバイス。最果てデザイナーの今更はじめるライフスタイルデザイン【簡単】アフィリエイトで稼ぐ!広告提供おすすめASPサイト5選。何だかんだそれなりに色々できちゃう多機能なデザイナーです。・ネットショップ運営・マーケティング・イラスト・コピーライティングなど音楽やアート、ITや先端技術が好き。クリエイティブで自由に楽しく。デザイン、プログラミング、お小遣い稼ぎ、副業や日々の体験談などの雑記ブログです。/最新の投稿2020年2月2日なんとかなる。【資格】Webクリエイター能力認定試験を受けてみた話【難易度や概要など】2019年12月7日たった5分でHTMLコーディング速度を爆上げ。emmet記法の使い方。2019年11月10日MacでSassがエラーでインストールでできない問題を解決した話【一瞬で解決するかも】2019年11月9日CSS記述を高速化して時間に激務にゆとりを。【体験談】2週間で国家試験合格。ITパスポートのオススメ勉強方法。iパス4.0を合格】アイデアが浮かばない...。そんな時に見直すアイデアの出し方のヒント。【2019年版】これでOK。カエレバヨメレバの使い方。jinデザインWordPressサイトで設定する方法を解説。【便利なブログパーツ】やらなきゃ絶対損。【資格】Webクリエイター能力認定試験を受けてみた話【難易度や概要など】twitterでよく見る強調の囲みのやつ。ギザギサ吹き出しAAを簡単につくる方法。Google検索のコツ。便利な全20のテクニックとオプション機能まとめ。アーカイブ2020年2月2019年12月2019年11月2019年10月2019年9月2019年8月2019年7月2019年6月2019年5月2019年4月2019年3月2019年2月2019年1月2018年12月2018年11月2018年10月2018年9月2018年8月スポンサーリンク繋がりやすてく高速、安定のオススメレンタルサーバー。どこを使うか迷っているならXSERVERが絶対オススメです。ドメイン取得価格がたった1円〜。ドメインを取るならお名前.com。HOMEデザイン・プログラミングなどデザインCSS記述を高速化して時間に激務にゆとりを。me何だかんだそれなりに色々できちゃう多機能なデザイナーです。・ネットショップ運営・マーケティング・イラスト・コピーライティングなど音楽やアート、ITや先端技術が好き。クリエイティブで自由に楽しく。デザイン、プログラミング、お小遣い稼ぎ、副業や日々の体験談などの雑記ブログです。最果てデザイナーの今更はじめるライフスタイルデザイン。