お久しぶりです。やりたいことがころころ変わる魔物です。
途中経過などは→ギタリストの魔物のツイッターで随時報告してます！

"#魔物の努力n日目"っていうハッシュタグでnの位置に数字入れると過去の見れます！
※まだ1~5くらいしかないけど！　(2020/11/21時点)

#何をしているか

多少タグの知識はあったんですが、
web系の勉強してたら1度は目にしたことあるんじゃないかっていう
有益なツイートをたくさんしてくださるマナブさんのロードマップを参考にしています。

・Twitter(@manabubannai)
・YouTube マナブ登録者数約49万人！！
・運営されてるサイト→マナブログ（参考にしているロードマップのリンクです）
※ブクマ推奨

#実際にやったこと
上からザーッと読み進め
最初は

・はじめてのHTML（24本）
・はじめてのCSS（34本）

これを2日かけて視聴しました。
ちゃんとその通りに動くかエディタにコードを書いて手を動かしながら。
1本1本は5分前後と短いのですが、一気見しようとするとボリュームがすごいです・・

CSSの終わりらへんはpaddingとかmarginとか色々出てきて苦痛でしたのでとりあえず

動画を見るだけ見て実際扱うときにまた見直して理解できればいいや!!

って感じで進めました。

#現在どこまで進んだか

今のところコピペは文字だけをテキストとしてとってくる
以外は一切やっておらず進められていることに気分が高まっています。。

Bootstrapの4系、レイアウトはflexの理解が浅かったのでGridレイアウトを使用しています。
JavaScriptはまだファイルだけ状態なので中身はありません。

簡単に環境説明

・HTML5
・Bootstrap4系
・Gridレイアウト
・CSS3
・JavaScript

分かる人から見ればまだまだ見づらいかもしれないけどコードはこんな感じ

index.html

　<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--BootstrapのCSSの読み込み-->
        <link rel="stylesheet" href="..\no1\BS\bootstrap-4.5.3-dist\css\bootstrap.min.css">

        <!--jQueryの読み込み
        Bootstrapのjsを使うためにはjQueryが必要なので先に読み込む必要がある-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        
        <!--Bootstrapのjsの読み込み-->
        <script src="..\no1\BS\bootstrap-4.5.3-dist\js\bootstrap.min.js"></script>

        <!--自作jsの読み込み-->
        <script src="index.js"></script>
        
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>練習サイト</title>
    </head>

    <body>
        <div ID="container-1">
            <div class="f-item">
                
                <h1><a href="index.html">Airbnbにお部屋を<br>掲載しよう</a></h1>
             
                活気に満ちたホストコミュニティに参加し、<br>
                記憶に残るとっておきの滞在を旅行者に提供<br>
                しながら、好きなことを追求するための収入を<br>
                得ましょう。<br>
           
                <input type="button" class="btn btn-danger btn-sm" value="はじめる">

            </div>
            <!--container-1の中のコンテナ-->
            <div class="f-item02">test</div>

        </div>
        <hr color="black">
            製作途中・・
        <hr color="black">

        <div class=midashi><h1>ホスティングの流れを確認しよう</h1></div>
        <hr color="black">
        
        
        <div class=midashi><h1>城からコンドミニアムまで、ゲストはあらゆる宿泊先を予約します</h1></div>
        <hr color="black">

        <div class=midashi><h1>Airbnbはみなさまの安全を最優先に考えております</h1></div>
        
        <div ID="container-2">
            <div class="f-item2">
            <h2>ホスト向けの保険と補償</h2>
                万が一の事故の際にホストのみなさまをお守りするため、最大US$1,000,000の物損補償および最大US$1,000,000の賠償責任保険がAirbnbの全予約に自動付帯されます。
                
                <br><br>
                <a href="#">ホストを守るAirbnbの取り組み</a>
            </div>

            <div class="f-item2">
            <h2>新型コロナウイルスに関する安全ガイドラインとサポート</h2>
                コミュニティのみなさまの健康を守るため、Airbnbは専門家と連携し、メンバー全員のための安全対策とホスト向けの清掃スタンダードを作成しました。
                
                <br><br>
                <a href="#">清掃スタンダードのご案内</a>
            </div>

            <div class="f-item2">
            <h2>すべてのゲストに適用される要件</h2>
                ホストのみなさまにご安心いただくため、Airbnbでは、予約前にゲストに身分証明書の提示を求め、過去のホストによるゲストのレビューを閲覧できるようにしています。Airbnbの新しいゲスト基準ポリシーは、これまで以上に高い行動基準をゲストに求めるものです。
                
                <br><br>
                <a href="#">安心してホスティングしていただくためのAirbnbの取り組み</a>
                
            </div>
        </div>

    <div id="container">

            <div id="item-a">
                <p>予想ホスティング収入額をチェック</p>
                <p><h1>Fukuokaでホスティングして、<br>ひと月あたり最大<span style="color: rgb(182, 41, 41);">¥ 58,441</span>の収入を得ましょう</h1></p>
                <a href="#">予想ホスティング収入額の計算方法</a>
            </div>

            <div id="item-b">
                <p>予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</p>
                <input type="text"  class="inText" value="所在地"><br>
                <select name="room" class="room" value="まるまる">
                    <optgroup label="まるまる貸し切り">
                            <option style="color: black;" value="まるまる貸し切り">
                                まるまる貸し切り<br>
                                この文から下に表示させたい（改行）
                            </option>

                            <option>
                                個室

                            <option>
                                シェアルーム

                            </option>

                        </optgroup>
                </select>

                <hr color="black">
                ここに新しく作る
                
                <hr color="black">
                

                <input type="text"  class="inText" value="まるまる貸切"><br>
                <input type="text"  class="inText" value="ゲスト４人"><br><br>

                <p>ゲストが利用できる特別なスペースがあればお知らせください</p>
                <input type="button" class="btn btn-dark btn" value="リスティングの掲載をはじめる">
            </div>         
        
    </div>    

    <p>ここから下は機能的な実験のテスト領域です</p>
        
       
        
        
        Airbnbがサポートいたします
        24時間365日対応のカスタマーサポート
        リスティングの設定からゲストに関する懸念まで、Airbnbのグローバルチームが電話、メール、チャットですべてのステップをサポートします。
        成功に役立つさまざまなツール
        Airbnbのツールを活用すれば、的確な料金設定、予約管理、ゲストとのメッセージの送受信、支払いの受け取り、ホスティング収入の追跡などが簡単に行えます。
        カスタマイズされたお役立ち情報
        地域の旅行トレンド情報をお伝えするとともに、高評価レビューを獲得し、ビジネスを成長させるための改善策を提案します。
        学びとトレーニング
        リソースセンターでアドバイスを見つけたり、無料オンラインセミナーでホスティングの基礎を学んだり、コミュニティセンターでホスト仲間とつながったりしましょう。
        ホスティングをはじめる準備はできましたか？
        ご自身のホスティングスタイルに合ったリスティングを作成しましょう。お部屋を輝かせるヒントをご紹介します。手続きは今すぐはじめていつでも中断できます。

        はじめる
        企業情報
        Airbnbのご利用方法
        ニュースルーム
        Airbnb Plus
        Airbnb Luxe
        HotelTonight
        Airbnbビジネスプログラム
        オリンピック
        採用情報
        コミュニティ
        ダイバーシティ＆ビロンギング
        アクセシビリティ対応
        Airbnbアソシエイト
        お友達を招待
        ホスト
        お部屋を掲載
        オンライン体験をホストする
        体験をホストする
        責任あるホスティング
        オープンホーム
        リソースセンター
        コミュニティセンター
        サポート
        Airbnbの新型コロナウイルスに対する取り組み
        ヘルプセンター
        キャンセルオプション
        近隣コミュニティサポート
        信頼＆安全
        言語を選択
        日本語 (JP)
        通貨を選択
        ¥
        JPY
        Airbnb Global Services Limited
        観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)
        © 2020 Airbnb, Inc. All rights reserved·プライバシー·利用規約·サイトマップ·企業情報

    </body>
</html>

style.css

@charset "utf-8";

a:link{
    color: #000;
    text-decoration: underline;
}

a:visited{
    color: #000;
}

h1{
   text-align: left;
}

h2{
    padding: 10px;
    background-color: lightslategray;
}

.midashi{
    
    background-color: white;
}

#container-1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: lightblue;
}

.f-item{
    display: grid;
    text-align: left;
}

.f-item02{
    background-color: red;
}

#container-2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color:white;
}


#container{
    grid-template-columns: 1fr 1fr;
    width: 100%;
    display: grid;
    padding: 50px;
    margin: 0px ;
    background-color: rgb(231, 203, 203);
}

#item-a{
    grid-template-rows: 100px 50px;
}

#item-b{
   
    margin: 0px 0px 0px 0px;
    padding: 50px 100px 50px 100px;
    border-radius: 15px;
    grid-row: 1/3;
    grid-column: 2/4 ;
    background-color: white;
}

.room{
    width: 100%;
}

.room > h1{
    color: black;
}

.inText{
    border-radius: 2px;
    color: rgba(119, 119, 119, .7);
    width: 100%;
}


.box{
     margin-left: auto;
}

.btn{
    margin: 10px 0px 10px 0px;
    padding: 10px 15px 10px 15px;
    
}

.btn-sm{
    margin:10px 80% 10px 10px;
}

.btn-dark{

    background-color: rgb(33, 34, 34);
    width: 100%;
    
}


.btn:hover{
    color: #000;
}

div{
    margin: 5% 5% 5% 5%;
    ;
}


body{
    font-family: "UD Digi Kyokasho NK-B";
    background-color: aliceblue;
}

#レンタルサーバーと公開HP
練習成果を公開することを目的としてるだけなので

無料のサーバーとWordpress

を使用します。

サーバー:xrea free 現時点だと1年後に更新しないなら無料らしい　1年もあれば充分！！
Wordpress:(WordPressのリンク)

xrea freeの中でwordpressはすぐインストールできました。

##2020/11/22 時刻21:24 現在
なんとかパーツごとにphp化してxreaのサーバー側にファイルアップロードして
公開できました！

ベーシック認証かけてます！
passwordは【mamonokun】です!
http://www.mamonogt.shop/nptest/

正直functions.phpとかphpの組み込み方はほぼ理解できなかったのでコピペした(^_-)-☆！！

完璧ではないけど１から公開までは結構大変だった！！！！

次は何するかわからないけどひとまず模写はこれでひと段落！

#ここからはメモ書き！！

header.php

<!--CSSとBootstrapの読み込みはこれをそのままネットからコピペしたら読み込んだ-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"   type="text/css" media="all" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>