本日の学習範囲

模写コーディング

【無料練習素材】あなたはできる？模写コーディング腕試し！｜東京フリーランス｜note
https://note.com/tokyofreelance/n/n4baf7dd10306
（学習時間：5時間）

学習メモ

デベロッパーツールを開くショートカット

[command]+[option]+[I]

inputタグ

<input type="○○">
入力コントロールを表示する

type属性

<input type="○○">
input要素におけるtype属性は、入力コントロールの種類を指定する
<input type="text">
の場合、1行テキストの入力フォームとなる
<input type="submit">
の場合、送信ボタンとなる

placeholder属性

<input placeholder="文字">
初期表示内容を指定する

value属性

<input value="○○">
入力コントロールの初期値を指定する
<input type="submit" value="○○">
の場合、value属性の値は表示されるボタン名になる

outlineプロパティ

{outline: ○○;} ボックスの輪郭線をまとめて指定する {outline: 0;}`
の場合、ブラウザの既定のフォーカス表示は削除される

box-shadowプロパティ

{box-shadow: 水平方向の距離垂直方向の距離ぼかし距離広がり距離影の色;}
ボックスに影をつける
水平方向の距離…正の値の場合は右へ、負の値の場合は左へ影が移動する
垂直方向の距離…正の値の場合は下へ、負の値の場合は上へ影が移動する
ぼかし距離…正の値のみ設定可能、値が大きいほど影の端のぼかしが強くなり、値が0の場合は端がくっきりとした影となる
広がり距離…正の値の場合は影の形状が全方向に拡大、負の値の場合は縮小する

その他

note書いてあった目標時間の4時間で作成できたのがこちら↓

フォントの大きさや間隔調整はもう少し必要。
ドットインストールでまだフォームの作成方法などは勉強していなかったため、
Progateを確認しつつ、ググって作成。
ググって使ってみたタグ・プロパティがいくつかあった。