Q&A
現状の「真ん中のテキスト(adressAccess)」は中央に配置されていない（スクリーンサイズによってはたまたまそれっぽく見える）ですが、これについては気にしなくてよく、厳密な中央ではなくだいたい真ん中にあればよい、ということでいいですか？
flexboxのjustify-content: space-between;を使って、ロゴとテキスト、リストを並べました。真ん中のテキスト(adressAccess)は中央に保ったまま、右のlistだけもう少し左に寄せたいです。どうすればいいでしょうか？
20220317
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 6<meta charset="utf-8"/> 7<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 8 9 10 11 <title>よくある質問</title> 12 13<style> 14 15.body{ 16 font-family: "游ゴシック", "ヒラギノ角ゴ ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/ 17 margin: 0; 18 padding: 0; 19 } 20 * {/*ブラウザのすべてのCSSをリセット*/ 21 margin: 0; 22 padding: 0; 23 } 24 25 26@media (min-width: 1025px) {/*PC版*/ 27#upper_footer{ 28background-color: #73683B; 29color: white; 30display: flex; 31justify-content: space-between; 32/*この２つでulを右寄せした*/ 33} 34#upper_footer:first-child{ 35margin-right: auto; 36} 37#upper_footer .logo img{ 38width:260px; 39height:auto; 40margin: 100px 0px 230px 15vw; 41} 42 43#upper_footer .adressAccess{ 44margin-top: 100px; 45padding-top: 25px;/*微調整*/ 46} 47 48#upper_footer ul.link{ 49margin-top: 100px;/*この高さはdisplay-widthによって変化しないので絶対値にした*/ 50margin-right: 20vw; 51} 52#upper_footer ul.link li{ 53list-style: none;/*liの点を消去*/ 54} 55#upper_footer ul.link li a { 56color: white; 57} 58 59 60#lower_footer{ 61background-color: #E5E5E5; 62color: #73683B; 63height: 60px; 64display: flex; 65justify-content: space-between; 66/*この２つでulを右寄せした*/ 67} 68 69#lower_footer p{ 70line-height: 60px;/*親要素の高さとline-heightを同じにすることで、縦方向の中央寄せをした*/ 71margin-left: 40px; 72} 73#lower_footer ul.sns { 74margin-right: 40px; 75} 76#lower_footer ul.sns li{ 77display: inline-block; 78list-style: none;/*liの点を消去*/ 79margin-top: 20px;/*親要素の高さが60pxで、画像の高さが20pxなので、20px下げた。もっと一般的な方法はないのか*/ 80 81} 82#lower_footer .sns img{ 83width: 20px;/*親要素の高さとline-heightを同じにすることで、縦方向の中央寄せをした*/ 84height: 20px; 85} 86} 87 88 89</style> 90</head> 91 92<body> 93 94<article id="wrapper"><!--全て含めたもの(最後の方に終了タグがある)--> 95 96<!-- #footer --> 97<footer id="footer"> 98 99<div id="upper_footer"> 100 <div class="logo"> 101 <img src="img/black.png" alt="black"/> 102 </div> 103 <div class="adressAccess"> 104 <p><b>場所の名前</b></p> 105 <p>住所</p> 106 <p>アクセス方法</p> 107 </div> 108 <ul class="link"> 109 <li><a href="https://www.fukuske.com" target="_blank">プラン①</a></li> 110 <li><a href="https://fukuske.co.jp" target="_blank">プラン②</a></li><!--url 変更未--> 111 <li><a href="https://fukuske.co.jp/contact/" target="_blank">プラン③</a></li><!--url 変更未--> 112 <li><a href="https://fukuske.co.jp/contact/" target="_blank">プラン④</a></li><!--url 変更未--> 113 <li><a href="https://fukuske.co.jp/contact/" target="_blank">プラン⑤</a></li><!--url 変更未--> 114 </ul> 115</div> 116 117 118</footer> 119<!-- #footer --> 120 121 122</article> 123 124</body>
回答1件
0
transformで動かすのがお手軽かもしれません。
css
1#upper_footer ul.link { 2 margin-top: 100px; 3 margin-right: 20vw; 4 transform: translateX(-500px); 5}
投稿2022/03/18 02:34
総合スコア37736
あなたの回答
tips
プレビュー
