最近のCSSを改めてちゃんと学んでみた
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
Dialog と Popover #10 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Tooltip 今回は、Menu の実装を考えてみる。GitHub でいうとこの部分だ。 元となるボタンによって表示され、このボタンからの相対位置で調整されるため、Anchor Positioning を活用することになる。非常によくある実装パターンだ。 HTML の仕様にも、類似の実装が Example として掲載されている。 6.12 The popover attribute https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribut
Dialog と Popover #5 | blog.jxck.io
Intro このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。 popup が紆余曲折を経て popover 属性になり、2023/3 に Safari が TP166 で実装した。そのまま Safari 17 に入ることを 2023/6 の WWDC で発表したあたりから、popover の実装は各ブラウザで一気に話が進む。 Release Notes for Safari Technology Preview 166 https://webkit.org/blog/13964/release-notes-for-safari-technology-preview-166/ News from WWDC23: WebKit Features in Safari 17 beta https://webkit.org/blog/14205/news-from-wwdc
display:contents;って何？どんな時に使うと便利なの？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents;
リンクの入れ子は subgrid が最適解かもしれない
はじめに リンクの入れ子とは何かというと、以下のようなデザインです。 カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。 しかし、以下のようにマークアップすることはできません。 <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML のルール的に <a> の入れ子はダメだからです。 Subgrid を使った方法 Subgrid がまだない時代からいろ
Pico CSS • Minimal CSS Framework for semantic HTML
Minimal CSS Framework for Semantic HTMLA minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà! 14.8K GitHub Stars 65.8K Monthly Npm Downloads (Last month) 12.6M Monthly JSDelivr Requests (Last month) A Superpowered HTML ResetWith just the right amount of everything, Pico is a great
Shoelace: A forward-thinking library of web components.
New to Web Components? TL;DR – we finally have a way to create our own HTML elements and use them in any framework we want! Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable building blocks. They make a lot of sense in terms of design, devel
GitHub - cloudflare/lol-html: Low output latency streaming HTML parser/rewriter with CSS selector-based API
Low Output Latency streaming HTML rewriter/parser with CSS-selector based API. It is designed to modify HTML on the fly with minimal buffering. It can quickly handle very large documents, and operate in environments with limited memory resources. More details can be found in the blog post. The crate serves as a back-end for the HTML rewriting functionality of Cloudflare Workers, but can be used as
フロントエンドエンジニア御用達の MDN web docs を網羅した
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp
[Elm] いろいろためしたけど、もう見た目をあらわすクラス名をつけても全然いいよね？ - Qiita
Elm でどのように見た目をあつかうかについて僕がいま考えていることをまとめました。 結論として「BootStrap みたいな方針でCSSを書いて使えばいいよ」という単純な話を、 だらだら歴史的経緯とかどうでもいい話をしながら書きました。 従来の主張 まず、「見た目をあらわすクラス名を使うべきではない」と言われてきた背景をおさらいしたいと思います。 ここで言う「見た目をあらわすクラス名」とは、BootStrapのような方式のCSSフレームワークで採用している HTMLのクラス名に col-sm-8 や pull-right のような見た目に関わる名前のクラスを入れる方針のことを意図しています。 従来は HTML/JS/CSS の役割を次のように分け HTMLがページの構造のみを記述し JSが挙動のみをあつかい CSSが見た目をどう見せるかを全て制御する こうすることで、見た目の変更をしたい
![[Elm] いろいろためしたけど、もう見た目をあらわすクラス名をつけても全然いいよね？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/989df2838516ca1ca5c77db9950bc47820f3d148/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCRWxtJTVEJTIwJUUzJTgxJTg0JUUzJTgyJThEJUUzJTgxJTg0JUUzJTgyJThEJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgxJTkxJUUzJTgxJUE5JUUzJTgwJTgxJUUzJTgyJTgyJUUzJTgxJTg2JUU4JUE2JThCJUUzJTgxJTlGJUU3JTlCJUFFJUUzJTgyJTkyJUUzJTgxJTgyJUUzJTgyJTg5JUUzJTgyJThGJUUzJTgxJTk5JUUzJTgyJUFGJUUzJTgzJUE5JUUzJTgyJUI5JUU1JTkwJThEJUUzJTgyJTkyJUUzJTgxJUE0JUUzJTgxJTkxJUUzJTgxJUE2JUUzJTgyJTgyJUU1JTg1JUE4JUU3JTg0JUI2JUUzJTgxJTg0JUUzJTgxJTg0JUUzJTgyJTg4JUUzJTgxJUFEJUVGJUJDJTlGJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz0zMzE1YTMyMjFlMDgxZDEyNmE1MDE5N2FhNWM3ZGMxMQ%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYXJvd00mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRlZTNiODk0Yjk0ZDVmMDk5ZjgzMGQ5ZDUwNDM5ZWNm%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Deb5a06cf35d7c39a51e925e87e5cd6c8)
GitHub - rkendall/reffix: The Reference Fixer for analyzing and fixing broken path references in files.
$ ref or $ reffix Fixing broken references couldn't be easier. By default, reffix will generate a report of broken module references (require and import statements) by recursing through all the files in the directory in which it is launched. Use the -m html option to parse HTML files instead. reffix will list the broken and corrected paths and prompt you to update the files to fix them. Just hit E
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
レスポンシブ ウェブ デザインの基本 | Articles | web.dev
インターネットを利用する携帯電話ユーザーの増加に伴い、さまざまな画面サイズに対応したコンテンツ レイアウトの重要性が高まっています。レスポンシブ ウェブ デザインは、もともと Ethan Marcotte が A List Apart で定義したもので、サイトのレイアウトをユーザーが使用しているデバイスに合わせて変更することで、ユーザーのニーズとデバイスの機能に対応するデザイン戦略です。たとえば、レスポンシブ サイトでは、スマートフォンでは 1 列、タブレットでは 2 列、パソコンでは 3 列または 4 列でコンテンツを表示できます。 画面が広くなると、ウィジェットの形状が変化します。 インターネット対応デバイスにはさまざまな画面サイズがあるため、サイトは既存の画面サイズにも将来の画面サイズにも対応することが重要です。最新のレスポンシブ デザインでは、タッチスクリーンなどの操作モードも考慮
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - posthtml/posthtml-minify-classnames: 📩 Rewrites classnames and ids in HTML and CSS to reduce file size.
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
Mint Programming Language
GitHub - addyosmani/critical: Extract & Inline Critical-path CSS in HTML pages
thedaviddias/Front-End-Performance-Checklist: 🎮 The only Front-End Performance Checklist that runs faster than the others
http://www.muntiacus.org/