うーん・・・

初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。

解決済

質問者：denpataro
質問日時：2023/12/18 19:52
回答数：1件

まずは、添付画像を見ながら質問を見てほしいのですが、画像のような状況からwebブラウザのウィンドウ右端を掴み、幅を縮小していくと、緑部左端がメニューバーに当たると、青部領域が縮んで行き、メニューバーの左端がウィンドウの左端に当たるあたりから、緑領域および文字サイズブロックが隠れていき、ウィンドウの右端がメニューバーの右端を過ぎたあたりからコンテンツが縮小していく動きになるのですが、これをウィンドウ右端から縮小していったときに青部は隠れていってもよく、緑部及び文字サイズブロックは隠れずに縮小して行き、同じくメニューバーおよび会社ロゴ、所在地ブロックも隠れずに縮小させるには、どのようにすればよいのでしょうか？
コーディングは全部は載せられないので、だいたいこんな感じで作っているというぐらいを記載します。テキストエディタ等で見てほしいです。

html
<body>
<div class="out-wrapper-container">
<div class="out-wrapper-left"></div>
<div class="wrapper" >
<header class="header-container">
<div class="h-left">
<div id="image1"></div>
</div>
<div class="h-center">
<div id="image2"></div>
<div id="image3"></div>
</div>
<div class="h-right">
<address class="char-no-wrap">
<div><span class="font-adapt1">所在地 : </span><span class="post font-adapt2">***－****</span></div>
<div><span class="font-adapt2">*******</span></div>
<div>
<span class="font-adapt1">受付時間 : </span><span class="colored">AM9:00〜PM5:00</span>
<span class="tel colored right">***-***-****</span>
</div>
<div id="sns">
<ul>
省略
</ul>
</div>
</address>
</div>
</header>
<div class="main">
<div class="nav-fix-pos">
<nav id="menubar">
<ul>
　　省略
</ul>
</nav>
</div>
</div>
</div>
<div class="out-wrapper-right">

<div id="fsize">
<p>文字サイズ</p>
<ul>
　　省略
</ul>
</div>
</div>
</div>

</body>
</html>

css
******ここから*********
/*サイトの設定*/
ul {list-style-type: none;}
/* out-wrapperコンテナ */
.out-wrapper-container {
display:flex;
justify-content: center;
}
.out-wrapper-left{
width:11vmin;
background-color: blue;
}
.out-wrapper-right{
width:11vmin;
background-color: green;
}
/*文字サイズ変更ボタン*/
/*out-wrapper-rightボタンブロック*/
#fsize {
/*out-wrapper-right中央配置*/
margin-right: auto;
margin-left: auto;
width: 11vmin; /*ブロック幅*/
height:5vmin;
background: #fff; /*背景色*/
box-shadow: 0 0 0.8vmin rgba(0,0,0,0.2);
padding: 1vmin 0; /*上下、左右へのボックス内の余白*/;
}

/*wrapperとout-wrapperがある)*/
/* そのうちのwrapperヘッダー部 */
header {
opacity: 0.7;
height: 15vmin;
width:115vmin;
margin-left: auto;
margin-right: auto;
z-index:10;
}
/*wrapperヘッダー部のcontainer*/
header.header-container {
display:flex;
align-items: center;
flex-wrap: nowrap;
}
/*ヘッダー部位置*/
header .h-left{
display:flex;
align-items: center;
height: 15vmin;
width: 20%;
background:orange;
flex-wrap: nowrap;
}
header .h-center{
display:flex;
align-items:center;
height: 15vmin;
width: 50%;
background:yellow;
flex-wrap: nowrap;
}
header .h-right{
height: 15vmin;
margin-left: auto;
margin-right: auto;
width: 30%;
z-index: 20;
position: relative;
}
/*ヘッダー部の中身left*/
.h-left #image1{
height: 100%;
width: 100%;
background-size: contain;
background-position:center;
background-image:url("../images/会社ロゴ字.png");
background-repeat: no-repeat;
}
/*ヘッダー部の中身center*/
.h-center #image2{
省略
}
.h-center #image3{
省略
/*ヘッダー部の中身right*/
/*address部*/
.h-right address {
display:flex;
flex-wrap:nowrap;
flex-direction: column;
box-sizing: border-box;
height: 15vmin;
width: 100%;
font-style: normal;
line-height: 1.5; /*行間を少し狭く*/
}

/*SNSのリンクボタン集*/
#sns{
margin-top: auto;
}
.h-right #sns{
　省略
}
#sns ul {
　省略
}

li#Instagram a{
　省略
}
li#Line a{
　省略
}
li#Facebook a{
　省略
}
/*メインメニュー*/
/*メニューブロックの設定*/
#menubar {
margin: 20px auto 20px;
height: 45px;
}
ul{
display:flex;
padding:40px;
}
/*メニュー１個あたりの設定*/
#menubar li {
width: 16.66%;
line-height: 1; /*行間を少しだけ狭く*/
}
#menubar li a {
text-decoration: none;display: block;
text-align: center;
height: 30px; /*高さ*/
padding-top: 15px; /*上に追加する余白*/
color: #fff; /*文字色*/
background: #779eec; /*背景色*/
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2023/12/19 01:32

こんばんは

省略もあって細かなところがよくわかりませんけれど、左、中央、右の3つのブロックがあって、ウィンドウの幅が狭くなるにつれて、左が消え、中央と右は必ず表示されるように幅を縮小。
ということでしょうか？

単純に3つのブロックのみにして、
・最大幅はそれぞれ11、115、11vmin
　（vminにしている意図もわかりませんが、とりあえずそのまま）
・幅が狭くなったら左が最初に狭くなって幅0になる
・それ以後は、中央、右が縮小される
という、一例です。
※ 中央と右の縮小率を変えたい場合は flex-shrink を指定することで可能です。
※ 各ブロック内の要素の幅等は%で(あるいは、同様にflexで、shrinkを）指定するようにしておけば良いでしょう。

内容がよくわかりませんので、雰囲気としてのご参考までの例です。
各ブロックには識別できるように色塗りをしてあります。
※ 要素幅だけの調整なので、表示内容によっては折り返しが発生して、レイアウトが乱れる可能性がありそうに思われます。
※ レイアウト全体を同比率のまま縮小したいのなら、transform scale などで、全体を縮小する方が良いのかもしれませんね。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.wrapper {
width: 137vmin;
max-width: 100%;
height: 15vmin;
margin: 0 auto;
display:flex;
flex-direction: row-reverse;
background-color: blue;
}
.wrapper > div {
width: 126vmin;
max-width: 100%;
height: 100%;
display: flex;
}
.center {
width: 115vmin;
height: 100%;
background-color: lightyellow;
}
.right{
width:11vmin;
height: 100%;
color: white;
background-color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="center">
中央部
</div>
<div class="right">
右端部
</div>
</div>
</div>
</body>
</html>