要件は非常にシンプルでこんな感じです。
- コンテンツのセンタリング
- マウスホバーで説明表示
- できるだけJavaScriptは使わずCSSで処理
上が何もしていないとき、下が「email」欄にカーソルをホバーさせたときです。
これのソースです。
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sample page</title>
<style>
body {
background: #eee;
}
label {
width: 18em;
text-align: right;
display: block;
}
.maincontainer {
font-size: 16px;
width: 50em;
margin: auto;
background: #aaa;
word-wrap: break-word;
}
.content {
width: 37em;
padding: 1em;
padding-bottom: 2em;
position:relative;
}
.pagesummary {
}
.grid-2 div {
display: inline-block;
}
.block-1, block-2 {
display: inline-block;
float: left;
width: 19em;
}
.withhelp:after {
color: #ff1b7e;
position:absolute;
left: 39em;
width: 10em;
text-align: left;
}
#email:hover:after {
content:"email.email.email.email.email.email.email.email.email.";
}
#account:hover:after {
content:"account.account.account.account.account.";
}
</style>
</head>
<body>
<div class="maincontainer">
<div class="content">
<h1>Sign in</h1>
<div class="pagesummary">
sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.
</div>
<br>
<form>
<label class="withhelp" id="email">email<input type="email" placeholder="hoge@panasonic.com"></label>
<label class="withhelp" id="account">account name<input type="text" placeholder="name for sign in"></label>
<div class="grid-2">
<div class="block-1">
<label>first name<input type="text" placehodler="first name"></label>
</div>
<div class="block-2">
<label>last name<input type="text" placehodler="last name"></label>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
0 件のコメント :
コメントを投稿