zelda-botw-starter 初Tailwind。チートシートあっても結構覚束ない。慣れたら便利そうだけど、慣れるまでに結構時間がかかるんじゃないのかな、そうでもないのかな。クラス名が多くなってしまった時に見にくくならないかがきになるけど、そのレベルまでいっ…

Wev.dev LIVE: Implementing Structure data with JavaScript Google検索した時に一覧ページでも商品の詳細情報とかが綺麗に表示されていることがあるけど、あれを出すために何をしているかと言う話。RichResultだかRichContentだか言ってた。基本的にはJSON…

ELQ When we implement responsive design, mostly we have to rely on media queries. However, we want to decouple each component asu much as possible. These requirements led the idea of element queries. With element queries, component's state…

UX week5 Don't hide the place where you don't have an elegant solution with glitz or glam decoration CSS/SVG/Canvasのビジュアル表現でできること・できないこと 直線的なものはCSS、ベジェ曲線を動かしたかったらSVG、画像自体をぐにゃぐにゃ動かし…

レスポンシブサイトを作るときは、パフォーマンスの観点から必要な画像サイズに必要十分な画像をDLするようにするため、複数のサイズバリエーションを用意するのが定石。さじ加減にルールはないが、だいたい3種類が一般的。 解像度が高いRetinaなどのディス…

<picture>では<source>と<img>を子要素として使うことができる。ブラウザは、<source>のsrcsetやmediaをみて、現在の環境に合うものがあるか確認、あればそれを表示する。なければimgに指定されているものを表示する。肝心なIEが対応してない悲しみ(まあでもその場合imgだけが表示されるら</source></source></picture>…

特定のクラス名がついていない要素にスタイルを当てたいときは&:not([className])を使う

nth-childはタグ名もクラス名も見ていない。nth-of-typeはタグ名だけ見てる。どっちにしろクラス名は無視されるから、この点意識しておかないと子孫要素で意図しないところまでスタイルがかかることがある。StackOverflow

flexboxのorderはデフォルトが0なので、最初に持ってきたいやつだけに1つけても何も変わらない