HTML/CSS のどんな質問にも優しく答えるスレ 32
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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 >>923,>>923
試しにさ、これcssでどう書くか言ってみて。
<span class="hoge">hoge<span>
.hogeは、スマートフォン用のレイアウト時のみ表示するようにする。
もちろんインライン要素のままで。 >>930
お前も書いてみて。
important使わなきゃできない理由が知りたい >>930
はい
@media (min-width: 600px) {
.hoge {
display: none;
}
}
PC優先のmax指定派ならこっち
.hoge {
display: none;
}
@media (max-width: 600px) {
.hoge {
display: inline;
}
}
ってかこれを書かされる意味がわからないんだけど…
今の話の流れからなんでこれ？ >>930
それは特に困らないんじゃ…
ああもしかして
PC用に書いたスタイルがSPでも反映するようにして
必要なとこだけ上書きする方式なのか？ >>934
いや、それは普通だろ
そのためのメディアクエリだ
それで困るとかならこの仕事向いてない display:inlienじゃnoneを上書き出来ないとでもおもってんじゃねーのw >>908
インライアンってプライベートライアンの親戚か何か？ 便乗質問だけど
@media only screen and (max-width: 576px)
と
@media (max-width: 578px)
ってどうちがうの？ displayするのにimportantって
結局何が言いたかったんだ？
結局これが的中か
1. あなたがアホだから
2. displayを間違った解釈をして
3. displayを糞仕様呼ばわりして
4. important乱発などという変なことをしている。 git push -f すればいい。
自分が管理するブランチの歴史を書き換えて
強制pushするのはよくやること >>933
ごめん質問間違った
PCの時は非表示、スマホの時は表示を
汎用クラスのみで制御する場合だった
もちろん場所によってはinlineであったりblockであったりのケース >>938
質問は only screen のこと？
だと思って回答します
メディアクエリを適用する対象デバイスを指定するんだけど指定できるデバイスが3つあって
screen:通常の画面
print:印刷
speech:音声読み上げ
それぞれにonly、notをつけれる
何も指定しないとデフォルトであるallになってすべてに適用する >>942
同じ
2つ目のやつのnoneとinlineを逆にするだけ >>942
だからお前が書けって言ったよね？
importantをクソな使い方を
見てやろうって言ってるんだよ。
ほらはやく importantなんてJavaScriptライブラリがつけたスタイルを上書きする時ぐらいしか使わないだろ
あとは破綻したクソなコードを引き継いでどうしようもなくなった時
自分でコーディングしててimportant使う必要があるとかよっぽどクソのコードしか書けないっていう証拠かと importantニキは新しい仕事探せ
それが世の中のため かなり大掛かりなサイトになるが
まずサイトの基本となるスタイル、コンポーネントがあって
その上で、各サブサイト毎に特有のスタイルが重なって
さらにそこに各スタイルをガン無視したLPを作ることになって…
みたいな時に使うことはあるし問題もないと思ってる
ただそこまで大掛かりなサイトは少ないし
それの制作に携わる人もそんなにいないだろうな >>950
その場合は高い優先順位で
スタイルを定義すればいいだけなので
importantを使うっていうのは、その優先順位を
正しく理解できてないだけ >>950
ああそれはあるかも
大がかりじゃなくてもWordPressで既存テーマを基に子テーマを作った時はそんな感じになる
いずれにしてもちょっと特殊なパターンで、>>930のようなこと言ってくるってことはそんなパターンでもなくそもそも理解してないんだろね >>951
ライブラリとかだとこいつには勝てねえってぐらいのセレクタ使ってる時があってそれにはimportant使う時ある >>951
必ずしも全てをコントロールで来るとは限らんのよその手の仕事だと
たまにあるじゃん、メーカーとかインフラ系で
ハウスエージェンシーが最上流を仕切ってて
基本スタイルの時点で頑張りすぎてるやーつ
もちろんそれ作ってる人達もそれが良くないことはわかってて
それでも仕事のしがらみでガッチリやらざるを得なかった感が溢れてる、的な
そういうの
理想的じゃないの >>953
その場合でもライブラリで使ってるセレクタ + 任意のセレクタにすれば絶対勝てるだろ >>955
へー、理想的じゃないのの例が
さっきのレスポンシブの簡単な例なんですか？ｗ
無知な人が偉そうに、できないことだってあるんだよ！と
言われましてもね。お前がわかってなかっただけじゃんで
終わってるんですよ >>944
へ〜〜〜〜なるほど
ありがとうございました。 固定高さのdiv内にadsence（レスポンシブ）を配置
毎回広告サイズが変わるがdiv内トップに位置されて下が空いてしまう
高さを中央配置にできないものでしょうか？
ダメ元で
padding: auto auto;
vertical-align: middle;
をしたがやはり変わらずです
そもそもスクリプトがらみでcssだけで対処できるかですが >>960
importantは>>908=>>919=>>930=>>942が頭悪かったっことで無事決着がついた >>960
959ですが付けても付けなくても変わらずです ピクセル数とかってさ、8の倍数文化は意味あるのかな？
なんかコンピュータカッコイイ！にしか見えない。 devicePixelRatio
=> 3
orz... >959
1. 親要素にdisplay: table-cell を指定する
vertical-align は基本的に displayが inline 系の要素にしか効かない
(元々文字の縦位置を指定するスタイルのため)
ただし、例外的に display: table-cell の子要素には効く
tableもtable-row もなくても機能するので便利だが、それでいいのか？と使うときはいつも思う
2. 親要素に display: flex と align-items: center を指定する
未対応ブラウザを気にしないならこれでいい >>955
あるなーそういうの
今やってるのもまさにそうだわ
アホみたいなページ数のマニュアルがある 頼むからもうやめて、オレが悪かったよ・・・
サーバー代ケチる為にライブドアブログ使ったの。
で、独自タグからの展開で訳わかんなくなって乱発したの。 >>965
共に全く表示されなくなります
ちなみに子要素は
ins class="adsbygoogle" style="display: block; height: 90px;"〜です
読み込まれる（広告が変わる）度にheightも変わります
その後にもheightやwidh含むパラメータがずらずら並んでいます >>970
親要素にjustify-content: center;align-content: center;は？
https://jsfiddle.net/Lxtb4201/
（要素クリックで広告のサイズ変わるアクション） hrで水平線を作ったんですが、その上に文字や画像が重なってしまいます。
ロゴ、水平線、文字の順に上からならべたいのですがどうすればいいですか？ >>972
何もしなければ重ならずに並ぶ
重なるのはcssでそうなってるから
cssがどうなってるのかはあなたしか知らない
なのでアドバイスしようがない line-heightがおかしいんじゃね？
ともかく先に言われてるようにコード晒してくれるとわかりやすい
あと使わない手もある <body>
<h1><a href=""><img src=""></a></h1>
<hr/>
<svg id"レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 100 100">
<defs>
<style>.cls-1{fill:#ccc;}</style>
</defs>
<circle class="cls-1" cx="50" cy="50" r="50"/>
</svg>
<div style="position:absolute; top:120px; left:200px;">
<h2></h2>
長くてすみません
h1がロゴの画像(svg)、h2が文字です
その中間のやつはよくわからないんですが、それがあると円ができるので残してあります >>976
cssもあったほうがいいでしょうか...?
本当に情弱ですみません >>971
広告は表示されるが上下位置は変わらずです
>>976
h1 { border-bottom: 〜 } でhr失くすはダメ？ ごめん
h2 { border-top: 〜 } か >>977
人に質問してコードを見せる時は
同じことを再現できるコードを渡すんだよ
ほんで答える人がコピペとかで手を煩わさずに済むように
jsfiddleとかに上げるといいと思うよ >>980取ったら次スレ立てんだよ。
あくしろや。 >>1をコピペしてURL変えただけなのにNGワード言われる
なにがいかんの(´；ω；｀) てすと
以下自スレのテンプレ
―
HTML/CSS のどんな質問にも優しく答えるスレ 33
―
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう すみません
上の２つ繋げてスレ立てようとするとNGになる(´；ω；｀)
誰か立ててください(´；ω；｀) ここまでやっときゃあとは立てれるひとが立てるからそんな安心すんな >>979
解決しました、ありがとうございます
>>980
分かりました。また質問することがあると思うので気をつけます! しょっちゅう、NG ワードになる
よく、MANGO 板でテストしてるけど、さっぱりわからん。
2, 3 文字でも、NG ワードになることもあるし >>978
jsfiddleリンク先の要素の上下位置が変わらないのか
それとも
独自に実装してみた後の広告要素の上下位置が変わらないのか
がわからん >>991
つまり
(a)前者は大丈夫で後者はダメなのか
(b)前者も後者もダメ
(c)前者は試してない、後者はダメ
ということが聞きたかった
レスから察するに(a),(c)の可能性が高いと思うけど
もしも(a)なら、意外なところでハマってるだけで簡単に解決するかも https://jsfiddle.net/wha62x80/#&;togetherjs=bPcdrH8FKT
これのbodyの中身を画面の真ん中(円の縦の中心軸)に合わせたいのですが、どうすれば良いでしょうか。
body｛text-align:center｝と、やってみたのですができませんでした。 >>993
そもそもソースがいろいろと崩れてるので動くかわからないが
https://jsfiddle.net/1zahrk7s/
外接させたい場合（円の中にテキスト全部収まる様にする）はちょいめんどい grid-areaって大昔CSSがない時代に
テーブルでレイアウトしてたようなもの？ >>994
理想の形になりましたすごいです
本当にありがとうございます このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 118日 13時間 29分 0秒 レス数が1000を超えています。これ以上書き込みはできません。
