こんにちは朱夏です。
今回はBootstrapを使ってレスポンシブサイトを1時間で作るに挑戦してみました。
朱夏
しもむらさんが1時間で作成する動画上げてるなぁ。
今の自分の実力はどんなもんか図るためにやってみるかな。
こんな軽い気持ちで挑戦することにしました。
下村さんの動画はこちらです。
結果報告
結論から言うと、めっちゃ時間かかりました。
スタート
＝＞
ゴール
5時間半かかりました・・・
平日の夜にやるもんじゃないですね。
コード
今回はほぼHTMLのみで書きました。
CSSとJavaScriptは必要最低限のコードだけです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>BootstrapSite</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="js/sample.js"></script>
</head>
<body class="bg-secondary">
<!----- ヘッダー ----->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
<a class="text-light navbar-brand" href="#">Navi</a>
<button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="text-light nav-link" href="#">Carousel<span class="sr-only">(現位置)</span></a>
</li>
<li class="nav-item">
<a class="text-light nav-link" href="#column">Column</a>
</li>
<li class="nav-item">
<a class="text-light nav-link" href="#flex">Flex</a>
</li>
<li class="nav-item">
<a class="text-light nav-link" href="#tab">Tab</a>
</li>
<li class="nav-item">
<a class="text-light nav-link" href="#youtube">Youtbe</a>
</li>
<li class="nav-item">
<a class="text-light nav-link" href="#faq">FAQ</a>
</li>
<li class="nav-item">
<a class="text-light nav-link" href="#card">Card</a>
</li>
<li class="nav-item">
<a class="text-light nav-link" href="#accordion-faq">Accordion</a>
</li>
<li class="nav-item">
<a class="text-light nav-link" href="#formarea">Form</a>
</li>
</ul>
</div>
</nav>
</header>
<!----- ヘッダー END ----->
<!----- メインコンテンツ ----->
<!-- スライダー -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- インジケータの設定 -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 h-30" src="img/gorimeppv2IMGL7773_TP_V.jpg" alt="tool">
<div class="carousel-caption d-none d-md-block">
<h5>Tools</h5>
</div><!-- /.carousel-caption -->
</div><!-- /.carousel-item -->
<div class="carousel-item">
<img class="d-block w-100 h-30" src="img/Yuu171226IMGL0035_TP_V.jpg" alt="design">
<div class="carousel-caption d-none d-md-block">
<h5>Design</h5>
</div><!-- /.carousel-caption -->
</div><!-- /.carousel-item -->
<div class="carousel-item">
<img class="d-block w-100 h-30" src="img/YOSX8629_TP_V.jpg" alt="programing">
<div class="carousel-caption d-none d-md-block">
<h5>Programing</h5>
</div><!-- /.carousel-caption -->
</div><!-- /.carousel-item -->
</div><!-- /.carousel-inner -->
<!-- スライドコントロールの設定 -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="h1">＜</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="h1">＞</span>
</a>
</div><!-- /.carousel -->
<!-- スライダー END -->
<div class="container shadow bg-light py-5 my-5">
<!-- カラムとツールチップ -->
<div id="column">
<h2 class="text-center p-3">Columnとツールチップ</h2>
</div>
<div class="row">
<div class="col-md-4 p-2 col-12">
<img class="img-fluid" src="img/macbook1992_TP_V.jpg" alt="mac" data-toggle="tooltip" title="Mac欲しいなぁ">
</div>
<div class="col-md-4 p-2 col-12">
<img class="img-fluid" src="img/iphonexrFTHG8943_TP_V.jpg" alt="mac" data-toggle="tooltip" data-placement="bottom" title="Apple製品で統一">
</div>
<div class="col-md-4 p-2 col-12">
<img class="img-fluid" src="img/harinezumiIMGL8714_TP_V.jpg" alt="mac" data-toggle="tooltip" title="ハリネズミエンジニアさん">
</div>
</div>
<!-- カラムとツールチップ END -->
<!-- Flex -->
<div id="flex">
<h2 class="text-center p-3">猫派 VS 犬派</h2>
</div>
<div class="d-flex flex-wrap-reverse justify-content-center">
<div class="col-md-6 col-12 align-self-center h3 p-4">
<p>猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派猫派</p>
</div>
<div class="col-md-6 col-12 p-0 align-self-center">
<img class="img-fluid" src="img/tom190303DSC03895_TP_V.jpg" alt="">
</div>
</div>
<div class="d-flex flex-wrap justify-content-center">
<div class="col-md-6 col-12 p-0 align-self-center">
<img class="img-fluid" src="img/AMEMAN17826009_TP_V.jpg" alt="">
</div>
<div class="col-md-6 col-12 align-self-center h3 p-4">
<p>犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派犬派</p>
</div>
</div>
<!-- Flex END -->
<!-- タブナビゲーション -->
<div id="tab">
<h2 class="text-center pt-5">キャンプアイテム</h2>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item col-4 p-0">
<a href="#home" class="nav-link text-center active" id="home-tab" data-toggle="tab" role="tab" aria-controls="home" aria-selected="true">テント</a>
</li>
<li class="nav-item col-4 p-0">
<a href="#profile" class="nav-link text-center" id="profile-tab" data-toggle="tab" role="tab" aria-controls="profile" aria-selected="false">シュラフ</a>
</li>
<li class="nav-item col-4 p-0">
<a href="#contact" class="nav-link text-center" id="contact-tab" data-toggle="tab" role="tab" aria-controls="contact" aria-selected="false">チェア</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="col-md-8 col-12 my-5 mx-auto">
キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。キャンプをする上でテントは拠点となります。
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="col-md-8 col-12 my-5 mx-auto">
冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。冬場のシュラフは重要です。
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="col-md-8 col-12 my-5 mx-auto">
チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。チェアはハイスタイルかロースタイルかで好みが分かれます。
</div>
</div>
</div>
<!-- タブナビゲーション END -->
<!-- youtube埋め込み -->
<div id="youtube">
<h2 class="text-center pt-5">今回の学習動画</h2>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/fou-ZR9LhGM" allowfullscreen></iframe>
</div>
<!-- youtube埋め込み END -->
<!-- モーダル -->
<div id="faq">
<h2 class="text-center pt-5">よくある質問</h2>
</div>
<div class="row justify-content-around">
<div class="col-md-6 col-12 d-md-inline-flex d-flex">
<!-- 切り替えボタンの設定 -->
<div class="w-100 m-2 border text-center p-2" data-toggle="modal" data-target="#exampleModal">
ここは何のサイトですか？
</div>
<!-- モーダルの設定 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">ここは何のサイトですか？</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>練習用にBootstrapを使って作成したレスポンシブサイトです。</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<div class="col-md-6 col-12 d-md-inline-flex d-flex">
<!-- 切り替えボタンの設定 -->
<div class="w-100 m-2 border text-center p-2" data-toggle="modal" data-target="#exampleModal2">
Bootstrapはどんな事が出来るの？
</div>
<!-- モーダルの設定 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Bootstrapはどんな事が出来るの？</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
このサイトの90%はBootstrapを使用しています。<br>
BootstrapはWEBサイトの見た目を整える他、スライド、動画の埋め込み、レスポンシブ対応などを簡単に実装出来ます。
</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<div class="col-md-6 col-12 d-md-inline-flex d-flex">
<!-- 切り替えボタンの設定 -->
<div class="w-100 m-2 border text-center p-2" data-toggle="modal" data-target="#exampleModal3">
犬派ですか猫派ですか？
</div>
<!-- モーダルの設定 -->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel3">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel3">犬派ですか猫派ですか？</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
どっちも好きです。<br>
しかしアレルギーがあるのであまり近寄れません（T_T）
</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<div class="col-md-6 col-12 d-md-inline-flex d-flex">
<!-- 切り替えボタンの設定 -->
<div class="w-100 m-2 border text-center p-2" data-toggle="modal" data-target="#exampleModal4">
キャンプはどのくらい行くんですか？
</div>
<!-- モーダルの設定 -->
<div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel4">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel4">キャンプはどのくらい行くんですか？</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
キャンプは月に１、２回行きます。<br>
最近は無料のキャンプ場で節約キャンプしています。<br>
自然の中でコードとかブログ書いて生活するのが夢ですね。
</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
<!-- モーダル END -->
<!-- カード -->
<div id="card">
<h2 class="text-center pt-5">沼カード</h2>
</div>
<div class="row">
<div class="col-md-4 col-12 my-2">
<div class="card img-thumbnail">
<img class="card-img-top" src="img/XEN7615002_TP_V.jpg" alt="沼１">
<div class="card-body px-2 py-3">
<h5 class="card-title">カメラ沼</h5>
<p class="card-text">レンズ１つで数万～数十万。本体はもっとする。はまるとストロボやらレフ板やら揃えだす。</p>
<p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a>
</div><!-- /.card-body -->
</div><!-- /.card -->
</div>
<div class="col-md-4 col-12 my-2">
<div class="card img-thumbnail">
<img class="card-img-top" src="img/SONYPAKU7898_TP_V.jpg" alt="沼２">
<div class="card-body px-2 py-3">
<h5 class="card-title">オーディオ沼</h5>
<p class="card-text">音質に命を懸ける。良いスピーカー、いいプレイヤー、いいケーブル。ノイズが乗らない配線とかにこだわりだしたら末期。</p>
<p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a>
</div><!-- /.card-body -->
</div><!-- /.card -->
</div>
<div class="col-md-4 col-12 my-2">
<div class="card img-thumbnail">
<img class="card-img-top" src="img/gacyaagacya0I9A2343_TP_V.jpg" alt="沼３">
<div class="card-body px-2 py-3">
<h5 class="card-title">ソシャゲ沼</h5>
<p class="card-text">お金と時間両方持ってかれるやばいやつ。気付いたら夜が明けてる。</p>
<p class="mb-0"><a href="#" class="btn btn-primary btn-sm">ボタン</a>
</div><!-- /.card-body -->
</div><!-- /.card -->
</div>
</div>
<!-- カード END -->
<!-- アコーディオン -->
<div id="accordion-faq">
<h2 class="text-center p-3">追加の質問</h2>
</div>
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true">
<!-- FAQ1 -->
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
Q1:一つ目の質問です
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
A1:一つ目の質問の答えです
</div>
</div>
</div>
<!-- FAQ1 END -->
<!-- FAQ2 -->
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
Q2:二つ目の質問です
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
A2:二つ目の質問の答えです
</div>
</div>
</div>
<!-- FAQ2 END -->
<!-- FAQ3 -->
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
Q3:三つ目の質問です
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
A3:三つ目の質問の答えです
</div>
</div>
</div>
<!-- FAQ3 END -->
<!-- FAQ4 -->
<div class="card">
<div class="card-header" role="tab" id="headingFour">
<h5 class="mb-0">
<a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseFour" role="button" aria-expanded="false" aria-controls="collapseFour">
Q4:四つ目の質問です
</a>
</h5>
</div>
<div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="headingFour" data-parent="#accordion">
<div class="card-body">
A4:四つ目の質問の答えです
</div>
</div>
</div>
<!-- FAQ4 END -->
<!-- FAQ5 -->
<div class="card">
<div class="card-header" role="tab" id="headingFive">
<h5 class="mb-0">
<a class="collapsed text-body stretched-link text-decoration-none" data-toggle="collapse" href="#collapseFive" role="button" aria-expanded="false" aria-controls="collapseFive">
Q5:五つ目の質問です
</a>
</h5>
</div>
<div id="collapseFive" class="collapse" role="tabpanel" aria-labelledby="headingFive" data-parent="#accordion">
<div class="card-body">
A5:五つ目の質問の答えです
</div>
</div>
</div>
<!-- FAQ5 END -->
</div>
<!-- アコーディオン END -->
<!-- フォーム -->
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-5 mb-3">
<label for="validationCustom01">*苗字</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="invalid-feedback">
※必須項目です
</div>
</div>
<div class="col-md-5 mb-3">
<label for="validationCustom02">*名前</label>
<input type="text" class="form-control" id="validationCustom02" required>
<div class="invalid-feedback">
※必須項目です
</div>
</div>
<div class="col-md-5 mb-3">
<label for="validationCustomUsername">*ユーザーID</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
※必須項目です
</div>
</div>
</div>
</div>
<div class="col-md-3 col-12 mb-3 px-0">
<label for="validationCustom03">*都道府県</label>
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">--都道府県--</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
<div class="invalid-feedback">
※必須項目です
</div>
</div>
<div class="form-row">
<div class="col-md-6 col-12 mb-3">
<label for="validationCustom04">*住所</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
※必須項目です
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
*同意する
</label>
<div class="invalid-feedback">
※チェックを入れてください。
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<!-- フォーム END -->
</div>
<!----- メインコンテンツ END ----->
<!----- フッター ----->
<footer>
<div class="row">
<!-- プロフィール -->
<div class="col-lg-4 p-5">
<h4 class="font-weight-bolder text-center text-light border-bottom">プロフィール</h4>
<div class="p-3">
<img class="img-fluid rounded-circle" src="img/snap1.jpg" alt="">
</div>
<div class="text-center">
<h4 class="d-inline-block border-bottom border-info text-light">朱夏</h4>
</div>
<p class="text-light p-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- プロフィール END -->
<!-- テキストリンク -->
<div class="col-lg-4 p-5 border-secondary border-right border-left">
<h4 class="font-weight-bolder text-center text-light border-bottom">ポートフォリオ</h4>
<div class="py-3">
<ul class="text-light">
<li><a class="text-light" href="https://syunatsu.work/Mytheme/">WordPressテーマ</a></li>
<li><a class="text-light" href="https://syunatsu.work/">ブログ</a></li>
</ul>
</div>
</div>
<!-- テキストリンク END -->
<!-- テキスト -->
<div class="col-lg-4 p-5">
<h4 class="font-weight-bolder text-center text-light border-bottom">テキスト</h4>
<div class="py-3">
<a class="twitter-timeline" data-height="500" href="https://twitter.com/syunatsu1?ref_src=twsrc%5Etfw">Tweets by syunatsu1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<!-- テキスト -->
</div>
<p class="bg-dark text-light p-0 m-0 text-center">(c)202002@syunatsu1</p>
</footer>
<!----- フッター END ----->
</body>
</html>
CSS
.carousel-item img {
height: 500px;
object-fit: cover;
}
JavaScript
(function() {
window.addEventListener("load", function() {
$('[data-toggle="tooltip"]').tooltip();
});
})();
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
あとがき
HTMLの圧倒的な分量、やばいですね。
過去に学習した部分やBootstrap公式からのコピペを活用してこの時間ですから、まだまだ未熟です。
それに、ワイヤーフレームや画像などを事前に準備していなかったのも敗因ですね。
作ったサイトは、後日ポートフォリオとして公開したいと思います。
今回はここまでです。
次回もよろしくお願いします。
