なんかいろいろ変わりましたね。

コーディングするときには気にしてつくろう。

すぐ忘れちゃうので健忘メモです。

 

 

---

そういえば。html5 から html living standard になったよ

2021年1月の、とある昼下がり。

html5が廃止になったというニュースが飛び込んできました。ファッ？！廃止？！

 

とっても参考になった記事はこちら。

 

「廃止」なんていうからhtml5がなくなっちゃったのかと思ってびっくりしましたが、「h1」はsectionに対して1つだけなの？ページに対して1つなの？みたいな、これまで解釈の違いで人によって答えが違ってたこと、曖昧だった点がはっきりした印象。

 

それから画像の読み込み遅延。

画像の読み込み遅延（ lazy loading ）って js で実装するしかなかったのですが、imgタグでできるように。

画像がビューの外にあるときは読み込みを実行しないで、近づいたら実行するという「loading="lazy"」も、 html living standard で正式に追加されてました。

2年前から使ってたけど・・いままで正式じゃなかったんかーい。

 

組織が変わって利便性重視に。今後は交通整理がきちんとされるってことなのかもしれないね、と前向きに捉えています。

 

---

IEさんさようなら。いままでお世話になりました。

そして、2022年6月15日。

とうとうこの日がやってきた。IEのサポート終了です。

 

IEのことを気にしなくて良くなりました。

 

いままでどれだけ気にしていたかというと・・

例えば正方形のサムネイル。

こういうのです。

 

CMSから投稿した長方形の画像を、出力した後にcssで正方形にトリミングしてます。

画像をbackgroundにしなくとも、imgに対して css の object-fit：cover を使うことで、縦横小さな方に合わせてはみ出た部分をトリミングし、比率を維持してくれるという。魔法の一行、便利だね〜！

しかしIEには効きません。jsを使いました。

 

そうそう。パララックスが流行って。使ってるサイト、多いですよね。

そんな、当たり前のように使ってるパララックスをIEで見たときに・・全然スムーズに動かない。カクカクして動きがおかしい。

IEは「マウスを回転すると1行ずつ画面をスクロールさせる」という謎機能がデフォルトでONになってるのが原因。なんだそれ。

jsで無効にしてやりました。無理矢理すぎて草です。

 

display: flex とか。並べたいだけなのに。中央寄せもそうだったような・・

普通によく目にするレイアウトでも、そこかしこにIEトラップが潜んでいたような気がします。

 

IEさん。わたしたちは、あなたのためだけに、いろんなことしてたんだよ。

そんないろいろも、今となっては良い思い出だね。さよならIE。

 

---

早速使ってみた。並べるレイアウトの「gap」

flexの並べるレイアウトです。flexだと簡単！

でも余白の調整がめんどくさーい。

 

justify-content: space-between を使うとスペースが均一になるのでmargin等の調整は不要。

ですが、動的にしたときが問題で。

例えば３カラムのレイアウトで、出力した結果が2つだったときや4つだったとき。３の倍数以外だと崩れちゃうので・・

 

こんな感じでマークアップしたとして

 

<div class="list-3col">
 <ul>
  <li>1個目</li>
  <li>2個目</li>
  <li>3個目、次改行するよ</li>
  <li>4個目</li>
  <li>5個目</li>
  <li>6個目、次改行するよ</li>
  <li>7個目</li>
 </ul>
</div>

 

cssは、いつもはこんな感じ。

 

.list-3col ul {
 display: flex;
 flex-wrap: wrap;
 margin: 0 auto;
}
.list-3col li {
  width: calc(33% - (40px * 2) / 3);
  margin-left: 40px;
  margin-top: 80px;
}
.list-3col li:nth-child(3n+1) {
  margin-left: 0;
}
.list-3col li:nth-child(-n+3) {
  margin-top: 0;
}

 

３つ並んだ要素間の左右の余白は40pxで、

widthのcalcは

幅100% ÷ 3 - (余白40px が２つ) ÷ 3

っていう計算をしています。

nth-child(3n+1)は、３の倍数 + 1。

４つ目、７つ目・・って一番左側に来るやつ。なので左のmarginはいらないから消す。

nth-child(-n+3) っていうのは上から３番目まで。

一番上に来るやつだから、トップのmarginを消しました。

ややこしや！

 

gapを使えばたった一行で全体の余白が調整できます。

 

.list-3col ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  gap: 80px 40px;
}
.list-3col li {
  width: calc(33% - (40px * 2) / 3);
}

 

簡単だね〜

 

とりあえずブログの一覧表示してるところだけ直してみました。

所要時間およそ10分。

 

 

---

メディアクエリの指定で比較演算子が使えるんだと

無駄のないモバイルファーストでmin-widthなのか。コーディングに矛盾がないmax-widthなのか。悩ましいところですが・・なんにしても書き方がパッとみてわかりにくいんです。

 

例えば1000px未満、999pxでスタイルを変えたい、という場合。

@media (min-width: 1000px) だと1000px「以下」。1000px含むよ。

@media (max-width: 999px) って書くと、1000pxから1px引き算してるから999px「以上」になるはず・・ですが、解像度・拡大率でも若干の誤差ができる場合もあってなんかうまくいかないときがあるので

@media not all and (min-width: 1000px)って書き方なら1000pxを含まない、1000pxより小さい「未満」です。999pxはこれだ。

こういうのって言葉で見るより記号のほうが認識しやすいですね。

 

比較演算子使えたらわかりやすいー。

しかしsafari が対応していない・・

プラグインがあるみたいですが、このためにだけ使うのはちょっと。今回は据え置き。

今度はsafariがIEみたいな扱いになりそう。

 

画面サイズに振り回されて、都度都度ブレイクポイントを見直して・・って不毛な作業。

jsでやったほうがいいのかな。

すごく参考になった記事。

勉強になりました〜

 

 

---

 

時代の流れというか盛者必衰というか、いままではIEのせいでcssだけでは実装できなかったことも簡単にできるようになりました。ソースコードが減るし、jsのコンフリクトの心配もないし、よかったよかった。

IEさん、いままでお世話になりました。