画面のいろいろな表示を設定できるというのが、なんとなく理解できてきたら、あとは、CSSの命令をどんどん覚えていくだけです。
CSSの命令は本当にたくさん
ちなみに、今後のcssの学習は、cssファイルに記述する方式(styleタグに記述する方式）で進めていきたいと思います。
CSSの歴史
まずは、簡易にChatGPT先生に聞いてみました。
cssの歴史について教えて
CSS（Cascading Style Sheets）は、ウェブページのスタイルやレイアウトを定義するための言語です。
CSSは、1994年に、HTMLにスタイルを追加するための提案として、Hakon Wium Lieによって提案されました。
最初のバージョンのCSSは、1996年にW3Cによって公開され、CSS1と呼ばれていました。
CSS1は、基本的なスタイルシート機能を提供しており、ウェブ開発者が文字の色、サイズ、位置などを変更することができました。
その後、CSS2が1998年に発表され、より高度なレイアウトやスタイルの制御が可能になりました。
しかし、ブラウザ間の互換性の問題が依然として存在し、開発者が異なるブラウザで同じページを表示するためには、異なるスタイルシートを書く必要がありました。
その後、CSS3が開発され、2001年に最初のモジュールが発表されました。
CSS3は、より多くの機能を提供し、ブラウザ間の互換性も向上しました。
CSS3は、現在も開発が進められており、新しい機能が追加されています。
最近のトレンドは、CSSフレームワークの使用であり、BootstrapやFoundationなどのフレームワークが開発されています。
これらのフレームワークは、レスポンシブデザインやグリッドシステムなどの便利な機能を提供し、開発者がより迅速かつ効率的にウェブページを作成できるようにしています。
このブログを書いている現在のcssのバージョンは3です。
そして20年以上もバージョン3が続いていますが、cssの基本機能としては定義されているけど、インターネットブラウザが対応できていないものもあるので、ブラウザ側の開発が後追いで行われているという現実も理解しておきましょう。
cssの書き方基本
前回、簡単なcssを書いてみましたが、基本形と、それぞれの呼び名を覚えておきましょう。
main.sample {
display : block;
}
まず、上記の様な１つだけのサンプル記述を例にそれぞれの部分の名前を覚えておきましょう。
セレクター {
プロパティ : 値 ;
}
セレクター(selector)
HTMLのDOMを選択するという意味があります。
サンプルでは、mainタグのsampleというクラスを持っている要素が選択されます。
p.test と書かれていると、Pタグのtestというクラスを持っている要素。
#systemと書かれていると、systemというid属性を持ったタグという風に、機能的に書かれるのが特徴です。
このセレクタは、とにかく奥が深く、基本的にどのタグでも単一でも複数でも選択できるようになることが、cssを自在に操れるポイントになります。
セレクタの詳細については、以後にしっかりと学習するので、この段階では、セレクターという意味合いを覚えておきましょう。
プロパティ
プロパティは、装飾をする命令の部分です。
どんな装飾をするかを指定する役割があります。
前回のサンプルでは、
文字色を変えるために、color。
背景色を変える為に、background-color。
文字スタイルを変更させるために、font-style。
という風に、比較的命令に対してわかりやすく覚えやすいのがこのプロパティです。
たくさんあるプロパティは、このcssの学習を進めていくことで、自然と覚えて行くことでしょう。
値
プロパティに対して、設定をする値を指定します。
値には、数値、色、サイズ、特定の値など、いろいろな種類があり、単位や書き方なども厳密に行う必要があります。
プロパティとセットで覚えていくといいでしょう。
宣言(declaration)
プロパティと値は、必ずセットで書かれる事から、これらをセットで、「宣言」と呼ばれることがあります。
重要な名称ではないですが、なんとなく覚えておきましょう。
HTMLタグの特性とCSSの関係性
CSSは、装飾をするだけじゃなく、HTMLのタグの特性を変更する事もできるという事を理解しましょう。
インターネットブラウザで表示しているページの要素の特性を見ることができます。
GoogleChromeの場合であれば、確認したい要素（タグ）を右クリックして、「検証」を選択してみましょう。
次のような画面が現れます。
中断にある"completed"を選択すると、そのタグにどんなstylesheetがセットされているのかを見ることができます。
自分でセットしたcssがうまく動作しない時に、この箇所を見て確認してみるといいでしょう。
そして、実際にいろいろなタグの内容をみて、どういうプロパティにどんな値がセットされているかを確認してみるというのも、重要な学習につながるはずです。
まずは、基本的なタグについての特性をチェックしてみましょう。
基本的なタグとは、imgタグ、h1タグ、、divタグ、spanタグ、...などなどですね。
0 件のコメント:
コメントを投稿