HTML

【CSS 講義 2】スマホの向きを気にせずに背景画像をフィットしたいとき

sizes属性は指定したメディアにマッチすると指定した幅になる。vhはviewport heightの略でビューポートの高さに対する割合を示します。モバイルの向きなど気にせずに背景画像をブラウザにフィットさせることが出来ます。 pic.twitter.com/0EZ6NP95cW

— コムテ (@commte) May 24, 2020

HTML Tip ⚡️ The download attribute on an anchor tag pops up a Save dialog to download the resource, instead of navigating to it. e.g.

<a download href="cat.jpg">
Download cat pic
</a> pic.twitter.com/syzwZgcqq2

— Umar Hansa (@umaar) May 12, 2020

🤓 readable, responsive hamburger inline SVG
🦾 enhanced with accessibility attributes (see demo)
💪 display with `flex` & `place-items: center`
🎨 conic-gradient for a soft icecreamy button fillhttps://t.co/8cp8N0jPod

💡 see demo for updated mods for rounded linecaps! pic.twitter.com/ZZ9SW2oDb2

— Adam Argyle (@argyleink) July 15, 2020

The Fastest Google Fonts – Web Performance Optimisationhttps://t.co/RzDvBaD30Y

Googleフォントの読み込みを高速化する方法

preconnectが高速だけど使えないブラウザがあるのでフォールバックとしてpreload、さらに非同期読み込み（"https://t.co/Ww9lWVGJUm='all'"）を使うのが良さそう

— ダーシノ / NES.css (@bc_rikko) May 21, 2020

Webフォントのパフォーマンスを改善するCSS@font-face {
font-family: MyFont;
src:
/* ローカルを検索 */
local("MyFont"),
local("My Font"), /*←別名*/
/* なければサーバから取得する */
url(MyFont.ttf);
/* 読込完了するまで代替フォントを表示する */
font-display: swap;
}

— ダーシノ / NES.css (@bc_rikko) March 31, 2020

順序付きリスト要素（ol）を逆順にする方法

<ol reversed>
<li>…</li>
</ol>

のように`reversed`をつけるとリストの番号が逆順になる。知らなかった！
※ちなみにIEは……。https://t.co/gSTfQROzVs pic.twitter.com/BSnQDxVjnS

— ダーシノ / NES.css (@bc_rikko) March 24, 2020

HTMLのliタグ、li class="hoge-list"みたいに「list」で命名されたコードをたまに見かけます。

きっとlistの省略でliだと思われているんだろうなあ、と思いながら、コードを滅却しています。

li → list item
ul → unordered list
ol → office lady#HTML #CSS

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) June 22, 2020