7月の授業日記

7月
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
  

7/3 CSS1

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

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

CSSの基本書式

プロパティ:値

様々な表示に関する設定(プロパティ)を指定できる

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

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

プロパティ:値;プロパティ:値


CSSをHTMLの中に記述する方法

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

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

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

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

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

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

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

タグの再定義

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

セレクタをしようとする場合の記述場所

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

今日のひとこと

難しかったです

7/10 CSS2

プロパティ(単語)

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

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

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

外部スタイルシート

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

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

クラスセレクタ

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

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

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

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

今日のひとこと

難しかったです