[progate] HTML/CSS 初級 「 CSSに触れてみよう」のまとめ
progateのCSS導入となります。簡単なHTMLにCSSを反映させる流れをコーディングすることで以降のセクションをスムーズに進めることができます。
HTML/CSS 初級の構成での「CSSに触れてみよう」の位置付け
- HTMLに触れてみよう
- CSSに触れてみよう ← 今回ここ
- レイアウトを作ろう
- ヘッダーを作ろう
- フッターを作ろう
- コンテンツを作ろう
- 問い合わせフォームを作ろう
まとめ
- HTML/CSS初級の「CSSに触れてみよう」は、progateのCSSについての導入部となっています。
- CSSを初めて触る人に、どんなものなのかを直感的に知ってもらうことができます。
- CSSとHTMLの繋ぎ方、簡単なCSSファイルを記述することができます。
「CSSに触れてみよう」の解説
本セクションでは、代表的なCSSの属性について学習していきます。
「HTMLに触れてみよう」同様に１つ１つは非常にシンプルですので、数分で終了します。
- 文字の色
- 文字の大きさと種類
- 高さと幅と背景色
- タグに名前をつける
基本的には「HTMLに触れてみよう」のタグを利用します。
文字の色
CSSファイル内のプロパティの書き方を学習します。CSSのプロパティについては、3種類あるのですが本コースでは1つだけ説明しています。
- HTMLファイルとは別にCSSファイルを作成して、同ファイル内に定義する。← これだけ
- HTMLファイルのタグの「style属性」に定義する。
- HTMLファイルにstykeタグを定義し、そこにCSSを指定する。
ちなみにコーディングするのであれば、CSSファイルを作成してその中にプロパティを記載するのが保守性の観点から一番良いと思います。
また色についてもいくつかパターンがあるのですが、そちらについてもカラーコードのみを対象としています。
- カラーコード ← これだけ
- カラーネーム
- rgb/rgba
- hsl/hsla
CSSではどのパターンで指定するのが妥当なのかについての説明が欲しいところです。
<h1>, <p>, colorプロパティ
文字の大きさと種類
本セクションでは、コンテンツの文字にフォーカスを当てて学習します。しかし文字情報は、Webサイトの要となるため、非常に重要な概念です。
文字の大きさ
文字の大きさは難しい問題です。利用するデバイスやブラウザによってユーザからの見え方は様々です。
colorの指定は、以下のパターンがあります。
- 絶対サイズ指定 ← 今回はこれ
- 相対サイズ指定
- キーワード指定
- 相対キーワード指定
マルチデバイスによるレスポンシブルへの対応もあるので、この問題は今後も学習する必要があります。
文字の種類
フォントは利用している端末(OS)に依存します。PCとスマホ、タブレットなど環境は様々です。
つまりフォントを指定することで想定外のデザインになりえます。
- 総称フォント
- フォントファミリー ← 今回はこれ
- デフォルトフォント
font-familyは複数してすることができ、指定しない場合はデフォルトフォントの指定が行われます。
「ここはどんなフォントでもいいからゴシック体で表現したい！」
といった場合、「総称フォント名」を使います。以下は利用方法で、仮にMS Pゴシックがデバイスに存在しなくても、sans-serifの指定によりなんらかのゴシック体のフォントが選択されます。
h1 {
font-family:"MS Pゴシック", sans-serif;
}
テキストデコレーションとか、この後出てくるのか本当に不安になる・・・
<h1>, <p>, font-size, font-family, colorプロパティ
高さと幅と背景色
本セクションでは、コンテンツの高さや背景色について学習します。いきなりコンテンツ制作のハイライトです。背景色を設定するというのはどういうことでしょうか？
背景色を設定できるということは、該当するコンテンツの配置と大きさを知っていることを指す
指定されるタグには、そのタグに応じたボックスが割り当てられます。そしてボックスというだけあって、以下の要素から構成されています。
- 高さ(height）← 今回はこれ
- 幅（width）← 今回はこれ
- 境界線（border）
- 境界線との余白（padding）
- 外側余白（margin）
高さと幅は、数値に単位を指定する場合と%をつけて相対的に決めることができます。
そのほかの要素は本セクション以降で学びますので、説明は割愛しますが、この概念は重要です！
レイアウトについて学習する段階になったらしっかり学ぶようにしましょう。
<h1>, <img>, color, background-color, height, width, font-sizeプロパティ
タグに名前をつける
HTMLの任意のタグに対してのみCSSを適用する方法を学習します。タグへのclassパロパティの指定とCSSファイル内のセレクタの指定とシンプルな内容です。
ちなみにセレクタには、いくつも種類があります。デザインでみた場合、要素名とclassで十分かなと思います。
- 全称セレクタ
- 要素名セレクタ
- classセレクタ ← 今回これ
- idセレクタ
そのほかにも疑似要素、疑似セレクタなどもありますが、もう少し先でいいかなと思います。
<h2>, <ul>, <li>, color
Try it!
各セクションで是非チャレンジしてみてください。CSSについて発見と理解が深まります。
| スライド | Try |
| 文字の色 |
|
| 文字の大きさと種類 |
|
| 高さと幅と背景色 |
|
| タグに名前をつける |
|
「CSSに触れてみよう」では学ばないこと
なぜCSSを作る必要があるのか？について教えていない。
CSSをなぜ使うのか？ということは学習する上で非常に重要です。重要で無いことを学ぶ時間ほど虚しく、効率性の悪いことはないからです。。ということで、メリットを挙げてみたいと思います。
- デザインを切り離すことで、デザインチームに引き渡すことができます。得意な人に得意なことを！
- デザインに一貫性を持たせ、ユーザビリティを維持、向上させることができる。
- デザインのためのタグを排除することで、SEO的に有利（不利にならない）ようになる。
他にもおそらくたくさんのメリットがあります。少なくともCSSファイルはHTMLと同等の価値があることは明白です。Webデザインを志すのであればしっかりと学習する必要があります。
参加ランキング
