HTML/CSS のどんな質問に必ず優しく答えるスレ 32
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術も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 <iframe width="100%" height="500"
もう決め打ちでいいんじゃね >>180
スマホで上手く再生できないようなので諦めます。
ありがとうございました。 <div class="outer">
<iframe width="476" height="306" src="https://www.dmm.co.jp/〜/size=476_306/" scrolling="no" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.outer {position:relative;width:100%;max-width:640px;}
.outer::before {content:"";display:block;width:100%;padding-top:calc(100% / 476 * 306);}
.outer iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
</style>
iframeのアスペクト比を保ったままのリサイズならpaddingハックつかうのが普通じゃね？
::beforeとか使えない状況なら、代わりに下に476x306のダミー画像しいて、表示するボックスを確保しないといかんけど afterでdivやその他のタグを追加することは出来ませんか？ リンクというリンクが全部リストタグになってるページあるんだがSEO上有利なのかな 以前聞いたことあるけど今でもそうなのか？
SEO競争にGoogleが終止符を打ってオワコンと化したイメージ 変なSEO対策やると修復が大変
死ぬまで置い続ける覚悟があるならいいけど うむ。コンテンツに精を出して欲しいところ。
しかし怪しい健康サイトがSEOを徹底して検索上位に来てたなんて事件もあったしなー。世の中は理不尽である。 ではないでしょうか？
どうでしょうか？
なクソ記事コンテンツも撲滅してほしい キーワード連呼して極限まで薄く延ばした乞食サイトがはびこって
検索が使い物にならない ちょっとした疑問ですが、
5ch のスレは、書き込んだ文字列が長いと、右側の広告の下に潜り込んで、見えなくなってしまうのですが、
この文字列を折り返して表示するには、どうすれば良いですか？ もう何年もアプリでしか見てないからどうなってるかよくわからんな 隣あった要素の高さを揃えるのって昔はmatchHeight使ってて今はflexboxでやってるんだけど
隣あった要素の中の子要素を揃えたい時はいまだにmatchHeightを使ってるんだよね
<div class="item">
<div class="child"></div>
</div>
<div class="item">
<div class="child"></div>
</div>
これの .childの高さを揃える
これってflexboxでできる？ 5ch のスレは、右側の広告がページではなく、ディスプレイ画面に固定で貼り付いている
書き込みを囲む<div> の横幅が、広告の直前で止まらない。
広告の下まで、潜り込んでしまう
でも、この板のスレでは、潜り込まない。
サーバーによって違うのだろう
一般的には、潜り込まないようにするには、CSS で、どう設定するの？ >>194
外側(item)の高さが揃ってるなら、内側(child)に高さ指定してやればいいだけでは
https://jsfiddle.net/m8Lthq1x/1/ 大きい画像をcssで小さくすればページって軽くなったりします？ 5ch のスレの右側の広告は、フローティング追従広告ですね
左側の文字列が、広告の下に潜り込まないようにするには、
CSS で、どのように書けば良いですか？ padding-right: XXXpxとかwidth:calc(100% - XXXpx)とか
右側に一定のスペース空けとけばいいだけ .thread { word-break: break-all; }
広告をdisplay:none;してしまった方が捗る気がするが html + CSS で、行ごとに色を変えて、しましまにする方法はあるのでしょうか
nth-child を試してみましたが、うまく行きません
https://jsbin.com/jugecok/edit?html,css,js,output
JavaScript を使えばソレっぽいものは作れたのですが
CSS だけで、テーブルを使わずに、どうにかならないかなあと…
参考にしたページ：https://konohazuku.net/css/css_nth-child_tbl_border/ >>203
これじゃあかんの？
div {
background-color: #ff5;
}
div:nth-child(even) {
background-color: #55f;
}
tr:nth-child(even) {
background-color: #555;
}
table {
background-color: #eee;
} ありがとうございました
https://jsbin.com/xapekam/5/edit?html,css,output
CSS の基本的な所が分かっていなかったようです
お手数をおかけしました スレ本来の趣旨から離れる質問なのですが、よろしいでしょうか
「個人として弄る」分には >>203 のように
「単純な html + CSS で書く方法が思いつかないときに JavaScript で」というのも選択肢かなあと思ってしまうのですが
実務的にはどうですか？
・CSS だけで書けるんだから CSS で書け！
・JS で書くなら vanilla JS なんて使うな！ jQuery で書け！
みたいなかんじなのでしょうか バニラで問題なく書けるならわざわざjQueryで重くすることはない jQueryが重いって思ったこと無いけど、
それよりも開発コストが減るほうが重要なんじゃないの？ どんなサイトか次第でしょ
ECサイトで無駄な負荷はかけたくないな ECサイトでかけたくない負荷は、
サーバー側であって、クライアント側じゃないよｗ
ってか重いと思ったこと無いんで
余計な負荷はないと考えて良いんじゃねーの？ フロントエンドを重いと思うかどうかは開発者ではなくユーザー(閲覧者)
バックエンドが重いのは誰が見ても同じだがフロントエンドは閲覧してるデバイスによるので開発者が「重いと思わない」というのはなんの役にもたたない
バニラでするかjQueryでするかでは実際にjQueryの方が重いことはよくある
逆にバニラでした方が開発コストかかるかどうかは仕様(処理の複雑さ)による
実務としては多少コストがかかる程度なら見積り時にバニラで実装する想定で見積りを出す(見積書には明言しないが)
それで発注がもらえればコストの面は気にしなくていいので設計時にどうするかを決める
こんな感じ まぁ書き方にもよるけどな
速度にそんな差が出る処理って例えばどんなん？ >>214
でもさ、お前、古いブラウザすぐに切り捨てるじゃん？
新しいブラウザを搭載してるのは、性能がいい端末なので
jQuery程度、なんの生涯にもならんよ
そもそも、ほとんどのサイトが使っていて
今まで問題起きてない 複数タブ開くのは普通だし少しでもリソース無駄にしたくない派と
性能いいんだから開発楽するためになんでも使うバッテリーの持ちなんて知ったことじゃねー派は常に相容れない jQueryをやめてもバッテリーの消費は誤差程度の違いしか生まれなかったよ jQuery覚えるのめんどくさいから、vanillaで済ましてる
この仕事始めてすぐにVistaとIE9のサポート切れたんで、なくても困ったことがない
ライブラリもjQuery非依存のやつが一通りそろってるし、
定番プラグインだったらしいのは軒並みメンテナンス放棄されてるしな
使うのは他人が書いたコードをメンテするときだけ jQueryのメリットなんてもう薄っぺらいもんな
使う必要かなくなってきた ってかここってHTML/CSSのスレじゃん
jQuery云々はさすがにスレチだろ Bootstrap を使ったら、依存関係で、jQuery も必要！
Bootstrapの機能は、jQueryで作られているから
だから、Bootstrapのユーザーが増えるに従って、jQueryのシェアも増えていく 他人が書いたコードをメンテするときに使うから
結局jQueryを使う。この業界にいて覚えないなんて選択肢はないよ jQueryの話はjQueryのスレに行ってください >>223
そうなの？ Googleのじゃなくて？ >>222
まあこういうドミノ倒しばかりだな ゼロから作るならそもそもbootstrapを使わない。 今の時代は〇〇だとか言う人って絶対システム屋のプログラマだよな。
ただのWeb屋はそんな会話になかなかならない。
いつもいつも新しい技術に追われて追ってお疲れ様だわ。 ／⌒ヽ
/ ´_ゝ`） HTML,CSSベタうちのおっちゃんがここを通りますよ・・・
| /
| /| |
// | |
Ｕ .Ｕ iPhoneのセーフエリアにCSSで対応することは出来ますか？
XとXRだけでも違うので、あっちに合わせればこっち合わずみたいになります >>233
font-size、padding、widthなどの単位をpxではなくvwでやってみ。 viewport-fit=contain
とか
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
とかではなく？ >>227
Materializeも独自のjsとセットになってる
jsがついていないシンプルなCSSフレームワークで多分一番人気あるのがbulma
yahooのpure.cssってのも一応ある position:absoluteを設定した要素が左上に移動する場合と、場所はそのままで右や下の要素が重なって表示される場合の２パターンあるのですが違いは何ですか？
leftやtopは指定していません 基本的なことが全然わかっていないので質問させてください。
グリッドレイアウトで３つの領域A、B、Cに分けました。領域Bに置いたリンク（<a href="article.html">B</a>）を押して、
C内に表示させたいのですが方法がわかりません。どういうコードで実現するのでしょうか？
黎明期のフレームを使ったホームページにあったりした、上に看板画、左に長細いメニュー、その右横のペインにリンク先が表示される、
といった基本的なことがしたいのです。よろしくおねがいします。
●HTML
<div id="container">
<div id="itemA">A</div>
<div id="itemB"><a href="article.html">B</a></div>
<div id="itemC">C</div>
</div> ●CSS
#container {
display: grid;
grid-template-rows: 50px 200px;
grid-template-columns: 100px 1fr;
grid-template-areas:
"areaA areaA"
"areaB areaC";
}
#itemA {
grid-area: areaA;
background: #f88;
}
#itemB {
grid-area: areaB;
background: #8f8;
}
#itemC {
grid-area: areaC;
background: #88f;
}
長々とすみません。 >>241
レスありがとうございます。
私には難しいことがわかったので、iframe試して駄目なら
諦めます。
スレ汚し失礼いたしました。 >>243！
残念ながらjQueryはほとんどわかりませんが、
>243さんのレスでJavaScriptをつかえばいいのかと、
強引ですが以下でなんとか希望の動作をしました。ありがとうございます。
<div id="itemB">B <a href="javascript:void(0);" onclick="OnLinkClick();">Link</a></div>
<div id="itemC">C <div id="c"></div></div>
function OnLinkClick() {
document.getElementById("c").innerHTML = ' <iframe src="example.html" </iframe>'
}
他に標準的な手法がありましたらお教えください。よろしくお願いします。 昔のframeと同様にiframeにname付けてaでtarget指定すればいいだけなんだけど bootstrapってjQuery必須でprototype.jsと競合するから使えないんだよね
bootstrapもprototype.jsで作ればいいのになんで頑なにjQueryなんだろ > bootstrapってjQuery必須でprototype.jsと競合するから使えないんだよね
使える。jQueryは他のライブラリと混ぜて使えるように設計されており
jQuery.noConflict(true); をすれば $ はprototype.jsに解放される。
その状態でもbootstrapはjQueryを使って動作するし、
$の代わりにjQueryを使うことで自分もjQueryを使ったコードを書くことができる。
> bootstrapもprototype.jsで作ればいいのになんで頑なにjQueryなんだろ
prototype.jsは標準のJavaScriptオブジェクトを拡張している。
そのせいでprototype.jsで追加拡張されたreduceと、
標準で作られたreduceで仕様が異なっており互換性問題が発生した。
これはプロトタイプ汚染やオブジェクト汚染と呼ばれバッドプラクティスとなった。
その問題もあり、prototype.js よりも安全で使いやすいjQueryが登場し
prototype.js は急速に使われなくなった。prototype.js は1.7系が9年前に公開され
あとはバグ修正のみでそれも3年前でもはやメンテナンスされてない状態
最新のブラウザで動くかどうかも怪しく使う意味がない。
それに対してjQueryは3.4.0が今年の4月、3.4.1が5月にリリースされており、
4.0がリリースされることもアナウンスされている >>248
はえー、マジか
じゃあprototype.jsは使わない方がいいのね？
使えてるから使ってるんだけどいつ問題が出てもおかしくないのか
ちゃんと理由あるんだねえ
jQueryに乗り換えないとなのか、めんどくさいなあ
とりあえず jQuery.noConflict(true); ってすれば使えるらしい？のでやってみよう
ありがとう prototype.jsのプロトタイプ汚染でjQueryにのりかえって、10年前かって感じだな
あ、jQuery使うなら、1.8か1.9にしとけよ
jQuery2や3は、後方互換性壊しただけの「メンテナンス続けてます」詐欺みたいなもんだからね
2や3使うくらいなら、もうjQueryなしでやったほうがいいから >>250
へ？
君のブラウザ対応どこまで広範囲なんだよ。 >>250
1系の最後は、1.9じゃなくて、1.12.4だからな
Internet Explorer 6-8, Opera 12.1x or Safari 5.1+ に対応するなら1.x系
必要ないなら3.x系だ。
2.x系は、3.x系のプレビュー版みたいなもん。今はもう使う必要がない
IE6-8対応 ○ ×
：
jQuery 1.8
jQuery 1.9
jQuery 1.10 (≒ 2.0.x）
jQuery 1.11 (≒ 2.1.x)
jQuery 1.12 (≒ 2.2.x)
jQuery 3.0
jQuery 3.1
： >>253
jQueryを使わずにIE3もサポートしてくれって言ったら断られたよ。
なんでだろう？ 古いJavaScriptは互換性がないからな。
互換性を吸収するjQueryを使ったとしてもIE6が限界。
jQueryなしでIE3に対応するとか正気の沙汰じゃない。
例えばIE3だと外部スクリプトすら読み込めない。
try-catchに対応してない（文法エラーですべて実行できない） jQuery使ってどうにかクロスプラットフォームが実現できていたものを
jQueryを使わないとか地獄やろうなぁ まあIEももうMSが使うのやめてくれって声明出したし
よほどのアホ企業じゃないと切り捨てる方向だろうけどな つまり、日本企業の99%以上はアホ企業ってことだな スマホアプリ
EDGEブラウザくん「こんにちはﾌﾞﾋﾋ」 >>258
そう
上の世代の連中が根本を理解できてないから未だにIE対応しろとか言い出す
実際問題今のWebの閲覧はスマホを基準に考えないとダメ まぁ今45歳以上のオッサンが若い頃にネットとかないしな そもそもの問題は多分、年齢や世代ではなくて
文系の口が達者なだけのバカ営業な気が >>261
団塊ジュニアは大学時代にネット使ってる最初の世代 大学でしかEメール読めなかった
家にネット回線ある人はまれであったな 昔話いらね
こういうやつらが会社で老害になるんだよな 260-261でおっさんが問題とか言い出す
262-265でおっさんの反論（？）が始まる
266が昔話するこいつらが老害と断じる
何がどうなろうとおっさんが悪い風潮 今、老害だの言ってオッサンを叩く若い連中こそが
同じ様な老害になるから大丈夫。
どうせそのうち「最近の若い奴は」とか言い出す。 content=''
これの使い道がわかりません。
どんな意味があるんでしょうか？ 基礎39. 回り込みの解除（floatの解除）
https://web-manabu.com/html-css39/
clear: both; は、floatを指定した要素の、次の要素に指定するけど、
clearfix は、親要素に指定できる
clearfixで、:before, :after に、content: ""; を指定する奴だろ？ とりあえず、これでも読んでみたら？
ttps://www.webcreatorbox.com/tech/content-property >>271
::beforeや::afterはcontentを設定しなければなにも起こらない
しかし装飾のために使う場合など、contentに指定したい文字列や画像がない場合は多々ある
そういうときはcontent:''; のように空(長さ0の文字列)を設定する beforeやafterを擬似クラス(:1つ)で書いてるの見るとモヤっとする
まあ初心者さんなんだろうけど 古いブラウザにも対応するために1つだけにしている可能性もある
IE8とかな いやあ、今更そんな必要ないし、ましてやここに書くのにそんなこと考慮しないだろ
初心者さんがネットの古い記事で見知った書き方してるんだと思う 271です。
装飾とは例えばどんなものの事でしょうか？
初心者ですみません いろいろあるけど、例えばグロナビのそれぞれの前にアイコンついてたり、見出しの前に装飾ついてたり
構造化的には意味がないものとかはhtmlでは何も置かずにcssで要素を置きたいとかがある
そういう時に
.foo::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
}
みたいな感じにするとあたかもそこに要素があるようにできる 
