TIL

Today I Learned. 知ったこと、学んだことを書いていく

Twitterのログインページを書いてみた - HTML

HTML フロントエンド学習

以下の記事を見て、「すでにあるページを作ることで学べる」みたいなことが書いてあったから、やってみた

2018年の最先端フロントエンドエンジニアになろう - Qiita

Twitterのログインページを書いてみることにした(HTMLのみ、CSSはまだ書いていない)
書いたソースはGistにおいた
Twitterのログインページを書いてみた - Gist

実際のソースと自分で書いたソースを比較して気づいた点

構造を重点的に見ること！！

  1. インデントはスペース2つで書いてある
  2. divが多い！！
  3. 10行目のclass名がconteinerだった(containerは結構使われるのかな？)
  4. 上のヘッダーにはul liが使われていた。(ナビゲーションだもんね...)
  5. 言語: 日本語は右寄せにするため(?)に、divで囲まれている
  6. smallタグで文字を小さくしている
  7. fieldsetタグとlegendタグが使われていた
  8. ユーザー名とパスワードそれぞれがdivで囲まれている
  9. ログインボタンがinputタグではなく、buttonタグ
  10. labelでcheckboxを囲んでリンクさせている

改良する！

構造に関連する気づいた点を自分が書いたソースに反映する

1. インデントをスペース2つにする

最初はインデントをスペース4つにしていたが、スペース2つになるようにした
Vimで書いているため、ファイルごとにインデントを変えるようにした

.vimrcに以下の記述を追加

" -------------------------
" ファイルタイプによってインデントの深さを変える
" -------------------------
if has("autocmd")
  " https://qiita.com/ymiyamae/items/06d0f5ce9c55e7369e1f
  "ファイルタイプの検索を有効にする
  filetype plugin on
  "ファイルタイプに合わせたインデントを利用
  filetype indent on
  " html
  autocmd FileType html setlocal sw=2 sts=2 ts=2 et
endif

[Vim] 拡張子ごとにインデントを変更する方法 ~ 0から始めるvim編 ~ - Qiita を参考にした

また、自動インデントは=で行える
すべて、インデントを整える場合、gg=Gでできる

4.ナビゲーションにはulとliを使う

ヘッダーなどのナビゲーションにはulとli使うと良さそう
順序のない同じようなものをまとめるときにはulを使うといい

<ul>
  <li><a href="#">ホーム</a></li>
  <li><a href="#">Twitterについて</a></li>
</ul>

6.文字を小さくするためのsmallタグ

文字を小さくするときに使えるsmallタグというものがあるらしい
HTML5では注釈や細目(?)に使うらしい

【疑問】ここ(言語:)にsmallタグは微妙じゃない？？？

small－HTML5タグリファレンス

<small>言語:</small>

7.fieldsetタグとlegendタグ

HTML5で登場したタグ
fieldsetはフォームをまとめるために使う
legendはそのまとまりのタイトル

タグについてはここに書いた

<fieldset>
  <legend>ログイン</legend>
  ...
</fieldset>

8.ユーザー名とパスワードそれぞれがdivで囲まれている

縦に並べるためかな？
構造的に考えると、、、わからんわ、、、

<div>
  <input type="text" placeholder="電話番号/メールアドレス/ユーザー名">
</div>
<div>
  <input id="" type="password" name="" placeholder="パスワード">
</div>

9.ログインボタンがinputタグではなく、buttonタグ

inputだと思ってたよ！！！なんでbuttonなの！！！！！
ぐぐってみたら、こちらのページに書いてあった
たぶん「button使えば、valueを好きなように使えるよ」って感じ？
ここではvalueは使ってないけど、buttonを使う癖をつけておこう！！

<button type="submit">ログイン</button>

10.labelでcheckboxを囲んでリンクさせている

labelでcheckboxを囲むと、テキストをクリックするとチェックが入るようになる

【疑問】aタグもlabelに入れてるのはなんでなの！？よくわかんない...

<label>
  <input id="" type="checkbox" name=""> 保存する
  <span>·</span>
  <a href="">パスワードを忘れた場合はこちら</a>
</label>

まとめ

全然違くて、少しショックだった。でも、初めて知ったこともあったからよかった！！あと、一回、学んだことも覚えていなくて、実際に書かないと身につかないんだなと思った。なんでこう書くんだろうって思うところがいつくかあって、いつかは解明したい。初めて実際のWebページを真似をしてみたけど、結構面白かった！！！

参考文献