HTML/CSS のどんな質問にも優しく答えるｽﾚ 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/ >>307
やってみたらすべてのテキストが左上に集まりました…何が原因なのでしょうか？ imgurに完成予想図、
ソースをjsFiddleにアップしないと伝わりにくいよ
https://imgur.com/
https://jsfiddle.net/ >>309です！ホームページ完成しました！本当にありがとうございます！
すみません、スレの趣旨とは外れてしまいますが、皆さんのおすすめのレンタルサーバーは何ですか？
学生であまりお金がないです。期間はとりあえず1年ほどを考えています。 今考えているのはロリポップ、桜のレンタルサーバー、エックスサーバーです どんな内容で何が目的のページか知らんけどただの静的サイトならスターフリーみたいな無料のでいいんじゃないの >>313静的サイトではないです！スターフリー調べてみました！候補に入れます！ありがとうございます！ >>314そうなんですか？wi-fiはプロバイダですか？ 一度思うままやってみればいい
うまくいかないときに学んだことは役に立つ >>318はい！ありがとうございます！とりあえずやってみます！ ページ内の1つもセグメント(div)に、複数のタイトル表示要素があり、そのタイトル要素をposition: sticky; (top: 0px)で
スクロールしても画面上部に固定されるというのをしたいです。
その際にすでに上部にstickyで固定されているタイトル要素がある状態で、スクロールで次のsticky要素が上部に来たとき、もともと固定されていた要素はそのまま、その直下に固定させるようにしたいのですが、この場合は 2番目のsticky要素の top で位置を調整しないと無理でしょうか？
上記のタイトル要素をtop: 0px で設定すると、2番目3番目のタイトル要素は1番目に重なって表示されます。
1番目がすでに固定状態にあるときに、2番目はそれに重ならないようにするにはどんなやり方がありますか？ 親のセグメントにpadfing-topで一つめのstickyの格納場所を作っておく >>321
ありがとうございます。その場合、padingの高さはsticky要素の高さに会わせないといけないということですよね？
stickt要素の高さが可変の場合はjavascriptで調整するしかないですか？ ドロップダウンメニューですがパソコンで見る場合マウスを合わせると下にサブメニューが出るのですが
スマホだとタップしないとサブメニューが出ません
そのときタップ扱いとなるため一番上にリンクを置いているとその下のサブメニューは一瞬表示されるのですが選ぶ前にタップした一番上のメニューに飛んでしまいます
長押しすれば飛ばずにサブメニューが開いた状態のまま選ぶことが出来るのですが、そのまえにブラウザののサブメニューが表示されるので消す作業が必要になります
iosも似たような感じですがさらに操作が煩雑になります
なにかスマートに動作させる方法はあるでしょうか？
旨く説明できずすみません Web上のテキストボックスへの入力時、iPhone Safariが勝手にズームしてしまうで、それを抑止するためviewportの"maximum-scale=1.0"を設定していますが、これだとAndroid Chromeでピンチアウトによる拡大ができません。
ピンチアウトによる拡大はできるようにしつつ、iPhone Safariの勝手ズームを止める方法ありますか？
フォントサイズが16px以上なら拡大しないそうなのですが、レイアウトの関係でそこまでフォントサイズは大きくはできません。 逆に、iPhone Safariの勝手ズームを止めたらダメ！
既定の動きを勝手に変えたらダメ！
それは想定外で使いにくいサイト
それを使っている人は、その機能があるから使いやすいわけだから。
嫌なら、その機能をオフにするか、ブラウザを変えるはず https://maaengineerhouse.com/archives/1551
ここのサイトを参考にページ遷移しない送信ページを作ったのですが全然ページ遷移してしまいます
action="./test"は自分のメールURLにしてますが他に何が駄目なのかわからない状態です
わかる方教えて頂きたいです >>328
遷移するということはevent.preventDefault();まで到達してないのでスクリプトかidが間違ってる
そのページのnew formData(form)は間違いnew FormData(form)が正しい
フォームデータを送信できるのはhttp/httpsに対してだけ
どうしてもメールで受け取りたいなら自分のサーバー側で転送するか、EmailJSやStmpJSといった外部のサービスを利用する 今レスポンシブデザインの静的サイトを作るとして一番有用なツールは何になりますか？
ひと昔前だとDWだったと思うのですが最近はあまりおすすめされていないようです
習得も難しいです
HTMLとCSSの知識は一通りあります
先達のお知恵を拝借したいです >>331,332
エディタではないです
もうちょっとビジュアル的に操作できるものが良いです DWマスターしてたら仕事でweb会社に入った時に早くに通用しますか？ >>334
WYSIWYGエディタはもう息してないので、素直にVSCode使った方がいいよ DWマスターしたレベルで使えるなら他のも普通に使えよう メモ帳→GL→DW→VSCodeときたけどVSCode快適だわ
使う人少ないだろうけどVisualStudioも意外と使いやすい メモ帳, 秀丸, FrontPage, Expression Web, DW(3日), VSCode
だな VSCodeでDWみたいにパパっとテンプレート読み込んで使えますか？
そういうプラグインやテンプレートありますか？ >>342
VisualStudioのCSSのフォーマッタが好き >>344
自分で試したらいい
無料なんだし紹介ページも腐るほどある
どうしても訊きたいときはVSCodeスレへどうぞ どんな質問にも優しく答えるスレなんだからさぁ。。
わざわざ自分で試したらいいとか間抜けなレスしてんなよ
仕事もできねえやつなんだろうなぁ 日本社会にはもっと優しさ要素が必要だよな
自分でやれとか言ってる場合じゃねえわ
共助を忘れるなよ 正義マンはお呼びじゃないです by スレ利用者一同 結局のところ、自分が使いたい機能とか使い勝手が自分に合ってるかどうかなんて
本人にしか分からないから、とりあえずVSCodeが良さそうだってことが分かったのなら
ここでスレ違いな質問するよりも、自分でググって気になる機能拡張を片っ端から試した方が
回答を待つよりも速いだろう 初心者です。
会社のcmsにHTMLを書いてページの調整をしているのですが、テーブルの罫線が付けられません。
表に黒い線(1重線)を引くのでいいのですが、薄い罫線として表示されてしまいます。
コードを書き、cmsのフォーマットの上では黒い罫線として表示されるのですが、プレビューや実装段階になると薄くなってしまいます。
(色の変更もフォーマット上では可能でした)
フォーマット的にHTMLのみ使えるのですが、CMSに邪魔されない(？)やり方はありますでしょうか？
<table border="2" table width="1550" style="height:560px; border-collapse:collapse margin;auto: border-color: black"> >>356
書き方間違ってる
<table border="2" table width="1550" style=“height:560px; border-collapse:collapse; margin:auto; border-color:black;”>
これでやって効かなかった箇所に!importantを付ける
border-color:black!important;
てな具合に >>357
>>358
回答ありです。
(セミコロンあたりは画像からのテキスト抽出故の誤変換でした)
cms上で
< table border="border: 1px solid #000!important" width="1550" style="height: 560px;">
(更新すると微妙に簡略化されます...)
の様に入れて見ましたが、薄い罫線のままでした。
border-color:black!important
も同様です。
何故だ... tableではなくthやtdにborderを設定しなさい デベロッパーツールで実際にあたってるスタイルは？
目に見えてる薄い線とやらが実はborderですらないかもしれん ただtableに外枠つけるなら<table width="1550" style="border:1px solid; height:560px;">でいいだろうけど
thtdがどうなってるかどうしたいのかがわからんと何も答えられん >>360
ありがとうございます！
tdの方に設定したら無事反映されました！ 質問です。
stylebotでどのようにcssを書けばバナーとオンライブを非表示にできますか？
Chrome（64 ビット）Stylebot(拡張機能)
campaign.showroom-live.com/akb48_sr/#/
バナー（SHOWROOMバレンタイン2024キャンペーン for AKB48）
www.showroom-live.com/r/akb48_official
オンライブ それってバナーのリンク先URLを貼ってんの？
その書き方じゃどのページでどこを非表示にしたいのか分からんのだが、勝手にエスパーした上で質問するけど
それって、SHOWROOMのトップページの最上部にある各専用ページへのバナーのスライダー全体と
同じくトップページちょい下にある「#オンライブ」全体を非表示にしたいって話？
それともAKBに限定してバナー等を非表示にしたいって話？
それとも全く別の話？ >>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を書けば良いでしょうか。
（ページを再読込するとミュートから始まったりので） 漏れは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 ルビーキチガイはちゃんとルビーオンレイルズといつもの表記しろ
NGすり抜けるな 画面幅768~1000とかでスクロールバー出すのってどうなんだろう
iPadは良いけどPCで画面幅縮小した時とかのUIが良くないから避けるべき？ ユーザー自身が拡縮する分は
こちらの想定外でいいと思う 人の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;
}
} Aは同じセレクターの状態違いだとわかる
Bはもうsassの意味がないレベル ありがとうございます
SP作ってからPC版を作成ってクセが
個々にメディアクエリを書くより楽なもので メディアクエリをmixin化するのだ
ひとつセレクタがあったら
.hoge{
@include mixin.media(sp){
}
@include mixin.media(tab){
}
@include mixin.media(pc){
}
}
みたいにセットでコピペするようにすればいい
エディタのスニペットや独自emmetルールでショートカットで出力できるようにしておくとなおよし なるほどー
mixinを使うと元を修正するだけで済むから汎用性がますんですね
アドバイス助かります Scssは横幅毎にファイル分けてだけどおかしなやり方だったんかなぁ >>379
見通しがよければなんでもいいと思うけど
同じセレクターというか同じものを指す記述が何カ所にも登場するとそれだけでclass名の変更があったときなどに置き換える箇所が増えて変更に弱くなるよね
これは&使わない教にも言える
他方、親セレクタひとつ変えれば子孫や状態変化すべて変えられるような変更に強いコードは
hoge__fuga みたいなHTML上のセレクタそのもので全文検索しても見つからないので
hoge の中から探すか、ソースマップ必須になる
どちらが保守性が高いと言えるかはプロジェクトの規模やチームの特性によって変わりうる >>380
なるほど変更修正も考えて分かりやすくって事ですね 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要素と重ねる方法以外ありますか？ >>382
hogeの中にインナーを作る
z-indexが インナー>hoge::afterになるようにする
というか影つけるだけなら疑似要素なんかいらなくて
hogeにbox-shadowであかんの ありがとうございます
after要素が透明ありのpngなんで、filterなんです
どうもz-indexへの愛と理解が足りてない。。 疑似要素にcontentでpngを入れてるなら素直にimgタグ書くべき
背景画像がpngという意味ならdrop-shadowきかない 背景パターンなのでpngをBGに使っています
filter drop-shadow自体は効くようですが
chromeで見ただけなので効かないのもあるんですか
検証します ありがとうございます お騒がせしました
after要素に問題なくdrop-shadowが付いてました
なにも書き換えてないと思うのですが 3DCGのweb表示をしたいと考えています。
最初はThree.jsでやってたのですがGPU使用率が多く、試行錯誤して
今はmodel-viewerで試行錯誤しています。
model-viewerはモデルが動いてないとGPU使用率も0になるのでいいかとおもったのですが、
表示して暫く触らないと勝手にポインタが出てきてモデルを左右に振ってみせて、
動かせることを主張してきます。これのせいでGPU使用率が上がってしまいます。
この、勝手にポインタが出てくる仕様をOFFにできないでしょうか。
https://008.server-test.space/ >>389
ありがとうございます。お手数をお掛け頂いて感謝であります。
>>390
ワオ！すごい！まさに！そのブログもいくつか目を通したのですがそこは読み飛ばしてました。
感激であります！！！！１ <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で色をつけるにはどのようなセレクタにしてやればいいんですか？ >>392
.test tr > :first-child tr th:first-child,
tr tf:first-child{
} .test tr > *:first-child { }
外野だけど今までこうしてた
*省略していいんだ>>393さんくす プロゲートというものをやってる初心者ですが
cssのactiveというコマンドで
position relative
top 7px
boxshadow none
と指定するものがあるんですが
これだと上に動くのか下に動くのかわかりにくくて
それならbottom7pxと何が違うのかと考えたりしてるんですが、どう考えたらいいですか？
質問わかりずらかったらすみません
お願いします ×コマンド→○疑似クラス
position: relative; ボックスの元の位置を基準に
top: 7px; 「上から」7pxにボックスを配置
bottom: 7px; 「下から」7pxにボックスを配置 >>397
ありがとうごさいます
擬似クラスですね間違えました
topは上から下に
bottomは下から上に動くんでしょうか？ 動きじゃなくて距離
上辺を基準に7px離すならtop とりま、これでも読んだ方が早い
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はそれぞれボックスの内側方向が正の向きって憶えとけば
方向は間違わないかと >>399
わかりました
ありがとうございます
>>400
理解しました
読んで勉強します
ありがとうございました プロゲートの教材で画像のようにtop wrapperを作り背景を指定して、その中にcontainerをいれて中に
h要素、p要素をいれていくものがあるんですが
top wrapperの中にh要素やp要素を直接いれてはいけないんでしょうか？
containerという箱を間に挟む意味を教えて欲しいです
よろしくお願いいたします wrapperがページの外枠そのものでcontainerがいわゆるコンテンツ幅ってやつや
wrapperとcontainerにそれぞれ別にpaddingなどが指定できるし
containerの幅を制限して中央寄せなどよくある
gridレイアウトなど使えばコンテナなしでもできたりするが難易度高いから今は言われた通り覚えたまえ すみません、質問させてください！
分かりにくかったら申し訳ございませんが、例えば
<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行目以降はインデントされないので目的が達成されません
どういった方法が良いか、アイデア教えていただけないでしょうか？ >>405
ありがとうございます
わかりました
今回貼った画像のようにwrapper部分に背景がなかったとしても、wrapperの中にcontainerをいれたほうがいいですか？ >>407
考え方が逆
「wrapperの中にcontainerは必要か」
ではなく
「今はcontainerのスタイルの設定しているのにwrapperは必要か」
を疑問視するべき
いるいらないはそのうち勝手に判断できるようになる >>408
言い方を間違えました
言いたいことはそれでした
wrapperの必要性がちゃんとわかってなくて
背景がある場合はわかりやすいんですけど
とりあえず今はページの外枠とコンテンツ幅と覚えておきます
ありがとうございました 
