bootstrap3.0でホームページを作成
<!DOCTYPE html> <html land="ja"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/chabiribon_style.css" rel="stylesheet"> <link rel="shortcut icon" href="img/favicon.ico"> <!--[if lt IE 9]> <script src="js/html5shiv.js>"></script> <script src="js/respond.min.js"></script> <![endif]--> <title>ちゃびりぼん</title> </head> <body> <div class="conteiner"> <div class="row"> <div class="col-xs-0 col-sm-3 col-md-4 col-lg-4"></div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"> <img class="img-responsive" src="img/website.png"> </div> <div class="col-xs-0 col-sm-3 col-md-4 col-lg-4"></div> </div> <div class="row"> <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3"></div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <div> こんにちは。</br> ちゃびりぼんという名前でウェブプログラマーをやっている「さこうけいすけ」です。</br> このページに来てくださりありがとうございます。</br> 自己紹介させてください。</br> 子供の頃からゲーム大好きの人生でした。</br> それが影響してかプログラマーの道を目指すようになりました。</br> ゲームは作れないけれど、今後もプログラマーとして頑張っていきたいです。</br> スキルについてお話します。</br> おもにhtml5/css/php/mysqlを使ってのサイト構築が出来ます。</br> 現在html5とphpの資格取得の為に勉強中です。</br> お問い合わせございましたら、問い合わせフォームにて送信してください。</br> メールで送って頂いても結構です。</br> 最後まで読んでくださりありがとうございます。</br></br> ちゃびりぼん代表 さこうけいすけ </div> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <p><b>【連絡先】</b></p> <p>電話番号:<a href="tel:044-571-2441">044-571-2441</a></p> <p>Mail:<a href="mailto:chabiribon.douga@gmail.com">chabiribon.douga@gmail.com</a></p> <p>住所:神奈川県川崎市幸区南幸町2-24-7メゾン南幸町102</p> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3246.8679087438895!2d139.6887294155557!3d35.53226178022926!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185e27571c0001%3A0x29cb6f4114bc6d38!2z44Gh44KD44Gz44KK44G844KT!5e0!3m2!1sja!2sjp!4v1509775518208" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div> <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3"></div> </div> <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3"></div> <div class="row"> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <form method="post" action="inquiry.php"> <div class="form-group"> <label for="name" class="control-label">お名前</label> <input type="text" name="name" id="name" placeholder="お名前を入力" class="form-control"> </div> <div class="form-group"> <label for="date" class="control-label">問い合わせ日:</label? <p class="form-control-static"><?=date("Y/m/d");?></p> <input type="hidden" name="date" value="<?=date("Y/m/d")?>"> </div> <div class="form-group"> <label for="email" class="control-label">メールアドレス</label> <input type="text" name="email" id="email" placeholder="メールアドレスを入力" class="form-control"> </div> <div class="form-group"> <label for="body" class="control-label">お問い合わせ内容</label> <textarea name="body" id="body" cols="40" rows="5" placeholder="お問い合わせ内容を記述してください" class="form-control"></textarea> </div> <input type="submit" value="送信" class="btn btn-primary"> <input type="reset" value="キャンセル" class="btn btn-default"> </form> </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"> <a href="https://twitter.com/ChabiribonDouga?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @ChabiribonDouga</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <a class="twitter-timeline" width="500" height="500" href="https://twitter.com/ChabiribonDouga?ref_src=twsrc%5Etfw">Tweets by ChabiribonDouga</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div class="col-xs-0 col-sm-3 col-md-3 col-lg-3"></div> </div> </div> <script src="https://translate.googleusercontent.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script> <script src="js/bootstrap.js"></script> </div> </body> </html>
自分のプロフィールページを作ってみました。
bootstrap3.0を使っています。
複雑になりがちな部分を簡単にしてくれるので、bootstrapはお薦めです。