| 12月 |
|---|
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
| | | | 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 | |
| ＜ | | ＞ |
|
＜form＞〜＜/form＞
formのコントロールはすべてこの中に入れないと動作しない。
inputタグ
ほとんどのフォームのコントロールはinputタグのtype属性を変えることで作できる
| type | コントロールの種類 |
| name | データがどの項目のものか識別する名前 |
| value | 入力される値。値に入れていおくと前もって表示できる |
終了タグ不要
テキストフィールド(type="text")
パスワードフィールド(type="password")
入力文字をドットで見られなくする
ラジオボタン(type="rdio")
選択肢から択一で選ぶ場合
チェックボックス(type="checkbox")
選択肢から複数選ぶ場合
送信ボタン(type="submit")
フォームを送信するボタン
リセットボタン(type="reset")
フォームの入力をクリアするボタン
今日の一言
12/27 スタイルシート
CSS(スタイルシート)とは
- htmlは構造を定義し、解釈をブラウザに任せつつ属性でしていた
- 構造と表示を分離し、表示方法を独自に定義させるため追加された言語がCSS
CSSの基本書式
プロパティ：値
様々な表示に関する設定（プロパティ）を設定できる
CSSの記述場所
CSSはhtmlと記述の方法が違うのでうまくHTML内に取り込む必要がある
タグのstyle属性の属性値として指定することでそのタグ内を指定できる
＜タグ style="プロパティ：値"＞
対象はタグ内のみ
2.タグから独立して指定する（埋め込みスタイルシート）
- タグ内だと再出毎に指定する必要があり属性と変わらない
- タグより前のヘッダ等に何に対する指定か(セレクタ)を示して指定すればページ内で一括で指定できる
セレクタ(プロパティ：値)
セレクタをタグにするとタグの見栄えを自分で定義できる
セレクタを使用する際の記述場所
- 対象が出現する前＝＜head＞内
- なんらかのタグで括る必要＝＜style＞内
- どこまでがそのセレクタへの指定かを括る必要＝{}内
3.外部スタイルシート
専用の外部ファイルに記述する
- ページ内だと同じ指定でもページ毎に指定が必要で修正が大変
- ページから切り離し、拡張子。ｃｓｓの専用ファイルにまとめて記述する
- 指定を適用させたいページからリンクをさせれば複数のページを一括で指定できる
リンクタグ
実際のプロパティ
外部cssを適用させたいページからはリンクタグでリンクする
＜link href="外部cssへのパス" rel="stylesheet"＞
color:値
文字色
text-align:値
水平揃え
font-size:値
文字サイズ
background-color:値
背景色
今日のひとこと
文字色を指定できるようになって文章がかなり見やすくなった。
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＞
ブロックなど改行を伴う場合
今日の一言
同じタグの中で細かい指定ができてよりわかりやすくなった。
|
