この記事は移転しました。約2秒後に新記事へ移動します。 移動しない場合は以下をクリックしてください。 miya-moto-memo.hatenablog.com
![はてなブログカスタマイズの記事まとめ（その7）[アイコン、HTML、CSS関連] - みやもとブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e6b60935cb6295064c181eb08fb0fe8010c49ad/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmiyamoto-blog%2F20240229%2F20240229223916.png)
はてなブログカスタマイズの記事まとめ（その7）[アイコン、HTML、CSS関連] - みやもとブログ
この記事は移転しました。約2秒後に新記事へ移動します。 移動しない場合は以下をクリックしてください。 miya-moto-memo.hatenablog.com
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要(Overview) 使い始める 基礎情報 Tailwind CSS クラス名 ブレークポイント(Breakpoint) 方向(Direction) 長さ(Length) パーセンテージ(Percentage) 太さ(Width) 色(Color) 濃さ(Density) プレフィックス(Prefix) カスタムプロパティ 直接CSS指定 レイアウト(Layout) コンテナ(Container) カラム(Columns) ボックスサイジング(Box Sizing) ディスプレイ(Display) ポジション(Position) 上下左右(Top/Right/Bottom/Left) ビジビリティ(Visibility) オーバーフロー(Overflow) Zインデックス(Z-Index) フレックスボックスとグリッド(Flex & Grid) フレックス(Flex) フレックス方向(
Scalable CSS
What is the best scalable CSS approach? First, what does scalable CSS mean? To me: The CSS approach works for any size project. The “scaling” part usually implies “works for large-scale projects”, but I prefer thinking of it more literally: a CSS approach that can work for a small site and remain the same approach for a large site. Complexity stays low. It’s not hard to jump in and see how things
The Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine
Custom properties and CSS variables are often used interchangeably when describing placeholder values in CSS despite the fact that they are different but related concepts. Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined a
Using CSS content-visibility to boost your rendering performance - LogRocket Blog
Using CSS content-visibility to boost your rendering performance Rob O'Leary Rob is a solution architect, fullstack developer, technical writer, and educator. He is an active participant in non-profit organizations supporting the underprivileged and promoting equality. He is travel-obsessed (one bug he cannot fix). You can find him at roboleary.net. content-visibility is a CSS property that contro
What Are CSS Container Style Queries Good For? — Smashing Magazine
What are these CSS Container Style Queries, and why should you use them? Juan Diego Rodríguez delves deeply into style queries, and not at the syntax level, but at what exactly they are solving and what sort of use cases you would find yourselves reaching for them in your work if and when they gain browser support. We’ve relied on media queries for a long time in the responsive world of CSS but th
GitHub - rio-labs/rio: WebApps in pure Python. No JavaScript, HTML and CSS needed
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
A hand-picked collection of the best 20 CSS animations curated from various sources around the web. Most of them will generate pure CSS code without requiring any external libraries. If you want to explore more frontend tools and resources, visit our page 180+ Best Frontend Development Tools to find out more. 1. Animate.css A library of ready-to-use, cross-browser animations for you to use in your
Naming Variables In CSS
“Naming things is hard” goes the software engineering axiom and CSS is no exception. Here are some collected thoughts related to naming CSS Custom Properties. I’m going to use use the terms “variable” and “custom property” interchangeably since they are effectively the same thing for the purposes of what to call them. Disclaimer: What follows is not gospel. CSS to me is a very poetic language, the
本記事は、TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 今日は「CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう」というお話をしていきます。 鹿野壮と申します。XのIDは @tonkotsuboy_comです。可愛い猫を飼っていて今日は左上ぐらいに猫が映っています。よろしくお願いいたします。
css-text-4-memo-ja.md CSS Text Level 4 を読む（抄訳） CSS Text Module Level 4 W3C Working Draft, 19 February 2024 This version: https://www.w3.org/TR/2024/WD-css-text-4-20240219/ Latest published version: https://www.w3.org/TR/css-text-4/ Editor's Draft: https://drafts.csswg.org/css-text-4/ この文書はCSS Text Level 4を読むための参考として部分的に訳した抄訳です。 この仕様書全体の日本語訳は https://triple-underscore.github.io/css-text-ja.html に公開
Testing HTML With Modern CSS
7th April 2024A long time ago, I wrote a reasonably popular bit of open source code called REVENGE.CSS (the caps are intentional). You should know upfront, this hasn’t been maintained for years and if I ever did get round to maintaining it, it would only be to add the “No Maintenance Intended” badge. Alas, that would technically count as maintenance. Anyway, I was recently reminded of its existenc
Modern CSS Tooltips And Speech Bubbles (Part 2) — Smashing Magazine
In Part 1 of this series, Temani Afif explored different CSS techniques to create tooltip shapes. The main challenge was to rely on a single element and create optimized code that could easily be controlled using CSS variables to update the size, shape, and position of the tail. In this second part, you are going explore more shapes. I hope you were able to spend time getting familiar with the tec
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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
2023 年の Web 開発のベースライン/ Shogo Sensui—TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」
【セッション概要】 2023 年の Web 開発のベースラインについて説明します 講演者: Shogo Sensui https://techfeed.io/people/@1000ch 【その他のセッションもご覧ください】 このイベントはTechFeed Experts Night#26のセッション動画です。イベントページから、他のセッションの動画や書き起こし記事も見ることができます。 TechFeed Experts Night#26january : https://techfeed.io/events/techfeed-experts-night-26 【TechFeedについて】 TechFeedは、ハイレベルエンジニア向けの技術情報プラットフォームです。 エキスパートのおすすめや、海外で注目の情報をまとめて読める！ ぜひご利用ください。 TechFeed https:
Sass has established itself as a powerful preprocessor installed locally, forming the backbone of my projects for over a decade. It enabled me to efficiently organize scalable and stable CSS packages. Even today, I still consider Sass to be an extraordinarily powerful tool. Yet, as we step into the year 2024, it's undeniable that CSS has undergone rapid development. Features that were once unique
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
「Google Chrome 118」安定版リリース、CSSのスタイルルールの適用範囲を限定できる「@scope」をサポート
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン118.0.5993.71がリリースされました。CSSにおいて特定範囲のみにルールを適用できる「@scope」がサポートされたほか、「scripting」と「prefers-reduced-transparency」という2つのメディア特性の追加や開発者ツールの機能向上などのアップデートが行われています。 New in Chrome 118 - Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-118/ New in Chrome 118: the @scope CSS rule is here, scripting and prefers-reduced-transparency, & more! - YouTube ◆CSSで
【2024年版】Next.jsプロジェクトを始める前に押さえたい！CSS フレームワーク5選の総合比較
はじめに Next.jsを使用してアプリケーションを開発する際、適切なCSSフレームワークの選択は重要な決定の一つです。 私自身、仕事でNext.js + MUI(Material-UI)を使用した経験がありますが、改めて各CSSフレームワークを比較し、Next.jsプロジェクトに最適なフレームワークを探ってみます。 CSSフレームワークの候補 ネット上の技術記事やGithubのスター数を踏まえ、Next.jsと組み合わせるのに人気の高いCSSフレームワークとして、以下の5つを候補に挙げました。 Tailwind CSS CSS Modules Styled Components Chakra UI Material-UI (MUI) それぞれのフレームワークについて、特徴とコード例を見ていきましょう。 1. Tailwind CSS Tailwind CSSは、「ユーティリティファースト
Fresh 1.6 at a glance 🌊 First class Tailwind CSS plugin We’re moving from Twind to Tailwind CSS. It features better Editor integrations and moves the CSS generation out of the rendering path. 📨 Partials with forms Partials are now supported on Form elements. 🧯 Partials on error pages Partials can now be used to render error pages. 🕵️♀️ Closable error overlay The custom error overlay that is s
この記事の概要 デザイントークンとしてタイポグラフィスケールを定義する手法はかなり市民権を得てきました。 しかし、あくまでそれぞれのトークンは固定値であることが多く、Web デザインで言えばデバイスサイズごとの最適化はあまりなされていないように思います。 Figma の variables を使いビジュアルとして整理し、その後 CSS に移植するまでの流れを記事にしてみます。 Figma での定義 タイポグラフィスケール（グローバル） あくまで 1 つの基準ですが、Lighthouse にて「フォントサイズが 12px 以下だと読みづらい」といったメッセージが出ます。 そのため 12px を下限とし、スケールをつくってみたいと思います。 今回はこの式を用いて、n = 3 からスタートします。 すると、次のような結果が得られます。 12 13 15 17 19 21 24 27 30 34
@media (horizontal-viewport-segments: <count>) { } @media (vertical-viewport-segments: <count>) { } <count>は水平(横長)、または垂直(縦長)の画面デバイス数を設定します。 例えば Surface Duo の2画面デバイス表示では以下の値になります。 水平の場合 horizontal-viewport-segments: 2 垂直の場合 vertical-viewport-segments: 2 CSS環境変数 各ビューポートのプロパティは、次の環境変数定義で取得できます。 env(viewport-segment-width <x> <y>); env(viewport-segment-height <x> <y>); env(viewport-segment-top <x> <y>
:has()の登場以前 :has()が利用できるようになり、CSSでの表現力は飛躍的に上がっている（:has()は最近のモダンブラウザならどれでも利用できるような状態である）。 Chrome Edge Safari Firefox Safari on iOS
![[CSS] 子要素がないときに親要素を消す際は:has()を利用すると良い](https://cdn-ak-scissors.b.st-hatena.com/image/square/7a99f7e730531c7fbccbd936bff8adc72738d865/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--QnM47JF2--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCSS%25255D%252520%2525E5%2525AD%252590%2525E8%2525A6%252581%2525E7%2525B4%2525A0%2525E3%252581%25258C%2525E3%252581%2525AA%2525E3%252581%252584%2525E3%252581%2525A8%2525E3%252581%25258D%2525E3%252581%2525AB%2525E8%2525A6%2525AA%2525E8%2525A6%252581%2525E7%2525B4%2525A0%2525E3%252582%252592%2525E6%2525B6%252588%2525E3%252581%252599%2525E9%25259A%25259B%2525E3%252581%2525AF%25253Ahas%252528%252529%2525E3%252582%252592%2525E5%252588%2525A9%2525E7%252594%2525A8%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%2525A8%2525E8%252589%2525AF%2525E3%252581%252584%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Ahiro%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzY0ZmQ2ZmJhZjQuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E6%2525A0%2525AA%2525E5%2525BC%25258F%2525E4%2525BC%25259A%2525E7%2525A4%2525BEZOZO%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2M2MzA3N2E1OTAuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
思わずハマる！CSSで作る動きのあるボタンを集めてみました。 ボタンは反応率にも関わるサイトの中でも重要なパーツ。 今回はアニメーションを５つに分類して紹介していきます。 もしサイトのデザインに合うものがあればぜひ実装してみてください。 CSSで作るアニメーションボタン 背景が変化するもの 枠線が変化するもの 文字が変化するもの ボタン自体が変形するもの 番外編 背景が変わるもの See the Pen CSS button hover effect by Julia (@sfoxy) on CodePen. 背景の一部が広がっていく。シンプルだけどデザイン性が高い See the Pen Css Button Hover #4 - Background by thelaazyguy (@thelaazyguy) on CodePen. 背景が２回続けて変化する See the Pen G
CSS コンテナクエリ考察 | grip on minds
2010 年に公開された Ethan Marcotte 氏の記事1でレスポンシブウェブデザイン（RWD）の手法が提唱されて以来、レイアウト幅に応じてスタイルを変更する方法を実現するには、メディアクエリ（@media）を使用するのが一般的でした。 そして 2023 年現在、コンテナクエリ（@container）が主要なブラウザでサポートされ、RWD の考え方が大きく変化しようとしています。 すでに多くの記事で解説されていますが、コンテナクエリの仕様は複雑です。この記事では、コンテナクエリの例を挙げながら、実際にどのような使い方ができるのか、使用する際にどのような懸念点が考えられるかといった点について考えていきます。 コンテナクエリは主要なブラウザでサポートされていますが 2、W3C の仕様では草案（Working Draft）段階のため、今後、実装方法や機能に変更が発生する可能性がある点を留
ニコニコ復活おめでとう～～ところでIAさんのバージョンアップが来ました！すごいことになってます！というわけで、中の人の代表曲である「鳥の詩」をまた歌ってもらいました。◯【調声語り】CeVIO の IA に中の人代表曲『鳥の詩』歌ってもらった話【解説枠】https://www.youtube.com/live/GQDRaHXZQ1k◯3年弱前→ sm39591686変わった点：・調声はベタ打ちから全部やりなおした・前回は声だけLiaさんに寄せたが、今回はピッチやタイミングなどの歌いまわしも原曲に寄せた （「歌声合成映えする歌い方」にしなくてもいいぐらい合成のクオリティが上がったので）・ミックスも原曲に寄せてディレイを平成盛りにした・ピッチ線のクオリティが上がったので補正のために描く線が減った・発音と音質が格段に良くなった。喉切り（声門閉鎖）も綺麗に出るようになった・波形が出るようになったので
久々に個人的に目からウロコの tips があったので記事にしておこうと思います。 はじめに アコーディオンアニメーションを実装しようとして、css transition height auto などと検索すると、主にheightを数値指定する方法や、max-heightを使った方法がヒットすると思います。 それらの方法は、何かしら大きな制約があり今まで避けていましたが、実装が簡単かつ制約がかなり小さい方法を知りました。 実装 <div class="container open"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
@property: Next-gen CSS variables now with universal browser support Stay organized with collections Save and categorize content based on your preferences. Get ready for a CSS power-up! The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers. This game-changing feature unlocks new levels of control and flexibility for CSS custom properties (a
Not long ago, if we wanted a tooltip or popover positioned on top of another element, we would have to set our tooltip’s position to something other than static and use its inset/transform properties to place it exactly where we want. This works, but the element’s position is susceptible to user scrolls, zooming, or animations since the tooltip could overflow off of the screen or wind up in an awk
原文: HTML vs Body: How to Set Width and Height for Full Page Size CSS は難しいですが、自由度も高いです。そして、この高い自由度のおかげで、たとえ行き当たりばったりでもスタイルを適用することができます。 ページは一見問題なく読み込まれます。「クラッシュ」もしません。 ではページ全体の幅と高さを設定したい場合、HTML 要素にどのような設定をすればいいか分かりますか。body 要素についてはどうでしょう。 上手くいくことを願いながらただ当てずっぽうにスタイルを適用していませんか。 もしそうであっても、あなたは一人じゃありません。 これらの質問に対する答えは直感的ではないのですから。 私自身、どのプロパティをどの要素に適用すべきかを正確に把握せずに、両方の要素にスタイルを適用していたという罪深い過去があります。🤦♂️ 次の例
Creating color palettes with the CSS color-mix() function | MDN Blog
Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the
HTML & CSS & JavaScript でwebページに雪を降らせましょう！（寒いです） - Qiita
初めに 今回のモノは、cssがメインなものになってるのかな？ と思われます。 意味不明なものは調べていただいたり、コメントして頂くと私も大変ありがたいです。 書いていこう 今回も説明（適当でごめんなさい）は、コード内で書いています。 cssはコメント多めですので、わかるとこは読んでいただかずとも大丈夫だと思います！ それではやってきましょう！ まず、HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snow Fall</title> <link rel="stylesheet" href="style.css"> <!-- スタイルシートのリンク --
目次・見出しのデザイン変更、マーカー機能、カテゴリーのタイル表示、実際に私のブログでのカスタマイズについて。CSSコードあり #CSS #ブログカスタマイズ #マーカー #CSSコード - サバのトランク
★★ はてなブログに関する記事です ★★ 前回の記事で、このブログのデザインを少しカスタマイズしていると書き、サンプル画像を載せました。 カスタマイズの「結果」だけ書いて「方法」を明かさないのも、なんだかイヤな感じ？なので😄、備忘録も兼ねてカスタマイズ方法を載せておきたいと思います。 わかっている方には冗長だと思うので、最初にCSSコードを載せ、その後に設定方法を書きます。 カスタマイズ内容 CSSコード（⬇️下記をクリックして、コードの表示・非表示切り替え） 設定方法（簡単に） 設定方法（スクリーンショットと共にわかりやすく） オリジナルなカスタマイズ方法のヒント まとめ カスタマイズ内容 ・目次のデザインを変更 ・見出しのデザインをわかりやすく変更（オリジナルでは字の大きさの違いだけ） ・記事中の文字を「斜体」に設定することで「黄色のマーカー」を引く ・「カテゴリー」を「タイル」表示
今回読んだ本 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。 以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。 自分のCSS設計の現状 普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。 SCSS＋BEM記法を使用 セレクタにHTMLタグ、idは使用しない 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり） 既に定義されているスタイルの打ち消しは避ける ハイライ
State of CSS 2024
It's amazing to witness the speed at which CSS keeps evolving. While the past decade has been all about building a solid foundation for layout (Flexbox, Grid) and syntax (variables) the future promises to be about going much further than most of us ever dreamed of. Want to calculate a square root or cosine in your CSS? Use that to build scroll-triggered animations? And maybe scope all of it down s
When to Nest CSS
With the recent news that CSS nesting is now available in the major evergreen browsers, our team was discussing how it differs from nesting in Sass, and the question came up — When should you use nesting? There’s a simple answer and a slightly more complicated answer. The simple answer is “avoid nesting.” The more practical, but also more complex answer is “nest pseudo-selectors, parent modifiers,
はてなブログカスタマイズの記事まとめ（その8）[CSS、HTML、JavaScript関連] - みやもとブログ
この記事は移転しました。約2秒後に新記事へ移動します。 移動しない場合は以下をクリックしてください。 miya-moto-memo.hatenablog.com
![はてなブログカスタマイズの記事まとめ（その8）[CSS、HTML、JavaScript関連] - みやもとブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8aa3326c6a6e2bce8697becbda57fa597fd044f6/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmiyamoto-blog%2F20240410%2F20240410231521.png)
【はてなブログ-カスタマイズ】グローバルナビゲーションの不具合対応（z-index）（CSS対応） - みやもとブログ
この記事は移転しました。約2秒後に新記事へ移動します。 移動しない場合は以下をクリックしてください。 miya-moto-memo.hatenablog.com
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - asamuzaK/domSelector: A CSS selector engine.
とほほのTaiwind CSS入門 - とほほのWWW入門
20 Super Useful CSS Animation Libraries
CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう
CSS Text Level 4 を読む（抄訳）
@starting-style - CSS: カスケーディングスタイルシート | MDN
Goodbye SASS 👋, welcome back native CSS
GitHub - chearon/dropflow: A CSS layout engine
Fresh 1.6: Tailwind CSS plugin, simplified typings and more
Adaptive Typography - Figma から CSS へ - Qiita
2画面折りたたみデバイスに対応したCSSメディアクエリ - Qiita
[CSS] 子要素がないときに親要素を消す際は:has()を利用すると良い
このボタンが凄い！CSSで動くアニメーションボタン 全45種 - パーツデザイン
【CeVIO AI IA2.0】鳥の詩【原曲再現】+css
CSS transitionをheight 0 ⇔ auto で有効化する方法【max-height禁止】
非依存で設定等もJavaScriptも不要、HTML要素にクリーンなプリセットスタイルを適用するCSSフレームワーク・「matcha.css」 - かちびと.net
@property: Next-gen CSS variables now with universal browser support | Blog | web.dev
CSS Anchor Positioning Guide | CSS-Tricks
HTML と Body: フルページ表示のために適切な幅と高さの CSS 設定
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita