💬

#5 2020年12月にツイートしたHTML/CSS/JavaScriptのTipsまとめ

2021/02/12に公開

CSS

HTML

JavaScript

tech

2020 年 12 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。

1. Text Fragments

通常、ページ内リンクは id 属性で場所を指定しないと作れませんでしたが、Text Fragments を使えば自由にページ内リンクを作れます。

構文

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

[] は省略可能なことを表しています。

textStart だけ指定すると、特定の単語にページ内リンクを作れます。

textStart と textEnd を指定すると、文章を範囲選択できます。

さらに prefix- を追加すると接頭辞を指定でき、範囲の直前の文字まで限定できます。

対応していないブラウザには text-fragments-polyfill を使って実装できそうです。

2. 要素間の余白

CSS で要素間にのみ余白をあける方法です。

<ul class="list">
  <li class="list__item">...</li>
  <li class="list__item">...</li>
  <li class="list__item">...</li>
</ul>

1. 打ち消し

.list__item {
  margin-top: 20px;
}
.list__item:first-child {
  margin-top: 0;
}

打ち消しはわかりやすいけど極力避けたいですね。

2. ふくろうセレクタ

.list > * + * {
  margin-top: 20px;
}

* + * 部分がふくろうみたいだからふくろうセレクタです。

.list__item:not(:first-child) {
  margin-top: 20px;
}

基本的にはこれをよく使います。

3. CSS Gridでカレンダー

CSS Grid を使って簡単にカレンダーを実装する方法です。ただ、以下のコードとは別にアクセシビリティ対応する必要があると思います。

<div class="calendar">
  <h2 class="calendar__title">2020年12月</h2>
  <ol class="calendar__list">
    <li>日</li>
    <li>月</li>
    <li>火</li>
    <li>水</li>
    <li>木</li>
    <li>金</li>
    <li>土</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ...
  </ol>
</div>

.calendar__list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  list-style: none;
}
.calendar__list li:nth-child(8) {
  grid-column-start: 3;
}

li:nth-child(8) で grid-column-start を指定することにより、月の始まりを調整しています。

4. 下線のプロパティ

text-decoration-thickness プロパティを使うと、線の太さを指定できます。

<p>あのイーハトーヴォのすきとおった風</p>

p {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #8e83e1;
  text-decoration-thickness: 4px;
}

text-underline-offset プロパティを使うと、線の位置を指定できます。

p {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #8e83e1;
  text-decoration-thickness: 4px;
  text-underline-offset: 1em;
}

5. CSS Individual Transform Properties

CSS Individual Transform Properties という仕様が Firefox で実装されました。

普通に書くと...

.element {
  transform: translate(100px, 100px) rotate(180deg) scale(2);
}

新しい仕様の構文

.element {
  translate: 100px 100px;
  rotate: 180deg;
  scale: 2;
}

transform プロパティに指定した関数を分けて書けるようになります。でも、この仕様の何が便利なのと思うかもしれません。

上書きを気にしなくていい

transform プロパティに関数を追加するとき、いちいち関数を継承する必要がなくなります。

BEFORE

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.element.flipped {
  transform: translate(-50%, -50%) scale(-1);
}

AFTER

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.element.flipped {
  scale: -1;
}

アニメーションの中間値を計算しなくていい

50% のときに scale(1.5) と中間値を指定していますが、別々のプロパティを使えば開始と終了の値を指定するだけでよくなります。

BEFORE

@keyframes scale-and-rotate {
  0%   { transform: scale(1) }
  50%  { transform: scale(1.5) rotate(0deg) }
  100% { transform: scale(2) rotate(180deg) }
}

AFTER

@keyframes scale-and-rotate {
  0%   { scale: 0 }
  50%  { rotate: 0deg }
  100% { scale: 1; rotate: 180deg; }
}

1つの要素に複数のアニメーションを指定しやすくなる

拡大と回転のアニメーションをそれぞれ別のスピードで描画できます。

@keyframes scale {
  from { scale: 0 }
  to   { scale: 1 }
}
@keyframes rotate {
  from { rotate: 0deg }
  to   { rotate: 180deg }
}
.element {
  animation: scale 1s, rotate 500ms 500ms;
}

6. 横スクロールテーブル

横スクロールのレスポンシブテーブルを実装するときにやっておきたいアクセシビリティ対策です。

<div
  class="responsive-table"
  role="region"
  aria-labelledby="Caption-1"
  tabindex="0">
  <table>
    <caption id="Caption-1">...</caption>
    <tbody>...</tbody>
  </table>
</div>

role 属性には一般的な役割の region を指定し、aria-labelledby 属性でテーブルのキャプションに関連づけます。そして、tabindex="0" の指定によりキーボードでフォーカスとスクロールができるようにしています。

.responsive-table {
  white-space: nowrap;
  overflow-x: auto;
}
.responsive-table:focus {
  box-shadow: 0 0 0.4em rgba(0, 0, 0, .5);
  outline: .1em solid rgba(0, 0, 0, .1);
}

フォーカスリングにはコントラスト比 3:1 の色を使い、Windows のハイコントラストモードでもフォーカスリングが確実に表示されるように outline プロパティも 0 にせず指定しておきます。

7. お手軽URL判定

JavaScript で URL かどうかを判定する方法です。

const isURL = url => {
  try {
    url = new URL(url)
  } catch {
    return false
  }

  return /^https?:/.test(url.protocol)
}

console.log(isURL('https://google.com'))  // => true
console.log(isURL('www.google.com'))      // => false
console.log(isURL('javascript:void(0)'))  // => false