💬

#6 2021年1月にツイートしたHTML/CSS/JavaScriptのTipsまとめ

6 min read

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

1. input[type="email"]とmultiple属性

input[type="email"] 要素に multiple 属性をつけるとカンマ区切りで複数のメールアドレスを入力できるようになります。

<input type="email" inputmode="text" multiple>

ただし、input 要素に type="email" を指定すると iOS のキーボードでカンマが入力できなくなるため、inputmode="text" を指定しておきます。

2. :not()セレクタに複雑なセレクタを指定

これまでは :not() セレクタ内に単一のセレクタしか指定できませんでしたが、これからは複雑なセレクタを指定できるようになります。

p:not(article *) {
  // article要素の子孫にないp要素
}

一見すると、現在の :not() で表現できると思うかもしれません。

:not(article) p {
  // article要素の子孫にないp要素???
}

このようにすると、p:not(article *) と同じことができるように思いますが、実際には違います。html p や body pdiv p なども当てはまるため、p { ... } とやっていることは変わりません。

IE Edge Firefox Chrome Safari Opera iOS Safari Android
- 88 84 88 9 74 9 88

3. Data URIの可読性

Data URI はバックスラッシュで改行でき、SVG などのコードを見やすくできます。

.icon {
  width: 1em;
  height: 1em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/200/svg" viewBox="0 0 200 200">\
      <circle cx="100" cy="100" r="100"/>\
    </svg>');
}

IE に対応する必要がある場合は PostCSS プラグイン等で Base64 エンコードするとよいです。

4. ネットワーク状況の判定

オンラインやオフラインの状態を検知できます。

widow.addEventListener('online', event => {
  // オフライン状態からオンラインになったとき
})

widow.addEventListener('offline', event => {
  // オンライン状態からオフラインになったとき
})

// 現在のネットワーク状態
console.log(window.navigator.onLine)

5. 要素の取得をする脱jQuery

jQuery から JavaScript で要素の取得をする書き換えです。

タグ名で要素を取得

jQuery
$('tag')
JavaScript
document.querySelectorAll('tag')

クラス名で要素を取得

jQuery
$('.class')
JavaScript
document.querySelectorAll('.class')
document.getElementsByClassName('class')

どちらでも取得できますが、.querySelectorAll() だけ覚えておけば大丈夫です。

id名で要素を取得

jQuery
$('#id')
JavaScript
document.querySelectorAll('#id')
document.getElementById('id')
window['id']

これも色々方法がありますが、.querySelectorAll() だけ覚えておけば大丈夫です。

CSSセレクタで要素を取得

jQuery
$('a[target="_blank"]')
JavaScript
document.querySelectorAll('a[target="_blank"]')

.querySelectorAll() にそのまま CSS セレクタを指定できます。

6. クラス名の操作をする脱jQuery

jQuery から JavaScript でクラス名のつけ外しと特定のクラス名をもつかどうかを判定する書き換えです。

.toggleClass()

jQuery
const element = $('.element')

// クラス名のつけ外し
element.toggleClass('class')
JavaScript
// IEなどclassList非対応の場合はmdn-polyfillsを読み込む
import 'mdn-polyfills/Element.prototype.classList'

const element = document.querySelector('.element')

// クラス名のつけ外し
element.classList.toggle('class')

.hasClass()

jQuery
const element = $('.element')

// クラス名があるかどうか
element.hasClass('class')
JavaScript
// IEなどclassList非対応の場合はmdn-polyfillsを読み込む
import 'mdn-polyfills/Element.prototype.classList'

const element = document.querySelector('.element')

// クラス名があるかどうか
element.classList.contains('class')

7. 98.css

98.css は Windows 98 の UI を再現した CSS フレームワークです。

8. XP.css

XP.css は Windows XP の UI を再現した CSS フレームワークです。

9. 7.css

7.css は Windows 7 の UI を再現した CSS フレームワークです。

10. aos

aos はスクロールしたらアニメーションして表示できるライブラリです。

11. PACE

PACE はページ読み込み中のプログレスバーを表示できるライブラリです。

12. jsPDF

jsPDF はブラウザ上で PDF を生成できるライブラリです。

13. electron-store

electron-store は Electron でデータの保存と呼び出しができるライブラリです。

14. handtrack.js

handtrack.js はカメラの映像からリアルタイムで手を検出できるライブラリです。

15. Parametric Color Mixer

Parametric Color Mixer はオーディオイコライザー風の UI で美しいカラーパレットを生成できるオンラインジェネレーターです。

16. Pika

Pika は画面上の色を取得できる MacOS カラーピッカーアプリです。


#5 ← | → #7


今すぐ使えるCSSレシピブック

この記事に贈られたバッジ

Discussion

ログインするとコメントできます