HTML/CSS のどんな質問にも優しく答えるスレ 32
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
https://mevius.5ch.net/test/read.cgi/hp/1517028608/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>356
現在入力中の文字列でフィルタリングしてるんですね >>355
<select size="3">
<option value="値">テキスト</option>
<option value="値">テキスト</option>
：
</select>
って書けばいいよ
sizeの数字は適当に >>356
それはコンボボックスではなく
サジェストしてるんだよ コンボボックスかつサジェストだろ
コンボボックスを否定することはできんはずだ tableの行と行の間に画像（下矢印）を表示したいのですが、cssだけで実現可能でしょうか？
今は偶数行のtdの中にimgで画像を入れています
tableは行選択が可能で、選択行だけ背景色を変える必要があるので矢印の画像はtrの外側？に
配置したいです。うまく説明出来ませんが
────────────────────
<tr>1行目の内容・・・・・・・・・</tr>
↓
<tr>2行目の内容・・・・・・・・・</tr> ←このtrが選択されている場合は背景色変える
↓
<tr>3行目の内容・・・・・・・・・</tr>
こんな感じです after疑似要素とnot疑似クラスとlast-child疑似クラスでできる afterはその要素の後じゃなく要素内の一番最後に作られるんだぞ 例えばこんなhtmlで
＜p＞見出し0＜/p＞
本文・・・・・
＜h2＞見出し1＜/h2＞
本文・・・・・
＜h2＞見出し2＜/h2＞
本文・・・・・
先頭の見出し0のみ＜p＞の場合、その見出しも＜h2＞と同じフォントサイズで表示したいのです。
自分でフォントサイズを指定するとしてもブラウザーがh2を何ポイントで表示するか分からないので
事前に指定する事が出来ません。
良い方法はありますか？ >>365
h2のデフォルトサイズで表示したいので
自分では指定したくないんです。 フォントサイズはremで指定すれば？
あと見出しをPで指定ってのはどうなんだ？ >>366
h2のデフォのスタイルコピペすればいいじゃん
開発ツールで見れるじゃろ フォーカス時のoutlineのデフォルト状態を;focusで設定しました
:focus
は詳細度1のはずなのに、
main textarea
という詳細度2のセレクタよりも優先されてしまい、
outline: none
という設定をデフォルト設定で上書きしてしまいます
http://jsbin.com/toquciyico/edit?html,css,output
何故こうなるのでしょうか？
詳細度はこちらで計算しました
http://specificity.keegan.st/ >>370
正常にoutlineが表示されるぞ
いくつかブラウザためしたか？ chromeで試したのですが
firefoxで見ても、やはりアウトラインが表示されてしまいます
正常ならtextareaがフォーカスされてもアウトラインは表示されないはずだと思うのですが
main textareaでoutline:noneにしているので。
何かを根本的に勘違いしているのでしょうか・・ >>373
すまん、表示されるのが正常と勘違いしていた
たしかに仕様的にはおかしいな
textarea （入力コントロール）だから特別に扱われている可能性はありうそうだが ありがとうございます
何を勘違いしていたのか分かりました
詳細度計算機の各数字を単純に合計するのかと思っていたのですが
各数字は10進数の桁になっていて
:focusは1点ではなく10点でした
そしてmain textareaは2点でした
なので、:focusが優先されるのは正常動作でした
となると、:focusでデフォルトのoutlineを設定するのは良くないということですね > 詳細度計算機の各数字を単純に合計するのかと思っていたのですが
ぜんぜん違う。点数なんてものは存在しない 点数は仕様で決められていたと思いますが・・
決められていないとこんな複雑な処理実装できないですよね 仕様には点数なんてものはない
点数は技術的なことをなにも知らない
文系馬鹿が言い出したでまかせ >>379
この辺がわかりやすいかもしれない
https://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4
詳細度ってポイント制じゃないの？のところを読んでみると良いかも
合計点って考え方は90年代からあるんだけど
足し算しちゃだーめよって話が書いてある 本来は点数なんてものは存在しないからシンプル
点数のせいで複雑に見えてる 優先度を考えなきゃいかんような状況に陥った時点で
設計に問題があるかもしれないね CSSの優先度なんて種類で分岐して数を数えるだけ
IDがありますか？ → Aランクグループへ
クラス等（要素以外）がありますか？ → Bランクグループへ
要素（疑似要素）がありますか？ → Cランクグループへ
*ですか？→ Dランクグループへ
各ランクグループは、そのランクの個数で勝負
（下位ランクのものをいくつ持っていても意味ない）
それだけの話なんだが
例外として、style属性に書いてあれば、ランク関係なしに優先されて
!importantがついていれば、それよりも優先される
（!importantがついている者同士でランキング争いは行う） > （下位ランクのものをいくつ持っていても意味ない）
訂正。同じ個数持っている場合は下位ランクの数で比較 >>381
なるほど
桁が下の数字がいくら積み上がっても上の桁を凌駕することはないのですか
単なる合算よりも分かりやすい、すっきりする挙動ですね
ありがとうございました 17年ほど前の話だが
サイトで足し算しろってドヤ顔で書いた
id1個とclass10個で上回れないからセレクタ10個以上は無視されるとまで書いた
本当に申し訳ないと思う >>390
+はすぐ後ろ、>は直下
<div class="hoge">
<div class="fuga"></div>
</div>
<div class="piyo"></div>
ってあった場合
.hoge + div は .piyo のこと
.hoge > div は .fuga のこと >>389
１つ目がクラスじゃなくなるんだから
１つ目も属性セレクタで書けばいいよ X Y
Y は、X の子孫。
子・孫など、どんな子孫でもよい
X > Y
Y は、X の子。
直接の子だけ。孫以下の子孫は含まない >>392
ありがとう
どうも別に原因があったらしいです
これから検証orz aタグの中にfigcaption入れたらW3Cのチェックでエラーになったんだけどこれって何でですか 示される理由が英語で読めませーんとかなら翻訳板行け ウェブフォントを使ってるサイトは
ページが表示されてから少し間があってフォントが変わりますが
この挙動がいまいちな気がします
フォントをすっかり読み込んでからテキストをフェードインさせるとかした方がいいんじゃないでしょうか？ >>398
入れちゃダメってことになってるからダメ っていうエラーでしたよ
これじゃ合理性に欠ける >>401
使い方を勘違いしていただけですね
ご丁寧にありがとうございます tableタグでdivが効かないのですが
tableタグのtdタグ内で
画像を置いたり位置を調節するには
どうしたらよいのでしょうか？ >>399
FOUTと呼ばれる現象。長い間メリケンweb屋を激怒させてきた。
今ではcssのfont-displayで挙動を指定できたり、
jsならfont loading apiというのもある。
あとはググれ。ポリフィルもあるはず。 俺は宗教上の理由でtableでのレイアウトを禁じられているので答えられないが、このスレに太古より生息するテーブルレイアウトの達人が答えてくれるだろう… >>404
ありがとうございます
あれを気持ち悪いと思っていたのが自分だけじゃないと分かって安心しました
対策もあったんですね まとめブログをやってるんですが、背景設定するとパーツが透けて背景が見えてしまいます
パーツの背景だけを白にするとかどうやればよろしいのでしょうか？
backgroundで指定するとその列全体に適応される（例えば記事と記事の空白に背景が映るようにしたいけどそこも白くなる）
ググってもやり方が見つけられなかったのでぜひとも解決方法を教えてください ヤフオクの商品ページをいつもHTMLで書いてるのですが、
ここで使えるタグは一部だけ公表されていて不透明な部分が多かったりします。
表の編集でセル内の文字のセンタリングを指定したくても
<td style="text-align: center;〜のstyle要素がごっそり削られてしまうのでこの手が使えず
かと言って<center>が普通に使えるHTMLエディタは現行のものはないのではないかと。
ということで
1)現行のHTMLエディタで表のソース中に一つ一つ<center>タグを手打ちする
→正直かなり面倒
2)2000年前後に公開された古いHTMLエディタを使う
→探してますが今一つ見当たらず。特に最適化とか
厳密なエラーチェックとかやってくれる奴があるかも分からず。
BlueGriffonやSharepoint Desingner2007とかとりあえず使ってますが
この問題で悩んでます。
何かアドバイスとか頂ければ幸いです。 >>407
もう少し具体的に
出来ればどこかにコード晒して >>403
多分何か勘違いしている
divが効かないってのを
もう少し標準的な用語で説明してちょ >>411
tableタグのtdタグの中で
divタグを使用しても
divタグのwidthやheightが
効かないのです
background-colorで着色しても
領域に色が塗られません >>412
つまり、
<table><tbody><tr><td>
<div style="background-color: red;">何か</div>
</table>
としても「何か」の背景は赤にならないと？
どこかにあるdiv用のスタイル または table用のスタイル
が悪さをしているとしか考えられんが
他の要素の場合は？ >>413
うーん、それができないんですよね
☆事業内容
みたいな
アイコン+文字列をやるために
画像領域と文字列領域を
divで区切りたかったのですが
tdタグの中のdivは効く様子がないです
同僚からはtableタグは使うなみたいに言われまして
結局divに変更することにしました >>412
そんなことはない
heightはtableかtdにもheight与えなきゃいけないけどwidthやbackgroundはちゃんと効く
そのdivを開発者ツールとかで見てみろ
display:inlineとかbackground:#fffとかがimportantされてるとかのオチじゃないか >>415
なるほど
他におかしいところがあるから
おかしくなってるということですね ブラウザの右クリックメニューから、その要素上で、要素の検査をすれば、
F12開発者ツールが起動するから、
CSS を見れば、適用されているスタイルがわかる もしスレチだったらごめんなさい
Android7.1.1でクローム65.0.3325.109を使っているのですが、あるサイトの決まったページのものだけ「新しいタブで開く」で開くと毎回再読込をしないとページが表示されません
地味に不便なのですが、これは何か規則性があるのでしょうか？ えーっと、伝え方が悪かったです。
こんなのになるんですよ
再読込押すと普通に出てきます
https://i.imgur.com/XpIjuXr.jpg 再読込押すと普通にエラーではない画面が出てきます、の間違いです 今試してみると全く同じページがgalaxyの純正ブラウザでは開けました セッション管理をしていて、途中の状態からは、アクセスできないとか
一番最初の状態から始めないと、アクセスできないような作りになっているとか Web製作者から見て、やらおんとかはちまとかの大手アフィサイトの出来っていい方なの？
それとも技術的にみてもゴミクソサイトなの？ まとめサイトで結構いいデザインだなってとこどこがある？ 金儲けサイトは間違えて広告を押してしまいやすいサイトだからなｗ Android Chromeの機能のひとつに、
リンクが密集している部分をタップした場合、タップした周辺がルーペみたいに拡大されるものがあるんですけれど、
iframeタグを使って埋め込んだサイトでこれをやるとルーペの中身が真っ白になってしまいます。
<iframe src="（wikipediaみたいなリンクの密集してるサイト）"></iframe>
確認したのはChromeは53.0.2785.97、Android4.4.2なので相当古いのですが、
ルーペを出さないようにするかルーペの中身をハンドルする方法ってあるんでしょうか。 <dl>
<dt><dd>
<dt><dd>
:
</dl>
ってならんでるHTMLで1つの <dt><dd> はセットでたてならびにして
それの横にならべるのってＣＳＳでできますか？
absoluteやポジション指定すれば当然できるんですが
できればピクセル指定なしで中身の幅に合わせてならぶようにしたいです 出来ないと思う
使いづらいけどみんな好きだよなあ、dl >>435
こういう風にしたいわけ？
このサイトも同じようなことを考えてたけどできないので
1列ごとにdlで囲ってそれをfloatさせる方法でやってるね
http://d.hatena.ne.jp/tamo_hand/20090628/p1
>>436
わかりやすくはあるんだけどね
dtがインラインのみでddはインラインもブロックもOKというのを最初に頭に入れておくと理解しやすい >>436,437
まさにこうしたかったです
システムからの自動出力でＨＴＭＬの構造がいじれなくて
ちょっと短文が多めでたてに並ぶと見栄えが悪いのでよこにならべられないかなと思った次第です
できないようなのであきらめます
できないことがわかるだけでも無駄に悩まずにすむので助かりました
ありがとうございました >>435
>>435
dl{display:grid;
grid-template-columns:repeat(auto-fill,max-content);
grid-template-rows:repeat(2,max-content);
grid-auto-flow:row dense;
}
dt{grid-row:1/2;}
dd{grid-row:2/3;}
dt,dd{jistify-item:center;
align-item:center;
}
※max-contentやgrid layout使用のため最新ブラウザのみ。レスポンシブ非対応。 こういう問題見ると、まだまだ未完成な言語だなあって思うわ >>440
昔と比べれば日々進歩してるな
IEが早く消えてればもっと進歩も早かったはず IEにくらべたらまぁ
IE6がもっともガンだったけど
やっと消えてくれたから ↓A要素のアウトライン
マ ┏━━━━━━━━━━━━━━━━━━━━━━━┓
│ ┃AAAAAAAAAAAAAAAAABBBBBBBBBBBBBBBBBBBB┃
ジ ┃AAAAAAAAAAAAAAAA↑BBBBBBBBBBBBBBBBBBB┃
ン ┃AAAAAAAAA[←A要素内のB要素→]BBBBBBBBBBBB┃
マ ┃CCCCCCCCCCCCCC↓CDDDDDDDDDDDDDDDDDDD┃
│ ┃CCCCCCCCCCCCCCCCDDDDDDDDDDDDDDDDDDD┃
ジ ┃CCCCCCCCCCCCCCCCDDDDDDDDDDDDDDDDDDD┃
ン ┗━━━━━━━━━━━━━━━━━━━━━━━┛
こんな感じのA要素内のB要素を、ボタン推すとマージンとか全部無視してぱっと画面いっぱいに拡大表示させたいのですが (それはJSでCSS切り替えしてやります)
widht,heightだけ指定して拡大しても
マ ┏━━━━━━━━━━━━━━━━━━━━━━━┓
│ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ジ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ン ┃AAAAAAAAA[←A要素内のB要素→]AAAAAAAAABB┃
マ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
│ ┃AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABB..┃
ジ ┃CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCDD..┃
ン ┗━━━━━━━━━━━━━━━━━━━━━━━┛
こんな感じで、A要素の中でだけ拡大されてしまいます
質問ですが親要素を無視して、特定の要素を拡大して表示する方法はあるでしょうか？
CSS初心者なので、初歩的なやり方をしらないだけだとは思うのですが、どうかよろしくおねがいします <select>で表示されるプルダウンメニューをクリックしたときの一度に表示される要素数を変えるにはどうしたらいいんですか＞
<select size=6>とかだとリストボックス形式になるからプルダウン式で >>445
Aを offset parent にして
Bを position: absoluteにして
margin: auto
top: 0
bottom : 0
left : 0
right : 0 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
1KSSR >>446
すみません、サイトの構成が複雑すぎてjsfiddleに再現しきれなかったです
シンプルに書いたのですが、実際は親要素もいっぱいある感じで、親要素全部はいじるのは難しいです
>>448
ありがとうございます、ですがこれを設定してみてもダメでした。offset parentはもともとAでした
あと追加ですみません、色々やってて気づいたのですがz-indexを1億に設定しても前に出てくる要素があったりします
改めてまとめると「(ほぼ)どんな場合でも親要素を無視して最前面表示できる出来る方法」を知りたいのですが、ないでしょうか？
色んなサイトで使いたいので汎用法があればと思ったのですが >>450
>z-indexを1億に設定しても前に出てくる
他をいじらずにそれを必ず避けることはできない
element が属する stacking context を establish している box が box tree の root でない限り、他の element が前に出てくる可能性は避けられない >>450
複雑なものを複雑なままにしてるからいかんのよ
問題はシンプルにして解決法を考えるもんだ
いらん要素は全部取っ払って
必要なもんだけ書きなされ font sizeをpxで指定することがありますが、この時どこの大きさ（長さ？）を指定しているんでしょうか？
文字サイズ10pxというのは何が10pxなんですか？ >>453
いわゆる em ボックス（ font のグリフをデザインするための基準矩形）の高さ
「em」という名称は文字 M に由来する なるほど、それを元にして1.2emとかを使っていくんですね
スッキリしました
ありがとうございます >>451
なるほど、ある要素だけをいじって最前面にするってのは不可能ということですね
ありがとうございました！
>>452
わたしのサイトではないので・・・すみません ■ このスレッドは過去ログ倉庫に格納されています
