Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

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

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

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

スマホでもPCでも3箇所同じ指定内容。ただし値が
スマホ ≠ 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;  /*高さ分行が打てます*/
   }
}

今日は以上です!

irico
新米フロントエンドエンジニアです。 得意なのはギターを弾くこと、苦手なことは運動です。 ゲーム(特にノベル物)が趣味です🎮
wiz_inc
Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です
http://012grp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away