HTML/CSS のどんな質問に必ず優しく答えるスレ 32

： Name_Not_Found [sage] 2018/02/25(日) 17:27:17.09ID:???

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術もOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつはこのスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー

>>980

を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（

>>980

を取った場合も）
立てられない事が予め分かっている場合は、

>>980

付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
ttps://mevius.5ch.net/test/read.cgi/hp/1517028608/">ttps://mevius.5ch.net/test/read.cgi/hp/1517028608/

■関連スレ
Webサイト制作初心者用質問スレ part248
外部リンク

ttp://mevius.2ch.net/test/read.cgi/hp/1494150188/

■HTML
HTML Living Standard 日本語訳
外部リンク

ttp://https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
外部リンク

ttp://https://triple-underscore.github.io/selectors4-ja.html

186

： Name_Not_Found [sage] 2019/06/04(火) 16:46:40.21ID:???

変なSEO対策やると修復が大変
死ぬまで置い続ける覚悟があるならいいけど

187

： Name_Not_Found [] 2019/06/04(火) 23:15:50.94

:4xkr/mar

うむ。コンテンツに精を出して欲しいところ。

しかし怪しい健康サイトがSEOを徹底して検索上位に来てたなんて事件もあったしなー。世の中は理不尽である。

188

： Name_Not_Found [sage] 2019/06/05(水) 00:20:05.30ID:???

ではないでしょうか？
どうでしょうか？
なクソ記事コンテンツも撲滅してほしい

189

： Name_Not_Found [sage] 2019/06/05(水) 04:21:53.11ID:???

キーワード連呼して極限まで薄く延ばした乞食サイトがはびこって
検索が使い物にならない

190

： Name_Not_Found [sage] 2019/06/05(水) 23:30:41.81ID:???

もはやググレバカスだからな

191

： Name_Not_Found [sage] 2019/06/07(金) 21:41:36.11ID:???

ちょっとした疑問ですが、

5ch のスレは、書き込んだ文字列が長いと、右側の広告の下に潜り込んで、見えなくなってしまうのですが、
この文字列を折り返して表示するには、どうすれば良いですか？

192

： Name_Not_Found [sage] 2019/06/07(金) 22:33:02.06ID:???

適当なとこで
改行を
する

193

： Name_Not_Found [sage] 2019/06/07(金) 22:38:25.35ID:???

もう何年もアプリでしか見てないからどうなってるかよくわからんな

194

： Name_Not_Found [sage] 2019/06/08(土) 12:27:25.72ID:???

隣あった要素の高さを揃えるのって昔はmatchHeight使ってて今はflexboxでやってるんだけど
隣あった要素の中の子要素を揃えたい時はいまだにmatchHeightを使ってるんだよね
<div class="item">
<div class="child"></div>
</div>
<div class="item">
<div class="child"></div>
</div>
これの .childの高さを揃える
これってflexboxでできる？

195

： 191 [sage] 2019/06/08(土) 23:50:58.70ID:???

5ch のスレは、右側の広告がページではなく、ディスプレイ画面に固定で貼り付いている

書き込みを囲む<div> の横幅が、広告の直前で止まらない。
広告の下まで、潜り込んでしまう

でも、この板のスレでは、潜り込まない。
サーバーによって違うのだろう

一般的には、潜り込まないようにするには、CSS で、どう設定するの？

196

： Name_Not_Found [sage] 2019/06/09(日) 00:01:37.07ID:???

広告を消せば

197

： Name_Not_Found [sage] 2019/06/09(日) 16:06:55.00ID:???

>>194

外側(item)の高さが揃ってるなら、内側(child)に高さ指定してやればいいだけでは
外部リンク

ttp://https://jsfiddle.net/m8Lthq1x/1/

198

： Name_Not_Found [] 2019/06/10(月) 17:05:39.08

:1aGcNMl0

大きい画像をcssで小さくすればページって軽くなったりします？

199

： Name_Not_Found [sage] 2019/06/10(月) 19:12:39.47ID:???

>>198

なるわけない

200

： 191 [sage] 2019/06/12(水) 00:34:58.33ID:???

5ch のスレの右側の広告は、フローティング追従広告ですね

左側の文字列が、広告の下に潜り込まないようにするには、
CSS で、どのように書けば良いですか？

201

： Name_Not_Found [sage] 2019/06/12(水) 14:49:41.85ID:???

padding-right: XXXpxとかwidth:calc(100% - XXXpx)とか
右側に一定のスペース空けとけばいいだけ

202

： Name_Not_Found [sage] 2019/06/12(水) 15:07:18.20ID:???

.thread { word-break: break-all; }

広告をdisplay:none;してしまった方が捗る気がするが

203

： Name_Not_Found [sage] 2019/06/13(木) 02:35:33.65ID:???

html + CSS で、行ごとに色を変えて、しましまにする方法はあるのでしょうか

nth-child を試してみましたが、うまく行きません
外部リンク

ttp://https://jsbin.com/jugecok/edit?html,css,js,output

JavaScript を使えばソレっぽいものは作れたのですが
CSS だけで、テーブルを使わずに、どうにかならないかなあと…
参考にしたページ：外部リンク

ttp://https://konohazuku.net/css/css_nth-child_tbl_border/

204

： Name_Not_Found [sage] 2019/06/13(木) 02:50:58.89ID:???

>>203

._p なんかどこにもないが

205

： Name_Not_Found [sage] 2019/06/13(木) 02:51:51.76ID:???

>>203

これじゃあかんの？

div {
background-color: #ff5;
}
div:nth-child(even) {
background-color: #55f;
}

tr:nth-child(even) {
background-color: #555;
}

table {
background-color: #eee;
}

206

： Name_Not_Found [sage] 2019/06/13(木) 03:22:06.60ID:???

ありがとうございました
外部リンク

ttp://https://jsbin.com/xapekam/5/edit?html,css,output

CSS の基本的な所が分かっていなかったようです
お手数をおかけしました

207

： Name_Not_Found [sage] 2019/06/13(木) 03:26:50.17ID:???

ええんやで

208

： Name_Not_Found [sage] 2019/06/13(木) 07:27:00.31ID:???

スレタイ通りで良いスレだな

209

： 203 [sage] 2019/06/13(木) 10:27:45.23ID:???

スレ本来の趣旨から離れる質問なのですが、よろしいでしょうか

「個人として弄る」分には

>>203

のように
「単純な html + CSS で書く方法が思いつかないときに JavaScript で」というのも選択肢かなあと思ってしまうのですが
実務的にはどうですか？

・CSS だけで書けるんだから CSS で書け！
・JS で書くなら vanilla JS なんて使うな！　jQuery で書け！

みたいなかんじなのでしょうか

210

： Name_Not_Found [sage] 2019/06/13(木) 12:18:10.49ID:???

バニラで問題なく書けるならわざわざjQueryで重くすることはない

211

： Name_Not_Found [sage] 2019/06/13(木) 13:34:04.14ID:???

jQueryが重いって思ったこと無いけど、
それよりも開発コストが減るほうが重要なんじゃないの？

212

： Name_Not_Found [sage] 2019/06/13(木) 16:09:04.70ID:???

どんなサイトか次第でしょ
ECサイトで無駄な負荷はかけたくないな

213

： Name_Not_Found [sage] 2019/06/13(木) 17:44:14.71ID:???

ECサイトでかけたくない負荷は、
サーバー側であって、クライアント側じゃないよｗ

ってか重いと思ったこと無いんで
余計な負荷はないと考えて良いんじゃねーの？

214

： Name_Not_Found [sage] 2019/06/13(木) 18:46:40.63ID:???

フロントエンドを重いと思うかどうかは開発者ではなくユーザー(閲覧者)
バックエンドが重いのは誰が見ても同じだがフロントエンドは閲覧してるデバイスによるので開発者が「重いと思わない」というのはなんの役にもたたない
バニラでするかjQueryでするかでは実際にjQueryの方が重いことはよくある
逆にバニラでした方が開発コストかかるかどうかは仕様(処理の複雑さ)による
実務としては多少コストがかかる程度なら見積り時にバニラで実装する想定で見積りを出す(見積書には明言しないが)
それで発注がもらえればコストの面は気にしなくていいので設計時にどうするかを決める
こんな感じ

215

： Name_Not_Found [sage] 2019/06/13(木) 19:44:42.91ID:???

まぁ書き方にもよるけどな
速度にそんな差が出る処理って例えばどんなん？

216

： Name_Not_Found [sage] 2019/06/13(木) 19:55:38.60ID:???

>>214

でもさ、お前、古いブラウザすぐに切り捨てるじゃん？

新しいブラウザを搭載してるのは、性能がいい端末なので
jQuery程度、なんの生涯にもならんよ

そもそも、ほとんどのサイトが使っていて
今まで問題起きてない

217

： Name_Not_Found [sage] 2019/06/13(木) 20:11:05.94ID:???

複数タブ開くのは普通だし少しでもリソース無駄にしたくない派と
性能いいんだから開発楽するためになんでも使うバッテリーの持ちなんて知ったことじゃねー派は常に相容れない

218

： Name_Not_Found [sage] 2019/06/13(木) 21:17:39.16ID:???

jQueryをやめてもバッテリーの消費は誤差程度の違いしか生まれなかったよ

219

： Name_Not_Found [sage] 2019/06/13(木) 23:04:58.41ID:???

jQuery覚えるのめんどくさいから、vanillaで済ましてる
この仕事始めてすぐにVistaとIE9のサポート切れたんで、なくても困ったことがない
ライブラリもjQuery非依存のやつが一通りそろってるし、
定番プラグインだったらしいのは軒並みメンテナンス放棄されてるしな
使うのは他人が書いたコードをメンテするときだけ

220

： Name_Not_Found [sage] 2019/06/13(木) 23:06:58.22ID:???

jQueryのメリットなんてもう薄っぺらいもんな
使う必要かなくなってきた

221

： Name_Not_Found [sage] 2019/06/13(木) 23:09:48.58ID:???

ってかここってHTML/CSSのスレじゃん
jQuery云々はさすがにスレチだろ

222

： Name_Not_Found [sage] 2019/06/14(金) 00:11:51.81ID:???

Bootstrap を使ったら、依存関係で、jQuery も必要！
Bootstrapの機能は、jQueryで作られているから

だから、Bootstrapのユーザーが増えるに従って、jQueryのシェアも増えていく

223

： Name_Not_Found [sage] 2019/06/14(金) 00:57:33.62ID:???

今はbulmaだぞ

224

： Name_Not_Found [sage] 2019/06/14(金) 02:35:07.70ID:???

メンテの面からCSSですむならCSSかな

225

： Name_Not_Found [sage] 2019/06/14(金) 04:56:00.13ID:???

他人が書いたコードをメンテするときに使うから
結局jQueryを使う。この業界にいて覚えないなんて選択肢はないよ

226

： Name_Not_Found [sage] 2019/06/14(金) 09:54:25.14ID:???

jQueryの話はjQueryのスレに行ってください

227

： Name_Not_Found [] 2019/06/15(土) 01:53:39.00

:Fc2SWzYL

>>223

そうなの？　Googleのじゃなくて？

228

： Name_Not_Found [sage] 2019/06/15(土) 12:29:20.27ID:???

>>222

まあこういうドミノ倒しばかりだな　ゼロから作るならそもそもbootstrapを使わない。

229

： Name_Not_Found [sage] 2019/06/15(土) 13:11:36.02ID:???

今の時代は〇〇だとか言う人って絶対システム屋のプログラマだよな。
ただのWeb屋はそんな会話になかなかならない。

いつもいつも新しい技術に追われて追ってお疲れ様だわ。

230

： Name_Not_Found [sage] 2019/06/15(土) 14:43:25.70ID:???

デザイナーだけど普通になるぞ
今の時代はXDだ

231

： Name_Not_Found [sage] 2019/06/15(土) 15:00:51.25ID:???

>>230

ここデザインの話してないから。

232

： Name_Not_Found [sage] 2019/06/15(土) 20:20:41.89ID:???

　　　／⌒ヽ
　　/　´_ゝ`） HTML,CSSベタうちのおっちゃんがここを通りますよ・・・
　　|　　　/
　　| /|　|
　 //　| |
　Ｕ　 .Ｕ

233

： Name_Not_Found [sage] 2019/06/15(土) 22:05:19.13ID:???

iPhoneのセーフエリアにCSSで対応することは出来ますか？
XとXRだけでも違うので、あっちに合わせればこっち合わずみたいになります

234

： Name_Not_Found [sage] 2019/06/15(土) 22:23:11.77ID:???

>>233

font-size、padding、widthなどの単位をpxではなくvwでやってみ。

235

： Name_Not_Found [sage] 2019/06/15(土) 23:02:05.85ID:???

viewport-fit=contain
とか
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
とかではなく？

236

： Name_Not_Found [sage] 2019/06/15(土) 23:09:37.52ID:???

>>235

あ、勘違いしたわ。

237

： Name_Not_Found [sage] 2019/06/16(日) 16:35:59.48ID:???

>>227

Materializeも独自のjsとセットになってる
jsがついていないシンプルなCSSフレームワークで多分一番人気あるのがbulma
yahooのpure.cssってのも一応ある

238

： Name_Not_Found [sage] 2019/06/23(日) 14:41:37.15ID:???

position:absoluteを設定した要素が左上に移動する場合と、場所はそのままで右や下の要素が重なって表示される場合の２パターンあるのですが違いは何ですか？
leftやtopは指定していません

239

： Name_Not_Found [sage] 2019/06/23(日) 15:34:26.75ID:???

基本的なことが全然わかっていないので質問させてください。
グリッドレイアウトで３つの領域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>

240

： 239 [sage] 2019/06/23(日) 15:35:38.71ID:???

●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

： Name_Not_Found [sage] 2019/06/23(日) 21:07:18.27ID:???

>>240

君の知識じゃそれをやるには遠そうだ。

242

： 239 [sage] 2019/06/23(日) 23:17:50.88ID:???

>>241

レスありがとうございます。
私には難しいことがわかったので、iframe試して駄目なら
諦めます。
スレ汚し失礼いたしました。

243

： Name_Not_Found [sage] 2019/06/24(月) 01:25:10.48ID:???

>>242

jQueryはいける？

244

： 239 [sage] 2019/06/24(月) 12:14:11.18ID:???

>>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>'
}
他に標準的な手法がありましたらお教えください。よろしくお願いします。

245

： 239 [sage] 2019/06/24(月) 12:16:07.18ID:???

>>244

！とか入っちゃってすみません。

246

： Name_Not_Found [sage] 2019/06/24(月) 14:11:36.86ID:???

昔のframeと同様にiframeにname付けてaでtarget指定すればいいだけなんだけど

247

： Name_Not_Found [sage] 2019/06/25(火) 12:38:13.27ID:???

bootstrapってjQuery必須でprototype.jsと競合するから使えないんだよね
bootstrapもprototype.jsで作ればいいのになんで頑なにjQueryなんだろ

248

： Name_Not_Found [sage] 2019/06/25(火) 14:18:34.53ID:???

> 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がリリースされることもアナウンスされている

249

： Name_Not_Found [sage] 2019/06/25(火) 14:49:02.71ID:???

>>248

はえー、マジか
じゃあprototype.jsは使わない方がいいのね？
使えてるから使ってるんだけどいつ問題が出てもおかしくないのか
ちゃんと理由あるんだねえ
jQueryに乗り換えないとなのか、めんどくさいなあ
とりあえず jQuery.noConflict(true); ってすれば使えるらしい？のでやってみよう
ありがとう

250

： Name_Not_Found [] 2019/06/26(水) 13:46:48.95

:6bhcQlRF

prototype.jsのプロトタイプ汚染でjQueryにのりかえって、10年前かって感じだな

あ、jQuery使うなら、1.8か1.9にしとけよ
jQuery2や3は、後方互換性壊しただけの「メンテナンス続けてます」詐欺みたいなもんだからね
2や3使うくらいなら、もうjQueryなしでやったほうがいいから

251

： Name_Not_Found [sage] 2019/06/26(水) 13:49:00.57ID:???

>>250

へ？
君のブラウザ対応どこまで広範囲なんだよ。

252

： Name_Not_Found [sage] 2019/06/26(水) 14:16:50.78ID:???

>>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

： Name_Not_Found [sage] 2019/06/26(水) 20:36:41.43ID:???

>>250

ttp://https://pc.watch.impress.co.jp/docs/article/960722/ie30b2j1.htm
IE3も切り捨てないで対応してくれますか？(´・ω・｀)

254

： Name_Not_Found [sage] 2019/06/26(水) 20:54:43.60ID:???

>>253

jQueryを使わずにIE3もサポートしてくれって言ったら断られたよ。
なんでだろう？

255

： Name_Not_Found [sage] 2019/06/26(水) 20:59:08.00ID:???

古いJavaScriptは互換性がないからな。
互換性を吸収するjQueryを使ったとしてもIE6が限界。
jQueryなしでIE3に対応するとか正気の沙汰じゃない。

例えばIE3だと外部スクリプトすら読み込めない。
try-catchに対応してない（文法エラーですべて実行できない）

256

： Name_Not_Found [sage] 2019/06/26(水) 21:11:22.13ID:???

jQuery使ってどうにかクロスプラットフォームが実現できていたものを
jQueryを使わないとか地獄やろうなぁ

257

： Name_Not_Found [sage] 2019/06/26(水) 21:12:50.36ID:???

まあIEももうMSが使うのやめてくれって声明出したし
よほどのアホ企業じゃないと切り捨てる方向だろうけどな

258

： Name_Not_Found [sage] 2019/06/26(水) 22:06:08.16ID:???

つまり、日本企業の99%以上はアホ企業ってことだな

259

： Name_Not_Found [sage] 2019/06/27(木) 09:18:05.39ID:???

スマホアプリ
EDGEブラウザくん「こんにちはﾌﾞﾋﾋ」

260

： Name_Not_Found [sage] 2019/07/01(月) 10:47:32.01ID:???

>>258

そう
上の世代の連中が根本を理解できてないから未だにIE対応しろとか言い出す
実際問題今のWebの閲覧はスマホを基準に考えないとダメ

261

： Name_Not_Found [sage] 2019/07/02(火) 01:00:37.15ID:???

まぁ今45歳以上のオッサンが若い頃にネットとかないしな

262

： Name_Not_Found [sage] 2019/07/02(火) 05:05:40.78ID:???

そもそもの問題は多分、年齢や世代ではなくて
文系の口が達者なだけのバカ営業な気が

263

： Name_Not_Found [sage] 2019/07/03(水) 15:18:39.68ID:???

>>261

団塊ジュニアは大学時代にネット使ってる最初の世代

264

： Name_Not_Found [sage] 2019/07/03(水) 19:56:32.79ID:???

ネスケ暗黒時代も乗り切ってるしな

265

： Name_Not_Found [sage] 2019/07/03(水) 21:57:47.15ID:???

大学でしかEメール読めなかった
家にネット回線ある人はまれであったな

266

： Name_Not_Found [sage] 2019/07/04(木) 01:06:56.80ID:???

昔話いらね
こういうやつらが会社で老害になるんだよな

267

： Name_Not_Found [sage] 2019/07/04(木) 01:37:01.97ID:???

260-261でおっさんが問題とか言い出す
262-265でおっさんの反論（？）が始まる
266が昔話するこいつらが老害と断じる

何がどうなろうとおっさんが悪い風潮

268

： Name_Not_Found [sage] 2019/07/04(木) 10:03:24.47ID:???

今、老害だの言ってオッサンを叩く若い連中こそが
同じ様な老害になるから大丈夫。
どうせそのうち「最近の若い奴は」とか言い出す。

269

： Name_Not_Found [sage] 2019/07/04(木) 15:09:14.82ID:???

最近の若い奴はすごいなぁ

270

： Name_Not_Found [] 2019/07/05(金) 17:48:58.74

:NNvt5xh7

content=''
これの使い道がわかりません。
どんな意味があるんでしょうか？

271

： Name_Not_Found [] 2019/07/05(金) 17:58:25.87

:NNvt5xh7

cssでよく:beforeの後にみかけるものです

272

： Name_Not_Found [sage] 2019/07/05(金) 20:11:08.62ID:???

基礎39. 回り込みの解除（floatの解除）
外部リンク

ttp://https://web-manabu.com/html-css39/

clear: both; は、floatを指定した要素の、次の要素に指定するけど、
clearfix は、親要素に指定できる

clearfixで、:before, :after に、content: ""; を指定する奴だろ？

273

： Name_Not_Found [sage] 2019/07/05(金) 22:29:34.44ID:???

とりあえず、これでも読んでみたら？
外部リンク

ttps://www.webcreatorbox.com/tech/content-property

274

： Name_Not_Found [sage] 2019/07/06(土) 11:48:17.56ID:???

>>271

::beforeや::afterはcontentを設定しなければなにも起こらない
しかし装飾のために使う場合など、contentに指定したい文字列や画像がない場合は多々ある
そういうときはcontent:''; のように空(長さ0の文字列)を設定する

275

： Name_Not_Found [sage] 2019/07/06(土) 12:39:12.79ID:???

beforeやafterを擬似クラス(:1つ)で書いてるの見るとモヤっとする
まあ初心者さんなんだろうけど

276

： Name_Not_Found [sage] 2019/07/06(土) 14:18:54.44ID:???

古いブラウザにも対応するために1つだけにしている可能性もある
IE8とかな

277

： Name_Not_Found [sage] 2019/07/06(土) 15:28:01.32ID:???

いやあ、今更そんな必要ないし、ましてやここに書くのにそんなこと考慮しないだろ
初心者さんがネットの古い記事で見知った書き方してるんだと思う

278

： 271 [] 2019/07/06(土) 15:46:30.55

:zM/nUym8

271です。
装飾とは例えばどんなものの事でしょうか？
初心者ですみません

279

： Name_Not_Found [sage] 2019/07/06(土) 16:37:28.90ID:???

いろいろあるけど、例えばグロナビのそれぞれの前にアイコンついてたり、見出しの前に装飾ついてたり
構造化的には意味がないものとかはhtmlでは何も置かずにcssで要素を置きたいとかがある
そういう時に
.foo::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
}
みたいな感じにするとあたかもそこに要素があるようにできる

280

： Name_Not_Found [] 2019/07/06(土) 19:15:23.11

:zM/nUym8

>>279

そういうことだったんですね。ありがとうございます！

281

： Name_Not_Found [sage] 2019/07/07(日) 01:10:24.44ID:???

あと★とかアイコンとか
更新情報の頭にNewつけるとかな

282

： Name_Not_Found [] 2019/07/08(月) 20:15:20.67

:E4KyX0A9

複数のページである事柄を説明する時に
同じ内容の見出しと記事を使うと
検索順位的によくないのでしょうか？

～の仕方で複数の記事を書く時に
共通の事柄を説明しないといけないんですが
こういう時ってみんなどうしてるんでしょうか？