12月の授業日記

11/28　フォーム

＜form＞～＜/form＞

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

inputタグ

ほとんどどのフォームのコントロールはinputタグのtype属性を変えることで作成できる

type	コントロールの種類
name	データがどの項目のものか識別する名前
value	入力される値。値に入れておくと前もって表示できる

終了タグ不要

テキストフィールド(type="text")

パスワードフィールド(type="password")

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

ラジオボタン(type="radio")

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

チェックボックス(type="checkbox")

選択肢から複数選ぶ場合

送信ボタン(type="submit")

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

リセットボタン(type="reset")

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

きょうのひとこと

12/7　スタイルシート

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

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

CSSの基本書式

プロパティ：値

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

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

一つのプロパティの終わりにセミコロン；を入れる

プロパティ：値；プロパティ：値

CSSの記述場所

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

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

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

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

対象はタグ内のみ

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

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

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

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

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

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

3.外部スタイルシート

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

リンクタグ

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

＜link href="スタイルシートへのパス" rel="styleseet"＞

実際のプロパティ

color:値

文字色

text-align

水平揃え

background-color

body以外の様々な要素にも背景色がつけられる

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

CSSによる背景画像

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

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

背景画像のリピート指定

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

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

CSSによる罫線

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

border:形状太さ色

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

きょうのひとこと

感想です

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

borderの単独指定

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

border-top,bottom,left,right

クラスセレクタ

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

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

タグに名前をつけて識別し、

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

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

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

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

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

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

＜span＞～＜/span＞

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

＜div＞～＜/div＞

ブロックなど改行を伴う部分を指定

＜section＞～＜/section＞

ブロックが章を表す場合の区切り

きょうのひとこと

divで括ると領域がわかりやすくなります