Q&A
<a>タグと<ul>タグの終了タグがないようですが、誤植ですか。また、<head>内でbootstrapの3.2.0のcssを読み込んでいるのに、jsはローカルの3.3.7を読み込んでいるのが気になりました。
<!DOCTYPE html> <head><link rel="stylesheet" type="text/css" href=".css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="header"> <div class="box"> <p class="font">Let's start UBER in Hawaii <span class="span">～feel free to work with driving～</span></p> </div> </div> <!--<h1><a href=""><img src="cola.jpg"></h1>--> <div class="row est"> <div class="col-sm-8"> <img src="est.jpg" class="img-responsive"> <h3>～What is UBER～</h3> <p>First step</p> </div> <div class="col-sm-4"> <div class="submenu panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Category</h3> </div> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="">What is UBER? <li>ジュース </div> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
body { /*background-color:blue;*/ } .container-fluid { margin-left:auto;/margin-right:auto; border:1px solid white; /* width:1200px;*/ } .header { height:80px;width:1257px; background-color:black; color:white; padding:5px; margin-bottom:5px;margin-top:-15px; margin-left:-13px; padding:15px; } .est { padding:20px; background-color:#dfe3e8; } .est img { max-width:95%; height:auto; margin:0 0 30px 0; vertical-align:bottom; } .span { font-size:15px; } .cyc { width:600px;height:500px; } .color { background-color:lightgray; } .font { font-size:35px; } img { /*width:100%;height:100px;border:1px solid lightgray;*/ } .ab { margin-top:30px; } .container-fluid { background-color:lightgray; } .col-sm-12 { width:1050px;height:1000px; background-color:#F5ECCE; } .est h3 { margin:0 0 20px 0; font-size:28px; line-height:1.2; } .est p { margin: 0 0 20px 0; font-size:14px; line-height:1.6; } .entry .added { margin:0 0 20px 0; } .nav li{ margin-top:-25px;margin-left:15px; } .menu { padding:20px; background-color:#a2c1c4; border:1px solid black; color:#0602ed; } .submenu h3 { margin:0 0 10px 0; font-size:18px; line-height:1.2; } .submenu ul, .submenu ol { margin:0; padding:0; font-size:14px; line-height:1.4; list-style:none;} .submenu li a { position:relative; display:block; padding:10px 5px 10px 30px; color:#000; text-decoration:none; } .submenu li a:hover { background-color:#fec; } .submenu li a:before { position:absolute; left:5px; top:12px; content:'＼f061'; color:#8abc60; font-family:'FontAwesome'; font-size:12px; line-height:1; }
上記を試すも、
<ul class="nav nav-pills nav-stacked"> <li><a href="">What is UBER? <li>ジュース
の部分の文字が、文字化けします。
F12で、確認したところ、
Failed to load resource: net::ERR_FILE_NOT_FOUND bootstrap.min.js
と表示されます。
これがなくては、いけないとわかったのですが、
bootstrapのディレクトリ構造をきちんと構築できているか、自信がありません。
まず、bootstrapのフォルダをデスクトップに解凍しました。
htmlのファイルとcssファイルの入っているフォルダをboostrap-3.3.7-dist直下に置きました。それで、上記エラーです。
どうすれば、解消できますでしょうか。
回答2件
0
作成されたhtmlファイルの文字コードに合わせて、charsetを設定すれば解決するかと思います。
以下、参考。
(htmlファイルの文字コードがUTF8の場合)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
あと、<div class="header">の前に全角スペースが4つありますね。
また、CSSファイルの.submenu li a:beforeのcontentの'＼f061'もバックスラッシュが全角のようです。
投稿2017/11/04 19:47
総合スコア201
ベストアンサー
あなたの回答
tips
プレビュー
