X

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

■ このスレッドは過去ログ倉庫に格納されています
1Name_Not_Found
垢版 |
2022/02/25(金) 16:42:48.40ID:H+CdGnmu
https://mevius.5ch.net/test/read.cgi/hp/1636434627/
2022/09/08(木) 18:06:13.83ID:???
>>786
そうなんよね
スタイル定義は意識してCSSに分離しとかないと、後々探し回る羽目になりがち
2022/09/09(金) 12:40:19.85ID:???
>>786
>>788
同感
jQueryでCSSを設定しまくってたサイトの変更がめちゃ大変だった
2022/09/09(金) 15:08:52.51ID:???
>>786
スマン　コロンは後で気付いたわ

そう、cssメソッドなんて普段使わんよ。1行で簡潔できるのをわかりやすく示しただけ。
クラス付与が基本よな
2022/09/09(金) 15:10:43.28ID:???
もうレスポンシブが主流なんだから
.css()なんて誰も使ってないから大丈夫だよ。
みんなわかってるって
2022/09/09(金) 15:13:16.38ID:???
バニラのjsなんてコピペでもしないと覚えられないわ
jQueryならなんも見ないでも書けるし便利だからやめられん
2022/09/09(金) 18:38:25.57ID:???
bootstrapもjquery排除したし無くて困る事は減りつつあるような気が
まぁ、アプリならvueとかreact使うだろうから余計に要らないのだが
2022/09/09(金) 20:04:48.67ID:???
tableの左上と右上を丸くしたいのですがtableにborder-radiusを指定しても丸くなりません。border-collapseはseparateでborder-spacingは0で指定してます、
2022/09/09(金) 20:13:31.60ID:???
「table　css　角丸」でググってみ
2022/09/09(金) 21:07:41.16ID:???
>>794
テーブルのボーダーの上にセルのボーダーが被ってるんじゃね
該当部分のボーダーを消せば見えるようになるはず

table {
border-collapse: separate;
border-spacing: 0;
border-radius: 12px 12px 0 0;
border: 2px solid black;
margin: 0 auto;
min-width: 50vw;
}
td {
border: 2px solid black;
border-left: none;
border-bottom: none;
}
tr:first-of-type td { border-top: none; }
td:last-of-type { border-right: none; }
2022/09/10(土) 00:18:18.49ID:???
>>796
ありがとうございます！できました～
2022/09/12(月) 00:12:31.72ID:???
amazonのID：product-alert-grid_feature_divについて質問です
→例えばアマゾンの「パナソニック-ニュアンスグレー色-NA-F50B15-H-ビッグウェーブ洗浄「つけおきコース」でがんこな汚れも-「槽乾燥」コースで清潔に」

このIDは関連商品の広告バナーにも併用されているIDですが、純粋な商品警告に使用された場合、高確率で文字列が加わります
#product-alert-grid_feature_div > div > div.prodImageと後続の#product-alert-grid_feature_div > div > h2の間に改行を挟みたいのですが、displayやpositionの変更では上手くいきません
ハイパーリンクを伴うリンク画像の後に<br>タグを差し込むような感じで文字列を下方修正表示させる場合、どのように指定すれば良いでしょうか？
よろしくお願いしますm(vv)m
2022/09/12(月) 00:17:10.42ID:???
参考リンクはどうしてもNGワードやこのスレッドにはもう書けませんとなります
『NA-F50B15-H』でamazonを検索し、amazon直売の商品を選ぶことで最適な資料へ辿れる様子です
マケプレ商品の場合、汎用広告バナーが代わりに表示されますがIDそのものは生きています
お手間すみません
2022/09/12(月) 00:39:01.74ID:???
background-imageでsvgを使うとき、base64でエンコードしなきゃいけないのは
IEのためだけでしたっけ？
2022/09/12(月) 12:47:26.00ID:???
>>798
h2::before {content: "\A"; white-space: pre;}
2022/09/12(月) 13:19:04.75ID:???
#productAlert_feature_div > div > div > h2::before {content: "\A"; white-space: pre;}
試しに導入したら様々な部分の表示がバグって、しかも他の正常なコードにまで悪さするようになりました

しかし、今まで.prodImage側のafterなどを追加で試行錯誤していましたがh2側のbeforeで指定することは盲点でしたね
今回は{content: "\A"; white-space: pre;}　←この部分がどうにも怪しいものの、助言有難うございました
803ちなみに
垢版 |
2022/09/12(月) 13:32:02.02ID:???
#productAlert_feature_div > div:style(margin-bottom:0px!important; padding-top:5px!important;)
#productAlert_feature_div > div > .prodImage > a > img:style(height:60%!important; width:60%!important;)
#productAlert_feature_div > div > .unified_widget:style(margin-bottom:0px!important; padding-top:0px!important;)
#productAlert_feature_div > div > div > .prodImage > a > img:style(height:60%!important; width:60%!important;)
#productAlert_feature_div > div > div > h2:style(font-size:12px!important; font-weight:normal!important; line-height:15px!important;)
!#productAlert_feature_div > div > div > h2:nth-of-type(1)::before:style()
#productAlert_feature_div > div > div > ul:style(margin-top:5px!important; margin-bottom:5px!important;)
#productAlert_feature_div > div > h2:style(font-size:12px!important; font-weight:normal!important; line-height:15px!important;)
#productAlert_feature_div > div > ul:style(margin-top:5px!important; margin-bottom:5px!important;)

こんな感じで!部分を試行錯誤中です
参考画像を添付したいものの、うpろだ系のリンクは全部弾かれそうですのでコードのみの提示とさせていただきます
amazonは2019年以降増え始めた乱英数字によるアドレス強制変更が少なく、まだまだ扱い易いサイト構造
ただ、IDの下にIDを付け、用途別で常時切り替えるところが少し面倒
2022/09/12(月) 14:12:28.16ID:???
くっそーマジファッキン
.prodImageにあるfloatが邪魔して無駄な空白を作ったり、float＋広告バナー＋本来の用途＋imgの縮尺変更＋staticなのにabsolute状態
これらが重なってどうしてもコンパクトかつスマートな表示になりませんわ
そもそも改行一つにせよ、普通のサイトはblockの付け外しなどで簡単に位置調整可能ですしorz
amazonが1か所に要素を詰め込みすぎな様子です

広告バナーを諦めて.prodImageそのものをカットします・・・スレ利用すみませんでした
2022/09/12(月) 15:11:53.42ID:???
>>800
IE11対応と、CSS内で直接SVG属性を編集するためじゃないかな
ファイルからリンクする方が保守性はいいよね
2022/09/12(月) 15:16:03.88ID:???
cssで背景色を変えたいけどhtml側にsvg書きたくない時とかはエンコード必要
2022/09/13(火) 01:10:20.39ID:???
>>805
ありがとうございます！
IE滅んで良かったー
2022/09/13(火) 12:38:11.48ID:???
>>806
base64じゃなくて引っかかる文字だけURLエンコードでいいっしょ
809Name_Not_Found
垢版 |
2022/09/13(火) 20:29:00.45ID:wdaZP6Kf
初心者です
HTMLにread onlyを外部ファイル(json)から取得した値でONOFFしたいのですが検索してもJavaScriptを使う方法しか出てこないです‥jsonを読む都合上JavaScript 使わずにHTML、CSS、vue.jsで実現する方法はありませんか？
2022/09/14(水) 11:22:20.60ID:???
vue.jsつこてるやん
2022/09/15(木) 12:02:33.99ID:???
そろそろ各質問スレへの誘導があってもいいと思う
ここのおじ達が何でもかんでも回答するからあっちもう息してない

+ JavaScript の質問用スレッド vol.126 + [転載禁止]©2ch.net
https://mevius.5ch.net/test/read.cgi/hp/1439005423/

PHP質問・雑談スレ6【初心者お断り(ROM歓迎)】
https://medaka.5ch.net/test/read.cgi/php/1557652864/
2022/09/15(木) 23:23:04.09ID:???
FigmaがAdobeによる買収に合意
https://www.figma.com/blog/a-new-collaboration-with-adobe/
2022/09/16(金) 01:06:07.27ID:???
雑談スレにageで書けよおう
2022/09/20(火) 21:55:19.74ID:???
<style>
#test{
border:Solid 1px #0000ff;
width:500px;
height:100px;
position:relative;
}

#test2{
position:absolute;
list-style:none;
display:flex
}
#test2 li{
width:1rem;
background:#ff00ff;
margin-right:20px;
}
</style>

<div id="test">
<ul id="test2">
<li>aaa</li><li>bbb</li><li>ccc</li>
</ul>
</div>

liの幅を外枠のdivと同じ幅にしたいんですがwidth:1remとしても同じ幅になりませんでした。
remってルート要素を基準とするんだから1remで同じ幅になるんじゃないんですか？
2022/09/20(火) 22:33:23.07ID:???
外枠の幅1remにしてなくね
2022/09/20(火) 23:00:16.28ID:???
つーか何言ってるかよく分かんない
外枠のdivってwidthが500pxの？
で、liをdivのwidthに合わせて500pxにしたいってこと？
だとすればremの意味と使い方が分かって無い気が
2022/09/20(火) 23:02:40.72ID:???
remが基準にするのはフォント
ホントよ
2022/09/20(火) 23:24:35.53ID:???
>>816
そのとうりです
>>817
rem対応ってフォントのみですか
2022/09/20(火) 23:29:18.40ID:???
>>818
とりあえず、コレ読んでみるといい

CSS の値と単位 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units
2022/09/21(水) 01:12:19.35ID:???
>>814
・remはルートのフォントサイズを基準にする単位なので、ボックスサイズの指定には不向き
・CSSに「親の親」の値を直接取得して利用する方法はない
・divの幅よりulの幅を大きくとって、その中にdivと同じ幅のliを横に並べたいなら、liのwidthに直接500pxを指定
・div幅=ul幅=li幅で縦に並べるなら100%指定ですむけど、positionとflex使ってるからｺﾚｼﾞｬﾅｲ予感
821Name_Not_Found
垢版 |
2022/09/21(水) 09:18:15.86ID:2QBGPuKv
>>809
V-bind:readonlyで設定できました
スレチ申し訳ないです
2022/09/21(水) 13:06:45.04ID:???
>>820
なるほどｃｓｓじゃ無理なんですね
まだｃｓｓは不完全なんだな
ｊｓでやるか
2022/09/21(水) 13:19:05.87ID:???
>>822
設定の仕方が違うだけ
inline-block使ってみ
2022/09/21(水) 13:58:28.89ID:???
>>822
CSSのせいじゃなくて、アプローチの方がおかしいと思われる
2022/09/21(水) 15:47:12.72ID:???
つーか実際のところliって縦並びにしたいのかな？
>>814だとliは横並びだから500pxだとdivから盛大にはみ出すんだが
2022/09/21(水) 18:34:46.11ID:???
わざわざabsoluteやflex入れてるしulはdivより広くしたいんじゃね
どういうレイアウトにしたいのかはっきり示した方が的確な助言がもらえるとは思う
2022/09/21(水) 18:59:38.67ID:???
だね
フレームレイアウトを絵で書いてくれた方が完成にたどり着くの早そう
SP表示までにレイアウトが変わる場合はそれも添えとくとベター
2022/09/21(水) 19:16:49.51ID:???
>>823
枠の中にulを収めたいわけじゃないです
>>825
横並びです
>>826
そうです
liの幅はdiv枠の幅で、liが２つ以上だとul全体はdivより大きくなるのは仕方ないです
2022/09/21(水) 19:33:32.32ID:???
>>828
単純にdivとliに同じ幅を指定すればいいと思うよ
決め打ちなら同じ500px、ページ幅に合わせて可変するならvw使った値を入れる
あとはulのデフォルトマージンとパディングをクリアしとけば希望の形になるのでは？
2022/09/21(水) 21:29:31.50ID:???
>>829
vwだと100vwにしたときbodyのmarginを０にしないとウインドウ幅から枠がはみ出してしまうので
外枠の幅は%がいいです。
そうするとliもvwを使わないということです。
2022/09/21(水) 21:40:06.77ID:???
後出し多いな……先に条件まとめた方がええで
2022/09/22(木) 17:56:50.07ID:???
calc使えば
833Name_Not_Found
垢版 |
2022/09/28(水) 10:29:35.47ID:Y4GrquMW
Tableのthにmarginを与えたいのですが仕様上不可能でしょうか？
thをdivで囲んでmarginを設定していますが余分なmargin が設定されてしまいます
thのmargin設定の代わりとしてborder-spacingを試してもダメでした
2022/09/28(水) 12:25:20.20ID:???
thをdivで囲むのは構造上間違ってるので
見栄えの為に調整したいのならthの中にdivを入れて
中にいれたdivにthへ施したかった装飾を適用してみたらどうかな
835Name_Not_Found
垢版 |
2022/09/28(水) 14:14:57.26ID:KvtwyvLR
>>834
ありがとうございます
Tableのborder-spacingの設定する場所間違っていて設定場所を変えるとうまく行きました
2022/09/29(木) 12:23:37.18ID:???
tableでお知らせ表示したいのですがheight195pxをはみ出たらスクロールできるようにしたいのでtableにheight:195pxとoverflow:autoを指定しましたが、tdの高さ毎に高さが増えてスクロールバーも出てきません。
どうすればいいですか？
2022/09/29(木) 13:33:45.48ID:???
>>836
どういうtableなのか分からないので、とりあえずコレでも読んでみよう

<table>: 表要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table#%E5%B7%A8%E5%A4%A7%E3%81%AA%E8%A1%A8%E3%82%92%E5%B0%8F%E3%81%95%E3%81%AA%E7%A9%BA%E9%96%93%E3%81%AB%E8%A1%A8%E7%A4%BA
2022/09/29(木) 15:50:23.00ID:???
>>836
display:blockかdisplay:inline-blockを指定するといいよ……って>>837が解説そのものだった
2022/09/29(木) 18:53:34.93ID:???
>>837
>>838
ありがとうございます！
2022/09/29(木) 20:19:39.63ID:???
解決したところでアレだけど、お知らせならテーブルよりリストの方が管理しやすいかもよ？
841Name_Not_Found
垢版 |
2022/09/30(金) 15:16:41.39ID:Mje+eiat
cssの内容とブラウザを実測したときのピクセル数にズレがあるんですが、何がおかしいんでしょうか？
以下のサイトをchromeやEdgeで開くとこうなります

https://developer.mozilla.org/ja/docs/Web/CSS/width
https://i.imgur.com/qwkQ2IK.jpg
2022/09/30(金) 15:59:13.70ID:???
うちではブラウザ関係無く問題無いし、おま環？
ブラウザでズームとかしてない？
2022/09/30(金) 16:03:17.69ID:???
>>842
ブラウザもズームしてませんし、拡張機能とかそういうことでもないっぽいです
すべてのブラウザで同じことが起きます
これはスレチになりますかね？
2022/09/30(金) 16:06:35.79ID:???
chromeでのスクショだけど問題無し
https://imgur.com/PDBCi1m
2022/09/30(金) 16:21:54.09ID:???
このプレッシャー、ZOOMERか？
2022/09/30(金) 16:30:52.96ID:???
ディスプレイ設定の表示スケールも100%？
847Name_Not_Found
垢版 |
2022/09/30(金) 16:35:34.97ID:lzsSrvyH
キャッシュが残っている可能性は？
Ctrl +F5
2022/09/30(金) 16:39:43.22ID:???
>>846>>847
ディスプレイ設定なども問題ないです
2022/09/30(金) 16:55:17.24ID:???
150pxのはずが180pxぐらいだから、多分どこかで1.2倍されてる
2022/10/01(土) 02:46:56.70ID:???
OS側の設定じゃないの
2022/10/01(土) 21:29:44.98ID:???
display:flex、高さをautoにしたdivの中に子要素を置いて
divの高さが自動で子要素の高さに合わせるようにしたいけど
うまくいきませんdisplay:flexでは無理なでしょうか？
2022/10/01(土) 21:39:42.11ID:???
再現しない
2022/10/01(土) 22:00:17.63ID:???
>>851
普通なら子の高さに合わせて設定されるよ
子にpositionとか指定してあると崩れるけど、コード貼ってもらわないと原因はわかんないな
854841
垢版 |
2022/10/01(土) 22:51:30.86ID:???
>>841
これですが
Firefoxだとまともに表示されたので、Chrome系？クロニウム？の場合にのみ私の環境で起きるようです
2022/10/01(土) 23:41:48.85ID:???
>>854
機能拡張を全てオフにしても再現するの？
完全におま環で情報が少なすぎだし、他人が再現できない上にスレ違いだから
これ以上どうしようもない
2022/10/02(日) 00:13:46.39ID:???
>>851
https://jsfiddle.net/bsLmdekq/
2022/10/02(日) 00:34:41.55ID:???
>>854
・Chrome/Edgeのすべての拡張機能をオフにして起動しても結果は同じか
・Chrome/Edgeの設定→アクセシビリティ→ページのズーム の値は100%か
・Windowsの設定→システム→ディスプレイ→表示スケールの詳細設定 の値は正しいか
・Chrome/Edgeのショートカットを右クリック→プロパティ→互換性→高DPI設定の変更 の内容はオフか
・Chrome/Edgeで設定のリセットをしても結果は同じか

これ以上はソフトウェア板かWindows板のChrome/Edgeスレ案件やね
ちゃんと環境書いて質問しないと叩かれるかもなので注意
858Name_Not_Found
垢版 |
2022/10/02(日) 12:35:06.88ID:Ws3o/3Qz
自動幅より30px狭くしたいんだけど
width:calc(auto - 30px)としてもうまくできませんでした。
このやり方では間違ってますか？
2022/10/02(日) 12:43:08.39ID:???
autoは数値ではないのでcalcの中に入れても計算しない
860Name_Not_Found
垢版 |
2022/10/02(日) 12:43:36.23ID:Ws3o/3Qz
<div width:auto;height:200px;background:yellow>
<ul style="position:absolute;list-style:none;padding:0px;margin:0px">
<li>てすとおおおおおおおおおおおおおおおお</li>
</ul>
</div>

子要素にabsoluteがあると自動幅になってくれなくてdiv幅０扱いにされるけど
absoluteがあってもabsoluteがない場合のautoと同じ挙動にさせることはできますか？
861Name_Not_Found
垢版 |
2022/10/02(日) 12:44:31.81ID:Ws3o/3Qz
>>859
そうなんですか
ありがとうございます
862Name_Not_Found
垢版 |
2022/10/02(日) 12:52:24.40ID:Ws3o/3Qz
>>859
calcが無理なら他に自動幅より30px狭くする方法なありますか？
2022/10/02(日) 13:22:20.59ID:???
>>858,860
https://jsfiddle.net/ に書こう
styleの記述ミスしてるよ
なるべくcssも使おう

あとは何を表現したくて30px狭くしたいの？
864841
垢版 |
2022/10/02(日) 13:49:58.64ID:???
>>855>>857
スレチ了解しました
他のスレへ移動します
一応、レスを書いてくださった方に返答として以下を書きます

---
昨日きちんと表示されていたFirefoxを今開いたらChromeと同じ状態になってました。
一度はきちんと表示されていたのを確認したのですが。

・画面そのものの最大幅、高さをピクセル定規ツールで測ると1920、1080
・1920x1080の画像を1:1表示してみると、きちんと表示される
・vscode内にHTMLのプレビューを表示するツールを使い、150px 150pxの四角形を表示しても同じように表示される
i.imgur.com/ejqWHnY.jpg
・firefoxの設定のリセットを行ったが変わらず


Chrome,firefoxやwindowsの設定など、書いていただいた設定もすべて確認しましたが解消しませんでした。
i.imgur.com/SXLNLdy.jpg
i.imgur.com/CUC5R0I.jpg
(Chromeシークレットモードは拡張機能なし、Edgeやfirefoxには拡張機能インストールなし)
i.imgur.com/b8SRonr.jpg
865Name_Not_Found
垢版 |
2022/10/02(日) 13:55:32.60ID:Ws3o/3Qz
>>863
狭くして空いた部分に縦長のボタンを入れたい
2022/10/02(日) 14:08:05.08ID:???
>>860
子要素がposition:absoluteの場合、親要素には必要な幅を直接指定するのが普通だと思うよ
その例だとabsoluteである必要性が見えてこないんだけど、子要素を動かしたりする予定があるの？
2022/10/02(日) 16:41:17.82ID:???
>>864
> i.imgur.com/CUC5R0I.jpg

これ、Rulerのサイズからして画像の縮尺は100％みたいだけど
描画エリアだけじゃなくブラウザのUI自体も大きくなってるから
ブラウザ全体がデカくなってるっぽいね

ttps://i.imgur.com/IRNMQLd.jpg

とはいえスレチなので、レス不要
あとは移動先で頑張って
2022/10/02(日) 17:00:01.79ID:???
>>860 >>865
それらの条件からすると、こういうのじゃダメなの？
https://jsfiddle.net/L4r8yken/
869Name_Not_Found
垢版 |
2022/10/02(日) 19:05:25.83ID:Ws3o/3Qz
>>866
子要素を動かす予定はあります。
>>868
それでできましたー
でもflex: 1;ってどういう意味ですか？
2022/10/02(日) 19:16:24.60ID:???
>>869
flexプロパティはflexアイテムの幅を一括指定するショートハンド
flex: 1;とした場合はflex: 1 1 0;または flex-grow: 1; flex-shrink: 1; flex-basis: 0;と同義
詳しくはこちらで
flex - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex
2022/10/03(月) 16:12:18.89ID:???
<style>
#waku{
width:50px;display:flex;background:#00ff00;justify-content:center;
}

#ctr{
list-style:none;margin:0px;padding:0px;
}

#ctr li{
height:auto;margin:0px;padding:0px;background:#0000ff;
}

#ctr a{
font-size:8pt;background:#ffff00;text-decoration:none;color:orange;
}
</style>

<div id="waku">
<ul id="ctr">
<li><a href="./">●</a></li>
<li><a href="./">●</a></li>
<li><a href="./">●</a></li>
<li><a href="./">●</a></li>
<li><a href="./">●</a></li>
</ul>
</div>

ctrのliの余白を０にしたいけど、このようにやってもうまくいきません。
（青い部分が表示されなければいいです）
liのheightはautoにしたいです。どうすれば余白を０にできますか？
2022/10/03(月) 16:29:44.55ID:???
>>871
フォントサイズの指定を#ctrに移して、line-height:1を追加すればいいよ
現状で余白が出るのは<li>タグの外の改行が影響してるせい
2022/10/03(月) 18:29:35.93ID:???
#ctr aにdisplay: block;とかじゃダメなの？
2022/10/03(月) 18:37:38.86ID:???
>>872>>873
どちらでもできました
ありがとうございます
875Name_Not_Found
垢版 |
2022/10/03(月) 19:48:08.60ID:l8DxzCix
スケブみたいなイラストコミッションサービスを作りたいんだけど会員登録、決済機能のようなシステムの構築ってどこで調べればいいんだろう
2022/10/03(月) 20:48:01.08ID:???
>>874
内容が複数行になる可能性があるならdisplay:blockのが融通きくね
877Name_Not_Found
垢版 |
2022/10/04(火) 12:15:18.25ID:+1IPjthN
>>875
フレームワークとか
検索してみたら？ここではないよ
2022/10/05(水) 05:47:43.99ID:???
最近のAIの過ごさ見てると数年後にはコード書く必要無くなってるんじゃね？とか考えちゃうんですけどみなさんどう思います？
2022/10/05(水) 10:11:31.45ID:???
それ言われて15年経ってる
880Name_Not_Found
垢版 |
2022/10/05(水) 12:22:30.75ID:K3i9fbJO
デザイン関係は他社と差別化ができる前提で客の思い描いた物が100%反映できるなら取って変わる可能性ある
仮に完成しても使用料だの権利だので色んな企業が作るだろうしそれの保守運用でまた人が必要だしで言語は廃れても人は必要だろうね
2022/10/05(水) 16:56:48.76ID:???
コードを書かなくても良いWYSIWYG系のエディターを使わされた事がある。
吐き出されるコードに癖があって、そのWYSIWYGエディターの範疇を逸脱する細工が求められて苦労した。
エンドユーザーがCMSのコンテンツを作る等には良いかもしれない。
2022/10/06(木) 03:04:48.49ID:???
AI化一番すぐできそうでできないのがWEBデザインなんだろうな
昔もいろいろコード吐き出すやつあったけど
無駄な記述多くて使いもんにならんかった
今だと技術的には可能でもグーグルからクソコードですで弾かれたらそれで終わりだからな
手書きだろうとWPだろうとCMSｂｾろうとグーグャ汲ﾉOKもらえなｂｯりゃ意味ないｂﾌよ
そのャ`ューニングはｂ竄ﾁぱり人じゃｂﾈいとできないｂｾろう
883Name_Not_Found
垢版 |
2022/10/07(金) 04:17:54.39ID:B4JFIMcV
テーブルっぽい表示を作っているのですが、デザインをどうすればいいのか迷っています。

下記を見て頂けると見ての通りなのですが、[有効なアカウントは下記をチェック]というタイトルが長いのに、実際のコンテンツ(？)は1個のチェックボックスだけです。
タイトルとコンテンツの幅が違いすぎて、表示に違和感があります。
https://liveweave.com/smPut9

こういう時に、違和感なく表示するにはどうすればいいでしょうか？
タイトルを複数行にする事も考えたのですが、それは回避したいです。
2022/10/07(金) 12:44:49.10ID:???
デザインはさほど気にならないけど
見出しはもう少し文字を削って単語にできるよね？
必要ならテーブル外に注釈いれたらどうかな

それ以外はクリックできる範囲が小さいので
余白を含めるか、?有効などのテキストを入れてクリック範囲を広げたり
チェックしやすいようにしてあげると利用者に優しいかな
2022/10/07(金) 18:00:02.73ID:???
table使わずに「っぽい表示」にしてるのは何故？
2022/10/08(土) 18:08:55.34ID:???
最低でもheight:30pxで子要素の高さに応じてheightが変化するようにするには
heightをどう設定すればいいですか？
2022/10/08(土) 18:17:57.49ID:???
min-height : 30px;
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況