yukiyukiponsuの日記

雑記ブログ

質問はCONTACTやコメントでお願い致します。

【コピペで作れるログイン画面】html×css×bootstrapを使ったよ

この記事をシェアする

ログイン画面を作ってみた
どうもゆきぽんずです

 

今日はタイトルにもあるように、html×css×bootstrapを用いてログイン画面を作ってみました

 

何か使えそうだったら是非使ってください

完成したログイン画面

完成したログイン画面

 以上のようなログイン画面を作成しました

 

それでは実際に作成したコードを見ていきましょう!

 

ソースコードを見る前にいったん注意点をみてください

ソースコード

HTMLファイル :  index.html

<!doctype html>
<html lang="ja">
  <head>
    <title>Melon</title>
  <!-- 必要なメタタグ -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/indexStyle.css"> <!-- firebaseClient --> <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> <!-- jQuery, Popperjs --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>4 </head> <body class="text-center"> <!-- ナビゲーションバー --> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <span class="navbar-brand mb-0 h1">Meloth</span> </nav> <!-- コンテンツ --> <form class="form-signin"> <h4 h3 mb-3 font-weight-normal>チャットへようこそ!<br> 名前を入力してください</h4> <div class="form-group"> <label for="inputUserName" class="sr-only">ユーザー名を入力してください</label> <input type="userName" class="form-control" id="inputUserName" placeholder="username" required autofocus> </div> <div class="btn btn-primary btn-block btn-lg" id="enterRoom">入室</div> </form> </body> </html>

 

CSSファイル : indexStyle.css

html,
body {
  height: 100%;
}
body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #f5f5f5;
}
.form-signin{
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: 80%;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="userName"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

 

 ソースコードは以上です

 

注意してほしい点があるので書いておきます

注意点

2点ほど気を付けてほしいことがあるので、確認してください

index.htmlファイルとindexStyle.cssファイルの位置関係

注意点

index.htmlファイル内のコード

<!-- firebaseClient --> 

<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>

 

以上の2つのコードは今後firebaseを使って実装しようと考えていたので入れました

 

いらない方は消していただいても大丈夫です

 

注意点は以上です

感想

結構めんどくさかったですが、bootstrapを使って実装したので思ったより簡単に実装できました

 

もし全部自分で実装すると考えると...めんどくさすぎて手に負えませんね

 

技術の進化最高ですね( ´∀`)bグッ!

 

今日の記事の内容は以上です

 

今日もブログを読んでくださりありがとうございます

 

あなたのそばにゆきぽんず