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/ 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の必要性がちゃんとわかってなくて
背景がある場合はわかりやすいんですけど
とりあえず今はページの外枠とコンテンツ幅と覚えておきます
ありがとうございました >>406
何も指定しなければブラウザが持っているデフォルトのスタイルで、コンテンツが装飾される訳だけど
デフォルトのliの左余白は、olやulのpadding-leftで決まり（chromeやfirefoxではデフォルトで40px）
更に番号や中黒は、list-style-positionがoutsideになっているため、liの外側（olやulのpadding領域内）に表示される
なので、list-style-positionをinsideにしてもいいんだが、liのテキスト量が多い場合に改行位置がズレるので
デフォのoutsideのままでulやolのpadding-leftを、例えばcalc(40px + ○em)とかで指定すると改行されてもズレない
（使用するフォントに合わせて○は1.2とか1.3ぐらい？で番号や中黒の分を位置調整）
以上まとめるとpをliの位置に合わせるなら、pにはpadding-left:40px;、olにはpadding-left:calc(40px + 1.3em);を指定
というのが簡単でオススメ
具体的にはこんな感じ
https://jsfiddle.net/zjt3vxf1/
というわけで上記を応用すれば、お好みの位置で色々と調整できるはず >>410
詳しくありがとうございます！
しっかりと確認して実装してみます
本当にありがとうございます 画像のようにh2の下に50px距離をあけたい場合
h2のpadding-bottomなのか
h2のmargin-bottomなのか
iconのpadding-topなのか
iconのmargin-bottomなのか
どれが適切なんでしょうか？
その辺がよく分かってなくて、なんとなく感覚で選んでいます
よろしくお願いします
https://i.imgur.com/eLzRvvs.jpg >>412
一部文章間違えました
5行目iconのmargin-bottomなのかではなく
iconのmargin-topなのか、です 内側の余白はpadding
外側の間隔はmargin
縦並び要素のmarginが上か下かは宗教戦争になるから好きにしよう 質問お願いします
この写真のようなサイトを作るという課題で
正解のコードが
heightが120の
paddingが40でした
ただ写真を見ると高さの合計が200でした
なのでheightを200にしてその内側の余白として
padding40と書いたのですが間違いでした
よく意味がわからないので教えてください
よろしくお願いします
https://i.imgur.com/pLNq31X.jpg heightを200にして
paddingを40にすると
footerの高さが高くなってしまいます >>418
ありがとうございます
要素の構造についてまだちゃんと理解できていないから分からないと思うので読んで勉強してみます >>416
プロゲ懐かしいな、まだあったんだ
俺もwebはここからスタートして今では昔勉強したイタリア料理で年収2000万超えたよ
観光客相手に高単価なメニュー出してる 質問させてください
下記URL先の画像のように作りたいです
画像を左右に設置することはできましたが、
緑色が左右の画像の間に左右の画像目いっぱいに幅を設定して置けませんでした
緑色の幅をフレキシブルにしたいですがそちらもできません…
どのようにすればよいのか教えて頂けませんでしょうか
宜しくお願いしますm(_ _)m
https://imepic.jp/20240418/637200 display:flexを使えばいいよ
とりあえずググってみよう >>422
flex使えばいけるね
そういうのは専門学校の宿題か何か？
良かったら教えて
課題とかでそういうのが出てるの？ レスありがとうございます、試してみたらできました！
フレキシブルを使った自由課題でしたm(_ _)m
<div class="outline">
<div class="box1"></div>
<div class="greenbox"></div>
<div class="box2"></div>
</div>
.outline {
width: 100%;
height: auto;
display:flex;
}
.box1 {
width: 50px;
height: 50px;
float: left;
background: #da5f2b;
}
.box2 {
width: 50px;
height: 50px;
float: right;
background: #da5f2b;
}
.greenbox {
width: 100%;
height: 50px;
float: left;
background: #76c03d;
} >>425
自由課題か・・宿題とか課題とか嫌いだったな
高校生でそんなのやるわけないか、専門学校？
ちなみにオレンジボックスは共通の書き方にしてコード減らせるからやってみ
flex使えばfloatも使う必要無いよ、昔はfloatだったからそれが模範解答で出てきたら時代と教材がかなり古いと思う gridは最終手段って感じ
これを使わなくて済むようなデザイン組んでほしいって思う gridはいいんだけど
orderやgrid-areaで順番をゴチャゴチャ変えないと成立しないスマホデザインとかはうんこ
スクリーンリーダーなどアクセシビリティ的にも良くない 以下のようなテーブルがあります。
実際にはこの三行を1グループとして複数グループが下に続いています。
┌┬┐ ここで、左側の行にカーソルをのせた時に
│├┤ ハイライトするようにしたいです。
│├┤ この時、カーソルを載せている右列だけでなく
└┴┘ 左の列もハイライトするようにするには
どうすればよいですか？
今はbootstrapを使っているのですが、
1行目のときしか左列がハイライトされなくて困っています。 jqueryのほうが早いな
cssでやるのはちとつらいのでは？ その3行ごとにtbodyで囲ってtbody:hoverでできそうではあるが、別の問題が発生しそう 質問です
個人経営の店ですが取引業者のサービスでホームページ作りました
業者のサービスはWordPressベースでｓｓｌ対応です
ただurlが業者の名前＆ディレクトリ以下に無機的な数字が続きビミョーです
お名前.comでドメインを用意してurl転送サービスでフレーム転送にしました
これでOKと思いきや設定したurlでホームページを表示してもssl対応になりません
個人情報を扱わないサイトですがセキュリティソフトが信用できないサイトとか警告が出ます
http → https のフレーム転送でssl対応にする方法は有りますか？ 過去にやったの調べたら>>434と同じでtbody:hover{}してた
css的に問題はなかったしjQueryでtbodyを抽出しても問題なかった
でもこういうtbodyの乱用はどうなんだろうとは思うし、将来いきなりNGになるかもしれんよね 質問です
親要素にdisplay:flexを設定して
子要素1は左に配置
子要素2は右に配置したいです
どのように書けば実現できるでしょうか？ <div class="parent">
<div class="child01">子1</div>
<div class="child02">子2</div>
</div>
.parent{
display:flex;
justify-content:space-between;
} >>438
ありがとうございます
その書き方は出でこなかったので勉強になりました
結果ですが子要素1と子要素2のサイズが違うこと？で子要素2の配置が真ん中やや右に表示されてしまいました 他のcssなければ子要素は同じサイズのはず
（子要素内の文字数一緒なので）
子要素2が真ん中より右ってのは他のCSSが影響してると思うよ
justify-content:space-between;
は子要素を均等に配置するなので
parentの左右にそれぞれピッタリ配置されてるはず ある WEB サイトに入力する場所が２つあるとして、其処に指定の値を入力した状態でそのサイトを開くには、どの様に書けば良いのでしょうか？
例えば ttp://www.aaa.com/bbb/ というサイトだとして、其処に、foo と bar が入力された状態でブラウザで開きたいのですが…
ttp://www.aaa.com/bbb/ だけを実行すると、入力欄は空のままで開かれますよね。 >>442
サイト側でクエリなりなんなりを反映する仕組みがないと無理やで >>443
> サイト側でクエリなりなんなりを反映する仕組みがないと無理やで
それを確かめるには、どんな事をすればいいのですか…？ 自分でURLから何か受け取れるように実装したもの以外は基本的にありません >>446
> chromeの何かのアドオンでそれができたような
サイト側で受け取る準備がされてなくても、入力した状態で開けるのですか？
それは欲しい… フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？ >>448
> フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？
いやそれが希望です。
あるサイトに入力する場所があり、其処に指定した文字列を入力した状態でブラウザで開きたい、と…
例えば www.google.co.jp を実行すると検索する語句が入力待ちになりますが、
その欄に、検索する語句が入力された状態で開きたい、と。
グーグルなら、「ttps://www.google.co.jp/search?q=あいうえお」とやると、
「あいうえお」を入力して検索実行した後の状態で開きますよね。
別に実行後の状態でも、入力しただけで実行待ちの状態でもどちらでもいいのですが… それはgoogleがURLパラメータを受け取れるようにしてるからって話が>>443
そういう仕様で作られてないなら拡張機能で対応するかフォーム自動入力ツール使えばいい
自分でHTML書く話じゃないならスレ違いだから詳しくは該当スレでどうぞ 『html input 初期値』でぐぐって出てくる話じゃダメなん？
textだったらvalueに書いとく、てやつ 対象フォームに値を入力するJS書いてブックマークレットにしとけばいいんじゃね 掲示板に同じ書き込みしまくって荒らすんじゃないか？ <div class="test" style="background:#ff00ff">てすと</div>
のようにclassとstyleを混ぜて書くのはだめなんですか？
背景色だけperlやphpなどで入力された値にしたいので >>456
ダメではないが古い
jsやphpならcss変数に値を格納できるから自分ならそれ使うな ロジック内で直接指定してあると後から面倒なことになるしなー
テーマみたいに値が決まってるならクラス切り替えた方がいいと思う <div class="test magenta">てすと</div> 
