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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1269閲覧

モバイルサイトとpcサイトでデザインが変わるときの余白の設定の仕方

sanyagi_d_1

総合スコア10

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/11/04 03:16

現在、Airbnbホスティング(https://www.airbnb.jp/host/homes)の模写を行なっています。
↓私の模写
イメージ説明
「ホスティングの~」rowがだだっ広いので、修正したいのですが、うまくいきません。

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 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 10 <link rel="stylesheet" href="style_airbnb2.css"> 11 <script src="https://kit.fontawesome.com/576bf3ee24.js" crossorigin="anonymous"></script> 12<main> 13 <div class="question2 row"> 14 <h3 class="mt-5 col-md-12 text-left pal">ホスティングの詳細はこちら</h3> 15 <div class="col-md-4 d-none d-sm-block"> 16 <a href="#"> 17 <img src="airbnb/hosting1.jpg" class="col col-xs-4 mx-auto"> 18 <h5>初期設定</h5> 19 <p>ホスティング入門ガイド</p> 20 <a href="#" class="question2-btn">詳しく読む</a> 21 </a> 22 </div> 23 <div class="col-xs-12 d-sm-none responsive-details-parent"> 24 <div class="responsive-details-child-left"> 25 <a href="#"><img src="airbnb/hosting1.jpg" class="col col-xs-4 mx-auto"></a> 26 </div> 27 <div class="responsive-details-child-right"> 28 <a href="#"><h5>初期設定</h5></a> 29 <a href="#"><p>ホスティング入門ガイド</p></a> 30 </div> 31 </div> 32 <div class="col-md-4 d-none d-sm-block"> 33 <a href="#"> 34 <img src="airbnb/hosting2.jpg" class="col col-xs-4 mx-auto"> 35 <h5>安全</h5> 36 <p>ホストを守るAirbnbのしくみ</p> 37 <a href="#" class="question2-btn">詳しく読む</a> 38 </a> 39 </div> 40 <div class="col-xs-12 d-sm-none responsive-details-parent"> 41 <div class="responsive-details-child-left"> 42 <a href="#"><img src="airbnb/hosting2.jpg" class="col col-xs-4 mx-auto"></a> 43 </div> 44 <div class="responsive-details-child-right"> 45 <a href="#"><h5>安全</h5></a> 46 <a href="#"><p>ホストを守るAirbnbのしくみ</p></a> 47 </div> 48 </div> 49 <div class="col-md-4 d-none d-sm-block"> 50 <a href="#"> 51 <img src="airbnb/hosting3.jpg" class="col col-xs-4 mx-auto"> 52 <h5>マネープラン</h5> 53 <p>Airbnbで収益を得るには</p> 54 <a href="#" class="question2-btn">詳しく読む</a> 55 </a> 56 </div> 57 <div class="col-xs-12 d-sm-none responsive-details-parent"> 58 <div class="responsive-details-child-left"> 59 <a href="#"><img src="airbnb/hosting3.jpg" class="col col-xs-4 mx-auto"></a> 60 </div> 61 <div class="responsive-details-child-right"> 62 <a href="#"><h5>マネープラン</h5></a> 63 <a href="#"><p>Airbnbで収益を得るには</p></a> 64 </div> 65 </div> 66 </div> 67</main>

CSS

1main .row{ 2 flex-direction: row; 3} 4 5.pal{ 6 padding-left: 60px; 7} 8 9.question-hr hr{ 10 width: 100%; 11 border-color: gray; 12 border-width: 1px; 13 opacity: 0.3; 14} 15 16.question2 a{ 17 text-decoration: none; 18} 19 20.question2 h5{ 21 color: black; 22 margin-top: 10px; 23} 24 25.question2 p{ 26 color: gray; 27 28.responsive-details-parent{ 29 display:flex; 30 margin: 0 15px 15px; 31 border: solid 1px #b3b3b3; 32 border-top: solid 1px #e0e0e0; 33 border-bottom: solid 1px #717171; 34 box-shadow: 0 2px 6px rbga(100,100,100,0.3); 35} 36 37.responsive-details-child-left{ 38 width: 30%; 39} 40 41.responsive-details-child-right{ 42 padding-left: 10px; 43 padding-top: 10px; 44} 45 46.responsive-details-child-right h5{ 47 margin: 0; 48 font-size: 1rem; 49} 50 51.responsive-details-child-right p{ 52 margin: 0; 53 font-size: .8rem; 54}

・試したこと
div class="d-none"、img src="mx-auto"を外す→変化なし
h3をcol-md-9、divをcol-md-3にした→左の箱がh3と同じ段に来た

今少し余白があるので、お手本のようにrowの中の箱をもう少し詰めてやりたいです。
ご回答よろしくお願いします。

・補足情報
Bootstrap4.3.1
VSCode
ブラウザ:Chorme
OS:Widows10
AirbnbホスティングWebサイト(https://www.airbnb.jp/host/homes)

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

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

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

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

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

guest

回答1

0

引用テキスト「ホスティングの~」rowがだだっ広いので、修正したいのですが、うまくいきません。

>模写しているサイト都比べているということですよね?

ここでは、文字間を調整する方法をお伝えします。

css

1letter-spacing: 4px;

上記コードで、デフォルト値+4pxの文字間隔になるので、これを利用してみてはいかがですか?


ちなみになのですが、模写しているサイトでは、そのようなコードは見当たらなかったのですが、模写しているサイトとあなたの作成しているサイトを比較したところ、太文字になっていませんでした。
太文字にすることによって、文字間隔を狭いように見えたのでは・・・・?
一応太文字にするよう指示するコードを掲載しました。

css

1font-weight: 800;

模写しているということなので、もう一つ

私も模写は色々と行なっていますが、その際にここの余白は何で指定しているのだろう?font-familyは何を使っているのだろうか?など感じる時があります。
その際には、お使いのブラウザがChormeということなので、開発者ツール(デベロッパーツール)を私は使用しています。今回の質問では使用方法は控えさせていただきますが、そちらも合わせて確認されてみてはいかがでしょうか?

今回の「ホスティングの〜」に当てられたcssは、これだなと確認することができますよ。

投稿2019/11/04 14:48

編集2019/11/04 14:57
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2019/11/06 14:29

低評価ということですが、試したが解決されなかったということでしょうか? その際の表示結果も含め、質問編集をしてもらえると幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問