tamago324/my_code_login.html

## my_code_login.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Twitterにログイン</title>
  </head>
  <body>
    <!-- header要素の使用 -->
    <!-- header>a*2+a>span -->
    <header>
      <a href="#">ホーム</a>
      <a href="#">Twitterについて</a>
      <!-- ここは最初、セレクトボックスかと思ったけど、違ったJavaScriptで表示してるのかも？ -->
      <a href="#"><span>言語:</span> 日本語</a>
    </header>

    <!-- div>h1+form>input:t+input:p+input:s+input:c+label+a -->
    <div>
      <h1>Twitterにログイン</h1>
      <form action="">
        <input type="text" placeholder="電話番号/メールアドレス/ユーザー名">
        <input id="" type="password" name="" placeholder="パスワード">
        <input type="submit" value="ログイン">
        <input id="pass-save" type="checkbox" name="">
        <label for="pass-save">保存する・</label>
        <!-- これ入れるかどうかは微妙かなって思う -->
        <a href="">パスワードを忘れた場合はこちら</a>
      </form>
    </div>
  </body>
</html>

## my_code_login_ver2.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Twitterにログイン</title>
  </head>
  <body>
    <header>
      <!-- ナビゲーションでは ul li を使う -->
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">Twitterについて</a></li>
      </ul>
      <div>
        <ul>
          <!-- smallタグで文字を小さくする -->
          <li><a href="#"><small>言語:</small> 日本語</a></li>
        </ul>
      </div>
    </header>

    <div>
      <h1>Twitterにログイン</h1>
      <form action="">
        <!-- fieldsetとlegendを使う -->
        <fieldset>
          <legend>ログイン</legend>
          <div>
            <input type="text" placeholder="電話番号/メールアドレス/ユーザー名">
          </div>
          <div>
            <input id="" type="password" name="" placeholder="パスワード">
          </div>
        </fieldset>
        <div>
          <!-- inputのsubmitではなく、buttonのsubmitを使う -->
          <button type="submit">ログイン</button>
          <div>
            <label>
              <input id="" type="checkbox" name=""> 保存する
              <span>·</span>
              <a href="">パスワードを忘れた場合はこちら</a>
            </label>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

## origin_login.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Twitterにログイン</title>
</head>
<body class="three-col logged-out asian ja" data-fouc-class-names="swift-loading no-nav-banners" dir="ltr">
  <div class="global-nav global-nav--newLoggedOut" data-section-term="top_nav">
    <div class="global-nav-inner">
      <div class="container">
        <ul class="nav js-global-actions" role="navigation" id="global-actions">
          <li id="global-nav-home" class="home" data-global-action="home">
            <a class="js-nav js-tooltip js-dynamic-tooltip" data-placement="bottom" href="/" data-component-context="home_nav" data-nav="home">
              <span class="Icon Icon--bird Icon--large"></span>
              <span class="text" aria-hidden="true">ホーム</span>
            </a>
          </li>
          <li id="global-nav-about" class="about" data-global-action="about">
            <a class="js-tooltip js-dynamic-tooltip" data-placement="bottom" href="/about" target="_blank" data-component-context="about_nav" data-nav="about" rel="noopener">
              <span class="text">Twitterについて</span>
            </a>
          </li>
        </ul>
        <div class="pull-right nav-extras">
          <ul class="nav secondary-nav language-dropdown">
            <li class="dropdown js-language-dropdown">
              <a href="#supported_languages" class="dropdown-toggle js-dropdown-toggle">
                <small>言語:</small> <span class="js-current-language">日本語</span> <b class="caret"></b>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="page-outer">
    <div id="page-container" class="AppContent wrapper wrapper-login">

      <div class="page-canvas">

        <div class="signin-wrapper" data-login-message="">
          <h1>Twitterにログイン</h1>
          <form action="https://twitter.com/sessions" class="t1-form clearfix signin js-signin" method="post">
            <fieldset>

              <legend class="visuallyhidden">ログイン</legend>

              <div class="clearfix field">
                <input
                class="js-username-field email-input js-initial-focus"
                type="text"
                name="session[username_or_email]"
                autocomplete="on" value=""
                placeholder="電話番号/メールアドレス/ユーザー名"
                />
            </div>
            <div class="clearfix field">
              <input class="js-password-field" type="password" name="session[password]" placeholder="パスワード">
            </div>

          </fieldset>
          <div class="clearfix">

            <button type="submit" class="submit EdgeButton EdgeButton--primary EdgeButtom--medium">ログイン</button>

            <div class="subchck">
              <label class="t1-label remember">
                <input type="checkbox" value="1" name="remember_me">
                保存する
                <span class="separator">·</span>
                <a class="forgot" href="/account/begin_password_reset" rel="noopener">パスワードを忘れた場合はこちら</a>
              </label>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Twitterにログイン</title>
	</head>
	<body>
	<!-- header要素の使用 -->
	<!-- header>a*2+a>span -->
	<header>
	<a href="#">ホーム</a>
	<a href="#">Twitterについて</a>
	<!-- ここは最初、セレクトボックスかと思ったけど、違ったJavaScriptで表示してるのかも？ -->
	<a href="#"><span>言語:</span> 日本語</a>
	</header>

	<!-- div>h1+form>input:t+input:p+input:s+input:c+label+a -->
	<div>
	<h1>Twitterにログイン</h1>
	<form action="">
	<input type="text" placeholder="電話番号/メールアドレス/ユーザー名">
	<input id="" type="password" name="" placeholder="パスワード">
	<input type="submit" value="ログイン">
	<input id="pass-save" type="checkbox" name="">
	<label for="pass-save">保存する・</label>
	<!-- これ入れるかどうかは微妙かなって思う -->
	<a href="">パスワードを忘れた場合はこちら</a>
	</form>
	</div>
	</body>
	</html>