何が起きたらおもしろいかな

文字を書くのが好きなので、「ちょっと困って調べたこと」「楽しかったこと」とかをまとめる場所を作りました。

HTMLとCSSの勉強内容まとめ

勉強したこと

どうも、橙葵です。HTMLとCSSの勉強中です。

ちゃんとサイト作りたいなって思いながら早何年。ちょっとかじったHTMLがめっちゃ変わっててびっくりしました。

いやはや、HTML5ってすごいんですね。

あと、CSSってHTMLのスタイルを決めているんですね。全然別物だと思っていました。

なので今回は、いろいろと勉強したことをまとめてみました。

まだ不十分なところもあるので、随時修正する予定です。

いろいろ試して、他のところで使えたらいいなと思います。

文書の構成関連の主な要素

見出し（h1～h6）

見出しを付ける（h1->h6の順に小さくなる）

h1はHTML文書中で一度しか使えない

段落（p要素）

ひとつの段落であることを表す

段落の途中で改行表示したいときは<br>タグを使用する

ブロック（div要素）、範囲（span要素）

div＝ひとかたまりのブロック／span＝ひとかたまりの範囲、を表す

->id属性やclass属性を付けることが多い

表示関連のおもな要素

ハイパーリンク（a要素）

ハイパーリンク

書式：<a href="URL">リンクを貼る文字列</a>

https://www.pixiv.net/novel/show.php?id=9670552

画像指定（img要素）

表示したい画像ファイルを指定する

書式：<img src="画像データへのパス">

改行指定（br要素）

ブラウザ上での改行表示を指定する

¥n＝Enterキー入力は、ブラウザ上では改行されない

->HTMLファイル内を見やすく加工しても、表示には影響が出ない

水平線指定（hr要素）

水平線を入れられる↓

列挙関連のおもな要素

リスト（ul, ol, li, dt, dt, dd要素）並列順序型リスト

並列順序型リストの例：ul要素で大枠を囲み、その中にli要素を列挙する

アンジェ
プリンセス
ドロシー
ベアトリス
ちせ

順序付きリストの例：ol要素で大枠を囲み、その中にli要素を列挙する

定義型リストの例：dl要素で大枠を囲み、その中にdt要素（項目）およびdd要素（その説明）を列挙する

由良: 長良型軽巡洋艦四番艦
夕張: 夕張型軽巡洋艦一番艦

テーブル（table, thead, tbody, tfoot, tr, th, td要素）

表を作成する→HTML内では表の左上から右上、次の行の左から行の右・・・の順に記述する

名前	属性
佐久間まゆ	Cute
大石泉	Cool

テーブルの例（２）：thead, tbody, tfoot要素を使用する例

艦名	艦種
五月雨	駆逐艦
榛名	戦艦
加賀	正規空母
艦名	艦種

フォーム

フォームの役割

ブラウザでデータを入力できるようにして、そのデータをWebサーバーに送信するために使用されるHTMLの機能

データ送信時、GETメソッドまたはPOSTメソッドが使用される

メソッド	内容・機能
GETメソッド	URLの後ろに入力したデータが追加されるあまり大きなサイズのデータは送信できない用途：検索結果ページ等 HTTP通信のデフォルトのリスエスト処理
POSTメソッド	リクエストのメッセージボディ部分に入力したデータが追加される事実上、送信できるデータサイズに制限はない用途：セキュリティを考慮する場合／大きなデータを送信する場合等、フォーム使用時には多くの場合POSTメソッドが使用される

コントロールの種類

<input type="XXXX" name="ctrl_name">
＜設定例：フォーム機能を作っても、ここでは送る先がないため＞
・テキストボックス
<input type="text" name="fullname">
・ラジオボタン
<input type="radio" name="fruit" value="1">Cute
<input type="radio" name="fruit" value="2">Cool
<input type="radio" name="fruit" value="3">Passion
・チェックボックス
<input type="checkbox" name="apple" value="1">Cute
<input type="checkbox" name="mandarin" value="1">Cool
<input type="checkbox" name="grape" value="1">Passion

input type="XXXX"の"XXXX"に入る属性のおもな例（HTML5の場合）

typeの値	機能
text	一行テキストボックスを作成する（初期値）
password	パスワード入力欄を作成する（入力値が●になる）
checkbox	チェックボックスを作成する
radio	ラジオボタンを作成する
hidden	画面上は表示されない隠しデータを指定する
submit	送信ボタンを作成する
image	画像ボタンを作成する
reset	リセットボタンを作成する
button	汎用ボタンを作成する
email	メールアドレスの入力欄を作成する
date	日付の入力欄を作成する
number	数値の入力欄を作成する

これはどうしてもやりたかった……（選択しても何も起きません）

textarea要素は、複数行のテキストが入力可能な入力欄を表す

（rows属性で縦方向の行数、cols属性で横方向の文字数を指定（文字数は全角文字数とは限らないらしい））

<textarea rows="3" cols="20" name="honbun"></textarea> </select>

form要素

form要素に囲まれた部分の入力データは、ひとまとめにaction属性で指定する先に送信されるフォームから送信されたデータは、サーバーサイドプログラムでなければ処理できない

※action属性に単なるHTMLファイルを指定しても、送信データを処理できない