プログラミングの勉強 独学 楽しい!BootStrapを使えば簡単に奇麗なオリジナルサイトが作れる

Programming
fabian-grohs-581927-unsplash

プログラミングの勉強難しいですね。でも難しいところにぶつかってもクリアできるとすっきりします。

最近はBootStrapのテーマを使えばきれいなオリジナルサイトが簡単に早くできることがわかったので、BootStrapを勉強しています。

作りたいサイトのコンセプトを考えて、会うテーマを選んで少しコードをいじって作り上げて、ファイルをサーバーにアップしていけば爆速でサイトが出来ると言うことです。
と言うことで、最近BootStrapで簡単なStartTemplateを作ったのですが、作った工程を忘れないようにメモしておきます。
このTemplateを使うことによって、少しの調整で簡単サイトができるようにしています。JavaScriptとjQueryを使って動きをつけてあります。一番下まで行ったら戻るボタンもつけてあります。
と言う事でBootStrapのサイトにゆきます。
Documentationに行きます。
IMG_20190422_051428

下の方にスクロールして、Starter templateの所のコードを全部コピーします。
IMG_20190422_052305

コピーしたものをEditorに貼り付けます。
次にExamplesに行きます。
ここで自分の目的のサンプルのコードをコピーします。コピーは<body>の中身です。
Screenshot_20190422-052455

今回はStarter templateを使います。
Starter templateのソースコードの<body>の中身をコピーします。
IMG_20190422_053050

わたしはスマホでプログラムを組むので、アンドロイドスマホの場合、Starter templateのページのURLにview-source:を貼り付けます。
こんな感じで貼り付けます。
IMG_20190422_053357

そうすると、ソースコードが出てきます。
<body>の中身をコピーします。
IMG_20190422_053549

今度は、先程Editorに貼り付けたソースコードの<body>の中にコピーしたものを貼り付けます。
そうすると、貼り付けた後プレビューするとこんな感じになります。(*ここに書くは私があとから書き加えたものです)
IMG_20190422_053908
これに加えてjQueryを使って、ページが下に長くなってしまったとき戻るボタンも常につけておきたいと思います。
HTML
<a href=”#” class=”back-to-top”></a>
CSS
body {
    height: 1500px;
}
.back-to-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    color: #fff;
    width: 40px;
    height: 40px;
    z-index: 2;
    display: none;
}
.back-to-top:before {
    content: “”;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    background: #000000;
}
.back-to-top:after {
    content: “↑”;
    display: block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 0;
    top: 0;
}
JavaScript
$(document).ready(function(){
    $(window).scroll(function() {
        if($(this).scrollTop() > 100) { // 100pxスクロールしていたら上に戻るボタンを表示
            $(“.back-to-top”).fadeIn(); 
        } else {
            $(“.back-to-top”).fadeOut();
        }
    });
    $(“.back-to-top”).click(function() {
        $(“body,html”).animate({scrollTop:0},800); // 800msかけて上に戻る
    });
});
下にスクロールすると戻るボタンも出てきています。
IMG_20190422_054107
全部貼り付けた後の全体のコード
StartTemplateの出来上がり。
<!DOCTYPE html>
<html lang=”ja”>
<head>
  <meta charset=”utf-8″>
  <title>ここにかく</title>
  <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css” integrity=”sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS” crossorigin=”anonymous”>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js” integrity=”sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k” crossorigin=”anonymous”></script>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<style>
p{
  text-align:center;
}
.starter-template{
padding-top: 50px;
padding-bottom: 10px;
}
li .nav-item{
  color:#FFFFFF;
}
.container{
 text-align:center;
}
.container img{
  width:100%;
  height:400px;
  object-fit: cover;
  padding-right:20px;
}
ul{
  list-style:none;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,30);
}
body {
    height: 1500px;
}
.back-to-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    color: #fff;
    width: 40px;
    height: 40px;
    z-index: 2;
    display: none;
}
.back-to-top:before {
    content: “”;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    background: #000000;
}
.back-to-top:after {
    content: “↑”;
    display: block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 0;
    top: 0;
}
.container li {
  position: relative;
  }
.container h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  color:white;
  font-weight: bold;
  }
.container img {
  width: 100%;
  }
</style>
</head>
<body>
  <nav class=”navbar navbar-expand-md navbar-dark bg-dark fixed-top”>
  <a class=”navbar-brand” href=”#”>ここに書く</a>
  <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarsExampleDefault” aria-controls=”navbarsExampleDefault” aria-expanded=”false” aria-label=”Toggle navigation”>
    <span class=”navbar-toggler-icon”></span></button>
  <div class=”collapse navbar-collapse” id=”navbarsExampleDefault”>
    <ul class=”navbar-nav mr-auto”>
      <li class=”nav-item active”>
        <a class=”nav-link” href=”https://toshilog365.com/archives/cat_312901.html”>ここに書く<span class=”sr-only”>(current)</span></a></li>
 <li class=”nav-item”>
   <a class=”nav-link” href=”https://toshilog365.com/archives/16258125.html”>ここに書く</a></li>
  <li class=”nav-item”>
    <a class=”nav-link ” href=”https://toshilog365.com/archives/cat_312901.html”>ここに書く</a></li>
    <li class=”nav-item dropdown”>
        <a class=”nav-link dropdown-toggle” href=”#” id=”dropdown01″ data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>Dropdown</a>
        <div class=”dropdown-menu” aria-labelledby=”dropdown01″>
          <a class=”dropdown-item” href=”https://toshilog365.com/archives/16284177.html”>ここに書く</a>
          <a class=”dropdown-item” href=”https://toshilog365.com/archives/16269973.html”>ここに書く</a>
          <a class=”dropdown-item” href=”https://toshilog365.com/archives/15021268.html”>ここに書く</a>
        </div>
      </li>
    </ul>
    <form class=”form-inline my-2 my-lg-0″>
      <input class=”form-control mr-sm-2″ type=”text” placeholder=”Search” aria-label=”Search”>
      <button class=”btn btn-secondary my-2 my-sm-0″ type=”submit”>Search</button>
    </form>
  </div>
</nav>
<main role=”main” class=”container”>
  <div class=”starter-template”>
    <!– <h1>Coffee-like life style</h1> –>
    <p class=”lead”><h1>ここに書く</h1></p>
    <p>ここに書く</p>
  </div>
</main><!– /.container –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
      <script>window.jQuery || document.write(‘<script src=”/docs/4.2/assets/js/vendor/jquery-slim.min.js”><\/script>’)</script><script src=”/docs/4.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP” crossorigin=”anonymous”></script>
/*ココカラシタニナイヨウヲカイテユク*/
<a href=”#” class=”back-to-top”></a>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js”></script>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>
<script>
$(document).ready(function(){
    $(window).scroll(function() {
        if($(this).scrollTop() > 100) { // 100pxスクロールしていたら上に戻るボタ
ンを表示
            $(“.back-to-top”).fadeIn();
        } else {
            $(“.back-to-top”).fadeOut();
        }
    });
    $(“.back-to-top”).click(function() {
        $(“body,html”).animate({scrollTop:0},800); // 800msかけて上に戻る
    });
});
//# sourceURL=userscript.js
</script>
</body>
</html>
型は出来たので作りたいサイトのコンセプトが、決まっていれば簡単に作ってゆくことが出来ます。自分の使いやすいようにカスタマイズした基本Templateをいくつも作っておくと便利です。
作った工程のメモでした。(^^)/
動画もどうぞ!空港で作業していたのでアナウンスが入っちゃいました。(^o^)

コメント

Translate »