うーん・・・

css初心者フレックスボックスの適用を一部適用除外したいですが方法が分かりません。

解決済

質問者：denpataro
質問日時：2023/11/27 00:13
回答数：2件

添付画像のように、フレックスボックスを使って、「小」かつ「大」部を横のセンター配置しようとしているのですが、フレックスボックスを使うと、「文字サイズ」部まで一緒に横並びしてしまいます。「文字サイズ」部だけを適用を外したいです。画像は私のコーディングの#fsize でフレックスボックスをコメントアウトしています。

html***********************

div class="out-wrapper" id="fsize">
<p>文字サイズ</p>
<ul>
<li id="small"><a href="#" onclick="setActiveStyleSheet('default'); return false;" title="文字サイズ「小」"></a></li>
<li id="large"><a href="#" onclick="setActiveStyleSheet('change'); return false;" title="文字サイズ「大」"></a></li>
</ul>
/div>
******************************
css****************************
/*文字サイズ変更ボタン（※文字サイズを「大」にした時の設定はchange.cssで行う）
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#fsize {
position: absolute;
right: 1%; /*ヘッダーブロックに対して右からの配置指定*/
top: 0vmin; /*ヘッダーブロックに対して上からの配置指定*/
width: 120px; /*ブロック幅*/
background: #fff; /*背景色*/
box-shadow: 0px 0px 8px rgba(0,0,0,0.2); /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた
border-radius: 0px 0px 5px 5px; /*角丸のサイズ。左上、右上、右下、左下への順。*/
padding: 10px 0px; /*上下、左右へのボックス内の余白*/;
/*display: flex;
align-items: center;
justify-content: center;*/
}
/*「文字サイズ」のテキスト*/
#fsize p {
font-size: 18px; /*文字サイズ*/
padding: 0 12px; /*上下、左右への余白*/
}
/*文字サイズボタン１個あたり*/
#fsize ul {
display:flex;
background: #fff;
align-items: center;
}
#fsize ul a {
overflow: hidden;
text-decoration: none;
color: #fff; /*文字色*/
height:100%;
}

#fsize ul li#small a::before {
display:inline-flex;
align-items: center;
justify-content: center;
content: "小"; /*「小」の文字を出力*/
font-size: 16px; /*文字サイズ*/
height: 25px;
width: 25px;
background: #779eec; /*背景色*/
margin-right: 10px;
}
/*「大」ボタン設定*/
#fsize ul li#large a::before {
display: inline-flex;
align-items: center;
justify-content: center;
content: "大"; /*「大」の文字を出力*/
font-size: 20px; /*文字サイズ*/
background: #ccc; /*背景色*/
width: 30px; /*幅*/
height: 30px; /*高さ*/
}
/*マウスオン時の「大」ボタン設定*/
#fsize ul li#large a:hover::before {
background: #779eec; /*背景色*/
}

通報する

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

質問の本文を隠す

回答 (2件)

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

参考程度に

No.2ベストアンサー

回答者： gura_
回答日時：2023/11/27 13:46

denpataro さん

･････「小」かつ「大」部を横のセンター配置しようとしている･･････

ul に flex を適用すればよいのでは、
例↓

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
/*文字サイズ変更ボタン（※文字サイズを「大」にした時の設定はchange.cssで行う）
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#fsize {
position: absolute;
right: 1%; /*ヘッダーブロックに対して右からの配置指定*/
top: 0vmin; /*ヘッダーブロックに対して上からの配置指定*/
width: 120px; /*ブロック幅*/
background: #fff; /*背景色*/
box-shadow: 0px 0px 8px rgba(0,0,0,0.2); /*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた
border-radius: 0px 0px 5px 5px; /*角丸のサイズ。左上、右上、右下、左下への順。*/
padding: 10px 0px; /*上下、左右へのボックス内の余白*/;
/*display: flex;
align-items: center;
justify-content: center;*/
}

/*「文字サイズ」のテキスト*/
#fsize p {
font-size: 18px; /*文字サイズ*/
padding: 0 12px; /*上下、左右への余白*/
}
/* 文字サイズボタン１個あたり */
#fsize ul {
list-style: none; padding: 0; justify-content:center; /* 追記 */
display:flex;
background: #fdf; /* 確認用色付け */
align-items: center;
}
#fsize ul a {
overflow: hidden;
text-decoration: none;
color: #fff; /* 文字色 */
height:100%;
}

#fsize ul li#small a::before {
display:inline-flex;
align-items: center;
justify-content: center;
content: "小"; /*「小」の文字を出力 */
font-size: 16px; /*文字サイズ */
height: 25px;
width: 25px;
background: #779eec; /*背景色 */
margin-right: 10px;
}
/*「大」ボタン設定 */
#fsize ul li#large a::before {
display: inline-flex;
align-items: center;
justify-content: center;
content: "大"; /*「大」の文字を出力 */
font-size: 20px; /*文字サイズ */
background: #ccc; /*背景色 */
width: 30px; /*幅 */
height: 30px; /*高さ */
}
/*マウスオン時の「大」ボタン設定 */
#fsize ul li#large a:hover::before {
background: #779eec; /*背景色 */
}

</style>
</head>
<body>
<div class="out-wrapper" id="fsize">
<p>文字サイズ</p>
<ul>
<li id="small"><a href="#" onclick="setActiveStyleSheet('default'); return false;" title="文字サイズ「小」"></a></li>
<li id="large"><a href="#" onclick="setActiveStyleSheet('change'); return false;" title="文字サイズ「大」"></a></li>
</ul>
</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者：だいぬ
回答日時：2023/11/27 00:32

質問内容が曖昧で何をしたいのかハテナっていう感じですが、通常フローから外したいのであればpositionというプロパティでabsoluteというプロパティ値を付ければ自由にレイアウト出来ます。

で、タグの関係ですが
div{
p{
文字サイズ
}
ul{
li{
小
}
li{
大
}
}
}

のようになっているのでdivにフレックスを指定したら
pとulが隣り合わせになりますし、
ulにフレックスを指定したら
liとliが横並びになりますよ？

jsの部分もそうですが、もう少し上手にコーディング出来るのでは...？