[過去ﾛｸﾞ]
HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (1002ﾚｽ)
HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 http://mevius.5ch.net/test/read.cgi/hp/1692784333/
上
下
前
次
1-
新
通常表示
512ﾊﾞｲﾄ分割
ﾚｽ栞
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索
歴削→次ｽﾚ
栞削→次ｽﾚ
過去ﾛｸﾞﾒﾆｭｰ
759: Name_Not_Found [sage] 2024/11/06(水) 18:09:29.90 ID:??? 縦長の画像は上下が切れてもいいの？こんなふうに https://jsfiddle.net/Ldxvf4sb/ 切り取り位置はobject-positionで http://mevius.5ch.net/test/read.cgi/hp/1692784333/759
760: Name_Not_Found [sage] 2024/11/06(水) 18:23:49.05 ID:??? >いちいちクラス作って画像毎に書きたくないので なんで嫌なのか理解しかねるがまずはそれで実装しなさい その上で試行錯誤で改良していけば良い http://mevius.5ch.net/test/read.cgi/hp/1692784333/760
761: Name_Not_Found [sage] 2024/11/06(水) 18:36:34.56 ID:??? >>759 切れてはダメです。その代わり横幅はバラバラでもOKです。 >>760 例えば世の中にあるバナー（縦長、横長、正方形、長方形）を全てコレクションしていくサイトを依頼されたとする その後に画像100個、200個、3000個と増える可能性を前提に考えておくべきかと。 3000個分の画像サイズ測ってクラス全部書いてくのはもちろん非現実的だし、20個のクラスを書いてくってだけでも個人的には汎用化を即検討すべきってレベル。 jsは検討すれど全部クラス書いてくのはさすがにメンテや可読性の面でも非効率すぎかと http://mevius.5ch.net/test/read.cgi/hp/1692784333/761
762: Name_Not_Found [sage] 2024/11/06(水) 18:38:42.57 ID:??? なんにせよ変なことせず素直にgridで並べればいいような気がするけど http://mevius.5ch.net/test/read.cgi/hp/1692784333/762
763: 761 [sage] 2024/11/06(水) 18:40:01.80 ID:??? WordPressとかCMSやってる人なら常に基本は汎用化をベースに考えるはず。 あらゆる箇所においても。 http://mevius.5ch.net/test/read.cgi/hp/1692784333/763
764: Name_Not_Found [sage] 2024/11/06(水) 18:43:13.73 ID:??? >>762 >>745を実現できるならgridでもおｋです http://mevius.5ch.net/test/read.cgi/hp/1692784333/764
765: Name_Not_Found [sage] 2024/11/06(水) 18:57:48.17 ID:??? 他の人が言ってるのは使いまわしのきく仕様に見えないってことだと思うよお サイズの違う画像をきれいに並べるやり方はいろいろあるからググってみて よくあるのはこんな感じ https://coliss.com/articles/build-websites/operation/css/aligning-logo-images-in-css.html CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック http://mevius.5ch.net/test/read.cgi/hp/1692784333/765
766: Name_Not_Found [sage] 2024/11/06(水) 19:18:21.55 ID:??? >>765 ありがとう。でもそゆことじゃないんだわな〜ｗ 用途はあくまで例であり、ここへはＣＳＳの質問しに来ただけであって 私はむしろデザインの方が得意なのでレイアウトとかデザイン変えるとかそういう問題なら2秒で解決です。 http://mevius.5ch.net/test/read.cgi/hp/1692784333/766
767: 761,766 [sage] 2024/11/06(水) 19:21:29.09 ID:??? >>765 気持ちはありがたいです。とても親切な回答だと思います。 初心者ならそういう回答の方が良いこともあるかもしれないし。 お騒がせしました http://mevius.5ch.net/test/read.cgi/hp/1692784333/767
768: Name_Not_Found [sage] 2024/11/06(水) 19:24:55.50 ID:??? >>756 >#oyaにボーダー付けてみるとわかるけど全幅になってないんだよな～ #oyaがwidth:600pxでそれにborder: solid 1pxを指定なら#oya側の600ｐｘの方へボーダー表示になるのは道理では？ http://mevius.5ch.net/test/read.cgi/hp/1692784333/768
769: Name_Not_Found [sage] 2024/11/06(水) 19:29:11.53 ID:??? >>768 そうだね。relativeは#oyaではないからね。 ということで、惜しいけどダメですね。でも案をくれて有難かったです。 http://mevius.5ch.net/test/read.cgi/hp/1692784333/769
770: Name_Not_Found [sage] 2024/11/06(水) 19:32:52.92 ID:??? なんだまた釣りか http://mevius.5ch.net/test/read.cgi/hp/1692784333/770
771: Name_Not_Found [sage] 2024/11/06(水) 19:37:11.61 ID:??? >>765 そういう風に選択肢をたくさん知って勉強しとけば引き出しも増えるからね 依頼される用途を想定と言ってもコレクションサイトに画像3000個とかさぞかし見にくいサイトだろうなｗ http://mevius.5ch.net/test/read.cgi/hp/1692784333/771
772: Name_Not_Found [sage] 2024/11/06(水) 19:48:20.41 ID:??? てか、普通にロゴとかなら>>765みたいになる、というかそれしかないと思う。 でも例えば、ロゴではなく、縦長（例700×100）のバナーを設置したらそのデザインだと上下の余白なくて左右だけ余白やたらできて横長のバナーが隣接したら見苦しいだろうね。 http://mevius.5ch.net/test/read.cgi/hp/1692784333/772
773: Name_Not_Found [sage] 2024/11/06(水) 19:52:28.67 ID:??? >>770 ここそればっかだよな 人に親切にすると仇で返される http://mevius.5ch.net/test/read.cgi/hp/1692784333/773
774: 745 [sage] 2024/11/06(水) 19:57:58.13 ID:??? 今回のベストアンサーは>>755さんとさせてください。(ややこしい内容を一発理解でき、かつ独自案を出せたという事で) CSSの仕様でわかったこと ?2つの画像は親要素サイズに応じた横幅を伸縮できる （アスペクト比を保ったまま） ?2つの画像は小さい方の高さに合わせて伸縮できる ?と?は同時にはできない あざっした http://mevius.5ch.net/test/read.cgi/hp/1692784333/774
775: Name_Not_Found [sage] 2024/11/06(水) 19:58:45.35 ID:??? >>772 そんな極端なサイズが入り混じる画像をどうしても一覧に並べないといけないなら 正方形とかでサイズ揃えて切り取るかな グリッドレイアウトでobject-fit使って http://mevius.5ch.net/test/read.cgi/hp/1692784333/775
776: Name_Not_Found [sage] 2024/11/06(水) 20:01:31.15 ID:??? >>775 ロゴもだけど、隅から隅まで計算されてデザインされたものを部分的に勝手に切り取るのはナンセンスだよ 風景写真ならいいけどね http://mevius.5ch.net/test/read.cgi/hp/1692784333/776
777: Name_Not_Found [sage] 2024/11/06(水) 20:08:19.21 ID:??? >>773 ちゃんとお礼は言ったはずだけどねぇ・・・ まあ自分なら技術の質問に別の角度で回答するなら、まず「できない」という事を伝えて、その上でって事で言うかなあ そうでないとまるでできないから、質問内容に逆切れしてるみたいだよ・・・ http://mevius.5ch.net/test/read.cgi/hp/1692784333/777
778: Name_Not_Found [sage] 2024/11/06(水) 20:08:59.48 ID:??? じゃあfloatでガタガタっと並べるのはどう！ http://mevius.5ch.net/test/read.cgi/hp/1692784333/778
上
下
前
次
1-
新
書
関
写
板
覧
索
設
栞
歴
あと 224 ﾚｽあります
ｽﾚ情報
赤ﾚｽ抽出
画像ﾚｽ抽出
歴の未読ｽﾚ
AAｻﾑﾈｲﾙ
Google検索
Wikipedia
ぬこの手
ぬこTOP
0.009s