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を記述できる
  • 拡張子=.ss
2. 外部スタイルシートの指定を既存ページに適用させる
ヘッタ内に<link>タグでスタイルシートへのパスを記述する

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

クラスセレクタ

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

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

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

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

今日のひとこと

難しいんです、、、