Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Twitterのログインページを書いてみた
<!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>
<!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>
<!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>
@tamago324

This comment has been minimized.

Show comment Hide comment
@tamago324

tamago324 Apr 6, 2018

Twitterのログインページを構造に着目して書いてみた!!

Owner

tamago324 commented Apr 6, 2018

Twitterのログインページを構造に着目して書いてみた!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment