HTML/CSS 勉強中！その2

　プログラミングを勉強中なので、アウトプットを兼ねて自分なりにまとめます。勉強の記録的な感じです。今回はCSSとHTMLをちょっとだけまとめます。

---

＊勉強して一か月も経ってないので、バリバリの初心者です。間違っていたら、コメントで指摘をお願いしたいです。

---

---

CSSとは

---

　HTMLとは、文章のデザイン（色、大きさなど）を作成するプログラミングです。主にセレクタとプロパティというものを使い、表現します。

body{
    padding : 50px;
}

のように使い、body の個所をセレクタ、padding の個所をプロパティといいます。

　セレクタはHTMLのタグのことなので、<h1>や<p>にデザインを加えたい場合、

h1 {
       padding : 50px;
}

もしくは

p {
       padding : 50px;
}

のように使います。

また、CSSを記述するには、styleタグを用います。なので、実際はこんな感じで書かれます。

<style>
   h1 {
          padding : 50px;
   }
</style>

　また、プロパティの中身は、px, %, #から始まる色, 状態など様々なものが入ります。

---

よく使うやつ

---

文字のプロパティ

---

• font-weight (太字）

• font-size （大きさ）

• font-family （字体）

---

余白のプロパティ

---

• padding （内側の余白）

• margin（外側の余白）

---

枠線のプロパティ

---

• border（枠線）

---

色のプロパティ

---

• background-color（背景色）

• color（文字の色）

---

実際に少し書いてみる

---

　実際に応用すると多分こんな風になります

<style>
   h1 {
          padding : 50px;
          maegin  : 30px;
   }
   p {
          color    :   red;
          font-size: 20px;
   }
</style>

---

HTMLのつづき

---

form タグ

---

　送信ボタンなどを formタグを用いて作ることができます。その際に、よく使われるタグをまとめます。

• label タグ （フォームの名前の位置：タイトルを書きこむため、2つで囲む）

• input タグ　（フォームに書き込むところ：書き込むところなので、タグは1つだけ）

• button タグ（送信ボタン：ボタンの名前を書き込むため、2つで囲む）

 <form>
        <label>こちらから送信してください</label>
        <input>
        <button>送信</button>
 </form>

みたいな雰囲気。属性とかもいっぱいありです。

　長い文章が書けるテキストエリアを用意するには、textareaタグを使用します。

<textarea></textarea>

---

選択式の送信フォーム

---

　select タグとoption タグを使います。ul タグと li タグを使うのと似てる気がします。

 <select>
            <option>東京</option>
            <option>大阪</option>
            <option>名古屋</option>
 </select>

みたいにやると、東京・大阪・名古屋を選択することできます。

---

おわりに

---

　勉強用のノートみたいにまとめてしまった。noteの毎日投稿がそろそろ2ヵ月に行きます。

　最後まで見ていただきありがとうございます！