「CSS」の版間の差分
(ページの作成:「Webページのデザインをするときに必要な知識技術。 カスケーディングスタイルシート。 ==CSS3== レスポンシブウェブデザイン…」) |
|||
(同じ利用者による、間の5版が非表示) | |||
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にアクセスしてしても、利便性を確保するという考え方である。 | |||
本質的に同じ構造のものを、見せ方を変えることによって解決しようとする考え方であるといえる。 | |||
===最も簡単なレスポンシブデザイン導入方法=== | |||
自分でゼロからレスポンシブデザインのウェブサイトを作り上げるには、それなりの知識と時間が必要になる。 | |||
なので、自分でゼロから作るよりも、すでにインターネット上で他人が作って無料での使用を許可して公開してくれているレスポンシブデザインのテンプレートを用いるのが良い。 | |||
これによって、短時間かつ簡単にレスポンシブデザインに対応したウェブサイトを構築することができる。 | |||
==無料のリファレンス== | ==無料のリファレンス== | ||
http://www.htmq.com/css3/ | 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: カスケーディングスタイルシート | |||
==参考== | |||
<references /> |
2020年11月9日 (月) 11:46時点における版
Webページのデザインをするときに必要な知識技術。
カスケーディングスタイルシート。
CSS3
レスポンシブウェブデザインなどに対応できるように大幅に機能が増えた。
スマートフォンのブラウザがバージョンアップされることが一般的になっており、日々ウェブブラウザが進化していることを考えると、CSS3で作成してほぼ問題ないと思われる。
ウェブブラウザがGoogle ChromeやSafari、edgeなどHTML5の規格に沿ったものが大多数利用できるようになっており、後方互換性はあまり気にしなくて良くなってきている。
そのため、ウェブデザインにCSS3をゴリゴリ使ってもほとんど問題はないと思われる。
が、実験的な部分にはベンダー接頭辞がついており、本番環境で使用することを避けるか、構文や意味がどちらも将来的に変更される可能性があるので、細心の注意を払いながら使用するかが必要である[1]
モジュール化
CSS3という名称の単一の規格は存在せず、CSS3以降では、仕様がモジュール(部品)単位で策定される。機能単位で仕様が分かれているが、それらを総称してCSS3と呼ぶ。
レスポンシブデザイン
単一のウェブサイトにおいても、ユーザーが閲覧するときに使用するデバイスの画面サイズが異なれば利便性に大きな格差が生じてしまう。
この問題を解決するための方法として、レスポンシブデザインというものがあり、CSSの仕組みが重要な役割を果たす。
これは、一つのHTMLに対して、画面サイズによって複数のCSSを用意しておくことによって、異なる画面サイズの端末から同じHTMLにアクセスしてしても、利便性を確保するという考え方である。
本質的に同じ構造のものを、見せ方を変えることによって解決しようとする考え方であるといえる。
最も簡単なレスポンシブデザイン導入方法
自分でゼロからレスポンシブデザインのウェブサイトを作り上げるには、それなりの知識と時間が必要になる。
なので、自分でゼロから作るよりも、すでにインターネット上で他人が作って無料での使用を許可して公開してくれているレスポンシブデザインのテンプレートを用いるのが良い。
これによって、短時間かつ簡単にレスポンシブデザインに対応したウェブサイトを構築することができる。
無料のリファレンス
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: カスケーディングスタイルシート