令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
sakura: a minimal classless css framework / theme
sakura: a minimal classless css framework / theme. [Go to Github repository] The perfect blossom is a rare thing. You could spend your life looking for one, and it would not be a wasted life Just drop in sakura.css to any webpage and go from ugly looking 1900's website to a pretty modern website in literally 0 seconds. Easy to customize and build on top of sakura. Sakura supports extremely easy th
朗報！ CSS Flexboxの8年越しのバグがようやく修正されます
CSS Flexboxのこのバグに悩んだ人もいると思います。 リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。 左: バグ、右: 期待する表示 まずは、そのバグが確認できるデモをご覧ください。 すべてのアイテムはul内のliで実装されており、CSSでulにborder: 1px solid red;を設定しています。 しかし、ボーダーはリスト全体ではなく左端の1列のみに適用されます。このバグは現在、Chrome, Safari, Firefoxで確認できます。 参考: Issue 507397 ※上記ではEdge（non chromium version）は期待通りに表示されるとあり、Edge 115（chromium version）ではバグで表示されます。 See the Pen "flex-f
[Q&A] flexboxでgapを指定している際に要素の横幅が圧縮される - Qiita
困っていること 前提： ・複数の子要素を持ち、それらを縦向きに並べ、一定の縦幅で右列に折り返す要素left-boxがある ・これを包む親要素wrapperがある(グレーの要素) ここで、left-boxにgap: 20pxを設定し、wrapperにdisplay: flexを設定すると、left-box要素の右端の位置とleft-box内の子要素の最右端の位置がずれます。 (分かりやすいように、left-boxを濃いグレーにしました。) left-boxの右端が、子要素の右端よりもgap分だけ左側に圧縮されています。 例えばleft-boxの右位置に別の要素を置きたい場合などに重なってしまいます。 解決したいこと 上記のように、gapがあり折り返すflexboxをflexboxで包んだときに、要素の右端と子要素の右端を一致させる方法があれば教えて頂きたいです。 もしくは、これは仕様であり不
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
今年3月に公開されたChrome 111とEdge 111にView Transitions APIが搭載されました。View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に
コンポーネントごとに考えるアクセシビリティのカレンダー | Advent Calendar 2023 - Qiita
はじめに みなさん初めまして。🎅🏻 Qiita株式会社で マネージャー・PdM・デザイナーをしている、自分のことをデザイナーであると自認 @degudegu2510 です。 去年に続き、今年のQiita Advent Calenar 2023でも、1人で25記事以上投稿した方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉 Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、今年も25記事完走してやろうとこのカレンダーを作成しました。 「有給を使ってでも、25記事完走するぞ！💪🏻」という気概でいるので、購読・応援していただけると嬉しいです。 ※ 2022 完走賞：【完走賞ゲットだぜ！】CSSでポケモンマスターになってやる Advent Calendar 2022 テーマ このカレンダーは、 UIコンポーネントごとに考えるアクセシビリティ
今さら調べるスムーススクロール - Qiita
はじめに スムーススクロールの実装は未だに悩みます。 ほぼ必須で行う実装ではあるものの、毎回下記のような課題がちらつきます。 パフォーマンスは落としたくない スクロール後にフォーカスも移動させたい（アクセシビリティ対応） ページ内検索ではアニメーションさせたくない（ユーザビリティ向上） 「視差効果を減らす」がオンのときはアニメーションさせたくない イージングが気持ちよかったらよりよい 実装は簡単なほうがいい 実装もややこしいし、検証も大変だし、自分なりの慣例が欲しくなったので調べました。 先に結論：今のところよさげな方法 「 html 要素に scroll-behavior: smooth; + リンク先に tabindex="-1” をつける」 2023年12月時点で、個人的にはこの方法が好みでした。 実装はかなりシンプル。 See the Pen Untitled by 伏屋楓 (@e
MDN は Wiki から GitHub 管理に変わって編集の敷居は高くなったのか？ - Qiita
はじめに この記事は 2023 年の MDN 翻訳 Advent Calendar 向けに作成したものです。 こんにちは。debiru です。MDN が Wiki プラットフォームだった頃から記事を編集したりしてきました。 今日は、現在の GitHub 管理されている MDN の編集に参加するのは敷居が高いのかどうかについて考えていきたいと思います。 MDN が Wiki だった頃 2020 年 12 月 14 日より、MDN は GitHub ベースの新しい Yari プラットフォームで運用しています。それまでは 2012 年 8 月 3 日に立ち上がった Kuma という Wiki プラットフォームが採用されていました。それ以前にはより古い Wiki プラットフォームが採用されていました。詳細は MDN のあゆみを参照ください。 現行のシステムとそれ以前では、Wiki であったかどうか
【CSS】いろんな値をカスタムプロパティに定義できる「@property」とは？ - Qiita
はじめに みなさんは、「@property」を知っていますか？ 「@property」はCSSの機能で、カスタムプロパティ（変数）の型や初期値を定義することが可能なアットルールです。 今までのカスタムプロパティ（変数）は、任意の値を持つ１つだけ、定義することができましたが、@propertyを駆使するとカスタムプロパティ（変数）で、いろんな値を定義することができるようになります。 この記事では、そんな@propertyの基本的な使い方とその活用例について詳しく解説します。 @property とは？ @property は、カスタムプロパティ（変数）の型や初期値を定義することが可能なアットルールです。 また、↓このように記載することで、プロパティ名・型・継承の有無・初期値を指定してすることができます。
MDNとかをみんなで編集！翻訳！ のカレンダー | Advent Calendar 2023 - Qiita
オープン Web の開発者向けドキュメント MDN Web Docs には、Web アプリ開発に役立つノウハウなど、英語ドキュメントが日々どんどん追加されていっています。ただそのぶんドキュメントの日本語化(l10n=localization)は後手後手になっています。 新しいウェブ技術やウェブ標準に興味ある 翻訳に興味あるけど、どうしたらいいか分からない 英語は苦手だけど、日本語の文書を読みやすくするとかならできるかな Mozilla のコミュニティ活動に参加してみたい フォクすけに萌える MDN を翻訳してきたけど最近ご無沙汰気味 などなど、色々な方面からの参加をお待ちしています。 参考情報: みんなで編集！翻訳！カレンダー 2021 みんなで編集！翻訳！カレンダー 2020 みんなで編集！翻訳！カレンダー 2019 みんなで編集！翻訳！カレンダー 2018 MDN Web Docs ド
scroll-margin-topが指定できなくて困った - Qiita
背景 各セクションに移動した際、追従ヘッダに遷移先の要素が隠れてしまう際にscroll-margin-topを使って解消するかと思います。 input要素にscroll-margin-topを指定しても、隠れてしまうままで詰まっていた為です。 input要素にscroll-margin-topを指定できない理由 scroll-margin-topはスクロールされる要素に指定できる為です。 スクロールされる要素というのは、 block レベル要素です。 block レベル要素 見出し・段落・表など、文書を構成する基本となる要素で、一つのかたまり(ブロック)に意味や役割を与える要素 block レベル要素の例は以下です。 <address>、 <blockquote>、 <div>、 <dl>、 <fieldset>、 <form>、 <h1>、 <h2>、 <h3>、 <h4>、 <h5
なぜインライン要素・ブロック要素概念は依然として有用なのか：現代的なWeb制作への適用
当記事では「HTML Standardからインライン要素・ブロック要素の記述が削除されたことを受けても、それらの概念が消えたわけではない」という主張を展開しています。 そして、記事内ではMDN Web Docs にその表記があることを根拠のひとつとしています。 『MDNの記述が変更されたことの意味（inline-level element, block-level element）』に記したとおり、すでにMDNの記述は変更されています。 この記事の趣旨はそれによって変わることはありませんが、MDN から記述が消えていることにつきましては充分にご留意頂ますようお願い致します。 詳しくは記事をご確認くださいませ。 https://zenn.dev/coedo/articles/updated-mdn-contents Web制作に関するディスカッションの中で、HTML Standard の内容
Web制作者がチェックしておきたい！ 2024年版、CSSフレームワークのまとめ
ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。 Awesome CSS Frameworks -GitHub 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 ベース・リセットCSS・ノーマライズ クラスレスのCSSフレームワーク 超軽量のCSSフレームワーク 汎用性に優れたCSSフレームワーク Material DesignのCSSフレームワーク ユーティリティベースのCSSフレームワーク 特化型のCSSフレームワーク ツールキット ベース・リセットCSS・ノーマライズ sanitize.css -GitHub reset.cssと
viewport sizeにあわせて変化しつつアクセシブルかもしれないfont-size指定 - Qiita
この記事の概要 font-size の指定に vw や vh などの単位を使用する場合、アクセシビリティ的な問題が起きます。 ユーザーがブラウザの設定としてフォントサイズを変えていても、それが反映されなくなることです。 とは言え vw などで文字のサイズを指定するのが便利な場面もありますから、上手くやれないかと思い考えてみました。 タイトルに「かもしれない」と入れている通り、確証はありません。 ハック的な感じがしますし、コードの理解しやすさも下がっていると思います。 これをきっかけにもっと良いやり方が生まれたら嬉しいです。 @property --1vw { syntax: "<length>"; inherits: true; initial-value: 0px; } :root { --1vw: 1vw; --vw-to-px: calc(tan(atan2(var(--1vw),
Webテキストを理解したい - Qiita
.button { display: inline-grid; place-items: center; border-radius: 9999px; width: min(30vw, 400px); min-height: 44px; background-color: darkcyan; font-family: "Noto Sans JP", sans-serif; color: white; } place-itemsで中央寄せしてるし、 テキストには色しか指定してないのに なんか上の余白の方が広いですね。。 line-height: 1 を指定してみても結果は同じです。 なんでなんでしょうか font-sizeって何なん Webテキストにはそれぞれ emスクエア（UPM / units per emとも呼ばれる） という相対的なサイズの「ボックス」があるみたいです。 （もともとは
GitHub - awesome-css-group/awesome-css: :art: A curated contents of amazing CSS :)
Table of Contents CSS Working Group Editor's Draft ✒️ Parsers 🔍 Preprocessors 💊 Frameworks 🎨 Toolkits 🔧 Reset and Normalize CSS Development at Large-Scale Websites Code Style Guidelines 📖 Style Guide Style Guide Generators 🎰 Naming conventions & Methodologies 💡 CSS in JS CSS Polyfills Miscellaneous Podcasts 📻 Twitter 📡 Videos 📺 2019 2016 2015 Books 📚 Tutorials 🎬 Maintainers Contribute
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JS Bin
CSS Scope Proposal & Explainer