7月の授業日記

7月
      1
2345678
9101112131415
16171819202122
23242526272829
3031
 >

7/3 CSS1

CSS(スタイルシート)とは

  • htmlでは定義した構造に見合った見栄えをブラウザが解釈し表示されていたが自由度が低い
  • 構造と表示を分離し、表示方法を独自に定義させるために追加された言語がスタイルシート

CSSの基本書式

プロパティ;値

さまざまな表示に対する設定(プロパティ)を指定できる

複数のプロパティを指定する場合

ひとつのプロパティの終わりにセミコロン(:)を入れる

プロパティ:値:プロパティ:値を繰り返す


CSSをHTMLのなかに記述する方法

CSSはHTMLとは記述方法が違うのでうまくHTMLの中に取り込む必要がある

1.タグの中に直接記述する

style属性の属性値として記述することでそのタグ内をスタイル指定できる

<タグ style="プロパティ:値">

2.タグから独立して指定する場合

  • タグの中だと同じ指定でも何度も記述する必要がある
  • 同一タグに同一指定したい場合など、タグの外に出すほうが自由度が高い
  • その場合指定と対象が異なるので対象をセレクタとして識別する

セレクタ{プロパティ:値:}

タグの再定義

セレクタにタグを用いればタグの表示効果を自分の好みに変える

セレクタを使用する場合の記述場所

  • 指定対象(のタグ)が登場する前でなければならないので<head>内に
  • 何らかのタグの中に入れる必要があるので<style>タグで入れる
  • タグが解釈できないブラウザ用にコメントタグで活る

きょうのひとこと

タグの種類がたくさんある。いままでで一番ややこしかった。

7/10 CSS2

プロパティ(単語)

様々な表示効果指定のためのプロパティがある

スタイルの記述場所(文法)

記述場所指定が適用される範囲
タグ内指定したタグ内
ページ内ページ内すべて
ページの外(リンクを貼る)リンクが張られているページすべて

外部スタイルシート

外部にスタイルを記述した書類を作りリンクを貼ればリンクされているページの指定を一括で変えることができる。
1.外部スタイルシートファイル
  • HTMLとは独立してスタイルシートだけを記述する専用ファイル
  • HTMLではないのでタグは必要なく直接CSSを記述できる
  • 拡張子=css
2.外部スタイルシートの指定を既存ページに適応させる
ヘッダ内に<link>タグでスタイルシートファイルでのパスを記述する。

<link rel="stylesheet" type="text/css" href="スタイルシート">

クラスセレクタ

タグとは別に名前をつけて識別し、スタイル指定を行うことが出来る

タグ.クラス名{プロパティ:値}

.クラス名{プロパティ:値}

  • タグの中の一部分だけ別扱い、あるいはタグと関係なくスタイル指定だけ行いたい場合、エリアに識別する名前をつけて指定することが出来る場合
  • 名前はタグに暮らす属性をつけ英数半角で定義できる
  • 指定したい部分にタグがない場合、class属性をつけるために表示効果のない<DIV>(改行のみ)、<span>(行内の一部分を指定する場合)タグを用いる
  • CSS側でクラスにプロパティを指定する場合つけたクラス名の前に(ドット)つける

今日の一言

ちゃんと入力してるつもりでも表示できていないのが多かった。テストが心配!