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

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

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

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

CSS

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

Q&A

解決済

1回答

1188閲覧

isaraサイト模写 縮小のさせ方について

knight1220

総合スコア23

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/05/31 10:22

サイトの模写を勉強中なのですが、要素の縮小のさせ方がわからないため質問させていただきました。
画面のサイズを小さくしていくと要素が縮小するようにしたいのですが、元サイトは両端にmarginが設定されており、指定したmarginに到達するまではスライドするように縮小していきます(図の赤い枠が左に動くように縮小していき赤枠内の要素は大きさが変わらない。)
両端の隙間はmarginで指定した値に以下には狭まらない。
更に画面を小さくしていくと赤枠と赤枠の中の要素が縮小していく。
イメージ説明

イメージ説明

イメージ説明

説明が下手で申し訳ありません、いくら考えてもわからず困っております。
よろしくお願いします。

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

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

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

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

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

Lhankor_Mhy

2019/05/31 11:43

そのサイトはBootstrapを使っていると思いますが、それは気にしなくていいのですか? また、開発者ツールの使い方はわかりますか?
knight1220

2019/05/31 12:05

同じ動作になるのであれば、bootstrapの使用、不使用は気にしません。どっちらでも勉強になると思いますので。 すみませんが開発者のツールについてはわかりかねます。
Lhankor_Mhy

2019/05/31 12:11 編集

> すみませんが開発者のツールについてはわかりかねます。 じゃあ、覚えたほうがいいかと思います。 https://qiita.com/d-dai/items/0b580b26bb1d1622eb46 開発者ツールでスタイルを見て、同じスタイルに定義すれば、表示されているサイトと同じものができます。 「カンプのスタイルをじつげんするにはどうしたらいいでしょう」という質問はあると思いますが、実在のサイトを模写していて「どうすればいいでしょう」という質問が出るの、「コピペすればいいのでは」といつも思うのですよね……
knight1220

2019/05/31 12:27

ありがとうございます。 試してみます。
guest

回答1

0

ベストアンサー

こんな感じでしょうか?
イメージ説明
イメージ説明

動画はこちら

bootstrapを使っているかは計り知れませんが、取り敢えずbootstrap無しで実装しましたが間違ってたらご指摘お願いします。雑な実装で申し訳ないですが。。

istera.html

html

1<head> 2 <link rel="stylesheet" href="istera.css"> 3</head> 4<body> 5 <div id="box__red"> 6 <div id="box__green"></div> 7 <div id="box__green"></div> 8 <div id="box__green"></div> 9 <div id="box__green"></div> 10 </div> 11 12</body>

istera.css

css

1#box__red{ 2 border: red 1px solid; 3 height: 200px; 4 display: flex; 5 margin: 0px 50px; 6} 7 8#box__green{ 9 border: green 1px solid; 10 height: 150px; 11 width: 20%; 12 margin: auto; 13} 14 15@media(min-width:800px){ 16 #box__red{ 17 display: flex; 18 width: 700px; 19 margin: 0px auto; 20 } 21}

box__redにかけているdisplay:flexでその中身のbox__greenを並列に表示させます。
またメディアクエリを用いて横幅が800px以上の時は赤色の箱の横幅を700pxに、つまりwindowの横幅が800pxちょうどの時は箱とwindowの隙間の幅がそれぞれ50pxになりますね。
でwindowの横幅が800px以下の時はmarginで赤い箱とwindowの隙間の幅を50px固定でとるようにしてます。

多分こんな感じかなとは思いますが不明な点、実はそうじゃないねん、bootstrapなどを使ってたとのことでしたらまたおっしゃってください。

また余談ですがサイト模写の質問で、説明が難しいとなればaperture screencastというchromeの拡張を使うのもありかと思われます

投稿2019/05/31 12:30

shinyaigeek

総合スコア112

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

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

knight1220

2019/06/01 05:19

みなさまありがとうございました。 無事に解決することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問