2008.01.25

ブラウザの中央に簡単にログイン画面を配置するには

ログイン画面の簡単な作成方法です。
背景となる幅300px、高さ200pxの画像を用意しました。

●スタイル

/* ---------------------------------------------------------------- *
コンテンツコンテナの設定
* ---------------------------------------------------------------- */
#second-life {
height: 200px;     ※ボックスの高さ
width: 300px;      ※ボックスの幅
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;  ※ボックスの高さの半分
margin-left: -150px;  ※ボックスの幅の半分
background-image: url(slimg.jpg);  ※背景画像
background-repeat: no-repeat;
text-align: center;
}
/* ---------------------------------------------------------------- *
フォームの設定
* ---------------------------------------------------------------- */
input {
margin-top: 20px;
}

●HTMLソース

<div id="second-life">
<form action="" method="get">
<input name="" type="password" />
<br />
<input type="submit" value="パスワード送信" />
</form>
</div>
(使用する場合は<>を半角英数にしてください。)


ログイン画面がきっちりブラウザの中央に配置されるととても気持ちの良いものです。

loginsample.jpg

さて、アイロベックスでは「IT展示会2008 in Second Life」に出展しています。
今回使用した画像は、当社ブース内で行われた撮影会の私のお気に入りショットです。
(3人の噛み合ない会話の様子が何とも言えません。)
アイロベックスってどんな会社かなっと軽いノリでのぞいてみてください。

---投稿者一言コメント----------

セカンドライフのアバターです。(なぜかMen。)

photo
hashimoto