添付画像のように、フレックスボックスを使って、「小」かつ「大」部を横のセンター配置しようとしているのですが、フレックスボックスを使うと、「文字サイズ」部まで一緒に横並びしてしまいます。「文字サイズ」部だけを適用を外したいです。画像は私のコーディングの#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; /*上下、左右への余白*/
}
/*文字サイズボタン1個あたり*/
#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; /*背景色*/
}
No.2ベストアンサー
- 回答日時:
denpataro さん
・・・・・「小」かつ「大」部を横のセンター配置しようとしている・・・・・・
ul に flex を適用すればよいのでは、
例↓
<!DOCTYPE html>
<!--
https://oshiete.goo.ne.jp/qa/13664930.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; /*上下、左右への余白*/
}
/* 文字サイズボタン1個あたり */
#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>
No.1
- 回答日時:
質問内容が曖昧で何をしたいのかハテナっていう感じですが、通常フローから外したいのであればpositionというプロパティでabsoluteというプロパティ値を付ければ自由にレイアウト出来ます。
で、タグの関係ですが
div{
p{
文字サイズ
}
ul{
li{
小
}
li{
大
}
}
}
のようになっているのでdivにフレックスを指定したら
pとulが隣り合わせになりますし、
ulにフレックスを指定したら
liとliが横並びになりますよ?
jsの部分もそうですが、もう少し上手にコーディング出来るのでは...?
回答ありがとうございます。そうなんです。フレックスボックスが、役に立たない状況です。absoluteを使わないとできないなら、そうします。擬似要素の:notの使ってでも何とかならないなら、フレックスボックスは全然フレックスではないです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS CSS初心者です。わかる方教えてください。 3 2023/09/08 22:04
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
このQ&Aを見た人はこんなQ&Aも見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
-
プログラミング言語の制作方法について
C言語・C++・C#
-
-
4
Vba ユーザ定義関数について教えてください
Visual Basic(VBA)
-
5
プログラマーがHTMLとCSSでウェブデザインをするのは大人の幼稚園なんじゃないかと思い込んでる
その他(プログラミング・Web制作)
-
6
エクセルのマクロについて教えてください。
Visual Basic(VBA)
-
7
環境依存文字?をEnumで定義したい
Visual Basic(VBA)
-
8
フォルダを自動作成・移動を複数ファイルに対して行うバッチ処理について
その他(プログラミング・Web制作)
-
9
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
10
かっこいいウェブを作るテク
HTML・CSS
-
11
HTMLでデスクトップの画像がでない
HTML・CSS
-
12
これなにがちがうんですか??
C言語・C++・C#
-
13
エクセルVBAでデータ転記
Visual Basic(VBA)
-
14
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
15
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
16
独自ドメインのHPを編集するにはどうしたらいいでしょうか。
その他(プログラミング・Web制作)
-
17
基本情報技術者の擬似言語プログラム このプログラムの答えは(ウ)です。でも配列に格納されてる順番が良
Visual Basic(VBA)
-
18
xlsmファイルで、別名ファイルを保存する方法
Visual Basic(VBA)
-
19
本を見ながらPHPを勉強している初心者です。 今困っていること。 本番環境とローカル環境の差で困って
MySQL
-
20
select case について
Visual Basic(VBA)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
Firefoxで見るとli要素レイアウ...
-
定義リストに下線をつけたいと...
-
CSSでボックスのheightが0になる
-
Flexslider2のカーセルスライダ...
-
投稿フォームの整列
-
Firefoxでheight:100%がきかない?
-
初心者html・CSS ウィンドウを...
-
画像の位置指定
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
表示倍率を変えるとレイアウト...
-
回り込みについて(間隔が空く)
-
FFにおけるDIVタグ間の隙間につ...
-
html初めてです、教えてください!
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
入力フォームとセレクトボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報