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 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サイトでかけたくない負荷は、 サーバー側であって、クライアント側じゃないよw ってか重いと思ったこと無いんで 余計な負荷はないと考えて良いんじゃねーの? フロントエンドを重いと思うかどうかは開発者ではなくユーザー(閲覧者) バックエンドが重いのは誰が見ても同じだがフロントエンドは閲覧してるデバイスによるので開発者が「重いと思わない」というのはなんの役にもたたない バニラでするか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ベタうちのおっちゃんがここを通りますよ・・・ | / | /| | // | | U .U 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を設定した要素が左上に移動する場合と、場所はそのままで右や下の要素が重なって表示される場合の2パターンあるのですが違いは何ですか? leftやtopは指定していません 基本的なことが全然わかっていないので質問させてください。 グリッドレイアウトで3つの領域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; } みたいな感じにするとあたかもそこに要素があるようにできる >>279 そういうことだったんですね。ありがとうございます! あと★とかアイコンとか 更新情報の頭にNewつけるとかな 複数のページである事柄を説明する時に 同じ内容の見出しと記事を使うと 検索順位的によくないのでしょうか? 〜の仕方で複数の記事を書く時に 共通の事柄を説明しないといけないんですが こういう時ってみんなどうしてるんでしょうか? げりのときにがすがたまりまくってるじょうたいでといれいったらといれがやばいことになるげんしょう 初めて書き込みさせていただきます。 添付画像のように、トピックスが10個表示されているうちの下7つをCSSで非表示にしたいのですが、うまくいきません。 わかる方がいらっしゃいましたらご教授頂けないでしょうか? https://dotup.org/uploda/dotup.org2036569.png.html 試したコードは以下になります。 @ .loop-item-3, .loop-item-4, .loop-item-5, .loop-item-6, .loop-item-7, .loop-item-8, .loop-item-9 { display: none; } A .loop-item-3.user-id-1.bbp-parent-forum-51.even .post-136.topic.type-topic.status-publish.hentry { display: none; } SASS なら、ループで、 このサイトに入力してみ https://www.sassmeister.com/ @for $i from 3 through 9 { .loop-item-#{$i} { display: none; } } 出力 .loop-item-3 { display: none; } .loop-item-4 { display: none; } 中略 .loop-item-9 { display: none; } >>287 ul.bbp-topic >li をdisplay: noneにして ul.bbp-topic >li:nth-child(1) ul.bbp-topic >li:nth-child(2) ul.bbp-topic >li:nth-child(3) をdisplay: blockでどうよ >>287 (1)に!important付けてみても効かないようなら何か間違ってるんじゃ? .bbp-body > ul:nth-child(n+4) { display: none !important; } >>290 こちらの!importantをつける方法でできました! スタイルシートの優先順位があるんですね! nth-child()やfor文で書く方法もあるんですね。 とても勉強になります! 皆さんありがとうございました! あと追加でお聞きしたいのですが、 「>」←この記号を付ける付けないで表示って変わる場合がありますか? ただ分かりやすくするために明示的に記載しているだけでしょうか? .a .b .a > .b 空白なら、.a のすべての子孫の.b で、 > なら、.a の子(直下のみ)の.b > は、直下の子のみに限定される CSS の基礎を勉強してください! >>293 なるほど!ありがとうございます! 基礎すら勉強せずにホームページ作り初めてみたので苦戦しまくりです... ちゃんと勉強してきます! VScodeとブラケッツってとっちが使ってる人多いのかなー? "ホームページ作り"って今はもう既に懐かしい言葉に聞こえるな サーバーのFTPマネージャーでアップロードしたファイルをスマホからエディタで編集しながらサイトを作っているのですが、急にアップロードしたファイルが文字化けしてしまったのですが、どうしたら治るでしょうか? あと、/public_htmlの下にディレクトリを2つ分けて2つのサイトを作りたい為それぞれにパスワード設定したいのでそれぞれのディレクトリに.htaccessと .htpasswd入れたところ、どちらもパスワードの認証画面は出るのですが、二番目のサイトの方も一番目のIDとパスワードじゃないと入れなくて困ってます。 どうしたら良いでしょうか? read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる