令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
4つの疑似セレクター:hover :active :focus :visitedの 挙動を理解して効果的に使おう！
2024/1/22 (更新日:2024/1/22) 4つの疑似セレクター:hover :active :focus :visitedの 挙動を理解して効果的に使おう！
CSS Display Module Level 3 (Editor's Draft)
CSS Display Module Level 3 W3C Candidate Recommendation Snapshot, 30 March 2023 More details about this document This version: https://www.w3.org/TR/2023/CR-css-display-3-20230330/ Latest published version: https://www.w3.org/TR/css-display-3/ Editor's Draft: https://drafts.csswg.org/css-display/ History: https://www.w3.org/standards/history/css-display-3 Implementation Report: https://wpt.fyi/res
CSS display の複数キーワード構文の使用 - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
【CSS】<input type="file">は::file-selector-buttonでスタイルをつけよう - Qiita
<input type="file">は直接スタイル指定ができず、デザインの変更 が面倒だったのですが、::file-selector-button を使えば簡単に指定できることを知ったので備忘録です。 使い方 See the Pen ::file-selector-button by himeka223 (@himeka223) on CodePen. ::file-selector-button にボタンのスタイルを設定するだけです！ 「選択されていません（選択後はファイル名）」の文言のスタイルはinputの方で変更できます。 display: block; を追加すればボタンとテキストの間で改行も可能です。 すべてのブラウザで対応済み 既にすべてのブラウザで対応済みのようで、安心して使えます！ テキストも変更したい場合は疑似要素をのせる 残念ながら ::file-selector-b
Viteで従来型静的サイトの開発環境を構築するためにプラグインをたくさん作った - Qiita
Vite V4に対応しました (2022-12-24) Rollup 3 の破壊的変更の影響で vite-plugin-imagemin-cache のディレクトリ構造再現オプションが廃止されました 概要 ソースの物量に関わらず瞬時に起動する開発サーバに惹かれて Vite を古典的な従来型静的Webサイトの開発環境に利用しようとしたものの、今時のSPA/MPAがターゲットのためそのようなナレッジもプラグインもほぼほぼ存在せず、「なければ作ればいい」を地で行く羽目になった、というオチ。 Pug+SCSS+TypeScriptとimageminを使用して基本的な従来型静的サイトの制作要件に対応するため、以下のプラグインを作成した。 Pugを静的HTMLとして配信・出力する vite-plugin-pug-static プラグイン ビルド対象をglobパターンで取得する vite-plugin-
【詳細版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る | Web production note
※本記事はejsを利用していません。 代わりにHTMLファイルをejsと同等の機能を追加する（ハンドルバー化する）プラグイン vite-plugin-handlebars を利用しています。ejsは以下プラグイン vite-plugin-ejs を利用すると実装できるようです。 github.com GitHub – trapcodeio/vite-plugin-ejs: Vite: Use Ejs in your entypoints i.e index.html Vite: Use Ejs in your entypoints i.e index.html. Contribute to trapcodeio/vite-plugin-ejs …
CSSで文章を一行ずつ時間差で順番にフェードインさせる方法 - NatsukiMemo なつ記メモ of WEBデザインTIPS
6行のテキストを一行ずつ3秒間隔でフェードイン表示させています。 フェードインには、CSSのキーフレームアニメーションを用いています。 そして、animation-delayを使って時間差が出るように遅延時間を調整しています。 HTML DEMOのコードは下記になります。 フェードインに必要なHTMLコードは 4行目から9行目のpタグのみです。 時間差で表示させる文章を一行ずつpタグで囲っています。 <body> <div class="wrap"> <div class="content"> <p class="fadein txt01">1行目：テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p class="fadein txt02">2行目：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
CSS スマートフォンでタップされたエリアがハイライトされるのを消したい - かもメモ
スマートフォンでリンクやボタンをタップした際に clickable なエリアがハイライトされます (iOS Safari だとグレー / Android for Chrome だと青) これ 通常のリンクやボタンはそのままで良いのですが、モーダルのエリア外をタップした際にモーダルを閉じさせたいなどの場合、画面全体に一瞬ハイライトが出てしまうので見た目が良くなくハイライトを消したかった -webkit-tap-highlight-color: transparent でハイライト (強調) を消せる .overlay { -webkit-tap-highlight-color: transparent; } サイト全体でハイライトの色を変更したい場合は色指定できる a, button, input, textarea, select { -webkit-tap-highlight-color
明日から使えるCSS設計【PDFLOCSS】
CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書はそんな人へ向けて、FLOCSSをベースにしつつオリジナル要素を加えてより体系的にまとめた設計「PDFLOCSS（ピーディーフロックス、Page Divided FLOCSS）」を紹介します。 「CSS設計のルールはなんとなくわかるけど、いざ自分でコードを書こうとすると手が止まってしまう」という人に読んでもらいたい一冊です。 （追記：おかげさまでCSS設計のドキュメントとして採用している制作会社様も増えているみたいです！ありがとうございます🙏）
【React】daisyUIを触ってみた！かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG ファイルを外部読み込みして CSS で色を変更する方法｜tsuchippo blog
Chromeの最小フォントサイズの10px制限がなくなった - Qiita
セカヤサフリーランスエンジニア&Web制作者💻小林 秀樹 on X: "そういえば、CSSのdisplayプロパティの書き方が新しくなってから久しいですが皆さん使ってますか？ 新記法では2つの値を指定するようになっています。 1つ目の値がボックス自身の、2つ目の値がボックスの中（＝子要素）の挙動を制御します。 もちろん従来の書き方も可能です。 #Web制作 #CSS https://t.co/YQxNkfDwcf"
React Skeleton - Create Content Loader
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
GitHub - yuheiy/sdenv: ウェブサイト（not ウェブアプリケーション）のためのフロントエンド開発スターターキット
H33: title 属性を用いて、リンクテキストを補足する | WCAG 2.0 達成方法集
C7: Using CSS to hide a portion of the link text | WAI | W3C
daisyUI — Tailwind CSS Components ( version 4 update is here )
