Q&A
HTMLの方も無いとCSSだけではなんとも言えません。
以下のようにCSSでコンポーネントの位置を適当にだいたいの位置を決めていたのですが、違う小さい画面のノートPCで開いたら位置が若干ずれてしまいます。ディスプレイの大きさに可変で対応できるようにするには以下のコードをどのように変えれば良いでしょうか？
ーーーーーーーーー
以下編集
ーーーーーーーーー
HTMLと少しコンポーネントが増えたのでCSSも編集します。
:local .TopPageについてはvw,vh試しましたが、これを変えると背景が画面全体に広がらなくなります。どんな画面サイズでもbackground-colorが画面全体に広がり、このtextやボタンがその中央に来る様にしたいです。
HTML
1 2<div className= {style.TopPage}> 3 <h3 className={style.text1}>text1</h3> 4 <h2 className={style.text2}>text2</h2> 5 <h2 className={style.text3}>text3</h2> 6 <div className= {style.twitter_button}> 7 <Button onClick={()=>this.onClicktest()} color='twitter' size='massive'> 8 <Icon name='twitter' /> Twitterボタン 9 </Button> 10 </div> 11 <div className= {style.login_button}> 12 <Button color='black'size='massive'>ボタン</Button > 13 14 </div> 15 16 17 </div>
CSS
1:local .TopPage { 2 width: 100vw; 3 height: 100vh; 4 text-align: center; 5 background-color: rgba(97, 94, 94, 0.931); 6} 7 8:local .text1 { 9 padding-top: 550px; 10 font-size: 100px; 11 font-family: "Ravi Prakash", cursive; 12 text-align: center; 13 color: rgba(255, 255, 255, 0.931); 14} 15 16:local .text2 { 17 18 font-size: 30px; 19 font-family: "Ravi Prakash", cursive; 20 text-align: center; 21 color: rgba(255, 255, 255, 0.931); 22} 23 24:local .text3 { 25 26 font-size: 30px; 27 28 text-align: center; 29 color: rgba(255, 255, 255, 0.931); 30} 31 32 33:local .twitter_button{ 34 position: absolute; 35 left: 48%; 36 margin-left: -300px; 37 margin-top: 100px; 38 39 40} 41 42:local .login_button{ 43 position: absolute; 44 right: 45%; 45 margin-right: -250px; 46 margin-top: 100px; 47 48}
何をどうしたいのか？（例：「.abc」を画面の上下左右の中央に持ってきたい 等）が不明です。レイアウトについてはHTML・CSS等のコード提示、および、参考とするイメージ画像や参考サイト等があると、より良い回答を得れると思います。
このコードは何で書かれたものですか？皆が同じ環境では無いので検証出来ません。一般的なHTML・CSSのコードで提示してください。
htmlと書いていますが、実際はjsのreactを使っていてそのレンダー部分です。すみませんがあまりHTMLを書いたことがないため一般的なというのがよくわからない状況です。
＞.TopPageについてはvw,vh試しましたが、これを変えると背景が画面全体に広がらなくなります。 → どのように変えたら適用されなくなったのでしょうか？ 現状と理想とするイメージを画像や手書きでも良いのであると、より良い回答を得れると思います。
回答3件
0
ディスプレイの大きさにより変化させたいのであれば、
height: 100vw;でいかがでしょうか。
vwはviewport widthで画面の横幅を基準として計算します
vhはviewport heightで画面の縦幅を基準として計算します
投稿2018/08/11 23:22
退会済みユーザー
総合スコア0
0
- px単位のずれはよくあることなので，気にならないデザインへ修正するのが楽です
- HTMLほしい
- media queriesという神器があってだな（ry...レスポンシブの基本、メディアクエリの書き方
余談：
:localってVanilla CSSにあったっけ
投稿2018/08/11 13:22
編集2018/08/20 15:56
総合スコア1284
0
ベストアンサー
どんな画面サイズでもbackground-colorが画面全体に広がり、このtextやボタンがその中央に来る様にしたいです
html
1<!DOCTYPE html> 2 3<html lang="ja"> 4 5 <head> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <style> 10 body{ 11 background: skyblue; 12 } 13 #wrapper{ 14 position: fixed; 15 top: 50%; 16 left: 50%; 17 transform: translate(-50%, -50%); 18 display: flex; 19 flex-wrap: wrap; 20 justify-content: center; 21 align-content: center; 22 } 23 div{ 24 padding: 2em; 25 border: 1px solid; 26 } 27 </style> 28 <title>demo</title> 29 </head> 30 <body> 31 <div id="wrapper"> 32 <div>text1</div> 33 <div>text2</div> 34 <div>text3</div> 35 <div>text4</div> 36 <div>text5</div> 37 </div> 38 </body> 39 40</html>
という感じでしょうか？
少なくとも背景色のCSSは，body{background-color: skyblue;}等で大丈夫なはずです
中央寄せは，方法が色々ありますが，とりあえず
css
1.pos_abs_ctr{/*中央寄せしたい要素自身にかける*/ 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6}
か，
css
1.pos_flex_ctr{/*中央寄せしたい要素のコンテナにかける*/ 2 display: flex; 3 flex-wrap: wrap; 4 justify-content: center; 5 align-content: center; 6}
を使ってみてはどうでしょうか
※クラス名等はもちろん自由に書き換えよいものです．
投稿2018/08/12 13:39
編集2018/08/12 13:43総合スコア1284
あなたの回答
tips
プレビュー
