前提・実現したいこと
ブログサイト制作を学習するため、参考ブログを模倣しています。
参考ブログ https://manablog.org/
ブログのナビゲーション部分を作成する際、参考ブログのソースをみるとBootstrapを使用していたので、同じようにコード書きましたが以下のような表示となってしまいます。
発生している問題・エラーメッセージ
【参考ブログの表示↓】
エラーメッセージ:エラーメッセージの表示はありません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>manablog</title> 7 <link rel="stylesheet" href="css/styles.css"> 8 <link rel="icon" href="favicon.ico"> 9 10 <!-- Bootstrap3 11 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 12 [if lt IE 9]> 13 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 14 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 15 <![endif] --> 16 17 <!-- Bootstrap4 --> 18 <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"> 19 20 <!-- 試し書き 21 <script type="text/javascript" async src="https://cdn.treasuredate.com/sdk/1.9.2/td.min.js"> 22 </script> 23 <link rel="dns-prefetch" href="//s.w.org"> 24 <script src="https://dalc.valuecommerce.com/vcid? s=https%3A%2F%2Fmaanblog.org%2F" type="text/javacript" charset="UTF-8"> 25 </script> --> 26 27 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 28 29</head> 30<body> 31 <header> 32 <div class="container"> 33 <div class="logo"> 34 <img src="img/ダウンロード.png"> 35 </div> 36 <div class="writer"> 37 <p>Written by Manabu Bannai</p> 38 </div> 39 </div> 40 <div class="container-fluid nav-bg"> 41 <div class="container"> 42 <div class="row"> 43 <nav> 44 <ul class="nav navbar-nav"> 45 <li> 46 <a href=""> 47 <i class="fa fa-home" aria-hidden="true"> 48 </i> 49 </a> 50 </li> 51 <li> 52 <a href=""> 53 <i class="fa fa-home" aria-hidden="true"> 54 </i> 55 プロフィール 56 </a> 57 </li> 58 <li class="dropdown"> 59 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 60 <i class="fa fa-line-chart" aria-hidden="true"> 61 </i> 62 SEO 63 <span class="caret"> 64 </span> 65 </a> 66 <ul class="dropdown"> 67 <li> 68 <a href=""> 69 SEO 70 </a> 71 </li> 72 <li> 73 <a href=""> 74 Affiliate 75 </a> 76 </li> 77 </ul> 78 </li> 79 <li class="dropdown"> 80 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 81 <i class="fa fa-code" aria-hidden="true"> 82 </i> 83 CODE 84 <span class="caret"> 85 </span> 86 </a> 87 <ul class="dropdown"> 88 <li> 89 <a href=""> 90 ALL 91 </a> 92 </li> 93 <li> 94 <a href=""> 95 WordPress 96 </a> 97 </li> 98 <li> 99 <a href=""> 100 PHP 101 </a> 102 </li> 103 <li> 104 <a href=""> 105 Codeigniter 106 </a> 107 </li> 108 <li> 109 <a href=""> 110 Laravel 111 </a> 112 </li> 113 <li> 114 <a href=""> 115 JavaScript 116 </a> 117 </li> 118 <li> 119 <a href=""> 120 CSS 121 </a> 122 </li> 123 </ul> 124 </li> 125 <li class="dropdown"> 126 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 127 <i class="fa fa-globe" aria-hidden="true"> 128 </i> 129 LIFE 130 <span class="caret"> 131 </span> 132 </a> 133 <ul class="dropdown"> 134 <li> 135 <a href=""> 136 ALL 137 </a> 138 </li> 139 <li> 140 <a href=""> 141 Work 142 </a> 143 </li> 144 <li> 145 <a href=""> 146 Blog 147 </a> 148 </li> 149 <li> 150 <a href=""> 151 Game 152 </a> 153 </li> 154 <li> 155 <a href=""> 156 Freelance 157 </a> 158 </li> 159 <li> 160 <a href=""> 161 Remote Work 162 </a> 163 </li> 164 </ul> 165 </li> 166 <li> 167 <a href=""> 168 <i class="fa fa-btc" aria-hidden="true"> 169 </i> 170 CRYPTO 171 </a> 172 </li> 173 <li> 174 <a href=""> 175 <i class="fa fa-plane" aria-hidden="true"> 176 </i> 177 TRAVEL 178 </a> 179 </li> 180 <li> 181 <a href=""> 182 <i class="fa fa-spinner" aria-hidden="true"> 183 </i> 184 THOUGHT 185 </a> 186 </li> 187 <li> 188 <a href=""> 189 <i class="fa fa-glass" aria-hidden="true"> 190 </i> 191 PARTY 192 </a> 193 </li> 194 </ul> 195 </nav> 196 </div> 197 </div> 198 </div> 199 </header> 200 201 <!-- Bootstrap3 202 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 203 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> --> 204 205 <!-- Bootstrap4 --> 206 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 207 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 208 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 209 210 211 212</body> 213</html>
該当のソースコード
navに関連するスタイリングは行なっていないが念のため掲載。
CSS
1@charset "UTF-8"; 2 3body { 4 margin: 0; 5} 6 7.container{ 8 display: flex; 9} 10 11.writer{ 12 margin-right: 15px; 13 /* flex-basis: auto; */ 14 15} 16 17.writer p{ 18font-family: "A-OTF-ShinGoPro-Regular"; 19font-size: 13px; 20color: #6f6f6f; 21width: 80px; 22margin-top: 35px; 23line-height: 2em; 24} 25 26/* .class{ 27 display: inline-block; 28} */ 29 30.logo{ 31 flex: 1; 32 margin-left: 15px; 33 margin-right: 15px; 34 width: 100%; 35 height: auto; 36} 37 38.logo img{ 39 width: 100%; 40 min-width: 386px; 41 height: auto; 42 margin-top: 30px; 43} 44 45 46@media (min-width:686px){ 47 .writer p{ 48 width: 100px; 49 } 50} 51 52 53@media (min-width:768px){ 54 .container{ 55 width:750px; 56 margin-left: auto; 57 margin-right: auto; 58 59 } 60 61 .logo{ 62 flex: 0; 63 } 64 65 .logo img{ 66 min-width: 95px; 67 margin-top: 33px; 68 /* vertical-align: middle; */ 69 } 70 71 .writer p{ 72 width: 200px; 73 margin-left: 15px; 74 } 75}
試したこと
・誤字、語順誤りの確認
・Bootstrap3と4のCDN使用に必要なテンプレートを両方試す→変化なし
・参考ブログのCSSソースをすべてコピペし、自分で書いたHTMLを試す→変化なし
・参考ブログのHTMLソースをすべてコピペしチェック→当然、参考ブログと同じ表示になる
・参考ブログのHTMLソースのstylesheetを削除しチェック→自分で書いたHTMLと同じような表示になる
・参考ブログのstylesheetから、必要な情報を確認するも、情報量が膨大で何が問題解決に必要な情報かわからない
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/14 20:53
2020/08/15 06:28
2020/08/15 13:36