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/09/30(月) 22:41:16.53

>>670
できました、ありがとうございました

**Name_Not_Found** · 2024/10/04(金) 11:36:28.58

もう生成AIにhtmlソース作らせるか修正させれば大抵やってくれるな

**Name_Not_Found** · 2024/10/04(金) 13:37:35.37

Noto sans jpにfont-feture-settingsが効くようになっとる！

**Name_Not_Found** · 2024/10/21(月) 09:45:48.74

右クリック禁止のサイトをCTRL+Sでローカルに保存してテキストとして開いて編集してるんだが右クリック禁止はHTML上のどの文に当たるの?
javaやscriptで検索して見て行っても分からない

**Name_Not_Found** · 2024/10/21(月) 09:57:21.36

oncontextmenu="return false;"
これが右クリック禁止
どこかにあるんじゃないか、bodyとかdivとかに

**674** · 2024/10/21(月) 12:18:46.92

>>675
これで行けたよ
回答ありがとうございます

**Name_Not_Found** · 2024/10/21(月) 13:45:30.03

スレ違いかもやけど。

海外の外部サービスを使ってメルマガ配信。
SEO を考え、まぐまぐのような所謂バックナンバーのページを自社ドメイン内でブログとして作りたい。

条件
・外部サービスではメルマガのソースは提供してない
・メルマガをメールアプリでソースをみても文字化けしてる

どうにかメルマガをキレイに HTML 化して、ブログの記事としてバックナンバーを作ることはできませんかね？

**676** · 2024/10/21(月) 13:48:20.94

メールアプリからPDFに保存してからHTML化するのも考えたけど、縦に長いメルマガだとPDFが分解されてダメでした。

**Name_Not_Found** · 2024/10/21(月) 18:24:30.47

ThunderbirdでメールをHTML形式で保存

**Name_Not_Found** · 2024/10/27(日) 22:19:38.16

比較的最近追加されたようなプロパティや単位などで実装レベルで便利なのあったらおせーてください
text-wrap: balance、
:has
とか使ってる？

**Name_Not_Found** · 2024/10/27(日) 22:21:39.95

>>672
まじそれ。javscriptを学ぶ意欲が無くなった
考える事も減ったし　製作者の思考力も低下していくと思う

**Name_Not_Found** · 2024/10/27(日) 22:27:38.35

>>648
それ。ネストがiOS対応してなくて絶望した

**Name_Not_Found** · 2024/10/27(日) 23:48:54.76

dvh、マジ助かる

**Name_Not_Found** · 2024/10/28(月) 03:37:04.74

>>680
:has()はなにかとお役立ち

**Name_Not_Found** · 2024/10/28(月) 13:12:41.07

マジでiOS消えてくれ
色々iOSのケツ拭くのめんどくせーわ

**Name_Not_Found** · 2024/10/28(月) 13:14:37.79

例えば何？

**Name_Not_Found** · 2024/10/28(月) 13:19:27.37

横からだがgridのalignやjustifyが特定の条件できかなくなることあったな
flexでもよい場所だったからflexにしたけど
あとはjsだけどiOSだけtransitionEndやanimationEndがちゃんと取得できないのでそれだけのためにpromiseに書き直したり

**Name_Not_Found** · 2024/10/28(月) 13:33:09.68

IE時代を知ってるか知らないかで反応が分かれそうやな

**Name_Not_Found** · 2024/10/28(月) 13:41:09.75

IEというのはいわば共通の敵だったんや
それがいなくなった今safariとfirefoxの独自仕様がうざいってことや
「IEはなくなってもうモダンなコーディングできるんじゃなかったのかよ！よくも騙したァアアア！」ってなるんや

**Name_Not_Found** · 2024/10/28(月) 14:37:24.98

>>686
たとえばlinear-gradientで、transparentが使えないからrgba使ったりな
今は知らんけど

前に案件でネスト使って構築したら、
最新じゃないiOSのsafariでみれなくて、全部書き直したわ

いちいちめんどい

**Name_Not_Found** · 2024/10/28(月) 14:47:47.08

昔のIEでよくあったような「safariとfirefoxのこのバグに気をつけろ」みたいなtipsの令和最新版がほしいな

**Name_Not_Found** · 2024/10/28(月) 14:57:02.49

ワシも横からだが、flexだかfloatだかのリセット用？にdisplay:table;が指定された
空の疑似要素に、safariだけ勝手に1pxの余白が挿入されて、原因が分からず
小一時間ハマった事ある
自分で書いたものではなく海外製のjqueryプラグインで色々と面倒臭かった

**Name_Not_Found** · 2024/10/28(月) 15:05:49.58

chmって元はhtmlなんだろ
pdfよりよっぽど使いやすいのに何で普及しなかったんだろう

**Name_Not_Found** · 2024/10/28(月) 15:11:55.01

>>691
よく検索するとまとまってないのよねー
いま、Firefoxのgridがおかしくて泣いてる

**Name_Not_Found** · 2024/10/28(月) 15:21:03.26

>>694
画面幅がこうで、親要素がこうだと、子要素このプロパティがなんかおかしいんだけど？くらいまで自分で見当つければヒットしたりはするんだけど
英語のフォーラムしかないとかね

**Name_Not_Found** · 2024/10/28(月) 16:00:23.40

ルビカス死ね

**Name_Not_Found** · 2024/10/28(月) 17:03:54.10

>>692
その昔、ワイはハマると6時間とか平気で潰した事あったわ・・
今は情報もたくさんあるしAIもいるしでほんと環境はよくなったね

**Name_Not_Found** · 2024/10/28(月) 17:07:30.37

>>688
トップページがIE6で崩れてる事を不意打ちで言われたときの冷や汗やばかった
floatの崩れかたってクラッシュ感が半端ない

**Name_Not_Found** · 2024/10/28(月) 17:59:44.13

そもそも複数のブラウザが未だhtmlの仕様統一されてないのが糞なだけ

**Name_Not_Found** · 2024/10/28(月) 18:06:10.63

にもかかわらずWebエンジン増やそう！って勢力が未だにおるんよな

**Name_Not_Found** · 2024/10/28(月) 18:26:25.27

エンジンは多様なほうがいいというのは事実なんだが
たかだか見た目の描画に差があるのが問題
多様性ってのはあの処理は早いけどこの処理は苦手だよねとか
あのセキュリティホールは他は無事だったねとかそういうもんなのに
cssやjsごときの解釈で見た目が崩れますとかアホかと

**Name_Not_Found** · 2024/10/29(火) 00:41:29.78

HTML5って5.2とか5.3でマイナーチェンジしてるみたいだけど
何が違うの

**Name_Not_Found** · 2024/10/29(火) 02:13:30.18

>>694
解決したら情報を共有してもらえるとありがたいっす

**Name_Not_Found** · 2024/10/29(火) 03:01:10.28

CSSはUA CSSが異なればデザインやレイアウトも変わる仕様なので、ある程度は仕方ない。
その問題ならリセットで解決する。

jsにしても仕様に書かれてない部分は実装依存なのだから、仕様外の部分に共通性を求めているならそれは間違い。

勿論、仕様通りに実装されてないならバグ。
けど、文章読む限り、仕様と実装を区別できてるのかなと思った。

**Name_Not_Found** · 2024/10/29(火) 05:41:22.28

>>701
> たかだか見た目の描画に差があるのが問題
たかが見た目されど見た目

**Name_Not_Found** · 2024/10/29(火) 07:46:57.57

place-contet:centerでsafariだけ中央にならないとかgrid系はバグだらけ

**Name_Not_Found** · 2024/10/29(火) 07:56:47.26

>>704
リセットなんかしてるに決まってるやろ

**Name_Not_Found** · 2024/10/29(火) 13:17:39.06

>>703
原因はわかったので共有します　2点あります
1.
子要素を中央にする際に、子要素のtemplateにfit-contentを使うと
Firefoxでは中央合わせにならない
→解決策はfit-contentを使わない

2.
subgridを使う場合、子要素にimgが一番先の場合は
Firefoxではレイアウトが崩れる（画像下に謎のスペースができる）
→解決策はfigureで囲う

htmlとscssはこちらを参照
https://jsfiddle.net/r17vx2s0/1/

**Name_Not_Found** · 2024/10/29(火) 16:19:07.61

生成AIでベースになるhtml、javascript書かせた場合
javascriptってGPLとか著作権ってないの？

**Name_Not_Found** · 2024/10/29(火) 16:28:27.30

有ったり無かったりというか
javascriptに限らず、AIで出力されたコードの元になってるトレーニングデータの
ライセンス条件を確認する必要があるので、特に仕事で使うには注意が必要

**Name_Not_Found** · 2024/10/29(火) 16:30:33.84

> 元になってるトレーニングデータのライセンス条件を確認

じゃなくて「トレーニングデータの出所にライセンス条件を確認」だな

**Name_Not_Found** · 2024/10/29(火) 20:44:29.56

>>708
ありがとー！

**Name_Not_Found** · 2024/10/30(水) 23:00:21.56

nth-of-typeについて、最近(n+3)などの指定記述を覚え重宝しています
ついでにこれらで偶数奇数関係なく、2と3と7を指定みたいな記述方法は存在しないのでしょうか
(/|/)の様な正規表現と同様の使い方です
よろしくお願いいたしますm(vv)m

**Name_Not_Found** · 2024/10/30(水) 23:12:49.36

何個飛びとか法則性が無いんだったらカンマ区切りでセレクタ複数書くのと変わらない

**Name_Not_Found** · 2024/10/30(水) 23:14:28.92

ランダムに何回も出てくるんならクラス名付けたほうがよくない

**Name_Not_Found** · 2024/10/30(水) 23:25:24.68

:nth-of-type(2,3,7)ということでしょうか？
:has-text()に通用する記述なども試したのですが、全部エラーなんですよね・・・

やけくそで↓も試せど、こういうのはエラーにならない反面、当然のようにサイトへも反映されず
:nth-of-type(2):nth-of-type(3):nth-of-type(7)

a:nth-of-type(2)
a:nth-of-type(3)
a:nth-of-type(7)
のような縦書きコードを圧縮したいのですm(vv)m

**Name_Not_Found** · 2024/10/30(水) 23:51:34.83

みんなのコメントからたいへん勉強になった。CSSはAPIテストとは直接関係ないが、EchoAPIとフロントエンドのシームレスな動作により、スタイルをより統合することができると聞いて。おすすめ！

**Name_Not_Found** · 2024/10/31(木) 00:41:36.17

>>716
その縦書きをカンマで区切るって意味だよ
そもそも法則性がないなら順番で指定しようとするのが間違い
要素の増減や順番の変更に対応できないクソコードが生まれるだけ
>>715の言うとおり目的から考えたらclassをつけるのが正攻法

**Name_Not_Found** · 2024/10/31(木) 01:38:10.70

例えば
##.btn-category-list.category-list>li:nth-of-type(2)
##.btn-category-list.category-list>li:nth-of-type(3)
##.btn-category-list.category-list>li:nth-of-type(7)

をまとめるとき、これを一行で表記するにはどのような記述例があるのでしょうか
liはclass無しですm(vv)m

**Name_Not_Found** · 2024/10/31(木) 01:43:42.04

それと
##.btn-category-list.category-list>li:nth-of-type(2), .btn-category-list.category-list>li:nth-of-type(3)

は可能ですが、まさかこれのことを仰っているのでしょうか？
こちらは記述領域の圧縮効果に乏しく、採用し兼ねます^^;
沢山のアドバイス有難うございますm(vv)m

**Name_Not_Found** · 2024/10/31(木) 02:10:26.51

class1つしか与えられないとか思ってそう

**Name_Not_Found** · 2024/10/31(木) 02:15:47.24

つまんない釣り

**Name_Not_Found** · 2024/10/31(木) 03:02:24.52

AdBlock臭いな

**Name_Not_Found** · 2024/10/31(木) 03:08:11.02

あー自分で書いてるコードじゃなくなんか消したいからclass付与はできないってことか
なんのブロッカーか知らんが該当スレ行け

**Name_Not_Found** · 2024/10/31(木) 03:35:59.64

:is()
広告ブロックは特有の書き方もあるし専門スレで聞いた方がいいよ

**Name_Not_Found** · 2024/10/31(木) 04:06:47.40

もうさｗｗｗｗ:is()で調べたら確かにこれだとカンマで()内へ複数指定できて俺の目的通りだわな
こんな感じで237を一行に指定・集約できるなら最高だよｗ

問題は俺が何度も言っている##～の記述にそれをどう組み込むのかっつー話だろｗｗｗｗｗ
読解力不足か？ｗｗ
それに昨今の「短文は賢い」みたいな風潮は、高橋洋一さんなどの一部だから通用するんであって、
俺やお前らのような世間一般の大多数は、単なる言葉足らずな自閉症を相手にしている感覚だよｗｗｗ
一周回って理解不能ｗｗｗｗ凡人が天才の猿真似をするんじゃねーｗｗ

**Name_Not_Found** · 2024/10/31(木) 04:07:00.47

最初から記述方法や記述例などを聞いて、しかも具体的なコード例でまで示してんのに（笑）
これで通じない方が一周回ってバカだろうがｗｗｗｗｗ
分からないなら無回答の方が百倍マシｗｗｗｗｗｗｗｗｗ
リアル池沼が背伸びして頓珍漢な回答したり、高橋洋一さんの真似をしたがるナンチャッテ賢い人のオナニーを、
俺は何度も許容できねーんだよｗｗ
分からないなら分からないと、出来ないなら出来ないと言えやｗｗｗｗ
背伸びやオナニーで無駄に引っ掻き回すんじゃねえｗｗｗｗ

ほんと、昔養護学校へボランティアに行ったときのことを思い出したわｗｗｗｗｗｗ
いい加減にしろやボケがｗｗｗｗｗm9（^д^）

**Name_Not_Found** · 2024/10/31(木) 06:07:59.89

スレ違い♡

**Name_Not_Found** · 2024/10/31(木) 07:47:54.16

早く死ね

**Name_Not_Found** · 2024/10/31(木) 12:17:37.25

毎度安定の自己紹介やなー

**Name_Not_Found** · 2024/10/31(木) 14:54:49.07

過疎スレにキチガイが流れてきて荒れているなぁ

**Name_Not_Found** · 2024/10/31(木) 23:50:43.19

ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります
https://coliss.com/articles/build-websites/operation/css/animate-to-height-auto-in-css.html

Chrome以外もはよ

**Name_Not_Found** · 2024/11/01(金) 01:00:36.88

CSSでアニメーションって
選択項目を横に伸ばせるようになるだけ？

**Name_Not_Found** · 2024/11/01(金) 01:05:18.89

横はいつ出番あるのかわからんが高さは
detailsを開くようなアニメーションで高さ固定したりjs使わなくてよくなるってことだぞ
めちゃくちゃでかい
現場では誰もが一度は何で無いんだよと思ったことがあるはずの機能

**Name_Not_Found** · 2024/11/01(金) 01:16:28.50

選択したら色変わる程度で十分

**Name_Not_Found** · 2024/11/01(金) 03:13:49.95

そういう問題じゃねえｗ

**Name_Not_Found** · 2024/11/02(土) 01:46:37.11

AIでhtmlやらjs作れちゃうし
まともに覚える意味無くなったな

**Name_Not_Found** · 2024/11/02(土) 07:00:23.09

よかったね

**Name_Not_Found** · 2024/11/02(土) 09:45:03.68

大まかに覚えて細かいところはAIに聞く
大まかに分かってないやつはAI使っても無理

**Name_Not_Found** · 2024/11/02(土) 16:15:38.44

全部AIってのも著作権的な意味合いで危ないしな
今のところは何というか、高機能なEmmet使ってるみたいな感覚しかない

**Name_Not_Found** · 2024/11/02(土) 17:02:59.51

htmlはいまだにめちゃくちゃプロンプトがんばらないとだめ
cssに至っては情報が古い
信頼できるのはjsやphpだがそれでも「
なんでrequestAnimationFrameじゃなくsettimeoutなんか使ってんねん」「これループのたびに同じ要素取得してね？」とかポンコツコード出してくることはある

**Name_Not_Found** · 2024/11/05(火) 07:33:33.91

超初心者なのですが、よろしくお願いします

【１】　div style="background-color:#444444; width:800px; height:1300px;

の様な場合に途中から

【２】　div style="background-color:#444444; width="800px" height="1300px"

の様にイコールとダブルクォーテーションの形式になっても良いものでしょうか？

【１】の場合だと"background-colorに始まりのダブルクォーテーションを打ったがために、最後の閉じる所までダブルクォーテーションが使えないんでしょうか？

そもそも色などを指定する場合、コロンとセミコロンで囲うスタイルと、イコールとダブルクォーテーションを使うスタイルはどちらでも可なんでしょうか？
併用して混在していても有効なのでしょうか？

表現が下手なので検索してもなかなか答えに辿り着けず、わかりにくくてすみませんがよろしくお願いします

**Name_Not_Found** · 2024/11/05(火) 08:18:46.29

>>742
widthとheightなどは固有プロパティであってcssではない
cssはすべてセミコロンで区切って次のプロパティを書く

**742** · 2024/11/05(火) 17:07:53.54

>>743
なるほど、なんでもかんでも全部ひと括りにしようとしてました
反映されない要素があったりするので、なんでかなと困ってました
簡潔なお返事ありがとうございました

**Name_Not_Found** · 2024/11/06(水) 00:37:59.07

縦横サイズがバラバラの2つの画像を横に並べる方法について質問です。
2つの画像において高さを小さい方に合わせアスペクト比を保ったまま横幅を自動調整（両画像の高さを揃え横幅は不揃いでOK）し、
かつ全幅（親要素 #oyaの幅に応じて画像が伸縮）にする方法わかる人いますか？CSSのみで実現が条件です。　
下記ではheight: ****vh;箇所を調整しないと親要素を突き破ってしまうため、自動でリサイズされるようにしたいです。
.image-container {
width: 100%;
display: flex;
gap: 10px;
.image-wrapper {
flex: 0 0 auto;
height: ****vh;/*←数値指定したくない*/
scroll-snap-align: start;
img {
height: 100%;
width: auto;
object-fit: cover;
}
}
}
<div id="oya">
<div class="image-container">
<div class="image-wrapper">
<img src="image-1.png">
</div>
<div class="image-wrapper">
<img src="image-2.png">
</div>
</div>
</div>

**745** · 2024/11/06(水) 00:55:04.99

補足
cssは↓これでも>>745同様にできるけどこれもheight:の数値指定が必要

.image-wrapper {
display: inline-block;
margin-left:10px;
&:first-of-type{
margin-left:0;
}
height: 470px;/*←数値指定したくない*/
img {
height: 100%;
}
}

**Name_Not_Found** · 2024/11/06(水) 01:12:07.32

heightは記述したくないけど小さい方の画像の高さを取得して揃えたいってこと？

**Name_Not_Found** · 2024/11/06(水) 01:18:58.48

>>747
その通りです。

でもなんかこれで自己解決した臭い、、

.image-container{
width: 100%;
display: flex;
gap: 10px;
.image-wrapper {
&:last-of-type {
flex: 1;
img{
height: 100%;
object-fit: cover;
}
}
}
}
大丈夫かなこれ、、

**745** · 2024/11/06(水) 01:30:49.37

>>748
これダメでした。親要素の横幅が狭いと崩れる、、

**Name_Not_Found** · 2024/11/06(水) 07:15:49.01

試してないけどHTML書き換えていいなら
高いほうの画像のimage-wrapperを高さ0にするとか
position: absolute; か height: 0;

**745** · 2024/11/06(水) 08:46:34.16

ソースをアップしました。

見た目こうしたい（その上で数値を指定したくない）
https://jsfiddle.net/05Lhyo8x/1/

>>750さんの結果（ダメでした）
https://jsfiddle.net/05Lhyo8x/2/

**Name_Not_Found** · 2024/11/06(水) 12:06:12.14

> 見た目こうしたい

アスペクト比はこれでいいの？

**Name_Not_Found** · 2024/11/06(水) 12:24:42.46

>>752
ごめん、なんか歪んでるよね。
もし可能なら、元画像のアスペクト比を保ったままが理想です。

**Name_Not_Found** · 2024/11/06(水) 15:10:29.47

画像サイズが決まってるなら、calcで計算するとかすれば行けるんだがなぁ

**Name_Not_Found** · 2024/11/06(水) 16:05:26.80

position: absolute; の使いかたちょっと言い間違えたごめん
これはどう？
https://jsfiddle.net/wsp9thrL/33/

**Name_Not_Found** · 2024/11/06(水) 17:09:00.17

>>755
ありがとう。　だが実に惜しい、、
#oyaにボーダー付けてみるとわかるけど全幅になってないんだよな～。それ以外はバッチリなのに、、

https://jsfiddle.net/6d9f4esq/1/

**Name_Not_Found** · 2024/11/06(水) 17:16:16.78

>>756
どういう状況で必要な仕様なのか想像つかない…
flexを1 0 auto にしてみたらどうかな？

**Name_Not_Found** · 2024/11/06(水) 17:44:07.43

>>757
ありがとう。ただ、flexを1 0 auto にすると2番目の画像が親要素（黒いボーダー）の外に出てしまう様子。
#oyaのサイズが大きいと余白ができてより崩れてるのがわかりやすいかも

https://jsfiddle.net/a6401L3d/1/

用途としては、縦横バラバラの画像（20個全部バラバラ）を2つづつ横並びで高さを揃えて並べていく
その際、それぞれの画像に合わせて数値や比率をいちいちクラス作って画像毎に書きたくないので
汎用CSS1つで全部に対応させるようにしたい　って感じです

js使わないと無理かもですねぇ

**Name_Not_Found** · 2024/11/06(水) 18:09:29.90

縦長の画像は上下が切れてもいいの？こんなふうに
https://jsfiddle.net/Ldxvf4sb/
切り取り位置はobject-positionで

**Name_Not_Found** · 2024/11/06(水) 18:23:49.05

>いちいちクラス作って画像毎に書きたくないので
なんで嫌なのか理解しかねるがまずはそれで実装しなさい
その上で試行錯誤で改良していけば良い

**Name_Not_Found** · 2024/11/06(水) 18:36:34.56

>>759
切れてはダメです。その代わり横幅はバラバラでもOKです。

>>760
例えば世の中にあるバナー（縦長、横長、正方形、長方形）を全てコレクションしていくサイトを依頼されたとする
その後に画像100個、200個、3000個と増える可能性を前提に考えておくべきかと。

3000個分の画像サイズ測ってクラス全部書いてくのはもちろん非現実的だし、20個のクラスを書いてくってだけでも個人的には汎用化を即検討すべきってレベル。
jsは検討すれど全部クラス書いてくのはさすがにメンテや可読性の面でも非効率すぎかと

**Name_Not_Found** · 2024/11/06(水) 18:38:42.57

なんにせよ変なことせず素直にgridで並べればいいような気がするけど

**761** · 2024/11/06(水) 18:40:01.80

WordPressとかCMSやってる人なら常に基本は汎用化をベースに考えるはず。
あらゆる箇所においても。

**Name_Not_Found** · 2024/11/06(水) 18:43:13.73

>>762
>>745を実現できるならgridでもおｋです

**Name_Not_Found** · 2024/11/06(水) 18:57:48.17

他の人が言ってるのは使いまわしのきく仕様に見えないってことだと思うよお
サイズの違う画像をきれいに並べるやり方はいろいろあるからググってみて
よくあるのはこんな感じ
https://coliss.com/articles/build-websites/operation/css/aligning-logo-images-in-css.html
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック

**Name_Not_Found** · 2024/11/06(水) 19:18:21.55

>>765
ありがとう。でもそゆことじゃないんだわな～ｗ
用途はあくまで例であり、ここへはＣＳＳの質問しに来ただけであって
私はむしろデザインの方が得意なのでレイアウトとかデザイン変えるとかそういう問題なら2秒で解決です。

**761,766** · 2024/11/06(水) 19:21:29.09

>>765
気持ちはありがたいです。とても親切な回答だと思います。
初心者ならそういう回答の方が良いこともあるかもしれないし。
お騒がせしました

**Name_Not_Found** · 2024/11/06(水) 19:24:55.50

>>756
>#oyaにボーダー付けてみるとわかるけど全幅になってないんだよな～
#oyaがwidth:600pxでそれにborder: solid 1pxを指定なら#oya側の600ｐｘの方へボーダー表示になるのは道理では？

**Name_Not_Found** · 2024/11/06(水) 19:29:11.53

>>768
そうだね。relativeは#oyaではないからね。
ということで、惜しいけどダメですね。でも案をくれて有難かったです。

**Name_Not_Found** · 2024/11/06(水) 19:32:52.92

なんだまた釣りか