HTML ツイッター風のログイン画面を作成する（CSSでレイアウトの調整）
はじめに
前回のログイン画面を新しく作り直します。今回からCSSを本格的に勉強してします。新しく出てきた命令を「【保存版】CSS 逆引き辞典（初心者用 随時更新予定）」に追加していきます。
Twitterのログイン画面を参考にゼロから作りました。
動作環境
Windows10
メモ帳
Google Chrome
作業フォルダ/ ├─ login.html ├─ login.css └─ login.js
cssとjsのファイル名がバラバラだと探すのが大変だと思ったので同じ「login」にしました。
HTMLの解説
login.html
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="login.css"> <script src="login.js"></script> <title>ログイン画面</title> <div class="frame"> <div class="box0"> <img src="image.jpg"> <h3>ふたり暮らしにログイン</h3> </div> <div class="box1"> <label for="text1" id="l_text1">ユーザー名</label> <input id="text1" type="text"> </div> <div class="box1"> <label for="text2" id="l_text2">パスワード</label> <input id="text2" type="password"> </div> <button class="btn1" type="submit">ログイン</button> <p> <br> <a href="/blog/newcomer">パスワードをお忘れですか？</a> <a href="/blog/newcomer">アカウント作成</a> </p> </div>
<html>~</html>、<head>~</head>、<body>~</body>は省略しました。
<div>~</div>
ひとかたまりの範囲として定義します。<div>のあいだに<div>を入れることもできます。（「frameクラス」を全体としてCSSで位置を指定しています。）
id="ID名"
タグの中に記載して、その要素にID名を付けて使用します。ID名は１つの名前で１つの要素にしか指定できません。同じ名前で付けると最初の要素にだけ適用されます。
class="クラス名"
タグの中に記載して、その要素にクラス名を付けて使用します。 クラス名は同じ名前で複数作ることができます。同じ名前の要素全てに適用されます。
<img src="ファイル名">
画像ファイルを表示します。終了タグはありません。
<label for="ラベルと付ける要素のID名" id="ID名">ラベルの文字</label>
<input id="ID名" type="text">
ラベルは、テキストボックスやチェックボックスなどに関連付ける文字です。ラベルの文字をクリックするとテキストボックスを指定したりチェックボックスにチェックを付けることができます。
<input id="ID名" type="text">
テキストボックスを作ります。
<input id="ID名" type="password">
「type="password"」にすることで、入力した文字が「●」になります。
<button class="クラス名" type="submit">ログイン</button>
ボタンを作ります。「type="submit"」にすることで送信ボタンを作ります。入力されたデータが「<form>タグ」を使って送信されますが、今回は未実装です。
<a href="リンク先">文字</a>
リンク先を指定して移動します。
CSSの解説
login.css
.frame{
width: 80%; /*幅*/
margin: 30px auto; /*上の位置と中央寄せ*/
max-width: 600px; /*最大の幅*/
}
img{
width: 80px; /*幅*/
height: auto; /*縦横比を維持する高さを自動計算*/
}
.box0{
text-align: center; /*中央寄せ*/
}
.box1{
width: 100%; /*幅*/
height: 60px; /*高さ*/
margin: 15px 0px; /*領域外のスペース*/
background-color: #eee; /*背景色*/
border-bottom: 2px solid #c2c2c2; /*text1の下線*/
}
#l_text1{
display: block; /*要素の表示形式*/
font-size: 14px; /*文字の大きさ*/
padding: 5px 10px; /*領域内のスペース*/
}
#text1{
font-size: 18px; /*文字の大きさ*/
padding: 0 0 7px 10px; /*ボックスを大きくする*/
width: 100%; /*幅*/
background-color: #eee; /*背景色*/
border: none; /*外枠の線*/
outline: none; /*外枠の線*/
border-bottom: 2px solid #c2c2c2; /*text1の下線*/
box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}
#text1:focus{
border-bottom: 2px solid #1B73BA; /*下線の太さと色*/
}
#l_text2{
display: block; /*要素の表示形式*/
font-size: 13px; /*文字の大きさ*/
padding: 5px 10px; /*領域内のスペース*/
}
#text2{
font-size: 18px; /*文字の大きさ*/
padding: 2px 0 7px 10px; /*ボックスを大きくする*/
width: 100%; /*幅*/
background-color: #eee; /*背景色*/
border: none; /*外枠の線*/
outline: none; /*外枠の線*/
border-bottom: 2px solid #c2c2c2; /*text1の下線*/
box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}
#text2:focus{
border-bottom: 2px solid #1B73BA; /*下線の太さと色*/
}
.btn1{
position: relative; /*相対位置（topのために必要）*/
width:100%; /*幅*/
height:50px; /*高さ*/
top: 10px; /*上の位置*/
color:#fff; /*文字の色*/
border:none; /*外枠*/
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px; /*角の半径*/
background:#1B73BA; /*背景色*/
display: block; /*要素の表示形式*/
-webkit-appearance: none;
outline: 0; /*外枠（押した後）*/
cursor: pointer; /*カーソル（指のかたち）*/
}
.btn1:hover{
opacity: 0.8; /*透明度*/
}
a {
text-decoration: none; /*下線を消す*/
}
a:hover{
text-decoration: underline; /*下線を引く*/
}
p {
text-align: center; /*中央寄せ*/
}
長いです。コメントを多めにしたので解説は少なくします。
.クラス名 { }
class名の前には「.」を付けて呼び出します。
#ID名 { }
id名の前には「#」を付けて呼び出します。
frameクラス
全体のブロック要素を作りました。全体の幅と上の位置を調整します。
box0クラス
画像と見出しを中央寄せにしています。
box1クラス
ユーザー名とパスワードで使います。幅、高さ、余白、背景色を設定して、下線を付けています。
ラベルとテキストボックス
文字のサイズや位置を調整して、クリックされた時に下線の色を付けています。
ボタン
幅、高さ、位置、色を調整して、角を丸めて、カーソルが乗った時の形を決めます。また、カーソルが乗った時に透明度（色を薄く）を付けています。
リンク<a>と段落<p>
リンクはカーソルが乗った時だけ下線を付けて、段落は中央寄せにしています。
※詳しい解説は【保存版】CSS 逆引き辞典（初心者用 随時更新予定）にあります。
javascriptの解説
login.js
window.onload = function () {
document.getElementById( "text1" ).onfocus = function(){
document.getElementById("l_text1").style.color = '#1B73BA';
};
document.getElementById( "text1" ).onblur = function(){
document.getElementById("l_text1").style.color = '';
};
document.getElementById( "text2" ).onfocus = function(){
document.getElementById("l_text2").style.color = '#1B73BA';
};
document.getElementById( "text2" ).onblur = function(){
document.getElementById("l_text2").style.color = '';
};
}
ユーザー名とパスワードのラベルの文字をそれぞれのテキストボックスが選択されている時だけ色を変えます。（本当はこの部分もCSSでやりたかったのですがうまくいきませんでした）
onfocusイベント
フォーカスした時のイベントです。今回は「テキストボックスが選択されたら」です。
onblurイベント
フォーカスを外した時のイベントです。
style.colorプロパティ
対象のHTML要素を取得してstyleプロパティで任意のCSSを変更します。今回は色を変更していますがほとんどのCSSが変更できそうです。
※注意：色情報は「' '」もしくは「" "」で囲んでください。
まとめ
javascriptはややこしそうなので後回しにして、CSSから勉強していきます。ログイン画面は要素も少なく、たったこれだけに感じますがCSSファイルはかなり長くなりました。やっている途中で覚えることが多すぎそうだったので、先に基本だけでもまとめてみようと【保存版】CSS 逆引き辞典（初心者用 随時更新予定）を作りました。
随時更新していきますのでご意見ご要望がございましたらよろしくお願いいたします。
↓よかったらポチッとしていってください。
