HTML/CSS のどんな質問にも優しく答えるスレ 33
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 32
http://mevius.5ch.net/test/read.cgi/hp/1521035557/
■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html ベンデープレフェックスを削除する場合、なにかに置換するんですか？
ただ削除すればOK?
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
こんなので上3行をただ削除？ >>前スレ992
(a)前者は大丈夫で後者はダメなのか、というか
(c)前者は試してない、後者はダメ 、というか
(a)は同一ブラウザでサイズは変わります
（目的の位置は変わりませんが自分で書き換えることは可能です）
自分のページのコードに組み込んではいません
js使えば簡単に制御できますが使わない条件ですので >>7
＞js使えば簡単に制御できますが使わない条件
もちろん、「clickすると要素のサイズが変わる」っていうjsの部分は実際には組み込む必要なしだよ
単に、＞広告のサイズが変わる
という質問の部分をJSで再現しただけだから
（jsfiddle上でいちいち手動で要素の幅を変更して、サイズ変更後も位置を保てるか？
を再現してたら煩わしいだろうと思ったので）
最小構成はこれ
https://jsfiddle.net/j96khbep/
これで灰色の要素が真ん中に表示されてれば、クロスブラウザの問題はひとまず置いといて
使えるのではと思う
そもそも質問の意図が
https://i.imgur.com/MNVmY6K.jpg
これで合ってなかったらすまん
（これは縦も横も真ん中の場合なので
どちらか片方の場合は要調整）
一応こちらでもレスポンシブのadsenseを試してみたが高さだけを真ん中にすることはできたよ
adsenseコードを挿入した親要素は、jsfiddleのリンク先でいうところのid=hoge要素ね
自分は、その親要素に
display:grid;align-content: center;
これだけ指定して、リロードして広告のサイズが変わっても常に縦は真ん中に表示されたよ あるクラスをbody内のすべてのdivに適用させたいのですが、一つ一つ指定しないで適用する方法はありませんでしょうか？ >>9
一つ一つ要素を指定、というのがどういうレベルなのかわからないけど
jQuery使えるなら
$(document.body).find('div').addClass('hoge');
使わないなら
var elms = document.body.getElementsByTagName('DIV');
とやってelmsをループさせて云々すればいいと思う 補足
htmlが特殊な入れ子になってなければjQuery版は
$('div').addClass('hoge');
でもおｋ >>9
セレクタに「div」って書けばいいんじゃね？ >>12
なるべくcssのみで完結させたいんです。
>>13
そうです。
その追加するクラスはプラグインのものなので、どうにもこうにも CSSで既存divにクラス追加なんて出来ないぞ。
プールに生卵沈めても温泉卵にならないのと一緒。
htmlにあらかじめ書くか、jsで後から付加するか。
htmlにあらかじめ書くってのにはサーバーサイドで処理するようなのも含む。 >>9
そういう書き方は混乱の元だから止めた方がいい
というよりそもそもclassの意味合いから外れるし
それかユニバーサルセレクタでそのclassの内容を全指定とか >>15
body>div{あるクラスのスタイル} 何故にそこまでclass指定を拒む必要があるのかそこが理解できない
コード的にもわかりにくだけだ ＞その追加するクラスはプラグインのものなので
だそうだし、例えばそのプラグインを使うときに
$$.red()みたいに指定するとred関数内部で
'.プラグイン独自のクラス名'を使うっていう仕様なんじゃないの
もしくは、プラグインから指定されたクラス名を使わないといけないとか。
なのでbody>divでいいじゃん、という指摘はそもそもプラグイン使わない方法なので的外れな気がする
プラグインでセレクタ設定できたり改変できるならしらんけど さっき寝ぼけて Chrome ブラウザの javascript で
タグのid名.style.top = 0; とか書いたら有効だった・・・、
document.getElementById(〜) って要らなくなったのでしょうか？？？ > タグのid名.style.top = 0; とか書いたら有効だった・・・、
古い書き方 .red って指定すれば、赤色になるようなプラグインはあるよ
ウィジェットなどもそう >>22
最初からいらないよ
IDは
たぶんNetscape4くらいまで遡っても動くと思うよ 左にメニュー、右にコンテンツというWEBサイトの場合、左のメニュー部分を
コンテンツ毎にコピペするのは死ねるのですが、今時としてはどのような実装方法が使われるのでしょう？
サーバーサイドにwordpressなどなにかしらのシステムが導入されているといったことは
一切ない、一から素でポチポチhtmlを書いてるスタイルです。
SSIやiframeは分かりますが、今時のトレンドってなんでしょう？ >>26
<div id="status"> と window.status ってどっちが優先されるんですか？
新たに、DOMの仕様で window.hoge が追加された時
<div id="hoge"> があったら困りませんか？ 上書きされれば困りますね。
なんで困らないなんて嘘つくんですか？ なんでー
変数（プロパティ）は上書きできるもんじゃん だよな。俺もjsでは変数は全部グローバルにしてるわ。
色々なところから読んだり書いたりできて便利。
本来これが普通。ローカル変数は甘え。 >>31
そりゃ上書きを想定してないからだとしか
ブラウザによって、プロパティがあるかどうかは違いますからね
上書きされるかもしれないし、されないかもしれない
こんなんじゃ困りますね >>33
なんでーなんでー
windowとかdocumentは出来ないけど
基本的には全部上書きできる仕様じゃん 上書きできちゃったら想定と動作が変わるから危険ですね 故意にやることもあるけどな。
toStringの書き換えでlogしたときの文字列化挙動を変えるなど。 故意にHTMLでプロパティを上書きする人はいませんね >>8
丁寧にありがとう
別件ですぐにはできないけど取り掛かってダメならまた質問させてもらうかもです
>レスポンシブのadsenseを試してみたが高さだけを真ん中にすることはできたよ
ちなみにそれ、display:grid;やalign-content:使わずmarginだけでできますか？ >>28
getElementByIdを使えばいいでしょ
グローバル変数なんぞ使う方が悪い >>40
はい
従来の方法でもできます
例
https://jsfiddle.net/3c9n5kjo/
（これは例なのでadsense側のスクリプトによる広告生成の工程は省く。
実用するときは<ins>要素のところに、adsenseのコードである<sciprt云々のコードが書かれる）
adsenseコードを貼る要素の親要素に
position:relative;
adsenseが表示される要素(ここではins要素に直接)に
position:absolute;
top,right,bottom,leftそれぞれ0
margin:auto; divとかはborder-radiusで角を丸められるみたいだけど
直線でカットすることはできないんですか？
斜めにカットしたいです。 position:absoluteってリスキーだよな
自分で書いてる部分ならいいが >>43
カットしたい親ボックスをまず置く
中に子ボックスを置いてtrancefoamで回して斜めにして
辺が親の角斜めにカットするように配置
その中にもう一個孫ボックスを置いて逆に回転させて水平になるようにして
親の親の背景画像を貼ってbackground- position: fixedにする
黒：親
赤：子
青：孫
子はoverflow: hiddenで 例えばページにこんな風に要素があります。
<div>・・・</div>
<p>・・・</p>
<ul>
<li>・・・</li>
<li>・・・</li>
<li>・・・</li>
</ul>
<div id="divID">
・・・・・
<ul>や<p>など、数百行くらい
・・・・・
・・・・・
</div>
一番下のdivIDは現状ではheightは指定していませんので、画面に表示されるのは先頭部分だけです。
それをscrollbarを表示して縦にスクロールさせて全部が見られるようにしたいのです。
height:500px;
などとすれば確かにスクロールバーが出てスクロール出来ます。
でも、問題は、ウインドウの高さを変更すると下部に余白が出ます。
divIDの縦幅がウインドウ下部にピッタリになるようにしたいのですが、
jQueryなどでresizeイベントで毎回計算するやり方しか無いですか？
なおdivIDの開始位置も、その上にある多数の要素が時と場合によって行数が変化するので、一定ではありません。
HTMLやCSS設定だけでやる方法があれば教えて下さい。 >>47
質問の例の雛形はこんな感じかな？
https://jsfiddle.net/kejdqug4/
で、（リサイズも含め）ウインドウのサイズに合わせるように
divIDの縦幅も一緒に伸び縮みしてかつ、スクロールバーも対応できるようにしたい、と？
もしそうなら誰かに任せた 一応自分の環境ではdivIDにheight:100vh;で対応できたけど
https://jsfiddle.net/qbart0jo/
他にいろいろと良い方法があるとおもう >>48>>49
ありがとうございました。
49さんの方法で全体をスクロール出来ますが、
でも、スクロールバーの長さが何かおかしいように思います。
100vhだとちょっと無理があるのではないでしょうか？ >>48
> $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
読みづらい。処理が手続き型っぽく、一歩ずつ処理してる。
each使うコードはたいてい良くないコード
それにせっかくアロー関数使ってるのに戻り値を捨てるとは何事だ
$('#divID').append($.map(Array(50), (_, i) => $(`<p>divIDリスト ${i}</p>`)));
または
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`)); mapのコールバックの第一引数捨ててるし、Arrayも無駄に破棄してる
こっちのが短いし見やすい
$('#divID').html('<p>divIDリスト</p>'.repeat(50)); jquererとrubyバカはところ構わずやりたい放題するところが似ている BEMとかアトミックデザインとか知らない。特に方法論も知らずにCSS組んでるんですけど問題ありますか？ >>52
おい。
<p>divIDリスト ${i}</p> が
<p>divIDリスト</p> になってるぞ
ばれないとでも思ったか？ アトミックデザインはホームページというよりアプリとかだよね
サイト制作なら分子、生体くらいまでまとめて作っちゃっても問題ないことのほうがいい 原子レベルで作る必要がないものって絶対出てくるし >>56
質問者からの52までの文脈読めばいらないことくらいわかるだろ・・
野暮すぎ >>58
そういう問題じゃないだろ
コードの話をしてるのに問題の話にすり替えてる >>59
いや、だから文脈読めって
コードの話してるなら>>51も>>48に対するレスなら別にそれでいいし
>>52が>>51言ってることも”そもそも連番必要なしだからもっと短く書ける”って言ってるだけで別に何もおかしくないだろ >>56を解釈すると「連番はいる」っているのと同義だからな
明らかに的外れで不要な指摘 >>60
> >>52が>>51言ってることも”そもそも連番必要なしだからもっと短く書ける”って言ってるだけで別に何もおかしくないだろ
それはどう見ても後出しの言い訳なのがバレバレｗ
> mapのコールバックの第一引数捨ててるし、Arrayも無駄に破棄してる
って書いてる時点でわかるやろ？
第一引数捨ててることを問題視してるのに
第二引数使ってることに対して何も言ってない
なら、第二引数に対しては問題ないということなんだから
当然自分も第二引数使うと思いきや、第二引数まで捨てた回答をしている
コードに対していちゃもんつけたくせに、そのコードを直さずに
問題の方を変更して違う意味のコードを出した。
それなら元のコードに文句つけちゃいけないんだよ 元のコードっていうのは
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`));
これのことな。
最初の$.eachを使ったクソコードじゃなくて >>62
＞なら、第二引数に対しては問題ないということなんだから
＞文句つけちゃいけないんだよ
統失＆アスペの方ですか・・？
＞mapのコールバックの第一引数捨ててるし
＞Arrayも無駄に破棄してる
なんだから「mapの第一引数を捨てないように、Arrayも無駄にしないように」を考えての>>52のコードでしょ
>>51は読みづらい。って明確に言ってるんだから。
なんで>>48につられて連番にこだわってmapで消耗してるの？という指摘が>>52なんだが
＞読みづらい
→＞こっちのが短いし見やすい
という自然な流れが文句に見えちゃうって危ない人だよ おれのコードに文句つけやがったとか曲解する人が仕事場にいたら大変そう >>64
> なんだから「mapの第一引数を捨てないように、Arrayも無駄にしないように」を考えての>>52のコードでしょ
だから>>52のコードは、やってることが変わってるって言ってるだろ
なんで仕様を変えるんだよ？
変えなきゃレスもできなかったの？ 「読み辛い」って主観だよね。
読み辛い例としてLispのコード挙げたらLisperに猛然と抗議されたわ。 >>66
＞やってることが変わってる
そんなこと言い出したら>>48はfor文を関数型に書いてるとも言えるんだから
>>51の#divIDを親としたappendは>48のコードの解釈とは違うじゃん
＞なんで仕様を変えるんだよ？
というかお前が仕様わかってないのを見越して
質問者以降の文脈を見なさいよって>>58以降で何度も言ってるんだよ
質問者の例
仕様
＞ <ul>や<p>など、数百行くらい
＞多数の要素が時と場合によって行数が変化するので、一定ではありません。
これに対し、>48が例として連番付きdivリストを生成するコードを記述
それに対し、>51が読みづらいとして改変（連番を引き継ぐ）
それに対し、>52がさらに短縮と見やすさを追求（仕様によれば連番必要なし）
それに対し、>56が急に連番にこだわりだす
どう見ても>>56がおかしいけど？？
逆に、なんで仕様変えたんだ？ >>68
いいから人の話を聞け
> $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
↑このコードが汚いと言ったんだ。
このコードが。
だからこのコードを実行結果を変えずに
まともなコードに直したのが↓このコードだ
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`));
いいか？俺は最初からこのコードの話しかしてねぇ
このコードに問題があるといっただけで、
仕様の話は最初からしてねぇ >>68
> 逆に、なんで仕様変えたんだ？
仕様を変えないとコードを短くできないだらだろ？
連番をなくさないとコードを短くできなかった
つまり>>52はこっちのほうが見やすいんじゃなくて
単に仕様を変えて連番をなくしたコードってだけ
違うもののコードを書いただけ >>69
＞汚いと言ったんだ
いや、>>51のどこをどうみても
＞読みづらい
と書いている 完全に
＞まともなコードに直した
>51は>48のコードと解釈が違うし
>48の質問者への返信として重要なのは
再現性であって、>51であろうが>48であろうがどっちでも良い
すでに>>60で説明済
>>52は、
$.map云々のところにまだ無駄がある
→質問者まで辿って思慮
→そもそも特に連番がいるわけではない
→mapの空引数()=>``でどうにかなりそう
→そもそもテキスト自体リピートでどうにかなりそう
→結果、repeat()で短く見やすいコードを記述
して＞こっちのが短くて見やすい
と言ってるだけ >>64で説明済
なので一貫して、質問者へのコードに対しては
>48であろうが>51であろうが>52であろうがどれでもよいとしか言ってない
それをやたら連番にこだわる石頭が
未だに>69,70みたいに、>>68で説明したにも関わらず未だに
違うモノだの、どれが間違いで、どれが正解だの
的外れで読解力のない馬鹿を晒してるのがここまでの流れ `<p>divIDリスト ${i}</p>`
<p> を文字列から作るよりも、
先に<p> 要素のひな形オブジェクトを作っておいて、
それからクローンしてオブジェクトを作れば？ >>71
だからな。連番にこだわってるんじゃないんだよ。
連番をつけた場合のコードが読みづらい＝汚いって
話をしてるんだよ
> $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
↑ 読みづらい = 汚い
↓ 読みやすい = 綺麗
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`)); そもそも指定数繰り返すのにArray(50)が汚い。
イテレータ返す範囲オブジェクトも自前で実装しなければならないクソ言語ｗ >>74
それはあるね。lodashに_.loopとか入ってくれると良いんだが
こんな風にかければ最高だろう
$('#divID').append(_.loop(50, i => `<p>divIDリスト ${i}</p>`));
まあ今回のはjQueryだけで一番労力をかけずにシンプルに各方法ということで >>73
だから>69の言う
＞俺は最初からこのコードの話しかしてねぇ
だとかお前の言う
>48のコードのここを改変した
とかは本筋と関係ないと何度も言ってんだろ
>51→>52が問題じゃなく
>52→>56が発端
>>68に説明済
>>52の解釈を間違って文句を言われたと勘違いし
的外れな指摘をしてきた>>56（のレス）が発端
(1)>51は>48へレス
(2)>52は単に質問者からの全体の流れで短縮コードを掲示
(3)>56は、>52が>51へ文句を言ったと勘違いしつっかかる
実際は、短縮コードを書いただけだというのが
>60→>62→>63
の流れでわかる
この当たりで>56の馬鹿も自分の勘違いを認知し始め
かつ、”短縮コードを掲示しただけ”の何の落ち度もない>52に
「後出し」とさらに突っかかり自我を保とうとする
もうほぼ、ここで>56の勘違いでした、終わってんだよ
半分本人も認めているがプライドが許さないみたい、という心情だろう
だが
「>51は>48を改変しただけだぞ？」みたいに
おれは(1)をしたんです、と意味不明な主張をしてくる馬鹿がいる
明らかに的外れだろ
が、読解力なさすぎて>69から何度も繰り返す羞恥を未だに晒している
これが現状 >>76
ほんとお前人の話聞かないなｗ
俺はこのコードが読みづらい（汚い）って言ってるだけなの
$.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
お前の話なんかどうでもいいの >>78
え・・まだ理解してないの？？
>51「俺は読みづらいと思い>48のコードを改変」
>52「質問者以降をみれば連番必要ないことがわかるので、さらに読みやすくコードを掲示」
で、こいつ、というよりこのレス↓
>56「おい>52、連番外れてるぞ」
だぞ？明らかにおかしいだろ
で、半分認めたにも関わらず、その後もつっかかりつづける
そして、「おれは>48にレスしたんだ」と蚊帳の外から割り込んでくる>78
病気かよ まとめ
>>47→>>48の流れがあるにも関わらず
「読みづらい」の原因に、
for文（$.each）を使っている
連番が${i}がある
()が多い
ループにArrayで表現
などなど、いろいろな取捨選択があるのに
視野狭く>>48以降しか見れず、$.each＋mapの選択しかできなかった>>51の落ち度 訂正 $.each+map
→$().append + $.map 自分の思う読みづらさを基準に、他人の思う読みづらさに厳しくする
視野が狭い、頭が固い人だと何かの拍子に理不尽に怒ってくる典型例でした >>82
だからなんども、勝手に仕様を変えるなと
言われてるだろ。いい加減自覚しろ $.each([...Array(50)],(i)=>$('#divID').append($(`<p>divIDリスト ${i}</p>`)));
↓
同じことをするのにもっとシンプルに書ける！
↓
$('#divID').append($.map(Array(50), (_, i) => `<p>divIDリスト ${i}</p>`));
↓
（おー、そんな書き方があるのか勉強になった）
↓
<p>divIDリスト ${i}</p> を <p>divIDリスト</p> にすればもっとシンプル書ける！
↓
（インデックス番号なくして、同じものの繰り返しにすれば、
そうだねそれは誰でも思いつくコードだから。何もすごくない） >>85
だからその仕様が視野狭いか広いかの違いだと言ってるだろ
文盲乙
>51の仕様→>>48以降
>52の仕様→質問者>>47以降
>48は>>47のfork
>51は>>48のfork
>52は>47→>48→>51へのfork
そして馬鹿>56が勘違いして>48以降を適用しろ
と喚き散らしてるだけ
これでわからなかったらまじで病院池 >>87
何度も同じこと書かなくていいよ
うざいだけだから 仕様を変えればもっとシンプルに書ける（ドヤー
恥ずかしくないのかなｗ
そのうちループも一回でいいから
repeatいらないとか言い出しそうｗ >>86
本筋は>47→>48
可読性ではなく再現性
スクロールバーが出る程度の要素が入ればなんでもいい
なのでfor文ベースの>48はそもそも間違いでもなんでもないし
オブジェクト指向ベースである$.append云々mapである>51は
>47へのレスである>48とは解釈が異なる 最後にはテキストべた書きすればいいから
JavaScriptはいらないとか言うでしょう
考えていることが手に取るようにわかるｗ 頑張って書いたコードがクソだと言われて
逆ギレしてるんだろうなｗ
いくら別のことをするコードを書いたって、もともとのクソなコードが
良くなるわけじゃないよ。だって解いてる問題が違うんだから
repeat使ったところで
>>48が汚いコードであることを否定することにはならないし、
repeat使ったところで
>>51のコードよりも良いコードになったわけでもない
単に別の問題を解くコードってだけ >>86
俺はむしろ.append(map)の方が常用すぎてeachの方が参考になったけど…？ >>93
> 単に別の問題を解くコードってだけ
しかも誰でも簡単に思いつくｗ ＞頑張って書いたコードが
へぇ・・
がんばって書いたように見えたんだ・・？ｗ >>94
こんな変なコード書くやつがいるんだって参考になった
なるほど >>96
そりゃ見えるよｗ
だって普通に仕事していればあんな
変なコード書かない。恥ずかしくて出せない
クソコードを恥ずかしげもなく出せるってことは
頑張って書いたんだろうさ
それが自分が書ける精一杯のコードなんだろう mapでドヤ顔したかったのが本心だったわけか・・ｗ
しょうもな 勘違いで逆ギレしてくるような>>56みたいな人が職場にいたら大変そう・・ ■ このスレッドは過去ログ倉庫に格納されています
