X
HTML/CSS のどんな質問にも優しく答えるｽﾚ 50
レス数が950を超えています。1000を超えると書き込みができなくなります。
0865Name_Not_Found
垢版 |
2022/10/02(日) 13:55:32.60ID:Ws3o/3Qz
>>863
狭くして空いた部分に縦長のボタンを入れたい
0866Name_Not_Found
垢版 |
2022/10/02(日) 14:08:05.08ID:???
>>860
子要素がposition:absoluteの場合、親要素には必要な幅を直接指定するのが普通だと思うよ
その例だとabsoluteである必要性が見えてこないんだけど、子要素を動かしたりする予定があるの？
0867Name_Not_Found
垢版 |
2022/10/02(日) 16:41:17.82ID:???
>>864
> i.imgur.com/CUC5R0I.jpg

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

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

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

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

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

それ以外はクリックできる範囲が小さいので
余白を含めるか、?有効などのテキストを入れてクリック範囲を広げたり
チェックしやすいようにしてあげると利用者に優しいかな
0885Name_Not_Found
垢版 |
2022/10/07(金) 18:00:02.73ID:???
table使わずに「っぽい表示」にしてるのは何故？
0886Name_Not_Found
垢版 |
2022/10/08(土) 18:08:55.34ID:???
最低でもheight:30pxで子要素の高さに応じてheightが変化するようにするには
heightをどう設定すればいいですか？
0889Name_Not_Found
垢版 |
2022/10/08(土) 18:40:37.90ID:???
min-heightじゃなくheightで設定したいならclamp()とかmax()使うとか
どういう状況で使いたいのかによるが、自分なら親じゃなく子に制限掛けるが
0890Name_Not_Found
垢版 |
2022/10/15(土) 09:10:00.31ID:???
clamp()なんて始めて知ったわ
またいつのまにこんなの出てるんだよ・・
0891Name_Not_Found
垢版 |
2022/10/15(土) 09:26:40.98ID:???
>>889みたいなので新しい情報が入ってくるから
このスレは眺めておく価値がある
さんくす
0892Name_Not_Found
垢版 |
2022/10/15(土) 19:45:02.18ID:???
その辺の新規実装って定期的な情報源あります？
IE消えて実用になったプロパティも多そうなので、巡回ルートに加えときたくて…
0893Name_Not_Found
垢版 |
2022/10/15(土) 20:14:08.75ID:???
>>892
コリスとか？
このスレでもたまに貼られる
0894Name_Not_Found
垢版 |
2022/10/16(日) 11:08:33.11ID:???
margin:autoで左右の中央揃えになったけど
左右の中央揃えを保った状態で上下のmarginを100pxにしたいけど
どうやればいいですか？
0895Name_Not_Found
垢版 |
2022/10/16(日) 12:02:13.74ID:???
>>892
SNSでその手のWEB系のアカウントをフォローしとけばTLで情報は流れてくるでしょ
専用のアカウントでやれば余計な情報は流れてこないし
0897892
垢版 |
2022/10/16(日) 15:57:12.01ID:???
>>893
ありがとです、コリス入れときます

>>895
SNSは記事埋め込みのを見るぐらいでアカウント持ってないので、作ってみますね
0898Name_Not_Found
垢版 |
2022/10/16(日) 16:22:54.14ID:???
>>894
全指定ではなくmargin-leftとmargin-rightに個別でautoを指定する
0900Name_Not_Found
垢版 |
2022/10/16(日) 17:00:26.78ID:???
>>899
いいね。でも多すぎると食傷気味になるな
カスケードレイヤーとかもうなんやねんな
0901Name_Not_Found
垢版 |
2022/10/17(月) 07:23:47.76ID:???
>>899
iOSのSafariが対応しないCSSというのも知りたい
0902Name_Not_Found
垢版 |
2022/10/17(月) 08:21:23.46ID:???
iosサファリ、罠多いよね
backgroundでリピートさせなければ大丈夫とか
0903Name_Not_Found
垢版 |
2022/10/17(月) 08:30:17.70ID:???
safariは対応してないのではなくバグってるだけなのでなかなか探しづらい
0904Name_Not_Found
垢版 |
2022/10/17(月) 09:37:32.57ID:???
今はわからんけど、linear-gradientで、tranceparent が効かないとかあったなぁ
IEと同じく、safariはマジ消えてくれ
0905Name_Not_Found
垢版 |
2022/10/18(火) 21:18:38.66ID:???
めんどいのでもうBootstrap一本でいいですか
0907Name_Not_Found
垢版 |
2022/10/19(水) 12:49:37.14ID:D434GI70
CSSで

.class1 {
color : "#32cd32";
}

.class2 {
background-color : "#32cd32";
}

この色を複数の箇所で使いたいです。
あるクラスでは文字色だったり背景色だったりボーダーだったりして、別の属性です。
一箇所治せば全部治るような簡単な書き方ってありますか？
0910Name_Not_Found
垢版 |
2022/10/19(水) 12:56:48.70ID:???
Bootstrap のみで良い。
漏れはCSS も、あまり知らない

最近は、Tailwind もいるらしい
0911Name_Not_Found
垢版 |
2022/10/19(水) 13:05:12.10ID:???
CSSもろくに使えずRubyとBootstrapを勧める事しか能が無い奴は無視していい
0912Name_Not_Found
垢版 |
2022/10/19(水) 13:24:38.50ID:D434GI70
>>909
思った通りのことができました。ありがとうございました！
0913Name_Not_Found
垢版 |
2022/10/19(水) 22:06:51.29ID:???
質問なのですが、今ウェブコンポーネントを使用してウェブサイトを作ってて
そのウェブコンポーネントの#shadow-rootのスタイルを変えたいのですがどうすればよいでしょうか。
https://imgur.com/FYFuknh.jpg

<fluent-text-area>の#shadow-root<textarea>のスタイルを変更したいです。

よろしくお願いします。
0915Name_Not_Found
垢版 |
2022/10/21(金) 18:18:40.61ID:8kiseZfM
人が作ったCSSでこういう定義を見ました。

span.hoge#\0031 {

}

spanタグのhogeクラス、#以下のID名、という基礎は知っているのですが、
なぜかこれでIDが"1"のところにこのスタイルが適用されます。
#\0031というセレクタ指定で1というIDに適用されるという不思議。

ID名の上につく\マーク（バックスラッシュ）の意味って何ですか？
0916Name_Not_Found
垢版 |
2022/10/21(金) 18:39:19.47ID:???
すいません、グリッドで文字列が入る簡単な表を組んでいます

書いたcssが以下です

grid-template-columns: max-content auto;

左の列の幅は最小限で右側はそれに合わせるって感じですね


でも、これだと左側の列にめっちゃ長い文字列が来た場合に適当な位置で折り返さずに
グリッド全体に指定した幅も超えてどんどん長くなっちゃうんですよね

min-contentにすると逆に1文字とか極端に少ない文字で折り返してめっちゃ縦に長い行になっちゃうし

左右にどれくらいの文字が入るかわからないので、各セル？にmax-widthとかを指定したくはないし。
ただ両方ともautoだと、入る文字が少ない時に、左右の列がきれいに左詰めにならずにスカスカになっちゃうし…

何か良い方法あったりしますでしょうか
0917Name_Not_Found
垢版 |
2022/10/22(土) 15:28:37.82ID:???
適当な位置ってどこ？どれぐらい文字が入るか分からなくても、適切な位置で折り返させたいなら
自分が許容できる最大幅をmax-widthで指定するしか無いんじゃない？
で、単純な表ならmax-widthは各セルごとに指定するんじゃなくて、div:nth-child(2n+1)とかで
列ごとにまとめて指定するのはダメなの？
必ず最大幅を超える長い文字列が入るならmax-content部分を最大幅の固定値に変えてもいいけど
0918Name_Not_Found
垢版 |
2022/10/23(日) 02:38:44.24ID:???
ありがとうございます

grid-template-columns: auto auto;

でwidthにmax-contentを指定したら望んだ結果が得られました
なんか色々難しく考えて基本を忘れてたみたい
0919Name_Not_Found
垢版 |
2022/10/23(日) 03:43:17.27ID:???
やっぱり文章だけの説明だと、何がしたいのかサッパリ分からんな
二度手間になるから質問するなら、せめて簡略化したコードぐらい貼って欲しいわ
0920Name_Not_Found
垢版 |
2022/10/23(日) 08:39:02.34ID:8AOtGlRE
すみません外部のウェブコンポーネントを使用するときのことなのですがそのウェブコンポーネントの高さを変更したいです
しかしそのCSSプロパティがshadow-rootに隠れていて変更できません
ほとんどのサイトではShadowDOMを追加することしか紹介されてなく既存のウェブコンポーネントのShadowDOMを編集する方法を紹介されてるところがありません
どうすればよいか困っています
よろしくお願いします
0921Name_Not_Found
垢版 |
2022/10/23(日) 10:00:29.91ID:???
>>920
外部ウェブコンポーネントが何物で何処にあり改変可能なのかが提示されていないのでまったくわからない

とりあえず、その外部ウェブコンポーネントが
Style要素をJavaScriptで抱え込んでいるのならそこを改変
link要素をappendChildして外部スタイルシートを参照しているのなら、その参照先のStyleを改変
それともそのウェブコンポーネントにStyleをかえるAPIが用意されていればそれで
という推測でしか言えない
0922Name_Not_Found
垢版 |
2022/10/23(日) 10:32:13.34ID:8AOtGlRE
>>921
それはshadow-rootのものについても言えるのでしょうか？

これなのですが<textarea>のStyleはtextareaをリサイズすると現れました
こいつを固定値にしておきたいです
https://imgur.com/FYFuknh.jpg
0924Name_Not_Found
垢版 |
2022/10/23(日) 11:09:05.48ID:8AOtGlRE
そのJSでいじる方法がわかりません
通常Shadow DOMはJSのセレクターなんかで参照ができなくなるものなのでこのshadow-rootの中のtextareaをいじることができません
0925Name_Not_Found
垢版 |
2022/10/23(日) 11:23:46.30ID:???
ウェブコンポーネントを使わなければいい
0926Name_Not_Found
垢版 |
2022/10/23(日) 12:05:50.83ID:8AOtGlRE
>>925
やはりそうなるのですか…
残念です
0928Name_Not_Found
垢版 |
2022/10/23(日) 15:34:00.61ID:???
>>915
\+16進数はUNICODEエスケープ、\0031はU+0031なので1

>>924
対象要素にpart属性が付いてるならcssで
fluent-text-area::part(control) { ～～ }
のようにすることが可能
jsならカスタムエレメントのshadowRootからshadowDOMのツリーにアクセス可能
0929Name_Not_Found
垢版 |
2022/10/23(日) 16:00:09.04ID:8AOtGlRE
>>928
修正できました
ありがとうございます！
0931Name_Not_Found
垢版 |
2022/10/24(月) 07:48:16.95ID:XlUzmcQj
いまからHTMLとCSSを網羅的に学習したいのだけどいい参考書やWEBサイトないだろうか
なるべく書いていることに抜けがなく学びたい
0932Name_Not_Found
垢版 |
2022/10/24(月) 09:23:17.70ID:???
抜けがなく学ぶのは無理
基本的なこと掴んでその都度必要なことは調べて身にしていくしかない
0934Name_Not_Found
垢版 |
2022/10/24(月) 10:13:19.11ID:LVvJK6+G
完璧を求めてほとんど使わない知識を身につけるよりよく使うものを調べなくても書ける方がいいと思う
0935Name_Not_Found
垢版 |
2022/10/24(月) 10:14:23.48ID:???
仮に今現在抜けが無くても将来追加された仕様は抜けるので必ず>>932になる
それでも基礎もないと始まらないし、読むとしたらMDNで>>933
0936Name_Not_Found
垢版 |
2022/10/24(月) 10:46:12.85ID:???
抜けなく覚えていくうちに新しいのが出てきたりして変わっていくから
ほんこれ>>934よ
0937915
垢版 |
2022/10/24(月) 10:55:05.14ID:Ou0kVKZr
>>928
ありがとうございます。疑問氷解しました。
0939Name_Not_Found
垢版 |
2022/10/26(水) 19:57:14.93ID:???
抜けが無い知識は、何十年も掛かる

基礎だけやって、Bootstrap, Tailwind などが速い
0942Name_Not_Found
垢版 |
2022/10/27(木) 12:34:08.38ID:DizwkO/t
BootstrapとかTailwindってアニメーションとか作れるの？
0943Name_Not_Found
垢版 |
2022/10/27(木) 15:32:55.75ID:???
質問です。登録会社の出勤確認のフォームにアクセスした履歴は有るのに、
欠勤扱いになってしまって当日採用落とされてしまったのですが、海外ipからのアクセスで入力フォーム自体にはアクセス出来ても入力してサブミッション押したら内部でエラーになってこちらが気付かない事って有り得ますか？？
0945Name_Not_Found
垢版 |
2022/10/27(木) 15:48:53.50ID:???
ここまで徹頭徹尾スレ違いなのも珍しいな
0946Name_Not_Found
垢版 |
2022/10/27(木) 15:53:45.59ID:???
HTML5とjavaで作られてるフォームなんです
ソース貼ろうとしてもエラーで貼れない。。確認画面は新しくページ作られるタイプですが、普通はそこのディレクトリだけアクセス制限する事って無いですよね？レンタルフォームとかだとどうなんでしょうか？
0947Name_Not_Found
垢版 |
2022/10/27(木) 15:55:22.28ID:???
運用の話なんでその会社に聞いてくれとしか
0948Name_Not_Found
垢版 |
2022/10/27(木) 16:33:58.04ID:???
>>947
これだと入力ページと確認ページでディレクトリは変わってないですよね？？
https://i.imgur.com/YLrPrc1.png
今後就業出来なくなりそうでピンチなんです…向こうの鯖が原因ならそれで解決出来るのですが
0949Name_Not_Found
垢版 |
2022/10/27(木) 17:05:20.46ID:???
新手の荒らしか
zoomerといい次々新キャラがくるな
0950Name_Not_Found
垢版 |
2022/10/27(木) 17:05:51.17ID:???
やべえ……人の話聞かない系だ
0951Name_Not_Found
垢版 |
2022/10/27(木) 17:08:33.56ID:???
>>950
だって会社の人には聞けないし
荒らしじゃありません
0952Name_Not_Found
垢版 |
2022/10/27(木) 17:11:23.58ID:???
ソース見て、入力ページと確認ページがディレクトリ同じか教えて欲しいだけです
コード貼ろうとしても何のコードがNGの原因で貼れないのか分からないし
今日中に連絡したいのに
0953Name_Not_Found
垢版 |
2022/10/27(木) 17:12:16.24ID:???
legendってfieldsetなしで使っていいもんなの？
0955Name_Not_Found
垢版 |
2022/10/27(木) 17:20:18.94ID:???
・ここは「Web制作板」のHTML/CSS質問スレで、なんでも相談スレじゃない
・そちらがいくら切羽詰まっていても他の人には「まったく」関係ない
・場をわきまえたうえでスレ主旨に沿った質問をし、得られた回答を皆に還元するのが質問スレの存在理由
0956Name_Not_Found
垢版 |
2022/10/27(木) 18:15:28.90ID:DC1jjxXR
ホンモノで草
0957Name_Not_Found
垢版 |
2022/10/27(木) 19:27:07.57ID:???
form actionとか書いてるのに、何故あんなスクショで答えが得られると思ったのか謎

しかし、スマホから質問してくる奴は質問が雑過ぎて困る
スレチは論外だが
0958Name_Not_Found
垢版 |
2022/10/27(木) 20:46:20.06ID:???
>>957
フォームに関係有りそうなコードの場所スクショしたつもりなのですが、
もっと上は会社名とかバレるので貼りませんでした。
コード貼ろうとjavaの怪しい部分にスペース入れたり頑張ってみたんですが、NGワールド引っかかって…
フォームメーラーは
https://business.form-mailer.jpってとこ使ってるみたいですが、ググッてもどこのレンタルフォームなのか出てこないんですよね、、
0959Name_Not_Found
垢版 |
2022/10/27(木) 21:09:53.28ID:???
ここまで言われても自分がスレチだと理解しないところを見るに
登録会社が付き合いきれなくてブロックしたのかもしれんな…
0960Name_Not_Found
垢版 |
2022/10/27(木) 23:29:51.31ID:???
javascriptをjavaと略すやつは滅びて欲しい(´･ω･`)
0961Name_Not_Found
垢版 |
2022/10/28(金) 08:58:45.06ID:???
>>960
まったく同意する
意味が通じない省略はヤメロ

パス、パスいっているから、どのpathなんだろうと思ったら、パスワードだったことがある
パスワードくらい短いワードなら略すなよ
0962Name_Not_Found
垢版 |
2022/10/28(金) 09:03:20.90ID:G3Y6xNBj
イチゴとイチゴジュースくらい意味変わって来るよな
0963Name_Not_Found
垢版 |
2022/10/28(金) 12:44:40.42ID:+LP0D1KO
HTML/CSSの枠から外れた質問になるかもで申し訳ないんだが、Gartic phoneみたいなwebゲームを作ろうと思ったらどの言語に手をつければいいんだ？
フロントエンド用にHTMLとかを覚えるのは必須として、バックエンドで動かす用の言語をまた別個で覚えないといけない感じ？
0964Name_Not_Found
垢版 |
2022/10/28(金) 16:06:31.13ID:???
>>948
最後の方見ると、次の画面は確認みたいだから
確認まででページ閉じちゃったとかじゃないの
レス数が950を超えています。1000を超えると書き込みができなくなります。
ニューススポーツなんでも実況