プログラミング備忘録

プログラムの勉強をしています。

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">&nbsp;
        <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はお薦めです。

広告を非表示にする
お仕事のご依頼はコチラまで。→chabiribon@ksh.biglobe.ne.jp
電話番号→044-571-2441