CSS

Webページのデザインをするときに必要な知識技術。

カスケーディングスタイルシート。

CSS3

レスポンシブウェブデザインなどに対応できるように大幅に機能が増えた。

スマートフォンのブラウザがバージョンアップされることが一般的になっており、日々ウェブブラウザが進化していることを考えると、CSS3で作成してほぼ問題ないと思われる。

ウェブブラウザがGoogle ChromeやSafari、edgeなどHTML5の規格に沿ったものが大多数利用できるようになっており、後方互換性はあまり気にしなくて良くなってきている。

そのため、ウェブデザインにCSS3をゴリゴリ使ってもほとんど問題はないと思われる。

が、実験的な部分にはベンダー接頭辞がついており、本番環境で使用することを避けるか、構文や意味がどちらも将来的に変更される可能性があるので、細心の注意を払いながら使用するかが必要である

モジュール化

CSS3という名称の単一の規格は存在せず、CSS3以降では、仕様がモジュール(部品)単位で策定される。機能単位で仕様が分かれているが、それらを総称してCSS3と呼ぶ。

レスポンシブデザイン

単一のウェブサイトにおいても、ユーザーが閲覧するときに使用するデバイスの画面サイズが異なれば利便性に大きな格差が生じてしまう。

この問題を解決するための方法として、レスポンシブデザインというものがあり、CSSの仕組みが重要な役割を果たす。

これは、一つのHTMLに対して、画面サイズによって複数のCSSを用意しておくことによって、異なる画面サイズの端末から同じHTMLにアクセスしてしても、利便性を確保するという考え方である。

本質的に同じ構造のものを、見せ方を変えることによって解決しようとする考え方であるといえる。

メディアクエリ

今日現在新しい強力な書き方が可能となった。

ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ

メディアクエリ「update」

最も簡単なレスポンシブデザイン導入方法

自分でゼロからレスポンシブデザインのウェブサイトを作り上げるには、それなりの知識と時間が必要になる。

なので、自分でゼロから作るよりも、すでにインターネット上で他人が作って無料での使用を許可して公開してくれているレスポンシブデザインのテンプレートを用いるのが良い。

これによって、短時間かつ簡単にレスポンシブデザインに対応したウェブサイトを構築することができる。

フレームワークの利用

TailwindCSSのレスポンシブデザイン #Next.js - Qiita

無料のリファレンス

2023年モダンCSSの最新トレンド

http://www.htmq.com/css3/ チートシートとして利用可能

https://developer.mozilla.org/ja/docs/Archive/CSS3　CSS標準の勧告等について

https://allabout.co.jp/gm/gc/376450/　機能概要についてざっくりと学ぶ

https://developer.mozilla.org/ja/docs/Web/CSS　公式サイト: CSS: カスケーディングスタイルシート

https://developer.mozilla.org/ja/docs/Web/CSS/Reference　公式リファレンス: CSS リファレンス - CSS: カスケーディングスタイルシート

テクニック

Subgrid

CSSのSubgridが全ブラウザ対応へ。Gridの入れ子の基本から応用までを完全理解する

form-sizing

CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更 | コリス

offset

CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう

数式を使ったアニメーション

CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く - Katashin .info

三角関数

これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック

Zapping

いざという時に使える13のHTML&CSS Tips集

Time base css

Time-based CSS Animations