#1 2020年8月のHTML/CSS/JSの小技やTipsまとめ
2020 年 8 月にツイートした Tips をまとめました。良いと思ったら、いいね・リツイート・フォローお願いします。
HTML
01. enterkeyhint属性
📌input要素にはenterkeyhint属性を指定しておこう！スマホのキーボードのエンターキー表示を最適化でき、フォームが送信されたときの動作をあらかじめ伝えられます。
— たかもそ@CSS Tips集発売中 (@takamosoo) August 6, 2020
属性値によって、具体的にどのような表示になるかは2枚目の画像を参考にしてください！ pic.twitter.com/XGjee9Nwcl
CSS
02. 指定しておくとよいプロパティ
📌body にはこれを指定しておきましょう。意図しないところで文字サイズが大きくなったりするのを防ぎます。 pic.twitter.com/p4TPGcAcOL
— たかもそ@CSS Tips集発売中 (@takamosoo) July 19, 2020
03. 属性セレクタのフラグ
📌CSSの属性セレクタは結構便利ですが、フラグというものがありまして、属性セレクタの中に i をつけると大文字小文字の区別なしに判定できるようになります。 pic.twitter.com/9CcjVGwChJ
— たかもそ@CSS Tips集発売中 (@takamosoo) July 27, 2020
IEでは使えないため、PostCSSで変換すれば利用できます。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 27, 2020
→ https://t.co/jZuJFKZZjF
04. スキップリンク
📌Webサイトでメインコンテンツにスキップするリンクを用意しておくとよいです。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 31, 2020
メインコンテンツへスキップするリンクは<body>のすぐ後に設置します。
.skip:not(:focus)でフォーカスされていない場合は、リンクを隠しています。 pic.twitter.com/WZBrnBswQ0
音声読み上げソフトではWebサイトのトップから順番にタブキーで移動するため、いきなり記事本文を読みたい場合に不便なので、それを改善できます。また、キーボード操作でメイン部分に移動できるという利点もあります。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 31, 2020
ちなみにGoogleではメインコンテンツへスキップ以外の導線も用意されています。 pic.twitter.com/2SGvJ0TuwP
05. Flexboxと文字の省略
📌Flexboxとテキストの省略を同時に使うこともあると思います。レスポンシブで画面幅が変わったときにレイアウトを維持したり、崩さないような目的で使います。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 24, 2020
ただし、テキストを省略しても問題ない場合だけ使います。 pic.twitter.com/DHHLB2BSvi
可変のファイル名部分には min-width: 0; を指定してはみ出すのを防ぎ、ファイル拡張子部分には画面幅を狭めたときに潰れないよう flex-shrink: 0; を指定しておきます。テキストの省略部分はお決まりの3行CSSですね！ pic.twitter.com/NQ23FyKz1I
— たかもそ@CSS Tips集発売中 (@takamosoo) July 24, 2020
06. 背景画像のちらつき
📌CSSのbackground-imageをhoverなどで切り替える場合のちらつきに対応していますか？
— たかもそ@CSS Tips集発売中 (@takamosoo) August 1, 2020
この書き方だとホバーされるまで、url('https://t.co/zNGnu7opLu')は読み込まれません。
そのため、ホバーされたときに画像のロードが開始され、表示されるまでに時間がかかってしまいます。 pic.twitter.com/WEMy3xofBG
そこで、初期段階でホバーする画像を読み込ませておき、background-sizeに0 0を指定して隠します。
— たかもそ@CSS Tips集発売中 (@takamosoo) August 1, 2020
ホバーされたら、background-sizeをcoverにし、最初に表示されている画像は逆に0 0で隠すことで画像を切り替えられます。
今回はホバーの例ですが、JSでクリック切り替えなどの場合にも使えます。 pic.twitter.com/lKBbIw3i7B
07. インライン要素のまま改行
📌インライン要素を維持しつつ、ブロックレベル要素のように改行させたいときは、::after擬似要素を使います。
— たかもそ@CSS Tips集発売中 (@takamosoo) August 29, 2020
contentプロパティに'\a'（改行コードu+000a）を指定し、white-space: pre;でそのまま改行が反映されるようにしています。 pic.twitter.com/aRQyHWCbKb
08. 絵文字をアイコンに
📌絵文字のシルエットをアイコンとして使う方法！
— たかもそ@CSS Tips集発売中 (@takamosoo) August 16, 2020
絵文字の色を透明にしておいて、text-shadowプロパティで塗りつぶすことで絵文字のシルエットになります。
ワンポイントで使ったりできますね。 pic.twitter.com/CYZOwBZTZd
09. 上下左右中央揃え
ツイート内で display: flex; となっていますが、正しくは display: grid; です。
📌最近はCSSの上下左右中央揃えをこの2行で終わらせることが多いです！
— たかもそ@CSS Tips集発売中 (@takamosoo) August 4, 2020
対応ブラウザ → https://t.co/0xEDxDf8f3 pic.twitter.com/Eak6n2AIow
非対応ブラウザにはPostCSSプラグインのpostcss-placeを使って変換できます。https://t.co/5lVZNGtrZF
— たかもそ@CSS Tips集発売中 (@takamosoo) August 4, 2020
10. overflowプロパティの指定
📌ほとんどの場合、overflowプロパティにはscrollではなく、autoを指定した方が自然です。overflow: scroll;だと、コンテンツが少ない場合にもスクロールバーが表示されてしまいます。 pic.twitter.com/XU6691Qu2k
— たかもそ@CSS Tips集発売中 (@takamosoo) August 9, 2020
11. ページ内リンクのアニメーション
📌ページ内リンクをクリックしたときに、CSSで移動先をハイライトしてあげるとわかりやすいのでおすすめです！
— たかもそ@CSS Tips集発売中 (@takamosoo) August 12, 2020
↓ pic.twitter.com/WsxgCL8rj9
:target擬似クラスを使って、ページ内リンクがクリックされたときにアニメーションするようにしています。
— たかもそ@CSS Tips集発売中 (@takamosoo) August 12, 2020
html要素にはscroll-behaviorプロパティを指定して、スムーススクロールされるようにしています。 pic.twitter.com/A1TcosP67Q
12. 非表示でもダウンロードされる
📌CSSでdisplay: none;してもコンテンツはダウンロードされるって知っていましたか？
— たかもそ@CSS Tips集発売中 (@takamosoo) August 20, 2020
画像ならpicture要素とsource要素のmedia属性を使えば、必要な画像のみがダウンロードされます。
動画は容量が多いので要注意！
動画の場合video要素内のsource要素でmedia属性が効かない？のでJSを使います。 pic.twitter.com/5o3LaAvlF8
仕様上、source要素のmedia属性はpicture要素内でのみ評価されるようです。https://t.co/YJ7sRWM9K4
— 布団とエンジニア (@arktds) August 21, 2020
MDN https://t.co/hBR8uXhMQj にも、
> この属性は <picture> 要素の内部でのみ使用します。
と記載されていました！
13. デュアルディスプレイの判定
📌今提案中のメディア特性、spanning。これが実装されると、デュアルディスプレイがどのように使われているかを判定できるようになります。 pic.twitter.com/EBZ4HOvkHJ
— たかもそ@CSS Tips集発売中 (@takamosoo) August 26, 2020
14. アスペクト比の固定
📌CSSでアスペクト比を固定したい場合、aspect-ratioプロパティを使います。
— たかもそ@CSS Tips集発売中 (@takamosoo) August 3, 2020
値は <横> / <縦> というように指定し、16 / 9なら16:9のアスペクト比となります。
対応ブラウザ → https://t.co/UBrKbHLfen pic.twitter.com/dq6JbKEeIU
しかし、現状ほぼすべてのブラウザで実装されていないため、PostCSSのPolyfillを作りました。
— たかもそ@CSS Tips集発売中 (@takamosoo) August 3, 2020
従来のpadding-topを活用したテクニックですが、floatを使っています。floatはこういった使い道もあるので覚えておくとよいです！
postcss-aspect-ratio-polyfill → https://t.co/HCAaEwJejC
15. CSS Color Module Level 5
📌CSS Color Module Level 5では、新たに色に関する関数が追加されています！こういった関数はCSS変数と併用することで力を発揮して、色々と自動化できるようになるので楽しみです。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 22, 2020
・color-mix() → 色の混合
・color-contrast() → コントラスト比が高い色を算出
・color-adjust() → 色の調整 pic.twitter.com/6CqhKZ9DxY
16. CSSの単位
以前はpxよりremを推していたが、今は全部pxでいいと思ってる。理由はremとem関連のバグが多いこと。ブラウザが進化して、策定書みたいに仕様が統一されればこういった悩みもなくなるんだけど、ブラウザの機能はバラバラでソフトに依存する状態なのがよくない！！
— たかもそ@CSS Tips集発売中 (@takamosoo) July 21, 2020
（ちなみに海外だとpxよりrem/em推す感じが強い）
— たかもそ@CSS Tips集発売中 (@takamosoo) July 21, 2020
あと普通に12.3456pxみたいな小数点pxも使います。整数値だけじゃ表現できない微調整ができる。あと数学的に近似しなきゃいけない場合も使う。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 21, 2020
全ブラウザが、px指定でも文字サイズだけ大きくできる機能を実装すれば、remの必要性は完全になくなるのでブラウザには頑張ってほしい…（今はFirefoxとSafari?だけかな？）
— たかもそ@CSS Tips集発売中 (@takamosoo) July 21, 2020
JavaScript
17. 配列の重複を削除
📌JavaScriptで配列の重複を取り除く場合は、Setでまずユニークなオブジェクトを生成し、スプレッド演算子（...）で配列になるように展開しています。
— たかもそ@CSS Tips集発売中 (@takamosoo) August 30, 2020
Setを使うことで高速かつシンプルな記述で実装できます！ pic.twitter.com/LLy02jfMLC
18. 特定の要素以外をクリック
📌JavaScriptで特定の要素以外がクリックされたときを判定するなら、Element.closest()が便利！
— たかもそ@CSS Tips集発売中 (@takamosoo) August 28, 2020
モーダルの外側をクリックしたら閉じる処理とか、ドロップダウンメニューの外側をクリックしたら閉じるとか、色々応用できます。 pic.twitter.com/iYmYVFpM6B
Element.closest()に対応していないブラウザにはmdn-polyfillsを使います。https://t.co/CAKBTtwF8W pic.twitter.com/k2OKWFqfh5
— たかもそ@CSS Tips集発売中 (@takamosoo) August 28, 2020
19. 文字列の比較
📌JavaScriptでこの等式がfalseになるのえ？ってなりませんか！！ pic.twitter.com/74YRQRo07B
— たかもそ@CSS Tips集発売中 (@takamosoo) August 23, 2020
2つめのcaféのéに違いがあります。e + アクセント記号（u0301）という形になっていて、見た目上同じでもユニコード上は等しくはないため、falseとなります。 pic.twitter.com/mkoiFRubE1
— たかもそ@CSS Tips集発売中 (@takamosoo) August 23, 2020
そこで、String.normalize()関数で正規化するとtrueになります。単に===すればいいというわけではないということですね。 pic.twitter.com/KjJQBpGnhN
— たかもそ@CSS Tips集発売中 (@takamosoo) August 23, 2020
20. IEの判定
📌JavaScriptでIEを判定するのにユーザーエージェントを使っていませんか？ユーザーエージェントのパースだと将来的な仕様変更により壊れる可能性があります。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 29, 2020
そこでオススメしたいのが、Feature Detection（機能による判定）です。 pic.twitter.com/OjhHHqY0ir
IEには独自プロパティとして、document.documentModeがあり、5〜11までのバージョン番号を返します。それ以外のブラウザではundefinedとなるため、判定に利用できます。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 29, 2020
document.documentModeを使った方法はjQueryやAngularJSでも使われており、信頼性が高い判定方法といえますね！
どこに記載されているかも提示しておきます。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 29, 2020
jQuery → https://t.co/KReDqtp7Ug
AngularJS → https://t.co/yeLGBtmilY
21. 電波状況
📌JavaScriptで一時的に電波状況が悪くなったときを検知できます。アラートを出したり、localStorageに一時保存したりなど色んな使い道がありそうです。
— たかもそ@CSS Tips集発売中 (@takamosoo) July 30, 2020
対応ブラウザ → https://t.co/lFQDtLvMQx pic.twitter.com/hqTbabAy9y
Libs
22. mdn-polyfills
IE11とかEdgeでサポートされていないもののPolyfillとして、これが良さそう。1つのモジュールにまとめられていて、読み込みたいものだけ読み込める。// https://t.co/6Tb10A9Fpg
— たかもそ@CSS Tips集発売中 (@takamosoo) June 24, 2020
23. mailgo
📌メール（<a href="mailto:~">）や電話番号（<a href="tel:~">）のリンクをクリックするとモーダルが開いて、Gmailで開いたり単にコピーしたりを選択できるようにする - mailgohttps://t.co/Lgq7THBeNe pic.twitter.com/vvAkhPIErI
— たかもそ@CSS Tips集発売中 (@takamosoo) August 22, 2020
Tools
24. Get Waves
📌いい感じの波形をSVGで作れるWebジェネレーター - Get Waveshttps://t.co/wYPdhjIR7P
— たかもそ@CSS Tips集発売中 (@takamosoo) August 19, 2020
25. SVGOMG
📌SVGの圧縮を細かい設定でできる - SVGOMGhttps://t.co/cFjAVY8AL8 pic.twitter.com/W0Uq0NI8S8
— たかもそ@CSS Tips集発売中 (@takamosoo) August 25, 2020
26. Wrap SVG
📌SVGを自由に歪めたりして、オシャレにできるWebジェネレーター「wrap-svg」
— たかもそ@CSS Tips集発売中 (@takamosoo) August 9, 2020
→ https://t.co/LWo7OByIO7 pic.twitter.com/UZXQsaMKmH
27. Coolors
📌配色ジェネレータ - Coolors
— たかもそ@CSS Tips集発売中 (@takamosoo) August 14, 2020
ランダム生成だけでなく、写真から配色を生成したり、色覚シミュレーションやグラデーション生成まで色々できる優れもの。https://t.co/aMiw6gjgR1
28. gitignore.io
📌.gitignoreを自動生成してくれるWebツール「https://t.co/o2b6Tsrd2M」
— たかもそ@CSS Tips集発売中 (@takamosoo) August 10, 2020
→ https://t.co/a24avMrwrr
29. Whitespace to copy and paste
📌色んな種類のホワイトスペースをコピペできるWebサイト
— たかもそ@CSS Tips集発売中 (@takamosoo) August 10, 2020
→ https://t.co/i6i3gmgGDN
30. indent-rainbow / Trailing Spaces
📌VSCodeの拡張機能で入れたら見やすくなった！
— たかもそ@CSS Tips集発売中 (@takamosoo) July 20, 2020
・indent-rainbow（インデントに色をつけてくれる）
・Trailing Spaces（行末の余計なスペースをハイライトしてくれる）
行末のスペースをハイライトするから、余計じゃないスペースもハイライトされるけど、普通に見やすい。 pic.twitter.com/QWBy7ZsKm4
31. Bracket Pair Colorizer 2
📌VSCode使ってるならBracket Pair Colorizer 2を入れておくといいです！！
— たかもそ@CSS Tips集発売中 (@takamosoo) August 20, 2020
かっこが自動で色分けされるので、開始と終了の位置がわかりやすくなります。
おすすめ！ pic.twitter.com/luccv9kGTJ
Resources
32. Bootstrap Icons
📌Bootstrap製の1000個を超えるアイコン集 - Bootstrap Iconshttps://t.co/cZsTwekZEy
— たかもそ@CSS Tips集発売中 (@takamosoo) August 12, 2020
33. heroicons
📌Tailwind製で200種類以上のSVGアイコン集 - heroiconshttps://t.co/YNiwzivwJV
— たかもそ@CSS Tips集発売中 (@takamosoo) August 27, 2020
34. Forge Icons
📌300種類以上のSVGアイコン集 - Forge Iconshttps://t.co/PWzpDtfXpN
— たかもそ@CSS Tips集発売中 (@takamosoo) August 17, 2020
35. System UIcons
📌システム系のアイコンが揃っている - System UIconshttps://t.co/KiHzdBkh51
— たかもそ@CSS Tips集発売中 (@takamosoo) August 12, 2020
36. Generated Photos
📌AIによって生成された著作権フリーで200万種類以上の顔画像が配布されている - Generated Photoshttps://t.co/fSGeWOUWcb
— たかもそ@CSS Tips集発売中 (@takamosoo) August 18, 2020
Browser
37. 要素単位のスクリーンショット
📌Chrome86からDevToolsの要素上で右クリックすると、Capture node screenshotという項目が追加されています。
— たかもそ@CSS Tips集発売中 (@takamosoo) August 24, 2020
今まではページの見えている範囲かページ全体しかできなかったので、これはありがたい！！ pic.twitter.com/vOU1ZUqm1W
38. ユーザーエージェントの仕様変更
📌UserAgentが廃止になり、代わりにHintとなるみたい。まだ仕様は確定していないため、どんなものかというのを確認しておくとよい。UserAgentは今後も仕様が変わり続ける可能性があり、今は案件等で使うべき時ではない気がする。// https://t.co/Wxlzoobg0h
— たかもそ@CSS Tips集発売中 (@takamosoo) July 13, 2020
Others
39. ハンバーガーメニュー
ハンバーガーメニューを下に置くという話は片手でも指が届きやすくて理解できるんだけど、その後に表示されるメニューが画面上部から順番にリストになってたら、結局指届かなくない？？？ハンバーガーメニューを下に置くなら、その後のメニューも下揃えにして欲しい。
— たかもそ@CSS Tips集発売中 (@takamosoo) June 19, 2020
この記事が気に入ったらサポートをしてみませんか？