初めてCSSを書いたときにハマった話

きっかけ

業務で初めてCSSを書いたとき、なぜかわからないけど反映されずに悩んだこと。

CSSが効かない２つの罠

1. セレクタには優先度がある

CSSを書くときは以下のパターンがある。

（例）以下のdiv要素の文字に色を付ける。

<div id="id" class="class" name="name" style="color:red;">文字の色を変えるよ</div>

/*ID指定*/
#id {
  color: blue;
}
/*class指定*/
.class {
  color: green;
}
/*属性指定*/
[name=name] {
  color: yellow;
}
/*要素指定*/
div {
  color: white;
}

何色になるかというと、、、赤色になる。
セレクタの指定方法によって優先度が変わってくることがわかる。
細かく言うとセレクタの指定ごとに点数が決められていて、計算結果で優先度が変わるらしい。

優先度は以下のようになっている

1. htmlのstyle属性
2. idセレクタ
3. classセレクタ
4. 属性セレクタ

しかし、整備したソースを書くならCSS設計規則BEMなどをの概念を参考にした方がよい。
BEMにそって書くならclassセレクタしか使わないことになる。
BEMについてはまた今度書く。

つまり

自分が書いたCSSより優先度が高いCSSがすでについている。
書いたまま反映すると思っちゃダメってこと。

2. 親要素に依存するものがある

例えば要素の位置を右上にしたいとする。
その場合、以下のように書くとする

/*対象要素のclass*/
.target {
  position: absolute;
  right: 0;
  top: 0;
}

このとき、このCSSは効かない。
なぜかというと、absoluteは親要素を基準とした絶対的な位置を決めるものだから。
absoluteを使うときは親要素に以下のCSSを書く必要がある。

/*親要素のクラス*/
.parent {
  position: relative;
}

つまり

CSSによっては親要素も関係してくる。
普段使わないCSSを使うときは調べたほうがよい。

最後に

自分で最初から書く場合は親要素からCSSを考えないといけないってことを学んだ。
1年ぐらい経験してやっとつけたいCSSを邪魔されずにつけれるようになった。
初めのころはIDで指定したりしてたくさん書きがちだけど、再利用できるものは再利用して行数を少なくしたほうがいい。

目的

Bootstrap4のValidation Formを使ってフォームを作成した時、ブラウザ機能によるバリデーションメッセージも表示され何だか見づらい・・・

is-invalidクラスをJavascript(jQuery)で動的に制御してBootstrapのバリデーションメッセージだけを表示させてスッキリさせたい。

実際に作りたい画面

下のようなinputとtextareaの混ざったシンプルなフォーム。Bootstrapのバリデーションメッセージのみを表示させたい。

実装

HTML

<!-- novalidateでブラウザのバリデーション機能を無効にする　-->
<form action="javascript:void(0)" novalidate="novalidate">
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control" id="validationServer01" placeholder="First name">
      <div class="invalid-feedback">
        Please provide a First name.
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control" id="validationServer02" placeholder="Last name">
      <div class="invalid-feedback">
        Please provide a Last name.
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" >
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <textarea type="text" class="form-control" id="validationServer03" placeholder="City"></textarea>
        <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control" id="validationServer04" placeholder="State">
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control" id="validationServer05" placeholder="Zip">
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

JS

$('form').on('submit', (e) => {
  const formContents = e.target.querySelectorAll('input.form-control, textarea.form-control')
  for(const index in formContents) {
    if(!formContents[index].value) {
      $('#' + formContents[index].id).addClass('is-invalid')
    } else {
      $('#' + formContents[index].id).removeClass('is-invalid')
    }
  }
 })

ブラウザのバリデーションメッセージをカスタムする方法もあるようですが、今回はBootstrapにこだわりました。。
これでバリデーションエラーがBootstrap一律になって見やすくなった！！！

要約

• マウスオーバーでアニメーションをさせたい時、 transition プロパティを :hover にのみ指定すると、マウスアウトした時に瞬時に戻る
• 上を逆手に取ると、マウスオーバー/アウトでアニメーションを変化させたり、マウスオーバーした時に複数の要素を段階的にアニメーションさせることが出来る

概要

CSSの transition プロパティを使う時、 :hover にだけ指定すると、マウスアウトした時に無効になり瞬時に変化してしまいます。
これはマウスオーバー時にのみその transition が有効になっているからですが、それを逆手に取って、マウスオーバー/アウト時にそれぞれ異なったアニメーションを発生させることもできます。
transition はプロパティごとに指定できるので、異なったプロパティを変化させることも可能です。

例：マウスオーバー/アウトでアニメーションの速さを変える

See the Pen
transition-1-3 by semigura (@semigura)
on CodePen.

応用すると、リンク内の複数の要素に違う transition を指定して段階的に変化させていくということもできます。
ただしこの時、変化させるプロパティを要素ごとに書いていく必要があります。

例：マウスオーバーで複数の要素を段階的に変化させていく

See the Pen
transition-1-3 by semigura (@semigura)
on CodePen.

要約

• transition プロパティは :hover に指定してしまうと、マウスアウトした時に瞬時に戻ってしまう
• ので、アニメーションさせたい要素そのものに transition を指定する

概要

CSSでアニメーションを付与するプロパティには transition と animation プロパティがあります。
複雑なアニメーションには animation が向いていますが、そのまま使うとマウスアウトに巻き戻しが起こらないということもあり、リンクホバーなど簡単なアニメーションでは transition を使う場合が多いと思います。

問題

しかし、transition を使っているのにもかかわらず、マウスアウト時にアニメーションせず、瞬時に戻ってしまう時があります。

原因は transition を付与する場所です。
:hover に transition を指定してしまうと、マウスアウトの時に巻き戻るアニメーションが起こらず、瞬時に戻ってしまいます。
これはtransitionが :hover = マウスオーバー時にのみ有効になっているからです。

例：transition が :hover に指定されている

See the Pen
transition-1-1 by semigura (@semigura)
on CodePen.

解決

これを防ぐには、アニメーションさせたい要素そのものに transition を付与します。

例：transition が要素そのもの に指定されている

See the Pen
transition-1-2 by semigura (@semigura)
on CodePen.

ちなみにこれを逆手に取ると、マウスオーバー/アウト時にアニメーションの動きを変えることが出来ます。

100日チャレンジの244日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

244日目は、

おはようございます
244日目
・youtubeで、webサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 19, 2020

そもそもCSSプリプロセッサとは?必要性は？

結論から言うと「CSSよりも可読性と保守性をよくしたのがCSSプリプロセッサ」だと思っています。
jQueryやAjaxなどの動的な動作への対応や、デバイス対応・レスポンシブなど、最近はより複雑なコードを書かなければいけないです。
小規模ならなんとかできますが、規模が大きくなると管理が難しく、CSS設計も行わないといけないです。

CSSの特性もあり複雑化が進むとコードが衝突したり可読性が悪くなりますが、そんなCSSを使いやすくしようと生まれたのがCSSプリプロセッサです。
CSSにはないネストや変数などが使用できより可読性が良くなります。

プリプロセッサの種類

最初に行っておくとPostCssとScssをメインに描いていきます。
理由としては、2020年ロードマップに沿って学習しているためです。

Sass (Syntactically Awesome Style Sheets)

要するに描き方がイケてるスタイルシートです。
2006年に登場しており、ベースはRubyが使用されています。

.btn
　display: block
　padding: 10px
　margin-bottom: 5px
　　span
　　　font-size: 1.2rem

のような感じで、インデントでcssを書いていくイメージ
　

Scss(Sassy CSS)

ScssはSassをベースによりCSSっぽくかけます。
CSSのようにかけるためCSSを理解していればそこまで学習コストは高くなく、導入しやすいです。
そのためScssの普及率は極めて高いです。
ちなみにSassをベースにしているのでRubyです。

.btn{
　display: block
　padding: 10px
　margin-bottom: 5px

　span{
　　font-size: 1.2rem
　}
}

書き方もSassと似ています。Sassはインデントに対してこちらはカッコを使用します。
使用していて感じたSassのメリットは以下の点です。

記述の簡略化ができる

先ほど説明したこちらの例を参考にします。

.btn{
　display: block
　padding: 10px
　margin-bottom: 5px

　span{
　　font-size: 1.2rem
　}
}

これをコンパイルすると

.btn {
    display: block
    padding: 10px
    margin-bottom: 5px
}

.btn span{
    font-size: 1.2rem
}

ネストで書くことによって毎回.btnを先頭につける必要がなくなります。
大規模なサイトだと作業効率にも影響するし、何よりグルーピングされて可読性が高くなるのがポイントだと思います。

変数が使える

$main-color: #444;
.text {
    color: $main-color
}

.text {
    color: #444;
}

このように基本的に変わらないような色や数値を呼び出すことができます。後に修正が入った場合でも一括で行えてとても便利です。
CSSでも使えるやんと僕も思っていましたが、CSSの変数はIEで対応されていないのでIEまで対応するサイトでは使えないかなと思います。その点ScssはコンパイルされるとカラーコードになるのでIE対応も気にせずいいと思います。

四則演算が使える

.test {
　width: (200px / 4);
}

.test {
　width; 50px;
}

と行った形で普段は暗算や計算機を使った面倒な計算もScssが行ってくれます。
またpx - cmなどの単位が違うのも計算できたり予め変数に数値を入れておき計算することもできます。

関数が使える

@for $value from 1 through 3 {
　.test_#{$value} {
　　margin-top: 1px * #{value}
　}
}

.test_1 {
　margin-top: 1px;
}

.test_2 {
　margin-top: 2px;
}

.test_3 {
　margin-top: 3px;
}

Forだけでなくif文やwhile・eachなども使用することが可能です。
今回の場合だと、もっと増やしたい場合は数値を変えるだけで一瞬に変更することができます。
命名規則にもよりますが、何をするのか明白に理解することができますし、生のCSSでは似たようなコードを大量生産しないといけない部分をすっきりさせることができます。

コードの再利用ができる

@mixin box {
 
　padding: 15px;
　color: #444;
}

.test {
　@include box
}

.test {
　padding: 15px;
　color: #444;
}

@mixinでミックスイン名を定義して、@includeで呼び出すことができます。
よく使われるコードなどは前もって@mixinで定義しておくと便利です。また一部分が変わる場合の引数を持たせることができるので汎用性が効くこともポイントだと思います。

1つのファイルにまとめることができる

@import “test/_color”
@import “test/_global”

このように@importを使うことによって、他のScssファイルを読み込むことができます。
コンパイルをする時には、1つのファイルとして掻き出してくれるので表示速度の面でもポイントになる部分です。
またこれがあることにより、部分でファイルを分けることができ管理がしやすくなります。

cssでもimportはできるし、linkで読み込めばいい話ですが僕は推奨しません。scssでのimportが一番読み込みが早いからです。もし興味があればこちらの記事をご覧ください。
Import,link,scssの読み込み速度を比較してくれています。
https://dev.classmethod.jp/ria/html5/css-import-no-parallel-load-sass/

Less(The Dynamic Stylesheet Language)

2009年に登場したjavaScrptベースのプリプロセッサです。
書き方はSassと似ていてるけど、機能はSassより少ないです。
Boostrapで採用されていたので、Sassと同じくらい有名ですが今はあまり使われていないと思った。
Less内にJSを記述できるので、その面では便利。

Stylus

2010年に登場したNode.jsをベースにしたプリプロセッサです。
Sassは高水準言語を作ることが目的でLESSはCSS文法を生かしたシンプルな機能をつけることができます。
この二つのいいとこ取りをしたのがStylusというイメージ。
ちなみに読み方は「スタイラス」なのでお間違えのないように。

PostCss

2013年に登場したJavaScriptがベースのプリプロセッサです。
SassやLESSなどと似ていますが、大きな特徴としてはJavaScriptの高い拡張性です。

僕が思うPostCSSのメリット

必要なものだけ追加できる（現状の課題も解決しやすい）

Scssなどと違って、機能の追加はプラグインを使って拡張することができます。
例えば、stylelintやAutoprefixer、cssnanoなど現状必要最低限な機能だけを追加することができる。
逆を言えば、必要なくなったものは設定から外すこともできScssなどと比べても依存度が低いと言える。

流行り腐りに柔軟に対応できる

PostCSS以外の紹介したプリプロセッサは利用者が減ればメンテナンスの必要性がなくなり、更新されなくなるケースもあります。

しかし、PostCSSはただのパーサーであり、機能のメンテナンスは各プラグインが役割を持ちます。
メンテナンスがされなくなった古いプリプロセッサを使うことは、現代の課題を解決できない可能性まで考えられますが、PostCSSはそこに柔軟に対応ができると思います。

Scssやstylusのコードが再利用できる

今現在でScssやstylusを使用していたとしても、postcss-scssやpoststylusを導入することでそのまま利用可能です。
　

次世代のCSS記法が使える

個人的にはあまり必要性を感じませんが、1つの特徴なので描いておきます。
将来的にCSSの仕様として入るであろうCSSの記述を行いPostCSSによって変換してくれます。
注意点としては、勧告前の仕様であり確定しているわけではないので使うプロパティがプラグインで対応しているのか確認する必要があると思います。

僕は思うPostCssのデメリット

PostCSSを入れなくても使える機能も普通に存在する。

ベンダープレフィックスがいい例。
ブラウザ対応はMixin機能で、付与することも可能であり必ずPostCSSが必要になるとは限りません。
しかし、ブラウザのアップデートによって必要がなくなる場合もあるので自動的に付与したいと思うのであれば、Autoprefixerを使う必要があるかなと思います。
このようにPostCSSのプラグインであるから入れるではなく、今の状態でも対応できるものは他にもたくさんあります。

環境構築に慣れていないと時間がかかる

僕みたいな経験がない場合は特に環境の構築に時間がかかります。また拡張性が高いのはメリットでもありますがその反面で作り込みすぎると複雑になりチームでの開発だと支障をきたす可能せもあるかなと思います。

便利だから入れちゃえ状態になる

僕のようなプラグイン追加病は特によくありがちなんですが、とりあえず便利になるんだから入れようとなる。
果たしてそれがいいのかというと否。
便利なツールを導入しても作業効率は上がらないこともあるし、そもそもそんなに使われないケースもあります。
それにその変化によってさらに状態を悪化させる可能性すら考えられるからです。
導入する前には本当に必要なのかじっくり考えてから導入する必要があると思います。

PostCssの挙動
Autoprefixerを使用するとこんな感じでコンパイルされます。

a {
　&:hover {
　　transform: scale(2);
 }
}

a:hover {
  -webkit-transform: scale(2);
      -ms-transform: scale(2);
          transform: scale(2);
}

PostCSSすごい使いやすいなと思いました。