12月の授業日記

12月
月火水木金土日
　　　1234
567891011
12131415161718
19202122232425
262728293031　
＜　＞

11/28　フォーム

＜form＞〜＜/form＞

formのコントロールはすべてこの中に入れないと動作しない

inputタグ

ほとんどのフォームのコントロールはinputタグのtype属性を変えることで作成できる
typeコントロールの種類
nameデータがどの項目のものか識別する名前
value入力される値。値に入れておくと前もって表示できる
終了タグ不要

テキストフィールド（type="text"）

パスワードフィールド（type="password"）

入力文字をドットで見られなくする

ラジオボタン（type="radio"）

選択肢から択一で選ぶ場合

チェックボックス（type="checkbox"）

選択肢から複数選ぶ場合

送信ボタン（type="submit"）

フォームを送信するボタン

リセットボタン（type="reset"）

フォームの入力をクリアするボタン

きょうのひとこと

12/5　スタイルシート

CSS（スタイルシート）とは

  • HTMLは構造を定義し解釈をブラウザに任せつつ属性等で指定していく
  • 構造と表示を分離し、表示方法を独自に定義させるため追加された言語がCSS

CSSの基本書式

プロパティ：値

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

CSSの記述場所

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

1.インラインスタイルシート

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

＜タグ style="プロパティ：値"＞

対象はタグ内のみ

2.タグから独立して指定する（埋め込みスタイルシート）

  • タグ内だと再出ごとに指定する必要があり属性と変わらない
  • タグより前のヘッダ等に何に対する指定か（セレクタ）を示して指定すればページ内一括で指定できる

セレクタ｛プロパティ：値｝

セレクタをタグにするとタグの見栄えを自分で定義できる

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

  • 対象が出現する前＝＜head＞内
  • 何らかのタグでくくる必要＝＜style＞内
  • どこまでがそのセレクタへの指定かをくくる必要＝｛｝内

3.外部スタイルシート

専用の外部ファイルに記述する
  • ページ内だと同じ指定でもページごとに指定が必要で修正が大変
  • ページから切り離し、拡張子.cssの専用ファイルにまとめて記述する
  • 指定を適用させたいページからリンクさせれば複数のページを一括で指定できる

リンクタグ

外部CSSを適用させたいページからはリンクタグでリンクする

＜link href="外部CSSへのパス" rel="stylesheet"＞

実際のプロパティ

color:値;

文字色

text-align:値;

水平揃え

font-size:値px;

文字サイズ

background-color:値;

背景色

きょうのひとこと

CSSを利用しての編集は簡単にできて良いですね。

12/12　外部スタイルシート

CSSによる背景画像

背景色と同じように背景画像が敷け、リピート方法も様々にコントロールできる

background-image:url(画像へのパス)

背景画像のリピート指定

background-repeat:no-repeat,repeat-x,repeat-y

繰り返さない、横一列、縦一列が指定できる

CSSによる罫線

borderプロパティで様々な個所に様々な形式で罫線をつけられる

border:形状 太さ 色

一つのプロパティに複数の値をつける場合半角スペースで区切る

きょうのひとこと

HPの装飾がさらに楽しめるようになりました。

12/19　クラス/IDセレクタ

borderの単独指定

4辺の一部だけに罫線を指定することもできる

border-top,bottom,left,right

クラスセレクタ

同じタグの中で他と違ったスタイル指定が可能

＜タグ class="クラス名"＞再出する場合

タグに名前を付けて識別し

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

付けた名前に.を加えCSSのセレクタにして独自の指定が行える

既存タグで示せない部分への指定

HTMLタグは最低限のものしか用意されていない

特定の意味・表示効果を持たないタグ＜div＜span＞＞

既存のタグで示せない任意のエリアを括り、class等で命名してスタイル指定することができる

＜span＞〜＜/span＞

行内の一部など改行しない場合

＜div＞〜＜/div＞

ブロックなど改行を伴う場合

きょうのひとこと

spanとdivを間違えないようにします。