添付画像のように、フレックスボックスを使って、「小」かつ「大」部を横のセンター配置しようとしているのですが、フレックスボックスを使うと、「文字サイズ」部まで一緒に横並びしてしまいます。「文字サイズ」部だけを適用を外したいです。画像は私のコーディングの#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も見ています
-
「環境が人を育てる」って本当?環境によって人格や生き方は本当に変わるのか
環境が人生に与える影響は実際どれほどのものなのか、専門家の田宮由美さんに伺った。
-
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
プログラミング言語の制作方法について
C言語・C++・C#
-
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
-
-
4
かっこいいウェブを作るテク
HTML・CSS
-
5
エクセルVBAでデータ転記
Visual Basic(VBA)
-
6
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
7
HTMLでデスクトップの画像がでない
HTML・CSS
-
8
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
9
これなにがちがうんですか??
C言語・C++・C#
-
10
ご教授お願いします。#NUM!が解消されません。
Visual Basic(VBA)
-
11
特定文字を入ってるCSVの特定の列を特定のexcelシートに取り込みたいです
Visual Basic(VBA)
-
12
PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています
その他(プログラミング・Web制作)
-
13
Excelセルに入力された文字の色を変える方法を教えてください
Visual Basic(VBA)
-
14
コードレビューをお願いします。
JavaScript
-
15
JRのjsonファイルって使って大丈夫そ?
その他(プログラミング・Web制作)
-
16
コードを直していただきたいです。 以下のコードはネットで拾ったものをほんの少しいじった物なのですが、
Visual Basic(VBA)
-
17
ボタンが押されたらWebページの文字コードを 変える、というプログラミングを書きたいです。 目的は文
HTML・CSS
-
18
CSSでつくったメニューのアニメーションがうまく動かない・変えたい
HTML・CSS
-
19
無料hp作成ソフトお勧め
オープンソース
-
20
引数に数値、文字列の混在
Visual Basic(VBA)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
footer を横幅いっぱいに広げる...
-
W3Cのソースコードの検証サービ...
-
【HTML&CSS】フッター下部の余...
-
【HTML】【CSS】【Swiper】 元...
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
<li>の黒い点を消したい。
-
CSS テキストフィールドの文字...
-
css初心者 フレックスボックス...
-
HTMLのiframeの入れ子について
-
背景が下まで表示されないんです。
-
CSSのposition値の上書き(打消...
-
marginとナビゲーションの位置...
-
定義リストに下線をつけたいと...
-
iPhoneのSafariで動くCSSを書き...
-
CSSでボックスのheightが0になる
-
CSSがなぜかfont-sizeだけ効か...
-
CSSを使ってウェブサイトがペー...
-
CSSで指定した背景画像にリンク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報