どうも7noteです。CSSが嫌いな方が多いですが、私はフロントマンなのでCSSは好きです。 Twitterを見ていると、 「CSS嫌い」 「CSSむずい」 「CSSわからん」 などなどの言葉をちょくちょく見かけるなと思っていました。 実際エンジニアの方から「CSS、よくわかるなぁ」なんて感じの言葉をかけられることもあります。 CSSって嫌われてますね。。。Twitterならではの偏りはありそうですが。 ということで、勝手ながらCSSが嫌いになる理由を考えてみました。 CSS嫌いを克服する方法も少しだけ最後に書いているので、よければみていってください。 ▼エラーが出ない 普段PythonやCなどのプログラミング言語を中心に開発されているエンジニアの方からするとエラーが出ないのは恐怖だと思います。 エラーが出ないときほど怖いものはないですからね。 「原因不明のエラー(不具合)は怖い。」 ▼プロパティの種類が多すぎる 数えてないですが、おそらく100は超えてて200あるかどうか、、、くらいでしょうか。 一覧↓ https://weblan3.com/css/css_property#css_property_purpose しかもpaddingとmarginのように似たようなものがあったりするのでややこしい。 違いが分かりにくい。 「そう、CSSはややこしい言語である。」 ▼無効化や削除したいのに、なんのプロパティのせいなのかが分からない 「なんか余計なcssが効いてそうだけど、どこで効いてるかわからない。という場面も多いのかなと思います。 しかも見つけてもそれ消していいのか分からないという不安。。。スコープ的な概念がないので、1行だけで全部に反映されるのは便利なのですが、その分修正するときにはめっちゃ神経を使います。 「つまり、cssを触ると疲れるんですよね。」 ▼不具合が出ても何て検索したらいいかわからない。 うまくいってない＝見えない・反映されない。 だから原因がわからない。だからなんて検索していいかもわからない。なんのプロパティが影響してるせいでうまくいってないのかがわからない。そもそもプロパティ以前の問題の可能性もあるから困る。 「解決策を探す方法が分からないから詰んでる。」 ▼各種ブラウザに依存性があるプロパティが多い ※@scivola さんよりコメントでいただきました。ありがとうございます。 「Chromeでは使えるけどIEでは使えない」、「iosのSafariだけなんか効かない」 なんてことが多々あります。 さらにはIEにも対応しなければならないとなると、地獄を見る可能性もあります。 「ブラウザごとの特性を覚えつつ、プロパティを覚えるなんて地獄」 ▼学習サイトじゃ学びきれない 正直CSSの5〜10%くらいしか解説してないと思います。仕事ができるレベルの理解度で60〜70%くらい理解していれば、いろいろできると思いますが、プロゲートのような学習サイトをやったからといってCSSが使えるようにはならない…(あくまで個人的見解です)。 「cssを勉強しても、分からないままなのは変わらない。」 ▼そもそも予備知識が必要だから勉強してないと難しい フロート、ボックスモデル、メディアクエリ、フレックスボックス、などなど。 正直知識なかったらサッパリなのは当然。 勉強してなあテストの範囲出されても答えられないのと一緒だから、cssがわからなくても大丈夫です。当然です。 勉強する暇があったらわかる人に聞くわ！ でもCSSわかる人が近くにいない。。。 「勉強してまでCSSを覚えるつもりはない」 CSS嫌いを克服するには ・慣れる ・恐怖心をなくす と曖昧な言葉だけでも締まりが悪いので具体的な方法も考えてみました。 【CSS嫌いを克服するコツ】 ・googleChromeの検証ツールを使う ・模写コーディングを行う ・知ってる人に聞く、もしくはお願いする 「googleChromeの検証ツールを使う」 「F12」もしくは「Ctrl+Shift+I（MacではCommand + Option + I）」で起動できます。 検証ツールでHTMLとCSSを確認することができます。 ↖このアイコンをクリックした後、ブラウザの要素をクリックするとフォーカスがあたり、その要素とその要素に効いているCSSを確認することができます。また検証ツール上で数値を変更したり、プロパティを追記したり、無効化にしたりもできます。 「模写コーディングを行う」 やはり模写コーディングを行うと格段にスキルアップができます。そこで使われているプロパティを真似して使うことで、なんとなく何がどこに影響しているのかがわかります。 また模写コーディングは実用的なプロパティに多く触れることができるので、理解までのスピードがめちゃくちゃ早いです。ただ、その分難易度は少し高いかもしれません。。。 デザインが簡単なサイトの模写から始めると良いと思います。 「知ってる人に聞く、もしくはお願いする」 苦手なものはだれにでもあると思います。できる人に聞いたり、お願いしたり頼りましょう。 いまでは質問投稿サイトもたくさんありますのでそういうところを活用するのがいいかもしれませんね。 まとめ 勝手な妄想でCSSが嫌われる理由を考えてまとめてみました。 他にもCSSがよくわからない理由などあればぜひコメントください。質問などもあればお答えさせていただきます！ 1人でもCSS好きが増える平和な世界になりますように。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

Sass(Syntactically Awesome Style Sheets) CSSを拡張した言語で、効率よくCSSを作成できる。 「.scss」、または「.sass」という拡張子のファイルに記述する。(.scssが主流らしい) 「.scss」、または「.sass」をコンパイルすることで、cssファイルが作成される。 以下に基本的な使用例を記載する。(作成されたcssファイルは記載しない) コメント コメントは以下で記述する。 １行コメント // CSSでは1行コメントは使用できないため、コンパイルすると1行コメントは削除される。 複数行コメント /* ... */ 拡張機能でコンパイルのフォーマットを「compressed」に設定すると複数行コメントは削除される。 「compressed」の場合でもコメントが削除されないようにするには、/*! ... */で記述する。 style.scss .container { // Color is red. color: red; /* margin is zero. padding is zero. */ margin: 0; padding: 0; /*! font-size is 10px. */ font-size: 10px; } コメントに日本語を含める場合、ファイルの先頭に@charsetでutf-8を指定する。 style.scss @charset "utf-8" .container { // 赤色にする。 color: red; } ネスト 入れ子でスタイルを記述することができる。 style.scss .container { h1 { color: red; } p { color: blue; } } ハイフンがあるプロパティもネストすることができる。(個人的には使わない) style.scss .container h1 { margin { top: 10px; bottom: 20px; } } .container p { margin { left: 30px; right: 40px; } } メディアクエリもネストすることができる。 以下では、画面幅は800px以下の場合は、h1の文字サイズが12pxとなる。 style.scss .container { h1 { font-size: 24px; @media screen and (max-width: 800px) { font-size: 12px; } } } 親のセレクタの参照 &で親のセレクタに参照できる。 style.scss @charset "utf-8" .container { a { color: red; // コンパイル時に「a:hover」と解釈される。 &:hover { // 下線を消す。 text-decoration: none; } } } 変数 変数というデータを格納する箱を用意し、必要に応じて格納したデータを使用することができる。 変数名の先頭は$で始め、:で区切って値を記述する。 変数名は英数字以外に、_や-が使用できる。 変数名に使用した_や-は互換性があるため、$default-colorは$default_colorでも参照できる。 変数名はどちらかに統一しておくべきでしょう。 変数名に日本語も使用できるが、@charset “utf-8”;を先頭に記述する必要がある。(個人的にはオススメしない) style.scss @charset "utf-8" $default-color: blue; $warning_color: yellow; $赤: red body { color: $default-color; h1 { color: $warning_color; } div.error { color: $赤; } } 変数のスコープ(有効範囲) 変数には有効範囲があり、変数を記述する場所によって変わる。 トップレベルで定義されたグローバル変数 ファイルの中でどこでも有効である。 波括弧の中で定義されたローカル変数 定義された{}の中で有効である。 !global フラグを付与するとその限りではない。 style.scss $default-color: blue; body { color: $default-color; } container { $warning_color: yellow; h1 { color: $warning_color } } footer { // invalid ref.(error) color: $warning_color; } !global フラグ {}で定義した変数もグローバル変数と同じスコープとなる。 style.scss container { h1 { $warning_color: yellow !global; color: $warning_color; } } footer { color: $warning_color; } 演算 数値の操作として以下を行うことができる。 足し算：+ 引き算：- 掛け算：* 割り算：/ 剰余：% style.scss $main-width: 600px; $border-width: 2px; container { $padding: 10px; width: main_width - ($border_width * 2) - ($padding * 2); } データ型 Sassにはデータ型が7種類ある。 Number：数値 整数、単位、浮動小数点など数が値になるもの。(px,emなどの単位も含まれる) String：文字列 ""や''で囲まれたもの。 Color：色（カラーコード） カラーネームやHEX , rgb() , rgba()など。 Boolean：真偽値 true, false Null：空の値 Nullの場合、プロパティを書き出さないよう仕組みとなっている。 List：リスト（配列） 値をカンマやスペース、カッコで区切ったものです。入れ子にすることで多次元配列も作成可能。 $num :1, 2, 3; Map：マップ（連想配列） キーとバリューでペアとなった構造である。 $color: (color1: red, color2: blue, color3: green); データ型はtype-of()で確認することができる。 ミックスイン ミックスインを使うことで スタイルの再利用が可能になる。 プロパティやセレクタをまとめてワンセットにしておいて、それらを読み込むことができる。 @mixinを用いて定義し、@includeで定義したミックスインを呼び出す。 ミックスインもスコープを持つ。 ミックスインは引数を指定することも可能である。 style.scss @mixin align-center($margin: 0px) { display: block; margin: $margin auto; } img { // default parameter: margin: 0px @include align-center; } .img2 { // margin: 10px @include align-center(10px); } ミックスインのスコープ ミックインにもスコープがあり、変数と同じ考え方となる。 style.scss .btn { @mixin kadomaru { border-radius: 5px; } .kadomaru-btn { @include kadomaru; } } .submit-btn { // invalid include.(error) @include kadomaru; } ミックスインにコンテンツを渡す contentでルールセットやスタイルなどのコンテンツをミックスインに渡すことができる。 style.scss @mixin mq($width: 680px) { @media only screen and (max-width: $width) { @content; } } img { @include mq(340px) { margin: 0; } } セレクタの継承 @extendでセレクタ(定義したスタイル)を継承することができる。 プレースホルダーセレクタ %を用いることで、継承元のセレクタをCSSファイルに生成させないようにできる。 style.scss %custom-btn { padding: 5px 10px; border-radius: 5px; color: #333; text-decoration: none; } .default-btn { @extend %custom-btn; background-color: #ccc } .custom-btn-alert { @extend %custom-btn; background-color: #fcc; } @media内での継承方法 @mediaの中でセレクタを継承するためには、@mediaの中で継承元のセレクタを定義する必要がある。 style.scss %font-size-normal { font-size: 24px } @media screen and (min-width:960px) { h1 { // error. @extend %font-size-normal } } @media screen and (min-width:960px) { %font-size-big { font-size: 48px } h1 { @extend %font-size-big } } 補完(インターポレーション) 補完を行うための構文として#{}がある。 変数に入った文字列は値として認識されてエラーが出てしまう。 プロパティの値にしか使用できないが、#{}と組み合わせることでセレクタやプロパティ名に使用可能。 style.scss $class-name: btn; // container.btn container.#{$class-name} { color: red; } $attr: margin; p { // margin-top #{$attr}-top: 10px; } $img-base-path: "./sample/images/"; .sample-image { background: url(#{$img-base-path}main.png) no-repeat; } 関数 あらかじめ用意された関数がある。 以下に例を挙げる。(これ以外もある) 関数名 意味 使用例 ceil($number) 小数点以下を切り上げする ceil(3.5px) -> 3px floor($number) 小数点以下を切り捨てする floor(3.5px) -> 4px round($number) 小数点以下を四捨五入する round(3.5px) -> 4px abs($number) 絶対値を返す abs(-1px) -> 1px min($number) 最小の数値を返す min(5px, 10px, 8px) -> 5px max($number) 最大の数値を返す max(1px, 20px, 55px) -> 55px 用意されている関数はまだまだあるので以下のサイトを参考にしてください。 * https://book.scss.jp/code/c8/07.html * https://qiita.com/yuusuke510/items/9053ccf48cda4590ed7f * https://www.webdesignleaves.com/pr/css/css_basic_08.html style.scss $width: 100px; $minus-num: -100px h1 { width: $width / 3; } h2 { width: ceil($width / 3); } h3 { width: floor($width / 3); } h4 { width: round($width / 3); } h5 { width: abs($minus-num); } h6 { width: min(100px, 200px, 300px); } h7 { width: max(100px, 200px, 300px); } 関数は自作することも可能である。 @functionで関数の宣言を行い、@returnで返す値を記述する。 style.scss @function half($value) { @return round($value / 2); } $pi: 3.14; @function clac-area-of-circle($radius) { @return round(radius * radius * pi) } .container { width: half(1080px); } 他ファイル読み込み CSSと同様@importで他のscssファイルを読み込むことができる。 読み込むファイルが多いと、ファイル読み込みに時間がかかり、効率がよくない。 partialという分割したscssファイルを1つのscssファイルとしてまとめる機能がより効率的である。 ファイル名の先頭に_を付けることで、コンパイルしてもCSSファイルを生成しない。 style.scss // 通常のインポート @import url("base.css"); @import url(base.css); @import "base.css"; // パーシャルインポート @import "_base1.scss"; @import "_base2"; // カンマ区切りで、まとめて読み込む @import "_base1", "_base2"; // 異なるディレクトリの読み込み @import "scss/base/_base"; @import "scss/base/sub/_sub-base"; パーシャルインポートのディレクトリ構成 個人によって好みがあるが、以下のような構成がオススメである。 projectフォルダ |css/ | |- style.css（生成されるCSSファイル） | |sass/ |- _reset.scss（リセット用のscssファイル） |- _extend.scss（@extendの定義） |- _mixin.scss（@mixinの定義） |- _settings.scss（変数などの設定の定義） |- style.scss（メインのスタイル） 開発者向けの標準出力 @debugでコンソール出力 @warnでコンソールに警告出力 @errorでコンソールエラー出力 style.scss @debug 100px + 20px * 4; // コマンドプロンプト // style.scss:1 DEBUG: 180px warn, errorも同様に記述する。