boostrapが適用されない

実現したいこと

Boostrapを適用させたいです。

問題点、エラーコード

headにBootstrapの読み込みコードを記述しているのに、Bootstrapが適用されません。
変なところがあればすべてご指摘お願いします。
以下のリンク先のようなレイアウトにしたいです。また、自分の今の表示も添付しておきます。

（+αで、画像が荒くなってしまうのも気になるのですが、解決方法があれば教えていただきたいです。）
Airbnb

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="responsive.css">
9    <link rel="stylesheet" href="style.css">
10    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
11
12    <!-- Bootstrap CSS -->
13    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
14
15    <title>airbnb</title>
16  </head>
17
18  <body>
19    <header>
20      <ul>
21        <li><span class="fab fa-airbnb"></span></li>
22        <li>概要</li>
23        <li>準備</li>
24        <li>安全</li>
25        <li>マネープラン</li>
26      </ul>
27      <button name="button" onclick="location.href='#'">はじめる</button>
28    </header>
29  
30    <div class="top container-fluid">
31      <div class="row">
32        <div class="top-box offset-el-8 col-el-3 offset-el-1">
33          <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
34          <h2> 宿泊施設の内容を記入</h2>
35          <input class="所在地">
36          東京
37          <input class="建物タイプ">
38          まるまる貸切
39          <input class="ゲスト4人">
40          ゲスト4人
41          <button class="top-button" onclick="location.href='#'" >はじめる</button> 
42        </div>
43      </div>
44    </div>
45

css
1header{
2  height: 80px;
3}
4header ul {
5  list-style: none;
6  display: inline-block;
7}
8header ul li{
9  display: inline-block;
10}
11
12.top {
13  height: 518px;
14  width: 100%;
15  background-image: url(image/photographer-865295__340.webp);
16  background-size: cover;
17}
18.top-box{
19  width: 460px;
20  height: 420px;
21  background-color: white;
22}

m.ts10806

2020/10/09 02:31

>boostrap Bootstrap です。「ブートストラップ」

Sakupi

2020/10/09 02:32

申し分けないです。修整いたします。

m.ts10806

2020/10/09 02:32

>適用されないと仰いますが、どんなゴールを描いているのでしょうか。コードを見た感じでは、ほとんどBootstrapが持っている機能を適用させていないようですが。

Sakupi

2020/10/09 02:38

自分の画像では、top＞top-boxが左寄せになっていますが、リンク先のサイトのようにレイアウトできれば。と考えていました。そこで、Bootstrapを該当箇所のhtmlに記述してみましたが、変化なしで困っていました。説明不足で申し訳ありません。

Lhankor_Mhy

2020/10/09 02:38

ご提示のコードを当方で試してみましたが、「Boostrapが適用されません」という問題は発生しませんでした。

Sakupi

2020/10/09 02:41

返信ありがとうございます！私のコードでリンクさきのようなtopのレイアウトになったということでしょうか！？

Lhankor_Mhy

2020/10/09 02:44

いえ、そうはならないです。

m.ts10806

2020/10/09 02:46 編集

あ、回答してますが「Boostrap」がまだ結構残ってます。ブラウザ内も文字列検索できるので、活用してください。

Lhankor_Mhy

2020/10/09 03:25

ご提示のコードで、Bootstrapとして有効なクラスは、container-fluid と row だけです。それはご理解されていますよね？逆に、何をどうしたいのかを書いた方が話が早いと思いますよ。

Sakupi

2020/10/09 03:51

<div class="top-box offset-el-8 col-el-3 offset-el-1"> の部分が有効でない理由が理解できていません。。申し分けないです。勉強し直します！

Lhankor_Mhy

2020/10/09 03:52

offset-el-8 というクラスについて書かれたドキュメントはどこにありますか？

Sakupi

2020/10/09 03:52

cloとoffsetを有効にしてtop-boxをお手本サイトのような配置にしたいです。

Sakupi

2020/10/09 03:55

offset-el-8は、htmlコード、上から26行目です！

Sakupi

2020/10/09 03:56

下から13行目です。

m.ts10806

2020/10/09 03:58 編集

Sakupiさん https://getbootstrap.com/docs/4.5/getting-started/introduction/ の左上の「Search」から探してみると良いですよ。 >書かれたドキュメントはどこにありますか？というのは「Bootstrapの機能として存在するかどうか確認してください」と指摘されています。なんなら https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css を直接参照してコード内検索しても良いです。ないものはないですから。

Lhankor_Mhy

2020/10/09 04:04 編集

offset-{breakpoint}-* で使えるブレイクポイントは、sm,md,lg,xl のようですね。ブレイクポイントについては、こちらに記述されていますが、全てに対して有効とは限らないようなのでご注意ください。 https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

Sakupi

2020/10/09 04:12

回答ありがとうございます！！ドキュメントにoffsetがあったので、混乱しておりました。なるほど！！！！！ｅｌでは、有効でなかったんですね！！お時間とらせてしまい、申し訳ありませんでした。ご丁寧に、ありがとうございました！

Lhankor_Mhy

2020/10/09 07:36

ご解決されたのであれば、自己解決の処理をお願いします。 https://teratail.com/help#resolve-myself

行動規範の内容に同意します

回答2件

試しに同じコードで下記のようにしてみました。

HTML
1
2      <button name="button" class="btn btn-primary" onclick="location.href='#'">はじめる</button>

対応を入れた場所はきちんと適用されています。
Bootstrapの機能を使っていないだけですね。
読み込むだけで何かしてくれるかというとそうではありません。
一部、初期で反映されている部分はありますが、それ以外は自分で組まないといけません。

あとは、ドキュメントを確認し、「何をどう実現したいか」考えて組んでみてください。

ただ、下記は良くありません。

html
1    <link rel="stylesheet" href="responsive.css">
2    <link rel="stylesheet" href="style.css">
3    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
4
5    <!-- Bootstrap CSS -->
6    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
7
8

CSSは基本は後勝ちなので、独自のスタイルを当てたいのでしたらCSSフレームワークの読み込みより後に読み込ませないと、意味がなくなります。
内容分かりませんが、Bootstrap自体にレスポンシブの機能があるのでresponsive.cssの必要性は一考したほうが良さそうです。

投稿2020/10/09 02:44

m.ts10806

総合スコア80875

Sakupi

2020/10/09 02:51

回答ありがとうございます！ headでBootstrapを読み込んで、下記のようにBootstrapの機能を使ってレイアウトしているつもりなのですが、これでは使えていないということでしょうか？ <div class="top container-fluid"> <div class="row"> <div class="top-box offset-el-8 col-el-3 offset-el-1"> <h1>Airbnbホストになって、暮らしをレベルアップ</h1> <h2> 宿泊施設の内容を記入</h2> <input class="所在地"> 東京 <input class="建物タイプ"> まるまる貸切 <input class="ゲスト4人"> ゲスト4人 <button class="top-button" onclick="location.href='#'" >はじめる</button> </div> </div> </div> 実際、この記述では、反映されないようで。。