３日目　フロント基礎の基礎 ~utilityでの打ち消し・上書きについて等~

11482 ワード
HTML CSS設計 CSS CSS3 HTML5 HTML テキストリンク

フロント業務でつまずいたポイント

　・FLOCSSにおけるutilityの上書き、打ち消しのしすぎ　←今日のメイン
　・Ceckboxのチェック部分の位置を変えたい
　・フォームのtextareaのrowsのレスポンシブ対応の仕方

一個ずつまとめていきます。

FLOCSSにおけるutilityの上書きのしすぎ

現在FLOCSSやBEMでのCSS設計の練習をしているのですが、スマホ版で付けていたutilityをレスポンシブ対応する際、PC版で上書きしなければいけない、という場面に陥ってしまいました。
もっと複雑な指定でしたが、簡略化した形で説明します。

ケースその①　スマホ版とPC版がまるっと変わる。

スマホでもPCでも３箇所同じ指定内容。ただし値が
スマホ ≠ PCの場合。

<!-- HTML -->
<p class="box01 u-large-text"></p>
<p class="box02 u-large-text"></p>
<p class="box03 u-large-text"></p>
<!-- わかりやすくまとめているが、実際はバラバラの場所に書かれた三つ -->

<!-- CSS -->
.u-large-text {
   font-size: 18px;   
}

@media all and (min-width:769px){
   .u-large-text {
      font-size: 35px;
   }
}

この場合はマルッと上書きなので、使って良い。
便利な書き方だと思いました。

ケースその②　スマホ版≠PC版　かつPC版の一部が異なる

ちょっとややこしい。

<!-- HTML -->
<div class="box01 u-back"></div>
<div class="box02 u-back"></div>  <!-- ここののPC版だけ背景を付けたくない -->

/*CSS*/
.u-back {
   background: #000;       /*こちらがスマホ版*/
}

@media all and (min-width:769px){
   .u-back: pink;      /*PC版の指定*/

   .box02.u-back {     /*無理やり詳細度をあげて指定*/
      background: none;
   }
}

これは保守的にもあまり良くないしわかりづらい、、ということで、次の改善策をとりました。

解決策①：特殊部分だけutilityを別個にする

<!-- HTML -->
<div class="box01 u-back"></div>
<div class="box02 u-back-spOnly"></div>

/*CSS*/
.u-back {
   background: #000;
}
.u-back-spOnly {
   background: #000;   /*スマホ版では色を付けて、、*/
}

@media all and (min-width:769px){
   .u-back-spOnly {
      background: none   /*分けたので、他のu-backに影響を与えない。無理な指定も不要。*/
   }
}

こうすることで、無理な打ち消しをしないで済みます。

解決策②：そもそもユーティリティを付けず特殊部分の指定をエレメントにつける
無理やりutilityをつける必要は何もありませんでした。

<!-- HTML -->
<div class="box01 u-back"></div>
<div class="box02"></div>

/*CSS*/
.box {
   height: 100px;
   width: 100px;
   background: #000;
}

@media all and (min-width:769px){
   .box {
      background: pink;   /*そもそもね*/
}

checboxのチェック部分の位置を変えたい。

かなり簡単に解決しました。

<!--HTML-->
<label for="agree" class="contact-agree">
   <input type="checkbox" id="agree" value="check">プライバシーポリシーに同意する
</label>

/*CSS*/
#agree {
   margin-right: 30px;
}

直接インプットに指定しちゃっていいみたいです。

フォームのtextareaのrowsのレスポンシブ対応の仕方

スマホ版ではちょっと短め、PC版ではちょっと長めにするために、
それぞれ二つtextareaを準備して、スマホ版では片っぽ、PC版ではもう片っぽ、、と指定していました。
↓今までのコード例です。

<!-- HTML -->
<textarea class="smartPhone" id="mainContact" name="mainContact" rows="5" cols="40"></textarea>
<textarea class="pc" id="mainContact" name="mainContact" rows="30" cols="40"></textarea>
/rowをいじっただけ*/

/*CSS*/
.pc {
   display: none;     /*スマホ版ではこちらを隠す*/
}

@media all and (min-width:769px){
   .smartPhone {
      display: none;    /*pc版ではこちらを隠す*/
   }
}

もっとスマートなやり方がありました。
なんとrowsの属性値に関係なく、heightをいじれば普通に伸びるみたいです。盲点！

<!-- HTML -->
<textarea class="area" id="mainContact" name="mainContact" rows="5" cols="40"></textarea>
/一個でOK*/

/*CSS*/

@media all and (min-width:769px){
   .area {
      height: 600px;  /*高さ分行が打てます*/
   }
}

今日は以上です！