--- title: airbnbのページ模写(途中経過)~完成(?)した事にした 先に進むために! tags: HTML5 CSS3 bootstrap4 JavaScript author: mamono slide: false --- お久しぶりです。やりたいことがころころ変わる魔物です。 途中経過などは→[ギタリストの魔物のツイッター](https://twitter.com/ma_mo_no_da "ギタリストの魔物")で随時報告してます! "#魔物の努力n日目"っていうハッシュタグでnの位置に数字入れると過去の見れます! ※まだ1~5くらいしかないけど! (2020/11/21時点) #何をしているか 多少タグの知識はあったんですが、 web系の勉強してたら1度は目にしたことあるんじゃないかっていう 有益なツイートをたくさんしてくださるマナブさんのロードマップを参考にしています。 ・Twitter([@manabubannai](https://twitter.com/manabubannai)) ・YouTube [マナブ](https://www.youtube.com/channel/UCb9h8EpBlGHv9Z896fu4yeQ?view_as=subscriber) 登録者数**約49万人!!** ・運営されてるサイト→[マナブログ](https://manablog.org/code-life-start/)(参考にしているロードマップのリンクです) ※ブクマ推奨 #実際にやったこと 上からザーッと読み進め 最初は ・はじめてのHTML(24本) ・はじめてのCSS(34本) これを2日かけて視聴しました。 ちゃんとその通りに動くかエディタにコードを書いて手を動かしながら。 1本1本は5分前後と短いのですが、一気見しようとするとボリュームがすごいです・・ CSSの終わりらへんはpaddingとかmarginとか色々出てきて苦痛でしたのでとりあえず **動画を見るだけ見て実際扱うときにまた見直して理解できればいいや!!** って感じで進めました。 #現在どこまで進んだか 今のところコピペは文字だけをテキストとしてとってくる 以外は一切やっておらず進められていることに気分が高まっています。。 Bootstrapの4系、レイアウトはflexの理解が浅かったのでGridレイアウトを使用しています。 JavaScriptはまだファイルだけ状態なので中身はありません。 簡単に環境説明 ・HTML5 ・Bootstrap4系 ・Gridレイアウト ・CSS3 ・JavaScript 分かる人から見ればまだまだ見づらいかもしれないけどコードはこんな感じ ```HTML:index.html   練習サイト

Airbnbにお部屋を
掲載しよう

活気に満ちたホストコミュニティに参加し、
記憶に残るとっておきの滞在を旅行者に提供
しながら、好きなことを追求するための収入を
得ましょう。
test

製作途中・・

ホスティングの流れを確認しよう


城からコンドミニアムまで、ゲストはあらゆる宿泊先を予約します


Airbnbはみなさまの安全を最優先に考えております

ホスト向けの保険と補償

万が一の事故の際にホストのみなさまをお守りするため、最大US$1,000,000の物損補償および最大US$1,000,000の賠償責任保険がAirbnbの全予約に自動付帯されます。

ホストを守るAirbnbの取り組み

新型コロナウイルスに関する安全ガイドラインとサポート

コミュニティのみなさまの健康を守るため、Airbnbは専門家と連携し、メンバー全員のための安全対策とホスト向けの清掃スタンダードを作成しました。

清掃スタンダードのご案内

すべてのゲストに適用される要件

ホストのみなさまにご安心いただくため、Airbnbでは、予約前にゲストに身分証明書の提示を求め、過去のホストによるゲストのレビューを閲覧できるようにしています。Airbnbの新しいゲスト基準ポリシーは、これまで以上に高い行動基準をゲストに求めるものです。

安心してホスティングしていただくためのAirbnbの取り組み

予想ホスティング収入額をチェック

Fukuokaでホスティングして、
ひと月あたり最大¥ 58,441の収入を得ましょう

予想ホスティング収入額の計算方法

予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください



ここに新しく作る



ゲストが利用できる特別なスペースがあればお知らせください

ここから下は機能的な実験のテスト領域です

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·プライバシー·利用規約·サイトマップ·企業情報 ``` ```CSS: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のリンク)](https://ja.wordpress.org/) xrea freeの中でwordpressはすぐインストールできました。 ##2020/11/22 時刻21:24 現在 なんとかパーツごとにphp化してxreaのサーバー側にファイルアップロードして 公開できました! ベーシック認証かけてます! passwordは【mamonokun】です! http://www.mamonogt.shop/nptest/ 正直functions.phpとかphpの組み込み方はほぼ理解できなかったのでコピペした(^_-)-☆!! 完璧ではないけど1から公開までは結構大変だった!!!! 次は何するかわからないけどひとまず模写はこれでひと段落! #ここからはメモ書き!! ```header.php ```