文書を区切るためのタグ htmlではスタイル等の編集を整理して編集を行うために以下のようなタグを定義し、スタイルの適用範囲を設定する.
- section: その他の意味のある塊
- aside: メインじゃないもの 補足とか広告
- article: ニュース記事、ブログエントリーなどの独立してるコンテンツ ほかのサイトにそのまま乗っけても違和感が無い部分
- p: 段落
- hr: 水平線
- pre: 改行・インデント保持
- blockquote: 引用
- div: cssを使ったスタイリング
リストの種類について- 箇条書き・順番リスト
- ul: unordered list (箇条書きリスト)
- ol: ordered list (順番リスト)
- li: 箇条書き・順番リストの中身タグ(リストタグの中に書くことでリストの要素を表わす)
- 定義リスト
- dl: 単語を定義する場合のリスト
- dt: 定義する単語
- dd: 単語の意味
strong: 太字太字、改行、範囲処理br: 改行span: ある範囲のスタイリングを行う
グローバル属性 CSS等でスタイルを適用する際に目印としてタグに付ける属性
- id:ひとつしかない要素
- class:ページ内に複数ある要素 space区切りで複数指定できる
- style:スタイルを直接指定
リンク- a: リンクを貼る
- href: リンク先のurlを指定
- target: 新しいウィンドウ、新しいタブなどで開く場合のオプション
- アンカーをつける場合は id="name" に対して href="#name"を指定する.
画像の表示- img: 画像を表示させる
- src(source): 画像のアドレスを指定
- width: 画像の横幅を指定
- height: 画像の縦幅を指定
- alt: 画像の代替文章
テーブル(表)を作る| タグ名 | 意味 |
|---|
| table | tableの範囲 | | thead | テーブルの見出しのまとまり | | tbody | テーブルの内容 | | th | table header テーブルの見出し | | tr | table row 列 | | td | table data 行 | | colspan属性: 複数セルをくっつけて表示 |
formを作る- form: フォームを作る
- action: どこに送る？
- method: get/post
- 送信フォーム: inputタグの属性
- typeタグの属性
- text: テキスト入力フォーム
- submit: 送信ボタン
- password:パスワード入力フォーム
- hidden: 入力する値が一定の場合に使用、見えないけど送信される
- formタグの属性
- name: idみたいなやつ
- size: 入力欄の幅
- maxlength: 入力文字数
- value:
- type="submit"のとき、ボタンに表示されるテキスト
- type="text"のとき初期値
- placeholder: 入力初期値にうっすら入ってるアレ
- 複数行の入力とボタン
- textareaタグ: 複数行の入力
- button: inputタグよりもリッチに装飾ができる
チェックボックス・ラジオボックス・ラベル- input type="checkbox": チェックボックスを選択
- input type="radio": ラジオボタン(複数選択させたくない場合)
- labelタグ: 選択肢を押すだけでチェックが入る idを指定するか、ボタンごとタブで括る
セレクトボックス- selectタグ：セレクトボックスを作る(multipleをつけると複数選択できる)
- option:セレクトボックスの選択肢(selectedをつけると初期値になる)
- input type="email": メールアドレスフォーム
- input type="number":数字入力フォーム
- input type="date":日付入力フォーム, カレンダーを開ける
- input ~ required: 必須項目 (formタグにnovalidateをつけると無効化できる)
参考ページ- JavaScriptについて
- さくら鯖
- atmarkit_news
| 