【1st】DAY13『解説記事』

プログラミング

この動画では、Bootstrapを使ってWebサイトを作成していきます。機能としては、普段からよく見るスライダーやハンバーガーメニューといったものを実装していきます。レイアウトはしっかりとパソコンにもスマホにも対応させていきます。

※動画詳細欄から画像をダウンロードすることができます。

コード

HTML

head

『html:5』と入力して、Enterを押します。そうすると、自動である程度入力した状態になります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Content</title>
</head>
<body>
</body>
</html>

このようになるので、2行目の”en”を”ja”に変更してください。(“en”は”english”で、”ja”は”japanese”の略です。)

titleタグは変更してもしなくてもどちらでもいいです。

次にBootstrapとfontawesome、stylesheetを読み込みます。読み込んだ後がこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Complete Bootstrap 4 Website Layout</title>
　　#Bootstrap
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    #Fontawesome
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    #css
    <link rel="stylesheet" href="style.css">
</head>

Bootstrapのバージョン4.0を読み込んでいます。

あとは、fontawesomeを読み込みました。

使い方はこちらをご覧ください！

最後にcssファイルを読み込みました。

Navigation(7:07~)

Navigationの全体のコードです。

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
    <div class="container-fluid">
        <a href="#" class="navbar-brand"><img src="img/logo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a href="#" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Team</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Connect</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

.navbar-brandは会社やサイトのロゴにつけます。

.navbar-togglerは要するにこれです。

これのボタンを作るのに必要になります。

.collapse.navbar-collapseはブレイクポイントで要素を非表示にします。この動画ではブレイクポイントは”md”なので、”md”以下になるとメニューが非表示になります。非表示になったメニューは”toggler”の中で確認できます。

“toggler”は”data-target”と”id”を使って連携させています。”navbarResponsive”がありますが、親要素には “data-target” 、中身の部分には “id” を使います。

.containerと.container-fluidの違い

.containerは幅が段階的に小さくなっていきます。小さくなっていく分かれめはブレイクポイントです。

.container-fluidは親要素のmax-widthを常に保ったまま小さくなっていきます。.containerのように段階的ではなく、流動的に変化していきます。

Image Slider(12:50~)

Image Sliderの全体のコードです。

<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
    <li data-target="#slides" data-slide-to="0" class="active"></li>
    <li data-target="#slides" data-slide-to="1"></li>
    <li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="img/backgroundimg-1.jpg">
        <div class="carousel-caption">
            <h1 class="display-2">Bootstrap</h1>
            <h3>Complete Website Layout</h3>
            <button type="button" class="btn btn-outline-light btn-lg">VIEW DEMO</button>
            <button type="button" class="btn btn-primary btn-lg">Get Started</button>
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="img/backgroundimg-2.jpg">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="img/backgroundimg-3.jpg">
    </div>
</div>
</div>

carousel slideは回転するスライドという意味で、これはいろんなWebサイトに導入されているのでよく見たことがあると思います。

動画の中では記載されていないのですが、画像幅がうまく反映されなかったので”d-block”=”display:block;”を使ってインライン要素をブロック要素に変更し横幅を最大まで広げ、”w-100″=”width:100%;”で画像を横幅いっぱいに表示されるようにしました。

carouselのページ

Jumbotron

Jumbotronの全体のコードです。

<div class="container-fluid">
<div class="row jumbotron">
    <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
        <p class="lead">A web gosting service allows individuals and organizations to make their website accessible via the World Wide Web.</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
        <a href="#"><button type="button" class="btn btn-outline-secondary btn-lg">Web Hosting</button></a>
    </div>
</div>
</div>

Jumbotronは横幅いっぱいに画像を表示するときに使います。

Jumbotronのページ

Welcome Section 

<div class="container-fluid paddding">
<div class="row welcome text-center">
    <div class="col-12">
        <h1 class="display-4">Built with ease.</h1>
    </div>
    <hr>
    <div class="col-12">
        <p class="lead">Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source front-end library with HTML and CSS based design.</p>
    </div>
</div>
</div>

Three Column Section 

<div class="container-fluid paddding">
<div class="row text-center padding">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <i class="fas fa-code"></i>
        <h3>HTML5</h3>
        <p>Built with the latest version of Bootstrap, Bootstrap 4.</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
        <i class="fas fa-bold"></i>
        <h3>BOOTSTRAP</h3>
        <p>Built with the latest version of Bootstrap, Bootstrap 4.</p>
    </div>
    <div class="col-sm-12 col-md-4">
        <i class="fab fa-css3"></i>
        <h3>CSS3</h3>
        <p>Built with the latest version of Bootstrap, Bootstrap 4.</p>
    </div>
</div>
</div>

コラムは上の方でもちょくちょく使われています。

「col-sm-12」といったように書かれているものです。これは、BootstrapのGridシステムで簡単にレスポンシブ込みのレイアウトを作成することができます。

Webサイトを作成するときに大きく貢献してくれるはずです。

Grid systemのページ

Two Column Section

<div class="container-fluid padding">
<div class="row padding">
    <div class="col-lg-6">
        <h2>If you built it...</h2>
        <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
        <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
        <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
        <br>
        <a href="#" class="btn btn-primary">Learn More</a>
    </div>
    <div class="col-lg-6">
        <img src="img/Two Column Section.png" class="img-fluid">
    </div>
</div>
</div>

<hr class="my-4">

上のパートと同じです。

Fixed background

<figure>
    <div class="fixed-wrap">
        <div id="fixed">
        </div>
    </div>
</figure>

Emoji Section

<button class="fun" data-toggle="collapse" data-target="#emoji">click for fun.</button>
<div id="emoji" class="collapse">
<div class="container-fluid padding">
<div class="row text-center">
    <div class="col-sm-6 col-md-3">
        <img src="img/Two Column Section.png" class="gif">
    </div>
    <div class="col-sm-6 col-md-3">
        <img src="img/Two Column Section.png" class="gif">
    </div>
    <div class="col-sm-6 col-md-3">
        <img src="img/Two Column Section.png" class="gif">
    </div>
    <div class="col-sm-6 col-md-3">
        <img src="img/Two Column Section.png" class="gif">
    </div>
</div>
</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

html, body {
    height: 100%;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    color: #222;
}
.navbar {
    padding: .8rem;
}
.navbar-nav li {
    padding-right: 20px;
}
.nav-link {
    font-size: 1.1em !important;
}
.carousel-inner img {
    width: 100%;
    height: 100%;
}
.carousel-caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.carousel-caption h1 {
    font-size: 500%;
    text-transform: uppercase;
    text-shadow: 1px 1px 15px #000;
}
.carousel-caption h3 {
    font-size: 200%;
    font-weight: 500;
    text-shadow: 1px 1px 10px #000;
    padding-bottom: 1rem;
}
.btn-primary {
    background-color: #6648b1;
    border: 1px solid #6648b1;
}
.btn-primary:hover {
    background-color: #563d7c;
    border: 1px solid #563d7c;
}
.jumbotron {
    padding: 1rem;
    border-radius: 0;
}
.padding {
    padding-bottom: 2rem;
}
.welcome {
    width: 75%;
    margin: 0 auto;
    padding-top: 2rem;
}
.welcome hr {
    border-top: 2px solid #b4b4b4;
    width: 95%;
    margin-top: .3rem;
    margin-bottom: 1rem;
}
.fa-code {
    color: #e54d26;
}
.fa-bold {
    color: #563d7c;
}
.fa-css3 {
    color: #2163af;
}
.fa-code, .fa-bold, .fa-css3 {
    font-size: 4em;
    margin: 1rem;
}
.fun {
    width: 100%;
    margin-bottom: 2rem;
}
.gif {
    max-width: 100%;
}
}
@media (max-width: 768px) {
.carousel-caption {
    top: 45%;
}
.carousel-caption h1 {
    font-size: 350%;
}
.carousel-caption h3 {
    font-size: 140%;
    font-weight: 400;
    padding-bottom: .2rem;
}
.carousel-caption .btn {
    font-size: 95%;
    padding: 8px 14px;
}
.display-4 {
    font-size: 200%;
}
}
@media (max-width: 576px) {
.carousel-caption {
    top: 40%;
}
.carousel-caption h1 {
    font-size: 250%;
}
.carousel-caption h3 {
    font-size: 110%;
}
.carousel-caption .btn {
    font-size: 90%;
    padding: 4px 8px;
}
.carousel-indicators {
    display: none;
}
.display-4 {
    font-size: 160%;
}
}

以上がBootstrap編➀でした。

コメント