「CSS」の版間の差分
(ページの作成:「Webページのデザインをするときに必要な知識技術。 カスケーディングスタイルシート。 ==CSS3== レスポンシブウェブデザイン…」) |
|||
| (同じ利用者による、間の15版が非表示) | |||
| 11行目: | 11行目: | ||
ウェブブラウザがGoogle ChromeやSafari、edgeなどHTML5の規格に沿ったものが大多数利用できるようになっており、後方互換性はあまり気にしなくて良くなってきている。 | ウェブブラウザがGoogle ChromeやSafari、edgeなどHTML5の規格に沿ったものが大多数利用できるようになっており、後方互換性はあまり気にしなくて良くなってきている。 | ||
そのため、ウェブデザインにCSS3をゴリゴリ使ってもほとんど問題はないと思われる。 | |||
が、実験的な部分にはベンダー接頭辞がついており、本番環境で使用することを避けるか、構文や意味がどちらも将来的に変更される可能性があるので、細心の注意を払いながら使用するかが必要である<ref>[https://developer.mozilla.org/ja/docs/Archive/CSS3 CSSの標準化に関する文章]</ref> | |||
===モジュール化=== | |||
CSS3という名称の単一の規格は存在せず、CSS3以降では、仕様がモジュール(部品)単位で策定される。機能単位で仕様が分かれているが、それらを総称してCSS3と呼ぶ。 | |||
==レスポンシブデザイン== | |||
単一のウェブサイトにおいても、ユーザーが閲覧するときに使用するデバイスの画面サイズが異なれば利便性に大きな格差が生じてしまう。 | |||
この問題を解決するための方法として、レスポンシブデザインというものがあり、CSSの仕組みが重要な役割を果たす。 | |||
これは、一つのHTMLに対して、画面サイズによって複数のCSSを用意しておくことによって、異なる画面サイズの端末から同じHTMLにアクセスしてしても、利便性を確保するという考え方である。 | |||
本質的に同じ構造のものを、見せ方を変えることによって解決しようとする考え方であるといえる。 | |||
===メディアクエリ=== | |||
今日現在新しい強力な書き方が可能となった。 | |||
[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」] | |||
===最も簡単なレスポンシブデザイン導入方法=== | |||
自分でゼロからレスポンシブデザインのウェブサイトを作り上げるには、それなりの知識と時間が必要になる。 | |||
なので、自分でゼロから作るよりも、すでにインターネット上で他人が作って無料での使用を許可して公開してくれているレスポンシブデザインのテンプレートを用いるのが良い。 | |||
これによって、短時間かつ簡単にレスポンシブデザインに対応したウェブサイトを構築することができる。 | |||
===フレームワークの利用=== | |||
[https://qiita.com/senju797/items/ad85794ec927f6ebd7bc TailwindCSSのレスポンシブデザイン #Next.js - Qiita] | |||
==無料のリファレンス== | ==無料のリファレンス== | ||
http://www.htmq.com/css3/ | [https://speakerdeck.com/tonkotsuboy_com/2023nian-modancssnozui-xin-torendo 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=== | |||
[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://katashin.info/posts/css-math-animation/ CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く - Katashin .info] | |||
===三角関数=== | |||
[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集] | |||
==参考== | |||
<references /> | |||
2023年10月26日 (木) 04:55時点における最新版
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の三角関数で斜めのレイアウトを実装するテクニック
