「CSS」の版間の差分
(→テクニック) |
編集の要約なし |
||
| (同じ利用者による、間の6版が非表示) | |||
| 1行目: | 1行目: | ||
[[Category:Web開発]] | |||
Webページのデザインをするときに必要な知識技術。 | Webページのデザインをするときに必要な知識技術。 | ||
| 34行目: | 36行目: | ||
[https://zenn.dev/moneyforward/articles/css-range-syntax ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ] | [https://zenn.dev/moneyforward/articles/css-range-syntax ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ] | ||
[https://coliss.com/articles/build-websites/operation/css/css-update-media-query.html メディアクエリ「update」] | |||
===最も簡単なレスポンシブデザイン導入方法=== | ===最も簡単なレスポンシブデザイン導入方法=== | ||
| 42行目: | 46行目: | ||
これによって、短時間かつ簡単にレスポンシブデザインに対応したウェブサイトを構築することができる。 | これによって、短時間かつ簡単にレスポンシブデザインに対応したウェブサイトを構築することができる。 | ||
===フレームワークの利用=== | |||
[https://qiita.com/senju797/items/ad85794ec927f6ebd7bc TailwindCSSのレスポンシブデザイン #Next.js - Qiita] | |||
==無料のリファレンス== | ==無料のリファレンス== | ||
| 58行目: | 66行目: | ||
==テクニック== | ==テクニック== | ||
===Subgrid=== | |||
[https://zenn.dev/moneyforward/articles/css-subgrid-all-browsers CSSのSubgridが全ブラウザ対応へ。Gridの入れ子の基本から応用までを完全理解する] | |||
===form-sizing=== | |||
[https://coliss.com/articles/build-websites/operation/css/auto-resizing-text-input-with-form-sizing.html CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更 | コリス] | |||
===offset=== | |||
[https://ics.media/entry/230327/ CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう] | [https://ics.media/entry/230327/ CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう] | ||
===数式を使ったアニメーション=== | |||
[https://katashin.info/posts/css-math-animation/ CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く - Katashin .info] | |||
===三角関数=== | |||
[https://coliss.com/articles/build-websites/operation/css/css-diagonal-layouts-in-2023.html これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック] | [https://coliss.com/articles/build-websites/operation/css/css-diagonal-layouts-in-2023.html これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック] | ||
===Zapping=== | |||
[https://buildstd.com/html-css-tips01/ いざという時に使える13のHTML&CSS Tips集] | [https://buildstd.com/html-css-tips01/ いざという時に使える13のHTML&CSS Tips集] | ||
===Time base css=== | |||
[https://yuanchuan.dev/time-based-css-animations Time-based CSS Animations] | |||
==参考== | ==参考== | ||
<references /> | <references /> | ||
2024年5月6日 (月) 22:32時点における最新版
Webページのデザインをするときに必要な知識技術。
カスケーディングスタイルシート。
CSS3
レスポンシブウェブデザインなどに対応できるように大幅に機能が増えた。
スマートフォンのブラウザがバージョンアップされることが一般的になっており、日々ウェブブラウザが進化していることを考えると、CSS3で作成してほぼ問題ないと思われる。
ウェブブラウザがGoogle ChromeやSafari、edgeなどHTML5の規格に沿ったものが大多数利用できるようになっており、後方互換性はあまり気にしなくて良くなってきている。
そのため、ウェブデザインにCSS3をゴリゴリ使ってもほとんど問題はないと思われる。
が、実験的な部分にはベンダー接頭辞がついており、本番環境で使用することを避けるか、構文や意味がどちらも将来的に変更される可能性があるので、細心の注意を払いながら使用するかが必要である[1]
モジュール化
CSS3という名称の単一の規格は存在せず、CSS3以降では、仕様がモジュール(部品)単位で策定される。機能単位で仕様が分かれているが、それらを総称してCSS3と呼ぶ。
レスポンシブデザイン
単一のウェブサイトにおいても、ユーザーが閲覧するときに使用するデバイスの画面サイズが異なれば利便性に大きな格差が生じてしまう。
この問題を解決するための方法として、レスポンシブデザインというものがあり、CSSの仕組みが重要な役割を果たす。
これは、一つのHTMLに対して、画面サイズによって複数のCSSを用意しておくことによって、異なる画面サイズの端末から同じHTMLにアクセスしてしても、利便性を確保するという考え方である。
本質的に同じ構造のものを、見せ方を変えることによって解決しようとする考え方であるといえる。
メディアクエリ
今日現在新しい強力な書き方が可能となった。
ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ
最も簡単なレスポンシブデザイン導入方法
自分でゼロからレスポンシブデザインのウェブサイトを作り上げるには、それなりの知識と時間が必要になる。
なので、自分でゼロから作るよりも、すでにインターネット上で他人が作って無料での使用を許可して公開してくれているレスポンシブデザインのテンプレートを用いるのが良い。
これによって、短時間かつ簡単にレスポンシブデザインに対応したウェブサイトを構築することができる。
フレームワークの利用
TailwindCSSのレスポンシブデザイン #Next.js - Qiita
無料のリファレンス
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の三角関数で斜めのレイアウトを実装するテクニック
