日: 2023年2月22日

2023年2月22日 コメントする

2月22日（水）－CSS基礎②CSSの基本構造/ボックスモデル/セレクタ記載方法とセレクタ得点

CSSとは？

【要参考】
①　CSS でデザインを始める前に | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※L3以下が分かりやすい
②　CSS で文字飾りを付けましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※L5以下が分かりやすい

Cascading Style Sheetsは、HTMLやXMLの要素をどのように修飾するかを指示する仕様の一つで、World Wide Web Consortium がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。

【ワンポイントアドバイス】
CSSとHTMLの両方を駆使してWebサイトを構築していきますが、HTMLとCSSは開発元が異なります。単純に密接な関係なのに記述ルールと役割が異なります。
まずはしっかりとルールの違いに気を付けて学んでいきましょう。

CSSの記述場所について

CSSの記述場所は、以下の種類があります。保守性も考慮して適切な場所に記述してください。

パターン①「 外部ファイル 」

1つめの方法は、外部ファイルのCSSから読み込む方法です。つまり、CSSファイルを別に作り、HTMLファイルから読み込むということです。この作成したCSSファイルは外部スタイルシート（外部CSS）と呼ばれます。ウェブサイトを作る時にはこれが最も一般的な方法です。

パターン②「 styleタグ」

2つめの方法は、HTMLファイルのheadタグ内に<style>〜</style>を書き、その中にCSSを書く方法です。

パターン③「 style属性を使う 」

3つめは、HTMLのタグにstyle属性を書く方法です。文字にサクッと色をつけたり、線を引いたりするときには便利ですが、タグにいちいち書き込む必要がありやや手間がかかります。また、後からまとめてデザインを変更することもできません。

（先生より）この方法はあまりおすすめではないが、例えば人の作ったサイトを修正する場合など、①の方法で直すと全体が変わりどこが変わったかがわからなくなる場合があるので、1部分のみピンポイントに直したい場合などに有用とのこと。

【ワンポイントアドバイス】
基本的には外部ファイルで作成しましょう。また外部ファイルは1ファイルにまとめるのがベストですが、管理や運営方法を考えて使い分けましょう。

【参考サイト】

CSSの記述ルールの基本として

セレクタ｛
　　プロパティ: 値;
｝

セレクタ｛　プロパティ: 値;｝
　　↓　　　　　　↓　　　↓
HTMLのどこの　この部分を　どうする

※この「 セレクタ」「 プロパティ 」「値」の構成をしっかり意識して使い方を学んでいきましょう。

例：p { color: red; }
　↓
　　pタグの　文字色を　赤色に

CSSのブラウザ対応について

HTMLやCSSを学ぶ際に最も気を付けなければならない事は、ブラウザに対応しているかどうかです。ここまでご紹介したHTMLのタグはほぼどのブラウザにも対応したタグです。逆に考えてもらうと、HTMLのタグもCSSのタグもここで学ぶ以上のタグが存在します。

【ワンポイントアドバイス】
検索などで独自に調べたタグは要注意です！非推奨やブラウザでは非対応ブラウザが存在したり、PCでは使えるがスマートフォンではNGのタグがあります。特にCSSは、使えないタグは見た目の実装を不可能にします。まずは、広く使われている、どのブラウザでも対応している基本のタグをしっかりと把握していきましょう。

【参考サイト】

CSSの記述【文字】

まずは文字の装飾や大きさ位置などを指定するCSSから覚えていきましょう。
文字に関するCSSの特徴は、正しく記述したら必ず見た目が変わります。
もし、変わらない時はHTMLの記述が誤っているなど他に原因があるかもしれません。注意して記述の練習をしていきましょう。

【ワンポイントアドバイス】
デザインしたサイトの文字情報はSEO対策として出来る限り画像文字にはぜずテキスト文字にするイメージをしっかり持って「どんな事ができるのか？」を確認しておきましょう。

サンプルページ（CSSの記述【文字】）

【参考サイト】

ショートハンドについて

CSSのプロパティにはまとめて記述するための「ショートハンド」という書き方が用意されています。

【ワンポイントアドバイス】
CSSの記述はショートハンドという短縮して記述できる書き方があります。お仕事で誰かが作成したサイトを編集する時に、両方を理解しておく必要がありますので、しっかりと覚えておきましょう。

【参考サイト】

ボックスモデルについて

英語から翻訳-Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。

ボックスモデルとは HTMLのすべての要素は高さ、幅を持った四角形の中心にコンテンツ（文章、画像等）が入っています。 … ボックスモデルは、コンテンツを中心に4つの要素（コンテンツ, border, magrin, padding)で構成されています。

【参考サイト】

width と height について

単純にボックスに幅と高さを持たせるタグになります。ただし、幅と高さが持てるのは、ブロックレベル要素になります。
また、Webサイトの性質上細かなルールがいくつも存在します。
まずはしっかりとボックスモデルの基礎となるという事を意識しておきましょう。

サンプルページ（CSSの記述【配置】）

【ワンポイントアドバイス】
幅（width）については、ある程度指定した数値が反映されますが、高さ（height）の指定については、複雑なルールがあります。高さ（height）は、基本ニュートラルに設定し、やむを得ない場合のみ絶対値を指定すると覚えておくと、よいかもしれません。

【参考サイト】

border と padding と margin について

要素の中身（内容）があり、そのまわりの余白がpaddingです。 そのまわりにはborder（線）があり、それより外側の余白がmarginです。 … この図のようなCSSの余白の考え方はボックスモデルと呼ばれます。 なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。

サンプルページ（CSSの記述【ボックス】）

【ワンポイントアドバイス】
CSSで最も理解度が求められるタグが「border」「padding」「margin」です。CSSの理解の最重要ポイントになりますので、しっかりと理解と確認をしておきましょう。また、役割を分けるのも制作のコツです。
borderは、罫線の装飾
paddingは、内側の余白
marginは、ボックスとボックスとの距離
というように、役割を明確にしておきましょう。

【参考サイト】

セレクタについて

セレクタの記載方法について

CSSでスタイルを適用する箇所を指定するセレクタは、色々な記述方法があります。HTMLの特定のタグを指定する場合でも厳密に書くこともできますし、あいまいに書くこともできます。HTMLの記述状況によって適切なセレクタの書き方ができるようになりましょう。

【参考サイト】

セレクタの得点について

はじめに. セレクタには優先順位があり、点数計算して高得点のものが適用されます。
同点の場合は後にあるもの、更にStyle属性、Style要素、外部ファイルなど、CSSで特につまづく優先順位のルールを正しく理解していきましょう。

セレクタの記述方法によって点数計算が実施され高い点数を獲得したセレクタに設定されているスタイルが有効になります。同一のプロパティが複数記述されている場合は、点数計算の結果が同じ場合は、後ろに書いてあるプロパティが有効になりますが、前に書いてある方が点数が高い場合は、前に記述したプロパティが有効になりますので注意してください。

サンプルページ（セレクタの得点）

【ワンポイントアドバイス】
セレクタは計算ルールも考えて管理しやすいようにセレクタだけを見て何処をCSSでどの要素をコントロールしているかが解りやすくなるように意識して書くと良いでしょう。

【参考サイト】

「id」と「class」について

HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id​属性を使う方法があります。idはそのページ内で1回のみ、classは複数回使用しても大丈夫です。また、idとclassの値は自由につけることが出来ますが、命名規則をよく考えて指定しましょう。

id名、class名の付け方には法則があり、半角英数、-（ハイフン）、_（アンダースコア）の組み合わせで名前をつけます。 どんな名称でも使用できますが、どのような設定なのか、内容が判別しやすい名前にするのがよいでしょう。 大文字と小文字どちらでも利用できますが、基本は小文字で統一します。

【ワンポイントアドバイス】
企業に提出するポートフォリオサイトなどにWebサイトを提出した場合、特に見られているのが、「id」と「class」です。命名規則とセレクタの管理方法が雑であったり計画性が無かったりするのはマイナス要因しかありませんので注意しましょう。

【参考サイト】

コメントアウトについて

コメントアウトとは … プログラミングにおける「コメント」とは、プログラムのソースコード上で「実行させない部分」のことです。

HTML文章に記述　：<!– 〇〇〇〇〇 –>
CSSファイルに記述：/* 〇〇〇〇〇 */

【ワンポイントアドバイス】
HTMLのコメントアウトは、表示させない。
CSSのコメントアウトは、プログラムを実行させない。
言語の特徴で意味が異なるので注意しましょう。

【参考サイト】

幅・高さの単位について

CSSで幅や高さを指定する場合の単位は、複数の指定方法があります。思い通りのレイアウトデザインを構築するためには、適切な幅や高さの記述が必要です。それぞれの指定方法の特徴を理解して適切な単位を使用できるようになりましょう。

【参考サイト】

メモ

◆フォントサイズは、横幅は指定できず、高さのみを指す
　通常指定なし（初期値）のフォントサイズは16pxで、例えば、h1 { font-size: 150%; }という指定の場合、h1タグのフォントサイズは16pxの150％＝24pxに　という指定になる

◆検証ツールの「計算済み」タブで、％表示でなく実際のサイズ表示で見れる

◆フルサイズのスクリーンショットの撮り方
検証→（デバイス画面切り替え後のみ？）右上︙→「フルサイズのスクリーンショットをキャプチャ」でDLフォルダにPNG保存される