質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1602閲覧

文字のフォントを変えられない

writegrint

総合スコア22

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Twitter Bootstrap

Twitter Bootstrapはウェブアプリとウェブサイトの開発をすぐに始めることができるツイッターのフロントエンドのフレームワークです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/05/06 20:30

HTML,CSS、bootstrapでサイトの模写をしているのですが、文字のフォントを変えられません。コードを載せるので、改善点をお願いします。
290万のところです。

<!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"; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/06 21:34

何度か指摘していますが 全角のファイル名、インラインスタイル 直されないと技術として使えるものにはなりません。
writegrint

2020/05/06 21:39

インラインスタイルとは、HTMLの中に記述する事を言うのでしょうか?また、全角のファイル名というのはどこの事を言っているのでしょうか?
m.ts10806

2020/05/06 21:42

>インラインスタイル style=でhtmlに直に書くこと >全角のファイル名 Bootstrapの練習.css
writegrint

2020/05/06 21:44

なるほど、ありがとです。全角のファイル名に関しては、なぜでしょうか。
m.ts10806

2020/05/06 22:07

多くのWebサーバーのOSがWindowsやMacではないためです。 「ローカル上で動いてるけどサーバーにアップロードしたら動かなくなった」の原因の多くが全角ファイル名によるリンク。 プログラミングにおいて全角を使うのは文章とかコメントくらいにとどめておくべきという考え方もありますけどね。 あとインラインスタイルの是非についてあまり認識されてないようなので念のため言っておくと、管理面メンテナンス面です。なんのためにCSSでクラスを指定して制御するのか?というところになります。 それにtext-align系の機能ならBootstrapに既にある機能。わざわざ自分で作ったりインラインにする必要はありません。 https://getbootstrap.com/docs/4.0/utilities/text/ 基本的なレイアウトはbootstrapで組み、色や本当に微調整のレベルを自分で付け足すのが大体のやり方です。 オリジナルせいを求めるならbootstrap本体に手をつけられるくらいCSSやbootstrapの特性に精通している必要があります。
writegrint

2020/05/06 22:14

なるほど、サーバーにアップロードした際に動かなくなるから全角は駄目なのですね。 text-align系ならbootstrapにありましたか。次回からbootstrapで位置調整します。アドバイスありがとうございます。
m.ts10806

2020/05/06 22:34

リンクするということはURLになるということですからね。
m.ts10806

2020/05/06 22:35

それに、「次回から」だと忘れますよ。すぐやるから身に付きます。
guest

回答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

new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

writegrint

2020/05/06 22:25

google フォント使えました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問