本日の学習範囲
模写コーディング
【無料練習素材】あなたはできる？模写コーディング腕試し！｜東京フリーランス｜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を確認しつつ、ググって作成。
ググって使ってみたタグ・プロパティがいくつかあった。