画像
【CSS 講義 2】スマホの向きを気にせずに背景画像をフィットしたいとき
— コムテ (@commte) May 24, 2020
sizes属性は指定したメディアにマッチすると指定した幅になる。vhはviewport heightの略でビューポートの高さに対する割合を示します。モバイルの向きなど気にせずに背景画像をブラウザにフィットさせることが出来ます。 pic.twitter.com/0EZ6NP95cW
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.
— Umar Hansa (@umaar) May 12, 2020
<a download href="cat.jpg">
Download cat pic
</a> pic.twitter.com/syzwZgcqq2
🤓 readable, responsive hamburger inline SVG
— Adam Argyle (@argyleink) July 15, 2020
🦾 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
フォント
The Fastest Google Fonts – Web Performance Optimisationhttps://t.co/RzDvBaD30Y
— ダーシノ / NES.css (@bc_rikko) May 21, 2020
Googleフォントの読み込みを高速化する方法
preconnectが高速だけど使えないブラウザがあるのでフォールバックとしてpreload、さらに非同期読み込み("https://t.co/Ww9lWVGJUm='all'")を使うのが良さそう
Webフォントのパフォーマンスを改善するCSS@font-face {
— ダーシノ / NES.css (@bc_rikko) March 31, 2020
font-family: MyFont;
src:
/* ローカルを検索 */
local("MyFont"),
local("My Font"), /*←別名*/
/* なければサーバから取得する */
url(MyFont.ttf);
/* 読込完了するまで代替フォントを表示する */
font-display: swap;
}
その他
順序付きリスト要素(ol)を逆順にする方法
— ダーシノ / NES.css (@bc_rikko) March 24, 2020
<ol reversed>
<li>…</li>
</ol>
のように`reversed`をつけるとリストの番号が逆順になる。知らなかった!
※ちなみにIEは……。https://t.co/gSTfQROzVs pic.twitter.com/BSnQDxVjnS
名称に関して
HTMLのliタグ、li class="hoge-list"みたいに「list」で命名されたコードをたまに見かけます。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) June 22, 2020
きっとlistの省略でliだと思われているんだろうなあ、と思いながら、コードを滅却しています。
li → list item
ul → unordered list
ol → office lady#HTML #CSS
コメントは受け付けていません。