Q&A
何度か指摘していますが
全角のファイル名、インラインスタイル
直されないと技術として使えるものにはなりません。
HTML,CSS、bootstrapでサイトの模写をしているのですが、文字のフォントを変えられません。コードを載せるので、改善点をお願いします。
２９０万のところです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Bootstrapの練習</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/Bootstrapの練習.css"> <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <h1></h1> <button type="button" class="btn btn-default">概要</button> <button type="button" class="btn btn-default">準備</button> <button type="button" class="btn btn-default">安全</button> <button type="button" class="btn btn-default">マネープラン</button> <div class="text-right pr-5"> <button type="submit" class="btn btn-danger">はじめる</button> </div> <div class="background-image"> <div class="row justify-content-end"> <div class="border col-5"> <br> <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1> <h2 class="size1"><b>宿泊施設の内容を記入</b></h2> <br> <div class="row clear_form"> <div class="col-md"> <form> <div class="form-group"> <input type="text" class="form-control"> <div class="d-flex"> <select class="form-control w-50"> <option>まるまる貸切</option> <option>個室</option> <option>シェアルーム</option> </select> <select class="form-control w-50"> <option>ゲスト1人</option> <option>ゲスト2人</option> <option>ゲスト3人</option> <option>ゲスト4人</option> <option>ゲスト5人</option> <option>ゲスト6人</option> <option>ゲスト7人</option> <option>ゲスト8人</option> <option>ゲスト9人</option> <option>ゲスト10人</option> <option>ゲスト11人</option> <option>ゲスト12人</option> <option>ゲスト13人</option> <option>ゲスト14人</option> <option>ゲスト15人</option> <option>ゲスト16人</option> </select> </div> <button type="submit" class="btn btn-danger ">はじめる</button> </form> </div> </div> </div> </div> </div> </div> <div class="flex1_div"> <div class="first_div"> <h2 style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2> <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p> </div> <div class="second_div"> <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2> <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p> </div> </div> <h2 style="text-align:center" class="px"><b>3ステップでホスティング</b></h2> <div class="flex1_div"> <div class="third_div"> <h3><b>無料でお部屋を掲載</b></h3> <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p> </div> <div class="f4_div"> <h3><b>ホスティング方法を設定</b></h3> <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。 </p> </div> <div class="f5_div"> <h3><b>はじめてのゲストが来ます！</b></h3> <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p> <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button> </div> </div> <div><p class="px3">“</p> <h2 style="text-align:left" class="px1" > 「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2> <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p> <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button> </div> <div class="background-image1"> </div> <h2 style="text-align: center"class="px"><b>万一の時も安心です</b></h2> <div class="flex_div"> <div class="f6_div"> <p class="px4">大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p> <button type="button" class="btn btn-link mt-1 px2">ホストを守るAirbnbの仕組みをチェック</button> </div> <div class="f7_div"> <ul> <li>予約前に政府発行の身分証明書を求める権限</li> <li>ハウスルールに同意しないと泊まれない</li> <li>過去の宿泊のレビューもばっちり読める</li> <li>財物損害は¥100,000,000まで無料で補償</li> <li>$1,000,000の賠償責任保険が無料で付帯</li> <li>24時間365日対応グローバルカスタマーサポート</li> </ul> </div> </div> </div> <div class="background-image2"> </div> <h2 style="text-align:center" class="px"><b>シンプルな決済</b></h2> <div class="flex1_div"> <div class="third_div"> <h3><b>料金設定は完全に自由</b></h3> <p>料金は常に自由に選択できます。 迷ったときには、 域内需要に合わせて設定できるツールがあります。</p> </div> <div class="f4_div"> <h3><b>手数料が安い</b></h3> <p>登録に費用は一切かかりません。Airbnbは通常、予約ごとに業界で最低の均一3％をサービス料としていただいております。 </p> </div> <div class="f5_div"> <h3><b>迅速な支払い</b></h3> <p>ゲストのチェックイン後に、Paypal、直接振り込み、またはその他の利用可能な方法で受取金を送金できます。</p> <button type="button" class="btn btn-link mt-1">Airbnb収入を得るまでの流れを見る</button></div> </div> <div class="f-container"><p class="px3">“</p> <h2 style="text-align:left" class="px1" > ホスト収入でキッチンリフォーム。お家をいろいろアップグレードしました。</h2> <p style="text-align:left" class="px1">Tessaさんはロンドン在住。ホストになって経済的なゆとりができました</p> <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button></div> <h2 style="text-align:center" class="px"><b>夢を共有する仲間が世界中に</b></h2> <div class="flex_div"> <div class="f8_div"> <h3 class="font1"><b>290万</b></h3> <p>Airbnbのホスト</p> </div> <div class="f9_div"> <h3><b>80万</b></h3> <p>Airbnbにおける毎晩の平均宿泊数</p> </div> <div class="f10_div"> <h3><b>14,000</b></h3> <p>月あたりの新規登録ホスト数</p> </div> </div> </body> </html>
.px { font-size: 320%; padding-top: 8%; padding-bottom: 5%; } .size1{ font-size: 100%; } .size2{ font-size: 170%; } .size3{ font-size: 170%; } .background-image{ background-image: url(../airbnb.png); background-repeat: no-repeat; background-position: center center; background-size: cover; padding-bottom:33% } .flex1_div { display: flex; justify-content: center; } .first_div { display: inline-block; width: 24%; padding:0.3%; margin: 0 10px 0 0; } .second_div { display: inline-block; width: 24%; padding:0.3%; margin: 0 10px 0 0; } .third_div{ display: inline-block; width: 16%; padding:0.3%; margin: 0 10px 0 0; } .f4_div{ display: inline-block; width: 16%; padding:0.3%; margin: 0 10px 0 0; } .f5_div{ display: inline-block; width: 16%; padding:0.3%; margin: 0 10px 0 0; } .px1{ width: 32%; padding-left: 10%; } .px2{ padding-left: 10%; } .background-image1{ background-image:url(../airbnb3.png); height:80%; } .form-control{ text-align: left } .form-group{ width: 100%; } .clear_form:after{ content: ""; display: block; clear: both; } .px3{ font-size: 500%; color:orange; padding-left: 10%; } ul { background: white; padding: 0 0.5em; position: relative; } ul li { line-height: 1.5; padding: 0.5em 0 0.5em 1.5em; border-bottom: 2px solid white; list-style-type: none!important; } ul li:before { font-family: "Font Awesome 5 Free"; content: "\f00c";/*アイコン種類*/ position: absolute; left : 1.0em; /*左端からのアイコンまで*/ color: #668ad8; /*アイコン色*/ } ul li:last-of-type { border-bottom: none;/*最後の線だけ消す*/ } .f6_div{ /* display: inline-block;*/ width: 45%; padding:0.3%; margin: 0 10px 0 0; } .f7_div{ /*display: inline-block;*/ width: 30%; padding:0.3%; margin: 0 10px 0 0; } /*.px4{ width: 34%; padding-left: 10%; }*/ h2.px{ text-align: center; } .flex_div{ max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-evenly; } .background-image2{ background-image:url(../airbnb6.png); height: 80%; } .f8_div{ display: inline-block; width: 16%; padding:0.3%; margin: 0 10px 0 0; } .f9_div{ display: inline-block; width: 25%; padding:0.3%; margin: 0 10px 0 0; } .f10_div{ display: inline-block; width: 22%; padding:0.3%; margin: 0 10px 0 0; } .font1{ font-family:"Monotype Corsiva"; }
インラインスタイルとは、HTMLの中に記述する事を言うのでしょうか？また、全角のファイル名というのはどこの事を言っているのでしょうか？
＞インラインスタイル
style=でhtmlに直に書くこと
＞全角のファイル名
Bootstrapの練習.css
なるほど、ありがとです。全角のファイル名に関しては、なぜでしょうか。
多くのWebサーバーのOSがWindowsやMacではないためです。
「ローカル上で動いてるけどサーバーにアップロードしたら動かなくなった」の原因の多くが全角ファイル名によるリンク。
プログラミングにおいて全角を使うのは文章とかコメントくらいにとどめておくべきという考え方もありますけどね。
あとインラインスタイルの是非についてあまり認識されてないようなので念のため言っておくと、管理面メンテナンス面です。なんのためにCSSでクラスを指定して制御するのか？というところになります。
それにtext-align系の機能ならBootstrapに既にある機能。わざわざ自分で作ったりインラインにする必要はありません。
https://getbootstrap.com/docs/4.0/utilities/text/
基本的なレイアウトはbootstrapで組み、色や本当に微調整のレベルを自分で付け足すのが大体のやり方です。
オリジナルせいを求めるならbootstrap本体に手をつけられるくらいCSSやbootstrapの特性に精通している必要があります。
なるほど、サーバーにアップロードした際に動かなくなるから全角は駄目なのですね。
text-align系ならbootstrapにありましたか。次回からbootstrapで位置調整します。アドバイスありがとうございます。
リンクするということはURLになるということですからね。
それに、「次回から」だと忘れますよ。すぐやるから身に付きます。
回答1件
0
ベストアンサー
Webフォントなどを使用していますか?
フォントを変更するためには、font-family: "Monotype Corsiva";の記述だけではなく、
以下のような記述が必要です。
CSS
1@font-face { 2 font-family: 'Monotype Corsiva'; 3 src: url('./font/monotype-corsiva.woff') format('woff'), 4 url('./font/monotype-corsiva.ttf') format('truetype'); 5}
端末に「Monotype Corsiva」というフォントがインストールされている場合、その端末だけは「Monotype Corsiva」が表示されますが、すべての端末でインストールされてはいないはずなので、一般公開するならWebフォントが必要です。
Google フォントなどは↑をもう少し楽にしてくれるのですが、Googleフォントには含まれていないみたいですね。
https://fonts.google.com/?query=Monotype+Corsiva
↓Monospaceの中から、似たフォントを選ぶという妥協が必要かもしれません。
https://fonts.google.com/?category=Monospace
投稿2020/05/06 22:17
総合スコア4528
あなたの回答
tips
プレビュー
