12月の授業日記
12/7 スタイルシート
CSS(スタイルシートとは)
- htmlは構造を定義し、解釈をブラウザを任せつつ属性などで指定していた
- 構造と表示を分離し、表示方法を独自に定義させるため追加された言語がCSS
CSSの基本書式
プロパティ:値
様々な表示kに関する設定(プロパティ)を指定できる
CSSの記述場所
CSSはhtmlと記述方法が違うのでうまくHTML内に取り込む必要がある
タグのstyle属性の属性値として指定することでそのタグ内を指定できる
<タグ style=プロパティ:値>
対象はタグ内のみ
2.タグから独立指定する(埋め込みスタイルシート)
- タグ内だと再出毎に指定する必要があり属性と変わらない
- タグより前のベッダ等に何に対する指定するか(セレクタ)を示して指定すればページ内一括で指定できる
セレクタ{プロパティ:値}
セレクタをタグにするとタグの見栄を自分で定義できる
セレクタを使用する際の記述場所
- 対象が出現する前=<head>内
- 何らかのタグで括る必要=<style>内
- どこまでがそのセレクタへの指定が括る必要={}内
3.外部スタイルシート
専用の外部ファイルに記述する
- ページ内だと同じ指定でもページ毎に指定が必要で修正が大変
- ページから切り離し、拡張子.cssの専用ファイルにまとめて記述する
- 指定を適用させたいページからリンクさせれば複数のページを一括で指定できる
リンクタグ
外部CSSを適用させたいページはリングでリンクする
<link href="外部CSSへのパス rel="stylesheet"">
実際のプロパティ
color:値
文字色
text-aligan:値
水平揃え
文字サイズ
background-color
背景色
今日の一言
hhhhh 勉強になりました、良かったです。
12/12 外部スタイルシート
CSSによる背景画像
背景色と同じように背景画像が敷け、リビート方法も様々にコントロールできる
background-image:url(画像へのパス)
背景画像のリピート指定
background-repeat:no-repeat,repeat-x,repeat-y
繰り返さない、横一列、縦一列が指定できる
CSSによる罫線
borderプロパティで様々な個所に様々な形式で罫線をつけられる
border:形状 太さ 色
一つのプロパティに複数の値をつけるの場合半角スペースで区切る
今日の一言
細かいことをかわでも色とか線の太さとか変わっていく、面白かったです。