考え方の変遷

2018/12/18頃

今までのcss(scss)の記法。

.secForm{
  &Tit { // Titleを略記 }
  &Txt { // Textを略記 }
}
// 以下css出力
.secFormTit{ }
.secFormTxt{ }

class使ってるのに大体一意になるように命名している。弊社規則により-や_が使用禁止で、キャメルケースを使用。
冗長なclass名を避けるためとのこと。
また、およそhtmlのネスト通りに命名するので、secFestivalInfoRow01Lとか言う詠唱時間の長い呪文をよく生成していた。
ので、すこし今後命名規則を変えていきたい。
よく使われている様子なので、bemの考え方を拝借したいと考えている。

qiita.com
上記を参考に自分なりに使い勝手のいいあたりを模索したい。

私的マークアップリスト (スニペットとして)

padding, marginの余白とりかた

基本的に、階層が一番低いところからとっていきたい。 H1とか2あたりは別個でスタイルがあたっていることが多いので、まず末端でガリガリ調整したいかも。

セクションの中、直後・最後はpaddingでとる。 backgroundがちぎれないように。
なので、大体セクションは、

section {
  padding: なんぼか% 0;
  margin: 0 auto;
}

になってる。

iframe(特にyoutubeかgooglMapか)のレスポンシブ化

<div class="wrap">
  <iframe></iframe>
</div>

このとき、

.wrap {
  position: relative;
  width: 100%;
  height: 0; // 高さ0にする
  padding-top: 75%; // 縦横比を考えつつ縦はここで取る
  iframe {
    position: absolute
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

今回の4:3なら100%:75%、
16:9なら100%:56.25%、
といった感じで、padding-topに縦の比率を入れておく。 chogenba.com

タブ切り替え

以下jQueryの場合

<!-- タブおすとこ -->
<div class="secTab">
  <div class="tabBtn select"></div>
  <div class="tabBtn"></div>
</div>
<!--以下内容-->
<section class="contents">
  <div id="sec01" class="tab01 on">
    <!--display:none;しておく-->
  </div>
  <div id="sec02" class="tab01">
    <!--display:none;しておく-->
  </div>
</section><!--/.contents-->

.tab01{ display: none; }
.contents{
  .on{ display: block; }
}

$(function(){
  $('.tabBtn').click(function(){
    let index = $('.tabBtn').index(this);
    $('.tab01').removeClass('on');
    $('.tab01').eq(index).addClass('on');
    $('.tabBtn').removeClass('select');
    $(this).addClass('select');
  });
})

jQueryについて
2: .tabBtnがクリックされたら
3: .tabBtnの何番目の要素かindexにぶちこむ
4: まずすべての.on(display: block;)を取っ払う 5: indexと同じ順の.tab01を.onする 6-7: selectを付け替えておわり ↓参考 blog.three-co.jp

ただ、jQueryしなくても行けたりするし、以下だとtransition使える。 coliss.com

情報廃棄物最終処分場

情報の芥溜にも何か使い道があるかもしれない。Webと鉄道とバイクと音楽が好きな人の情報置き場

私的マークアップまとめ