HTML/CSS のどんな質問にも優しく答えるｽﾚ 52

**Name_Not_Found** · 2023/08/23(水) 18:52:13.52

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつはこのスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/

■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html

前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
https://mevius.5ch.net/test/read.cgi/hp/1667020591/

**Name_Not_Found** · 2024/01/30(火) 09:39:29.57

エディタ？vscodeでいいよ

**Name_Not_Found** · 2024/01/30(火) 10:09:09.43

>>330
VSCode一択です

**Name_Not_Found** · 2024/01/30(火) 12:41:34.11

>>329
ありがとうございました

**Name_Not_Found** · 2024/01/30(火) 12:54:03.01

>>331,332
エディタではないです
もうちょっとビジュアル的に操作できるものが良いです

**Name_Not_Found** · 2024/01/30(火) 13:34:06.76

ない

**Name_Not_Found** · 2024/01/30(火) 13:41:52.20

ないことはないだろうよ

**Name_Not_Found** · 2024/01/30(火) 13:54:29.64

dwでいいのでは

**Name_Not_Found** · 2024/01/30(火) 13:56:34.84

DWマスターしてたら仕事でweb会社に入った時に早くに通用しますか？

**Name_Not_Found** · 2024/01/30(火) 14:54:15.32

いいえ

**Name_Not_Found** · 2024/01/30(火) 22:15:55.69

>>334
WYSIWYGエディタはもう息してないので、素直にVSCode使った方がいいよ

**Name_Not_Found** · 2024/02/03(土) 21:31:04.51

DWマスターしたレベルで使えるなら他のも普通に使えよう

**Name_Not_Found** · 2024/02/04(日) 02:34:58.87

メモ帳→GL→DW→VSCodeときたけどVSCode快適だわ
使う人少ないだろうけどVisualStudioも意外と使いやすい

**Name_Not_Found** · 2024/02/06(火) 07:56:02.65

メモ帳, 秀丸, FrontPage, Expression Web, DW(3日), VSCode
だな

**Name_Not_Found** · 2024/02/06(火) 10:03:43.94

VSCodeでDWみたいにパパっとテンプレート読み込んで使えますか？
そういうプラグインやテンプレートありますか？

**Name_Not_Found** · 2024/02/06(火) 16:50:37.79

>>342
VisualStudioのCSSのフォーマッタが好き

**Name_Not_Found** · 2024/02/07(水) 00:03:49.74

>>344
自分で試したらいい
無料なんだし紹介ページも腐るほどある
どうしても訊きたいときはVSCodeスレへどうぞ

**Name_Not_Found** · 2024/02/07(水) 08:36:48.23

どんな質問にも優しく答えるスレなんだからさぁ。。
わざわざ自分で試したらいいとか間抜けなレスしてんなよ
仕事もできねえやつなんだろうなぁ

**Name_Not_Found** · 2024/02/07(水) 13:56:17.45

これは充分優しいぞ
ググって死ねで充分だからな

**Name_Not_Found** · 2024/02/07(水) 17:09:43.43

>>347
どんな質問もじゃねーよスレタイ読め

**Name_Not_Found** · 2024/02/07(水) 17:10:57.19

うるせいわw

**Name_Not_Found** · 2024/02/07(水) 17:11:58.90

うるせいわじゃねーよマヌケ
ちゃんと謝っとけ

**Name_Not_Found** · 2024/02/07(水) 17:12:32.55

日本社会にはもっと優しさ要素が必要だよな
自分でやれとか言ってる場合じゃねえわ
共助を忘れるなよ

**Name_Not_Found** · 2024/02/07(水) 17:13:13.91

スレ違いを許す優しさは要らない

**Name_Not_Found** · 2024/02/07(水) 17:19:21.30

正義マンはお呼びじゃないです by スレ利用者一同

**Name_Not_Found** · 2024/02/08(木) 02:56:37.72

結局のところ、自分が使いたい機能とか使い勝手が自分に合ってるかどうかなんて
本人にしか分からないから、とりあえずVSCodeが良さそうだってことが分かったのなら
ここでスレ違いな質問するよりも、自分でググって気になる機能拡張を片っ端から試した方が
回答を待つよりも速いだろう

**Name_Not_Found** · 2024/02/08(木) 14:58:15.90

初心者です。
会社のcmsにHTMLを書いてページの調整をしているのですが、テーブルの罫線が付けられません。

表に黒い線(1重線)を引くのでいいのですが、薄い罫線として表示されてしまいます。

コードを書き、cmsのフォーマットの上では黒い罫線として表示されるのですが、プレビューや実装段階になると薄くなってしまいます。
(色の変更もフォーマット上では可能でした)

フォーマット的にHTMLのみ使えるのですが、CMSに邪魔されない(？)やり方はありますでしょうか？

<table border="2" table width="1550" style="height:560px; border-collapse:collapse margin;auto: border-color: black">

**Name_Not_Found** · 2024/02/08(木) 15:50:19.81

>>356
書き方間違ってる
<table border="2" table width="1550" style=“height:560px; border-collapse:collapse; margin:auto; border-color:black;”>
これでやって効かなかった箇所に!importantを付ける
border-color:black!important;
てな具合に

**Name_Not_Found** · 2024/02/08(木) 16:00:16.97

border:solid 1px #000;

**Name_Not_Found** · 2024/02/08(木) 16:46:38.52

>>357
>>358
回答ありです。
(セミコロンあたりは画像からのテキスト抽出故の誤変換でした)

cms上で
< table border="border: 1px solid #000!important" width="1550" style="height: 560px;">
(更新すると微妙に簡略化されます...)
の様に入れて見ましたが、薄い罫線のままでした。

border-color:black!important
も同様です。
何故だ...

**Name_Not_Found** · 2024/02/08(木) 18:26:16.97

tableではなくthやtdにborderを設定しなさい

**Name_Not_Found** · 2024/02/08(木) 19:12:47.47

デベロッパーツールで実際にあたってるスタイルは？
目に見えてる薄い線とやらが実はborderですらないかもしれん

**Name_Not_Found** · 2024/02/09(金) 02:09:34.03

ただtableに外枠つけるなら<table width="1550" style="border:1px solid; height:560px;">でいいだろうけど
thtdがどうなってるかどうしたいのかがわからんと何も答えられん

**Name_Not_Found** · 2024/02/09(金) 16:26:33.29

>>360
ありがとうございます！
tdの方に設定したら無事反映されました！

**Name_Not_Found** · 2024/02/09(金) 21:42:35.43

質問です。
stylebotでどのようにcssを書けばバナーとオンライブを非表示にできますか？
Chrome（64 ビット）Stylebot(拡張機能)

campaign.showroom-live.com/akb48_sr/#/
バナー（SHOWROOMバレンタイン2024キャンペーン for AKB48）

www.showroom-live.com/r/akb48_official
オンライブ

**Name_Not_Found** · 2024/02/09(金) 23:50:18.01

それってバナーのリンク先URLを貼ってんの？

その書き方じゃどのページでどこを非表示にしたいのか分からんのだが、勝手にエスパーした上で質問するけど
それって、SHOWROOMのトップページの最上部にある各専用ページへのバナーのスライダー全体と
同じくトップページちょい下にある「#オンライブ」全体を非表示にしたいって話？
それともAKBに限定してバナー等を非表示にしたいって話？
それとも全く別の話？

**Name_Not_Found** · 2024/02/10(土) 08:06:40.11

>>365
showroom live 全部です。一応自己解決しました。

/* オンライブアクティブ */
section.is-show.st-onlivelist.active {
display: none !important;
}

/* イベントバナー */
div a img {
display: none !important;
}

/* イベントバナー閉ボタン */
button.room-campaign-close {
display: none !important;
}

showroom live (all)で音量を指定する場合はどのようにcssを書けば良いでしょうか。
（ページを再読込するとミュートから始まったりので）

**Name_Not_Found** · 2024/02/10(土) 08:09:26.57

cssにそんな機能はない

**Name_Not_Found** · 2024/02/10(土) 14:47:32.48

漏れはShowroom を、
Ruby で、selenium-webdriver を使って、ブラウザを操作して、
画面上のアバターやパネルなどを削除して見ている

Chrome の拡張機能にも、Showroom を改造するものがあるのでは？

# 各要素の削除
jsCode = <<'EOT'
var elements = document.getElementsByClassName( 'footer-menu' ) ;
elements[0].parentNode.removeChild(elements[0]) ;

var elem = document.getElementById('js-avatar');
elem.parentNode.removeChild(elem);

elem = document.getElementById('gift-log');
elem.parentNode.removeChild(elem);

elem = document.getElementById('gift-area');
elem.parentNode.removeChild(elem);

elem = document.getElementById('js-room-comment-wrapper');
elem.parentNode.removeChild(elem);

elem = document.getElementById('comment-log');
elem.parentNode.removeChild(elem);
EOT

# JavaScript を実行
driver.execute_script jsCode

**Name_Not_Found** · 2024/02/10(土) 14:59:34.83

こいついつもいるな

**Name_Not_Found** · 2024/02/10(土) 15:14:25.72

ルビーキチガイはちゃんとルビーオンレイルズといつもの表記しろ
NGすり抜けるな

**Name_Not_Found** · 2024/02/11(日) 04:03:12.28

画面幅768~1000とかでスクロールバー出すのってどうなんだろう
iPadは良いけどPCで画面幅縮小した時とかのUIが良くないから避けるべき？

**Name_Not_Found** · 2024/02/11(日) 06:12:59.17

ユーザー自身が拡縮する分は
こちらの想定外でいいと思う

**371** · 2024/02/11(日) 14:01:26.32

サンクス

**Name_Not_Found** · 2024/02/18(日) 14:35:58.17

人のSassのソースを見る機会があったんですが
以下のA・B、どっちが主流ですか？
Bで書くことが多いのでAのメリットはなんでしょう？

Aの書き方
.hoge {
width: 100px;
@media (min-width: 1080px) {
width: 200px;
}
…
}

Bの書き方
.hoge {
width: 100px;
}
@media (min-width: 1080px) {
.hoge {
width: 200px;
}
}

**Name_Not_Found** · 2024/02/18(日) 15:17:37.73

Aは同じセレクターの状態違いだとわかる
Bはもうsassの意味がないレベル

**Name_Not_Found** · 2024/02/18(日) 15:21:09.49

ありがとうございます
SP作ってからPC版を作成ってクセが
個々にメディアクエリを書くより楽なもので

**Name_Not_Found** · 2024/02/18(日) 15:32:08.15

メディアクエリをmixin化するのだ
ひとつセレクタがあったら
.hoge{
@include mixin.media(sp){
}
@include mixin.media(tab){
}
@include mixin.media(pc){
}
}
みたいにセットでコピペするようにすればいい
エディタのスニペットや独自emmetルールでショートカットで出力できるようにしておくとなおよし

**Name_Not_Found** · 2024/02/18(日) 15:34:59.92

なるほどー
mixinを使うと元を修正するだけで済むから汎用性がますんですね
アドバイス助かります

**Name_Not_Found** · 2024/02/18(日) 16:54:05.41

Scssは横幅毎にファイル分けてだけどおかしなやり方だったんかなぁ

**Name_Not_Found** · 2024/02/18(日) 17:22:25.13

>>379
見通しがよければなんでもいいと思うけど
同じセレクターというか同じものを指す記述が何カ所にも登場するとそれだけでclass名の変更があったときなどに置き換える箇所が増えて変更に弱くなるよね
これは&使わない教にも言える
他方、親セレクタひとつ変えれば子孫や状態変化すべて変えられるような変更に強いコードは
hoge__fuga　みたいなHTML上のセレクタそのもので全文検索しても見つからないので
hoge　の中から探すか、ソースマップ必須になる
どちらが保守性が高いと言えるかはプロジェクトの規模やチームの特性によって変わりうる

**Name_Not_Found** · 2024/02/18(日) 18:41:34.89

>>380
なるほど変更修正も考えて分かりやすくって事ですね

**Name_Not_Found** · 2024/02/29(木) 18:15:32.28

div.hogeに以下のようなcssを効かせました
hoge{
position:relative;
}
hoge::after{
position: absolute;
bottom: -20px;
right: -20px;
display: block;
width: 100%;
height: 100%;
background: red
z-index: -1;
}
hoge要素に赤いベタの影つけることができました
ところが、after要素にfilter:drop-shadow()を使うと
after要素の上、hoge要素の下に表示されてしまいます
after要素に影をつけ用とした場合、before要素でafter要素と重ねる方法以外ありますか？

**Name_Not_Found** · 2024/02/29(木) 18:40:08.35

>>382
hogeの中にインナーを作る
z-indexが　インナー>hoge::afterになるようにする
というか影つけるだけなら疑似要素なんかいらなくて
hogeにbox-shadowであかんの

**Name_Not_Found** · 2024/02/29(木) 18:44:44.39

ありがとうございます
after要素が透明ありのpngなんで、filterなんです
どうもz-indexへの愛と理解が足りてない。。

**Name_Not_Found** · 2024/02/29(木) 18:48:52.34

疑似要素にcontentでpngを入れてるなら素直にimgタグ書くべき
背景画像がpngという意味ならdrop-shadowきかない

**Name_Not_Found** · 2024/02/29(木) 18:51:45.63

背景パターンなのでpngをBGに使っています
filter drop-shadow自体は効くようですが
chromeで見ただけなので効かないのもあるんですか
検証します　ありがとうございます

**Name_Not_Found** · 2024/02/29(木) 19:11:48.32

お騒がせしました
after要素に問題なくdrop-shadowが付いてました
なにも書き換えてないと思うのですが

**Name_Not_Found** · 2024/03/10(日) 12:29:31.95

3DCGのweb表示をしたいと考えています。
最初はThree.jsでやってたのですがGPU使用率が多く、試行錯誤して
今はmodel-viewerで試行錯誤しています。
model-viewerはモデルが動いてないとGPU使用率も0になるのでいいかとおもったのですが、
表示して暫く触らないと勝手にポインタが出てきてモデルを左右に振ってみせて、
動かせることを主張してきます。これのせいでGPU使用率が上がってしまいます。
この、勝手にポインタが出てくる仕様をOFFにできないでしょうか。

https://008.server-test.space/

**Name_Not_Found** · 2024/03/10(日) 17:49:56.50

ドキュメント読んでみたけど、そんな設定無さげ

**Name_Not_Found** · 2024/03/10(日) 22:18:22.81

>>388
interaction-prompt="none"でいいんじゃねえの？
https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-interactionPrompt

念のためググってみたら日本語情報も出てきたし
https://mawasu-blog.com/modelviewer_staging_cameras_api/

**Name_Not_Found** · 2024/03/11(月) 00:12:36.42

>>389
ありがとうございます。お手数をお掛け頂いて感謝であります。

>>390
ワオ！すごい！まさに！そのブログもいくつか目を通したのですがそこは読み飛ばしてました。
感激であります！！！！１

**Name_Not_Found** · 2024/04/05(金) 23:07:58.30

<table class="test">
<tr>
<td>aaa1</td><td>bbb2</td><td>ccc1</td>
</tr>
<tr>
<td>aaa2</td><td>bbb2</td><td>ccc2</td>
</tr>
</table>

一番左の列のみbackgroundで色をつけるにはどのようなセレクタにしてやればいいんですか？

**Name_Not_Found** · 2024/04/06(土) 00:06:24.81

>>392
.test tr > :first-child

**Name_Not_Found** · 2024/04/06(土) 00:16:44.98

tr th:first-child,
tr tf:first-child{
}

**Name_Not_Found** · 2024/04/06(土) 01:55:06.41

.test tr > *:first-child { }
外野だけど今までこうしてた
*省略していいんだ>>393さんくす

**Name_Not_Found** · 2024/04/10(水) 22:37:09.78

プロゲートというものをやってる初心者ですが

cssのactiveというコマンドで

position relative
top 7px
boxshadow none

と指定するものがあるんですが
これだと上に動くのか下に動くのかわかりにくくて

それならbottom7pxと何が違うのかと考えたりしてるんですが、どう考えたらいいですか？
質問わかりずらかったらすみません
お願いします

**Name_Not_Found** · 2024/04/10(水) 22:53:50.13

×コマンド→○疑似クラス

position: relative; ボックスの元の位置を基準に
top: 7px; 「上から」7pxにボックスを配置
bottom: 7px; 「下から」7pxにボックスを配置

**Name_Not_Found** · 2024/04/10(水) 23:02:35.99

>>397
ありがとうごさいます
擬似クラスですね間違えました

topは上から下に
bottomは下から上に動くんでしょうか？

**Name_Not_Found** · 2024/04/10(水) 23:04:45.22

動きじゃなくて距離
上辺を基準に7px離すならtop

**Name_Not_Found** · 2024/04/11(木) 00:24:50.12

とりま、これでも読んだ方が早い

position - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/position
top - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/top
bottom - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/bottom

基本的にtop, right, bottom, leftはそれぞれボックスの内側方向が正の向きって憶えとけば
方向は間違わないかと

**Name_Not_Found** · 2024/04/11(木) 00:46:41.61

>>399
わかりました
ありがとうございます

>>400
理解しました
読んで勉強します
ありがとうございました

**Name_Not_Found** · 2024/04/11(木) 07:57:46.10

プロゲートの教材で画像のようにtop wrapperを作り背景を指定して、その中にcontainerをいれて中に
h要素、p要素をいれていくものがあるんですが

top wrapperの中にh要素やp要素を直接いれてはいけないんでしょうか？

containerという箱を間に挟む意味を教えて欲しいです

よろしくお願いいたします

**Name_Not_Found** · 2024/04/11(木) 08:00:41.45

画像

**Name_Not_Found** · 2024/04/11(木) 08:07:48.13

すみません忘れてました
https://i.imgur.com/8myqxfS.jpg

**Name_Not_Found** · 2024/04/11(木) 08:18:31.89

wrapperがページの外枠そのものでcontainerがいわゆるコンテンツ幅ってやつや
wrapperとcontainerにそれぞれ別にpaddingなどが指定できるし
containerの幅を制限して中央寄せなどよくある
gridレイアウトなど使えばコンテナなしでもできたりするが難易度高いから今は言われた通り覚えたまえ

**Name_Not_Found** · 2024/04/11(木) 10:49:36.60

すみません、質問させてください！

分かりにくかったら申し訳ございませんが、例えば
<h1>hoge1</h1>
<p>hogehoge</p>
<h1>hoge2</h1>
<ol>
<li>hoge01</li>
<li>hoge02</li>
</ol>
みたいな形式の文章があったとして、<p>内の文章の全行のインデントを<li>と同じ位置にしたいのですが、
<p>を<ul>に変えてlist-style: noneにしたとしても、消えた黒丸の分スペースが残っていて
<ol>の<li>よりも下がってしまうし、本来は段落なのに<ul>を使うのも良くないし、困っています
<p>にtext-indent：◯em等を適用しても、最初の行の一文字目しか下がってくれず、
自動改行の2行目以降はインデントされないので目的が達成されません

どういった方法が良いか、アイデア教えていただけないでしょうか？

**Name_Not_Found** · 2024/04/11(木) 11:01:59.41

>>405
ありがとうございます
わかりました

今回貼った画像のようにwrapper部分に背景がなかったとしても、wrapperの中にcontainerをいれたほうがいいですか？

**Name_Not_Found** · 2024/04/11(木) 11:36:34.62

>>407
考え方が逆
「wrapperの中にcontainerは必要か」
ではなく
「今はcontainerのスタイルの設定しているのにwrapperは必要か」
を疑問視するべき
いるいらないはそのうち勝手に判断できるようになる

**Name_Not_Found** · 2024/04/11(木) 12:14:48.80

>>408
言い方を間違えました
言いたいことはそれでした

wrapperの必要性がちゃんとわかってなくて
背景がある場合はわかりやすいんですけど

とりあえず今はページの外枠とコンテンツ幅と覚えておきます
ありがとうございました

**Name_Not_Found** · 2024/04/11(木) 12:42:32.26

>>406
何も指定しなければブラウザが持っているデフォルトのスタイルで、コンテンツが装飾される訳だけど
デフォルトのliの左余白は、olやulのpadding-leftで決まり（chromeやfirefoxではデフォルトで40px）
更に番号や中黒は、list-style-positionがoutsideになっているため、liの外側（olやulのpadding領域内）に表示される
なので、list-style-positionをinsideにしてもいいんだが、liのテキスト量が多い場合に改行位置がズレるので
デフォのoutsideのままでulやolのpadding-leftを、例えばcalc(40px + ○em)とかで指定すると改行されてもズレない
（使用するフォントに合わせて○は1.2とか1.3ぐらい？で番号や中黒の分を位置調整）

以上まとめるとpをliの位置に合わせるなら、pにはpadding-left:40px;、olにはpadding-left:calc(40px + 1.3em);を指定
というのが簡単でオススメ

具体的にはこんな感じ
https://jsfiddle.net/zjt3vxf1/

というわけで上記を応用すれば、お好みの位置で色々と調整できるはず

**Name_Not_Found** · 2024/04/11(木) 13:04:26.27

>>410
詳しくありがとうございます！
しっかりと確認して実装してみます
本当にありがとうございます

**Name_Not_Found** · 2024/04/12(金) 12:31:41.18

画像のようにh2の下に50px距離をあけたい場合

h2のpadding-bottomなのか
h2のmargin-bottomなのか

iconのpadding-topなのか
iconのmargin-bottomなのか

どれが適切なんでしょうか？
その辺がよく分かってなくて、なんとなく感覚で選んでいます

よろしくお願いします
https://i.imgur.com/eLzRvvs.jpg

**Name_Not_Found** · 2024/04/12(金) 12:34:32.92

>>412
一部文章間違えました
5行目iconのmargin-bottomなのかではなく

iconのmargin-topなのか、です

**Name_Not_Found** · 2024/04/12(金) 12:48:30.99

内側の余白はpadding
外側の間隔はmargin
縦並び要素のmarginが上か下かは宗教戦争になるから好きにしよう

**Name_Not_Found** · 2024/04/12(金) 20:07:04.69

>>414
ありがとうございます

**Name_Not_Found** · 2024/04/12(金) 21:06:42.91

質問お願いします

この写真のようなサイトを作るという課題で
正解のコードが
heightが120の
paddingが40でした

ただ写真を見ると高さの合計が200でした

なのでheightを200にしてその内側の余白として
padding40と書いたのですが間違いでした

よく意味がわからないので教えてください
よろしくお願いします
https://i.imgur.com/pLNq31X.jpg

**Name_Not_Found** · 2024/04/12(金) 21:12:07.81

heightを200にして
paddingを40にすると

footerの高さが高くなってしまいます

**Name_Not_Found** · 2024/04/12(金) 22:31:57.01

>>416
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

**Name_Not_Found** · 2024/04/13(土) 12:17:22.88

>>418
ありがとうございます
要素の構造についてまだちゃんと理解できていないから分からないと思うので読んで勉強してみます

**Name_Not_Found** · 2024/04/16(火) 18:59:48.33

>>416
プロゲ懐かしいな、まだあったんだ
俺もwebはここからスタートして今では昔勉強したイタリア料理で年収2000万超えたよ
観光客相手に高単価なメニュー出してる

**Name_Not_Found** · 2024/04/17(水) 01:35:18.35

大量のGと職場が一緒の飲食は無理

**Name_Not_Found** · 2024/04/18(木) 17:45:18.69

質問させてください
下記URL先の画像のように作りたいです

画像を左右に設置することはできましたが、
緑色が左右の画像の間に左右の画像目いっぱいに幅を設定して置けませんでした
緑色の幅をフレキシブルにしたいですがそちらもできません…

どのようにすればよいのか教えて頂けませんでしょうか
宜しくお願いしますm(_ _)m

https://imepic.jp/20240418/637200

**Name_Not_Found** · 2024/04/18(木) 17:48:48.43

display:flexを使えばいいよ
とりあえずググってみよう

**Name_Not_Found** · 2024/04/18(木) 17:57:41.43

>>422
flex使えばいけるね

そういうのは専門学校の宿題か何か？
良かったら教えて
課題とかでそういうのが出てるの？

**Name_Not_Found** · 2024/04/18(木) 18:24:24.43

レスありがとうございます、試してみたらできました！
フレキシブルを使った自由課題でしたm(_ _)m

<div class="outline">
<div class="box1"></div>
<div class="greenbox"></div>
<div class="box2"></div>
</div>
.outline {
width: 100%;
height: auto;
display:flex;
}
.box1 {
width: 50px;
height: 50px;
float: left;
background: #da5f2b;
}
.box2 {
width: 50px;
height: 50px;
float: right;
background: #da5f2b;
}
.greenbox {
width: 100%;
height: 50px;
float: left;
background: #76c03d;
}

**Name_Not_Found** · 2024/04/18(木) 18:40:13.44

並び順なのでfloat指定いらないよ

**Name_Not_Found** · 2024/04/18(木) 19:34:52.11

>>425
自由課題か・・宿題とか課題とか嫌いだったな
高校生でそんなのやるわけないか、専門学校？

ちなみにオレンジボックスは共通の書き方にしてコード減らせるからやってみ
flex使えばfloatも使う必要無いよ、昔はfloatだったからそれが模範解答で出てきたら時代と教材がかなり古いと思う

**Name_Not_Found** · 2024/04/18(木) 19:35:27.90

ひねくれてgridでやろうぜ
https://jsfiddle.net/15ufnjgk/

**Name_Not_Found** · 2024/04/18(木) 19:39:17.33

grid警察だ！そこを動くな！

**Name_Not_Found** · 2024/04/18(木) 21:02:16.18

gridは最終手段って感じ
これを使わなくて済むようなデザイン組んでほしいって思う