実現したいこと
XDでデザインを作り、animaというプラグインで書き出したものを編集しています。
レスポンシブ設定が効かず、手動で修正することになりました。
ヘッダーロゴがそのまま左の位置にいて、メニューがウインドウ幅に合わせて左へいい具合にずれるようなものをつくりたいです。
animaのプラグインでかきだしたものなので、構造が複雑になっていてわかりずらいですが、お助けください。
発生している問題・分からないこと
レスポンシブデザインができない。
ウインドウ幅が切り替わる間の挙動が自然ではない。（ヘッダーの背景色がつねに幅いっぱいにしたいです。）
該当のソースコード
HTML
1 <div class="index screen"> 2 <div class="component"> 3 <a href="index.html"><div class="overlap-group10"> 4 <div class="jsl jsl-3">会社名</div> 5 <div class="jsl-1 jsl-3 heiseimarugothicstd-w4-normal-white-16px">〇〇株式会社</div> 6 <img class="logo-maru" src="img/logo-maru-1@1x.png" alt="logo-maru" /> 7 </div></a> 8 <a href="index.html"><div class="home"> 9 <div class="overlap-group-2"> 10 <img class="x56" src="img/file---56@1x.png" alt="56" /> 11 <img class="x57" src="img/file---57@1x.png" alt="57" /> 12 </div> 13 <div class="place heiseimarugothicstd-w4-normal-white-25px">HOME</div> 14 </div></a> 15 <a href="contents/contents.html"><div class="mihon"> 16 <div class="overlap-group1-1"> 17 <img class="x58" src="img/file---58@1x.png" alt="58" /> 18 <img class="x59" src="img/file---59@1x.png" alt="59" /> 19 </div> 20 <div class="text-2 heiseimarugothicstd-w4-normal-white-25px">教材見本</div> 21 </div></a> 22 <a href="company/company.html"><div class="gaiyo"> 23 <div class="flex-row flex"> 24 <div class="flex-col flex"> 25 <img class="flex-col-item" src="img/file---62@1x.png" alt="62" /> 26 <img class="x64" src="img/file---64@1x.png" alt="64" /> 27 <img class="flex-col-item" src="img/file---69@1x.png" alt="69" /> 28 </div> 29 <div class="flex-row-1"> 30 <div class="flex-col-1"> 31 <img class="x63" src="img/file---63@1x.png" alt="63" /> 32 <img class="x65" src="img/file---65@1x.png" alt="65" /> 33 <img class="x68" src="img/file---68@1x.png" alt="68" /> 34 </div> 35 <div class="flex-col-2"> 36 <img class="x61" src="img/file---61@1x.png" alt="61" /> 37 <img class="x66" src="img/file---66@1x.png" alt="66" /> 38 <img class="x67" src="img/file---67@1x.png" alt="67" /> 39 </div> 40 </div> 41 </div> 42 <div class="text-2 heiseimarugothicstd-w4-normal-white-25px">会社概要</div> 43 </div></a> 44 <a href=seisaku/seisaku.html><div class="seisaku"> 45 <div class="text-28 heiseimarugothicstd-w4-normal-white-25px">制作体制</div> 46 <div class="x25"></div> 47 <img class="x72" src="img/file---72@1x.png" alt="72" /> 48 </div></a> 49 <a href="form/form.html"><div class="form"> 50 <div class="overlap-group3"> 51 <img class="x70" src="img/file---70@1x.png" alt="70" /> 52 <img class="x71" src="img/file---71@1x.png" alt="71" /> 53 </div> 54 <div class="text-27 heiseimarugothicstd-w4-normal-white-25px">お問い合わせ</div> 55 </div></a> 56 </div>
CSS
1/* screen - index */2 3.index {4 align-items: center;5 background-color: var(--white);6 display: flex;7 flex-direction: column;8 height: 4763px;9 width: 1920px;10}11 12.index .component {13 align-items: flex-end;14 background-color: var(--usdhmh);15 display: flex;16 height: 122px;17 min-width: 1920px;18 padding: 2.4px 19px;19}20 21.index .overlap-group10 {22 height: 110px;23 position: relative;24 width: 203px;25}26 27.index .jsl {28 color: var(--white);29 font-family: var(--font-family-mochiypop-regular);30 font-size: 60px;31 font-weight: 400;32 left: 46px;33 line-height: 60px;34 top: 19px;35}36 37.index .jsl-1 {38 left: 0;39 line-height: 16px;40 top: 82px;41}42 43.index .logo-maru {44 height: 40px;45 left: 25px;46 object-fit: cover;47 position: absolute;48 top: 0;49 width: 151px;50}51 52.index .home {53 align-items: center;54 cursor: pointer;55 display: flex;56 gap: 6px;57 height: 25px;58 margin-bottom: 22.59px;59 margin-left: 505px;60 min-width: 104px;61 transition: all 0.2s ease;62}63 64.index .home:hover {65 transform: scale(1.1);66}67 68.index .overlap-group-2 {69 height: 19px;70 margin-top: 0.14px;71 position: relative;72 width: 21px;73}74 75.index .x56 {76 height: 12px;77 left: 0;78 object-fit: cover;79 position: absolute;80 top: 0;81 width: 21px;82}83 84.index .x57 {85 height: 14px;86 left: 3px;87 object-fit: cover;88 position: absolute;89 top: 4px;90 width: 15px;91}92 93.index .place {94 align-self: flex-end;95 cursor: pointer;96 letter-spacing: 0;97 line-height: 25px;98 margin-bottom: -2px;99 min-height: 27px;100 min-width: 77px;101 transition: all 0.2s ease;102 white-space: nowrap;103}104 105.index .place:hover {106 transform: scale(1.1);107}108 109.index .mihon {110 align-items: center;111 cursor: pointer;112 display: flex;113 gap: 4px;114 height: 26px;115 justify-content: flex-end;116 margin-bottom: 22.59px;117 margin-left: 94px;118 min-width: 135px;119 transition: all 0.2s ease;120}121 122.index .mihon:hover {123 transform: scale(1.1);124}125 126.index .overlap-group1-1 {127 height: 17px;128 margin-top: 1.11px;129 position: relative;130 width: 29px;131}132 133.index .x58 {134 height: 16px;135 left: 0;136 object-fit: cover;137 position: absolute;138 top: 1px;139 width: 27px;140}141 142.index .x59 {143 height: 12px;144 left: 17px;145 object-fit: cover;146 position: absolute;147 top: 0;148 width: 12px;149}150 151.index .text-2 {152 align-self: flex-end;153 cursor: pointer;154 letter-spacing: 0;155 line-height: 25px;156 margin-bottom: -2px;157 min-height: 27px;158 min-width: 102px;159 transition: all 0.2s ease;160 white-space: nowrap;161}162 163.index .text-2:hover {164 transform: scale(1.1);165}166 167.index .gaiyo {168 align-items: center;169 cursor: pointer;170 display: flex;171 gap: 6px;172 height: 25px;173 justify-content: flex-end;174 margin-bottom: 22.59px;175 margin-left: 102px;176 min-width: 127px;177 transition: all 0.2s ease;178}179 180.index .gaiyo:hover {181 transform: scale(1.1);182}183 184.index .flex-row {185 background-image: url(../img/file---60@1x.png);186 background-position: 50% 50%;187 background-size: cover;188 gap: 1px;189 height: 22px;190 margin-top: 1.55px;191 min-width: 19px;192 padding: 3.3px 2.2px;193}194 195.index .flex-col {196 align-self: center;197 flex-direction: column;198 gap: 2px;199 margin-bottom: 2.37px;200 min-height: 10px;201 width: 1px;202}203 204.index .flex-col-item {205 height: 2px;206 margin-left: 0;207 object-fit: cover;208 width: 1px;209}210 211.index .x64 {212 height: 2px;213 object-fit: cover;214 width: 1px;215}216 217.index .flex-row-1 {218 align-items: flex-start;219 display: flex;220 gap: 2px;221 height: 11px;222 min-width: 5px;223}224 225.index .flex-col-1 {226 align-items: flex-start;227 align-self: flex-end;228 display: flex;229 flex-direction: column;230 gap: 2px;231 min-height: 11px;232 width: 2px;233}234 235.index .x63 {236 height: 2px;237 object-fit: cover;238 width: 2px;239}240 241.index .x65 {242 height: 2px;243 object-fit: cover;244 width: 2px;245}246 247.index .x68 {248 height: 2px;249 object-fit: cover;250 width: 2px;251}252 253.index .flex-col-2 {254 align-items: flex-start;255 display: flex;256 flex-direction: column;257 gap: 2px;258 min-height: 11px;259 width: 2px;260}261 262.index .x61 {263 height: 3px;264 object-fit: cover;265 width: 2px;266}267 268.index .x66 {269 height: 2px;270 object-fit: cover;271 width: 2px;272}273 274.index .x67 {275 height: 2px;276 object-fit: cover;277 width: 2px;278}279 280.index .seisaku {281 cursor: pointer;282 height: 25px;283 margin-bottom: 22.59px;284 margin-left: 93px;285 position: relative;286 transition: all 0.2s ease;287 width: 135px;288}289 290.index .seisaku:hover {291 transform: scale(1.1);292}293 294.index .text-28 {295 cursor: pointer;296 left: 33px;297 letter-spacing: 0;298 line-height: 25px;299 position: absolute;300 top: 0;301 transition: all 0.2s ease;302 white-space: nowrap;303}304 305.index .text-28:hover {306 transform: scale(1.1);307}308 309.index .x25 {310 background-color: var(--white);311 height: 2px;312 left: 6px;313 position: absolute;314 top: 23px;315 width: 15px;316}317 318.index .x72 {319 height: 20px;320 left: 0;321 object-fit: cover;322 position: absolute;323 top: 2px;324 width: 26px;325}326 327.index .form {328 align-items: center;329 cursor: pointer;330 display: flex;331 gap: 5px;332 height: 25px;333 margin-bottom: 22.59px;334 margin-left: 97px;335 min-width: 182px;336 transition: all 0.2s ease;337}338 339.index .form:hover {340 transform: scale(1.1);341}
試したこと・調べたこと
上記の詳細・結果
ウインドウ幅が1920pxと決められている場所を100％に変更したら、
背景が可変するようになりました。
ロゴやメニューの可変のさせかたがわかりません。
補足
特になし
0 コメント