Html CSS 登録フローを作成 #11

今回は登録フローを作っていく感じで勉強ノートまとめていきます。いろいろ時間なくて連続でやってることもあり地味にくたくたです。
頑張ります。

##html構造を作成

###h1要素の作成
ここは、h1タグを作成しページのタイトル等になる見出し用の夜具を使用。

###ul要素の作成
ul要素には`<ul> </ul>`を使用。

###li要素の作成 1
番号の入ったli要素を作成する。liタグはリスト項目を表現するために使用する。また、ulタグの中に使用する。

###li要素の作成 2
liタグはリスト項目を表現し一つの項目が一つのliタグに対応する。

```html:index.html;
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTML</title>
  </head>
  <body>
  
    <h1>Registaration Form</h1>
    <ul>
      <li>1</li>
      <li>Register</li>
      <li>2</li>
      <li>Confirm</li>
      <li>3</li>
      <li>Complete!</li>
    </ul>
  </body>
</html>
```

##タイトルの装飾！

###準備
これは今まで同様に行う。
`h1 {  }`

###文字の色を変更！
colorを使って変更する
`h1 { color: #333; }`

###フォントの種類を変更！
font-familyを使ってフォントの種類を調整する
`h1 { font-family: Arial; }`

###テキストの中央配置
text-align属性を使ってcenterを使用する。
`h1 { text-align: center;}`

##ul要素の装飾！

###準備！
先ほどと同様に行う。
`ul {  }`

###背景色を変更！
background-color属性を使用して背景色を変更！
`ul { background-color : #EEE; }`

###枠線！
borderを使用して指定した要素に対して枠線をつける。
`ul { border: 1px solid #CCC; }`

###隙間
paddingを使用して隙間を調整する。
`ul { padding: 20px; }`

###横幅
widthを使って指定された要素の横幅を変更！
`ul { width: 600px;}`

###リスト項目の点を削除
line-style-typeを使用してリスト項目の点を消す！
`ul { list-style-type: none; }`

###テキストを中央配置
先と同様にtext-alignとcenterを使用
`ul { text-align : center; }`

###余白
他の要素との間隔をmarginを使って調整！
`ul { margin: 0 auto; }`

##liタグの装飾！

###準備
先ほどと同様にまずは準備します。
`li {  }`

###inline-blockの使用！
`display`属性を`inline-block`に指定することで横並びにすることができる。
`li { display: inline-block; }`

###余白
marginを使って今回も余白を調整！
`li { margin: 0 auto; }`

###高さ
heightを使って要素の高さを調整！
`li { height:40px; }`

###文字の1行の高さ
line-heightを使用して文字を縦中央に揃える。
line-heightでは文字が一行で占める高さを設定する。
`li { line^height: 40px; }`

###テキストの中央配置
要素内のテキストを横中央に配置するにはtext-alignを使用してcenterを使用する。
`li { text-align: center; }`

###vertical-alignの指定！
vertical-align属性は要素内のテキストや画像などをどこを基準としてそろえるかを決める。
`li { vertical-align: bottom; }`

##奇数番目のli要素の装飾

###準備
奇数番目のliタグの要素を装飾する！
そのためにはnth-childを使用して以下のように表記する。
`li:nth-child(odd){  }`

###文字色
colorを使って色を変更！
`li:nth-child(odd){ color: #666 }`

###フォントの種類を変更！
font-familyを使ってフォントを変更！
`li:nth-child(odd){ font-family: Arial Black; }`

###文字の大きさ！
font-sizeを使って文字の大きさを調整する。
`li:nth-child(odd){ font-size:20px; }`

###横幅
widthを使って横幅を変更！
`li:nth-child(odd){ width:40px; }`

##偶数番目のliタグを装飾！

###準備
ある要素のうち、偶数番目を指定！
`li:nth-child(even){  }`

###右側の線
border-rightを使って右側に線を引く！
`li:nth-child(even){ border-right:10x solid #999; }`

###文字の色
colorを使って文字色を変更！
`li:nth-child(even){ color: #666 }`

###フォントの種類！
font-familyを使用してフォントを調整！
`li:nth-child(even){ font-family: Arial; }`

###文字の大きさ
font-sizeを使用してサイズを変更！
`li:nth-child(even){ font-size: 20px; }`

###右側の余白
margin-rightを使用して右側に余白を作成する。
`li:nth-child(even){ margin-right: 15px; }`

###右側の隙間
padding-rightを使用して右側に隙間を作成！
`li:nth-child(even){ padding-right: 15px }`

###まとめ

```css:main.css;
h1 {
  color: #333;
  font-family: Arial;
  text-align: center;
}

ul {
  background-color: #EEE;
  border: 1px solid #CCC;
  list-style-type: none;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 600px;
}

li {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
  vertical-align: bottom;
}

li:nth-child(odd){
  color: #666;
  font-family: #Arial Black";
  font-size: 20px;
  width: 40px;
}

li:nth-child(even){
  border-right: 1px solid #999;
  color: #666;
  font-family: Arial;
  font-size: 20px;
  margin-right: 15px;
  padding-right: 15px;
}
```

---

今回は一個一個の段落の内容はすごく薄いものになりましたが是非試してみていただけると嬉しいです。今回はいつもと同じところも多かったですが新要素も出たのでしっかり押さえるといいですね
次の記事もぜひ見てくださいね。