カテゴリー: 学科 CSS基礎

学科 CSS基礎③

-本日のアジェンダ-

1限目
学科 CSS基礎③
width と height について

2限目
学科 CSS基礎③
border と padding と margin について

3限目
学科 CSS基礎③
ボックスモデルについて

4限目
学科 CSS基礎③
CSSのまとめ

5限目
学科 CSS基礎③
グラフィックツールの復習

本日のテーマ

ボックスモデルについて

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は、ボックスとボックスとの距離
というように、役割を明確にしておきましょう。

参考サイト

ボックスモデルについて

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

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

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

学科 CSS基礎②

-本日のアジェンダ-

1限目
学科 CSS基礎②
CSSの記述【背景】

2限目
学科 CSS基礎②
「body」とそれ以外の画像の適用について

3限目
学科 CSS基礎②
「img」と「background」の違いについて

4限目
学科 CSS基礎②
CSSのまとめ

5限目
学科 CSS基礎②
グラフィックツールの復習

本日のテーマ

画像利用の仕組みを確認しましょう。

セレクタの得点について

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

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

ワンポイントアドバイス

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

参考サイト

「id」と「class」について

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

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

ワンポイントアドバイス

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

参考サイト

コメントアウトについて

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

ワンポイントアドバイス

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

参考サイト

CSSの記述【背景】

backgroundプロパティは、背景に関する指定をまとめて行う際に使用します。 指定の順序は問われません。また、必要のない指定は省略可能です。

サンプルページ（画像）

参考サイト

「img」と「background」の違いについて

コーディングをする時「img」と「background」で画像をどちらとして使用するのかがとても重要になります。「img」はHTMLなので文法の意味を持ち、「 background 」はCSSなので、見た目の話しだけになります。
サイトデザインの重要ポイントになりますので注意しておきましょう。

CSSの記述【文字】

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

ワンポイントアドバイス

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

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

参考サイト

ショートハンドについて

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

ワンポイントアドバイス

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

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。