Bootstrapを使用してWebページを一瞬で作る

webページをbootstrapで作成する

CSSフレームワークであるBootstrapを使用してWebページを作成する

Medi

前回HTML/CSSのコードを直に書いてWebページを作成しました。
今回はCSSフレームワークであるBootstrapを使用して作成してみます。

Webプログラミング入門 【Udemy講座】フロントエンドエンジニアになりたい人の Webプログラミング入門

完成図

bootstrap-webpage
webpage-bootstrap
HOMEページはFontAwesome5を使用して、アニメーションを加えています。

HTML/CSSの中身をみていく

index.html

<br>
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
    &lt;meta charset="UTF-8"&gt;<br>
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>
    &lt;meta content="ie=edge"&gt;<br>
    &lt;title&gt;ご利用アンケート&lt;/title&gt;<br>
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;<br>
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    &lt;link rel="stylesheet" href="style.css"&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
    &lt;div class="container"&gt;<br>
    &lt;header&gt;<br>
        &lt;div class="row"&gt;<br>
            &lt;div class="col-sm-6"&gt;<br>
                &lt;h1&gt;ご利用アンケート&lt;/h1&gt;<br>
            &lt;/div&gt;<br>
            &lt;div class="col-sm-6 align-right"&gt;<br>
                &lt;a href="./home.html"&gt;HOMEへ戻る&lt;/a&gt;<br>
            &lt;/div&gt;<br>
        &lt;/div&gt;<br>
    &lt;/header&gt;<br>
    &lt;/div&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    &lt;hr&gt;<br>
    &lt;div class="container"&gt;<br>
        &lt;form&gt;<br>
        &lt;div class="col-sm-8 col-sm-offset-2"&gt;<br>
            &lt;p&gt;この度はご利用頂きありがとうございます。&lt;/p&gt;<br>
            &lt;div class="form-group"&gt;<br>
                &lt;label for="name"&gt;お名前&lt;/label&gt;<br>
                &lt;input type="text" id="name" name="name"<br>
                class="form-control" placeholder="例)医学生Medi"&gt;<br>
            &lt;/div&gt;<br>
            &lt;div class="form-group"&gt;<br>
                &lt;label&gt;大学&lt;/label&gt;<br>
                &lt;div class="checkbox"&gt;<br>
                    &lt;label&gt;<br>
                    &lt;input type="checkbox" name="q1" value="国立"&gt;<br>
                    国立<br>
                    &lt;/label&gt;<br>
                    &lt;/div&gt;<br>
                    &lt;div class="checkbox"&gt;<br>
                    &lt;label&gt;<br>
                    &lt;input type="checkbox" name="q2" value="私立"&gt;<br>
                    私立<br>
                    &lt;/label&gt;<br>
                    &lt;/div&gt;<br>
                &lt;/div&gt;<br>
            &lt;/div&gt;<br>
            &lt;div class="form-group"&gt;<br>
                &lt;label for="grade"&gt;学年&lt;/label&gt;<br>
                &lt;select id="grade" name="grade" class="form-control"&gt;<br>
                    &lt;option value=""&gt;学年を選択してください&lt;/option&gt;<br>
                    &lt;option value="M1"&gt;M1&lt;/option&gt;<br>
                    &lt;option value="M2"&gt;M2&lt;/option&gt;<br>
                    &lt;option value="M3"&gt;M3&lt;/option&gt;<br>
                    &lt;option value="M4"&gt;M4&lt;/option&gt;<br>
                    &lt;option value="M5"&gt;M5&lt;/option&gt;<br>
                    &lt;option value="M6"&gt;M6&lt;/option&gt;<br>
                    &lt;option value="graduated"&gt;既卒&lt;/option&gt;<br>
                &lt;/select&gt;<br>
            &lt;/div&gt;<br>
            &lt;div class="form-group"&gt;<br>
            &lt;label for="message"&gt;ご意見&lt;/label&gt;<br>
            &lt;textarea name="message" rows="3" class="form-control" &gt;&lt;/textarea&gt;<br>
            &lt;/div&gt;<br>
            &lt;button type="submit" class="btn btn-primary"&gt;送信する&lt;/button&gt;<br>
        &lt;/div&gt;<br>
        &lt;/form&gt;<br>
        &lt;hr&gt;<br>
    &lt;/div&gt;<br>
    &lt;footer&gt;<br>
        &lt;p class="align-center"&gt;&amp;copy;医学生Mediのブログ&lt;/p&gt;<br>
    &lt;/footer&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>

Bootstrapの使い方は、タグ内に指定されたリンクを貼り付けるだけでオッケーです。 参考 IntroductionBootstrap Bootstrapを使用する場合は、sanitize.cssなどのスタイルシートを使用しなくても大丈夫です。sanitize.cssとはHTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシートのことです。Bootstrapの中には、このsanitize.cssの役割をしてくれるものが入ってます。Bootstrapの使い方ですが、ダウンロードする方式とCDN方式がありますが基本的にはCDN方式にしましょう。CDNとはContent-Delivery-Networkの略でFontAwesome5を使用する際にもこのCDN方式で使用しています。注意点としては、sytle.cssファイルの前にリンク指定することです。次はhome.htmlもみてみます。

home.html

<br>
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
    &lt;meta charset="UTF-8"&gt;<br>
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>
    &lt;meta content="ie=edge"&gt;<br>
    &lt;title&gt;HOME&lt;/title&gt;<br>
    &lt;script defer src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a" crossorigin="anonymous"&gt;&lt;/script&gt;<br>
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;<br>
    &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;<br>
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;<br>
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    &lt;link rel="stylesheet" href="style.css"&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
    &lt;div class="container"&gt;<br>
    &lt;div class="alert alert-success" role="alert"&gt;<br>
          &lt;h4 class="alert-heading"&gt;Well done!&lt;/h4&gt;<br>
          &lt;p&gt;Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.&lt;/p&gt;<br>
          &lt;hr&gt;<br>
          &lt;p class="mb-0"&gt;Whenever you need to, be sure to use margin utilities to keep things nice and tidy.&lt;/p&gt;<br>
    &lt;/div&gt;<br>
    &lt;i class="fas fa-rocket fa-5x" style="color:green;"&gt;&lt;/i&gt;<br>
    &lt;div class="progress"&gt;<br>
            &lt;div class="progress-bar progress-bar-striped  progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"&gt;&lt;/div&gt;<br>
    &lt;/div&gt;<br>
    &lt;div class="fa-3x align-center"&gt;<br>
            &lt;i class="fas fa-spinner fa-spin"&gt;&lt;/i&gt;<br>
            &lt;i class="fas fa-circle-notch fa-spin"&gt;&lt;/i&gt;<br>
            &lt;i class="fas fa-sync fa-spin"&gt;&lt;/i&gt;<br>
            &lt;i class="fas fa-cog fa-spin"&gt;&lt;/i&gt;<br>
            &lt;i class="fas fa-spinner fa-pulse"&gt;&lt;/i&gt;<br>
            &lt;i class="fas fa-stroopwafel fa-spin"&gt;&lt;/i&gt;<br>
    &lt;/div&gt;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>    &lt;/div&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>

参考 FontAwesome5FontAwesome
FontAwesomeの使い方はサルワカさんのサイトがとても分かりやすいです。
参考 【保存版】Font Awesomeの使い方:Webアイコンフォントを使おうサルワカ

HTML/CSSの本を買わなくてもサルワカさんのサイトで勉強すれば何とかなると思います。

ちなみにサルワカさんのサイトで紹介されて本はコチラです。


いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

HTML/CSSの勉強については

  1. 1日で読める系の薄いHTML/CSSの入門書を読む
  2. ProgateでHTML/CSSを始める
  3. 自分のブログでHTML/CSSをイジってみる
  4. Udemy講座を受ける

だと思っています。

これからHTML/CSSやBootstrapの勉強をする方は、ぜひ参考にしてみてください。

終わり。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください