TOP カテ一覧 スレ一覧 100～終まで 2ch元 削除依頼
かんたん相互リンク使ってる奴集合！
サイトをぱくられました
色々なHTML
CSS Nite 問題
サイト運営を長続きさせるために
- これからのWEB製作者に必要なスキル -
おまいらIEの文字のサイズは何ですか？
Web制作板なんでも雑談スレ
ホームページビルダー Part42
【アクセス解析】Google Analytics 8

HTML/CSS のどんな質問にも優しく答えるｽﾚ 40


1 ：2019/07/31 ～ 最終レス ：2019/08/29
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

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

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

質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 39 ﾐｯｸﾐｸ
https://mevius.2ch.sc/test/read.cgi/hp/1559446058/

■関連スレ
Webサイト制作初心者用質問スレ part251
https://mevius.2ch.sc/test/read.cgi/hp/1564414228/

■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html

2 ：
HTMLとCSSの全てについて、教えて下さい。
ぐぐりません。
あんたが答えろ。優しくな！

3 ：
では
まず、パンツを脱ぎます

4 ：
>>2
キミいつの時代の人だい？

そんなスキル、脳内のマイクロチップにインストールすれば一瞬で習得可能じゃないか

これだかは令和以前の旧人類は…

5 ：
股間のマイクロチップに俺のスキルをインストール！一発で

6 ：
そんな事どうでもよい事ばかり話してないで、
片方だけになったAirPodsの使い道を早く考えろよ

7 ：
うる

8 ：
>>6
うどんの話は食べ物スレでやってください
ここは神聖なるHTML/CSSスレなのですよ！

9 ：
あ？CSSで解決できねーの？

10 ：
できるにきまってんだろ(怒)

11 ：
>>2
>>1のリンク先を読みます
次に、https://www.w3.org/TR/?tag=css のリンク先を読みます
最後に、https://www.google.com/search?q=site%3Adeveloper.mozilla.org+(html%7Ccss) のリンク先を読みます

12 ：
>>10
おこってる？

13 ：
初心者スレで聞いたがやはりよくわからんのでここでも聞かせてくれ
html4.01サイトで外部JSを非同期で呼び出すコードを書いて、WYSIWYG上で更新するとコードが変わってしまうんだわ
<script src="https://hoge.js" async>
これが↓
<script src="https://hoge.js" async="">
KompozerとBluegriffonで同じ結果になること確認した
勝手に変わる以上これが正だってことなんだろうが、「async=""」ってなんだ？
asyncがhtml5向けってのは理解してるつもりなんだが
　

14 ：
いちおつんこ

15 ：
>>13
原則、
html5の宣言なら、async="async"が正しい記述
html4.01の宣言なら、asyncのみでOK

しかし、CMSの方か、WYSIWYGの方でHTML5を強制前提にしているクソ仕様の可能性があるので、
ページの宣言が無視されて修正されている可能性がある。

トリアエズ、async="async"にしとけばいい。

16 ：
>>13
それと、html4.01でなぜ、html5向けの内容を書こうとしてるんだ？

>html4.01サイトで
>asyncがhtml5向けってのは理解してるつ

html4.01でやる理由はもうないはずだからhtml5にすべて統一したほうがいい。
技術上、doctype宣言をhtml5に書き換えられないなら、仕方ないけど>>10 怒ってる？

17 ：
>>15
thx
丁度ググり続けて似たようなの見つけたところだったので助かった。
つまるところ
async
async=""
async="async"
は全部（動作するならば）同じ動作って事で良いんだよね。後はWYSIWYGの仕様って事で
　

18 ：
>>10が激おこ

19 ：
>>16
いろいろあるんだ、察してくれ
html5に統一すべきってのは重々承知、その準備作業とでも
　

20 ：
暇ができたらできるかな？>>10 怒ってる？

21 ：
>>15
> html4.01の宣言なら、asyncのみでOK

HTML 4.01にasync属性はない
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/scripts.html#h-18.2.1

22 ：
>>15
> html5の宣言なら、async="async"が正しい記述

嘘を教えるな。ブール値の属性は値を省略できると
HTML5の仕様で決まってる。

値を省略できないのは冗長な記述しかできないクソXHTMLだ。
XHTMLは滅んだ。今更対応する必要もない。ブール値属性は
値を省略してasyncやcheckedでいいし、<br/>は間違いで<br>が正しい

23 ：
>>15
> html5の宣言なら、async="async"が正しい記述

属性値は省略しても良いし、空文字でも良い
https://momdo.github.io/html/common-microsyntaxes.html#boolean-attributes

※なお、XHTMLはHTML Standardの中で生きている

24 ：
あの人は死んだけどみんなの心の中で生きてる。みたいな表現いらないからｗ

25 ：
>>22
おこってる・・？

26 ：
HTML+CSSのデザインで

・フレキシブルボックス
・CSSグリッド

この2つの軸があるようですが
どっちが良いのですか？
それとも用途によって使い分けるのですか？

27 ：
大変申し訳ございません。
当スレは現在、夏休みにつき運休となっております。

つきましては、質問者様ご自身での解決をお願いいたします。

28 ：
てめーは一年中夏休みだろうが

29 ：
>>24
現実に生きているものを心の中に仕舞わなくていいから

30 ：
XHTMLは死んでますよ。残ってるのは名前だけです。

31 ：
>>30
>>1の「HTML Living Standard 日本語訳」を読むといいよ

32 ：
>>26
最近は、flex らしいけど、

互換性については知らない

33 ：
>>30
死んだのは名前(XHTML)の方

34 ：
> >>1の「HTML Living Standard 日本語訳」を読むといいよ

名前しか登場してませんね（笑）

35 ：
>>28
ああん？

36 ：
>>35
ああん（はぁと

37 ：
自分、令和生まれなんスけど
XHTMLってなんスか？ 笑

原始人が使ってたナニカっすか笑

38 ：
>>34
君の目が節穴なだけ
XML構文の節を読んでみな

39 ：
>>38
あああん？

40 ：
とっても大好き

41 ：
あん、あん、あん、とっても大好き♫
ドラえ～もん(怒)

42 ：
https://momdo.github.io/html/introduction.html#html-vs-xhtml
読め、以上

43 ：
オコてる

44 ：
なんで起こってるのか、明日までに考えといてください。

45 ：
>>26
グリッドの方が多様性あるけど
まだまだ新しい概念なので
古いブラウザが対応してないとか
整備が整ってないので
今のところフレキシブルボックスが主流
IE10が駆逐されたらグリッドの方に一気に変わるかと思われる

46 ：
>>32
>>45
レスありがとうございます。

47 ：
>>43-44
1. 間違ってると煽る
2. 仕様で言い負かされる
3. 怒ってる？

このパターンはお腹一杯だよ
初めから煽らなければいいのに

48 ：
>>47
あ？質問すんぞ？このヤロー！

49 ：
>>48
怒ってるな

50 ：
なんの生産性もないまま50スレを迎えました。

51 ：
生産のある仕様を書き込むと、「怒ってる？」と返すスレ

52 ：
htmlを初めて組んでみたんだが、どうやってネットの海に放流すればいいかわからん。
ガチ初心者なので教えてください…。ちな、簡単なテキストだけのサイトを公開したいから、一番シンプルな放流の仕方が知りたい。

53 ：
webサーバを借りるなり立ててそのhtmlファイルを放り込めば良い
windowsでは立てたらダメだけど(Windows Serverでなければ)

54 ：
>>53
ありがとうございます。サーバーが必須なのを理解してなかった。
立てるのは難しそうだから鯖借りる方向で調べなおしてみる。ありがとう。

55 ：
>>54
契約してるプロバイダに無料のホームページサービスとかないの？
テキストだけのサイトならそれで十分。

56 ：
fc2で十分やろ

57 ：
>>52 ワイはロリポップっていうレンタルサーバー借りてるで

58 ：
ロリポおじさんまだ生きてる？

59 ：
>>49
怒ってねーよ！！！！

60 ：
怒ってる？？（怒）

61 ：
>>52
ゴミの投棄は禁止されております。

62 ：
マック買い換えるけどテンキーありキーボードのほうがいい？

63 ：
>>62
メリット・デメリットがあり、好みによるので何とも
まぁ無くてもなんとでもなるし、
あまりに数字を打つ機会が多いなら後でテンキーだけ買うという選択肢もあり

64 ：
>>62
すきなハッピーセット買って食べたらいい

65 ：
あ？

66 ：
ん？

67 ：
こ？

68 ：
う？

69 ：
ま？

70 ：
　　／⌒ヽ
　　/　´_ゝ`） ここ通らないと行けないので、ちょっと通りますよ・・・
　　|　 　　/
　　| /|　|
　 //　| |
　Ｕ　 .Ｕ

71 ：
い

72 ：
CSSの質問です
とりあえず最新のChromeで表示できればいいのですが
#A > #B > #C と要素が入れ子になっていて#Aと#Bに背景が指定されている場合に#Cの背景に#Aの背景が表示されるように透過させることってできますか？

73 ：
はい

74 ：
おぱっしてぃ

75 ：
親要素の指定を継承するタグがあったはず
名前は忘れた

インヘリットみたいなやつ

76 ：
親の親だぞ

77 ：
確かそれは出来るはず
float、fix、z-index辺り使うんだっけな。かなりキモイcssを書いた気がする
今も通用するかどうかは知らん

78 ：
質問者より回答者の方が漠然としてる稀な例ｗ

79 ：
>>75
インペイテリな

80 ：
インテリPayPay？

81 ：
インポテンツかもしれない

82 ：
ここって質問とかしてもいいんですか？

83 ：
ドリームウィーバーと同じような感じで使えるエディタあれば教えてください。
期間限定で使ってみてCTRL +シフトキーでタグの予測変換、関連項目を全て置換できる点、
アップロードが同じソフトで簡単にできる点はかなりいいと思いましたのでそういう機能もあるソフトがいいです。

84 ：
Microsoftが作ったVisual Studio Codeがおすすめ

85 ：
>>82
ご自由に

86 ：
DreamweaverだとBracketsって手もあるけど
まぁ、今はVSCodeだろうなぁ。軽いし。
個人的にはAtomも好きで使ってるけど、その辺を
適当に調べて好きなのを選べば良いと思う。

87 ：
>>84
visual studio codeはドリームウィーバーでいうサイト管理とアップロード機能がありますか？

88 ：
>>87
前者はVS Codeのプロジェクトマネージャーがあたるのかな？
後者の機能はありますよ。SFTP

89 ：
関連項目を全て置換できるってのが意味不明だな
置換に完全一致と類似なんてないだろ

90 ：
bracketとvisual studio code使ってみた。
どちらも基本は似たようなソフトで拡張機能で自分好みにしていくんだろうけどbracketの方が始めから日本語対応してる点で使い易いかなと思った。
しかしbracketは重すぎてPCが何度か止まりかけた。
ドリームウィーバーではそういう事がなかったからそこだけは残念。
だとしたらbracketと使い勝手がほとんど変わらないvisual studio codeになるのかなってとこ

91 ：
dreamweaverなんてクソ重いだろ。
無駄な機能とかつけすぎ。

92 ：
bracketsもそんなに思いエディタじゃないと思うけどなあ
ATOMは起動がすごい遅く感じるが

93 ：
DWの起動の遅さは以前このスレでネタになってたぞｗ

父がDWを起動させ、その後父は亡くなり
あれから3年経ちましたが、未だに当時起動したDWが立ち上がりません
私は父の遺志を引き継ぎ、DWが起動するのをうんぬん

94 ：
つまんね

95 ：
わらった

96 ：
つまりVSCodeですら手間取るうちのマシンでは使うな、と。ｏｒｚ

97 ：
アドビのソフト自体起動が遅いからな
その中でも他社のエンジンつかったままのDWはお察し

98 ：
vscodeはクソ軽だぞ
起動しようと思った時には既に起動してるレベル

99 ：
ワロタｗ

100 ：
そこまでではないけどまあ軽いよね
うちのPCではメモ帳とかと変わらないぐらいには軽いと感じる

101 ：
>>98
未来すぎる

102 ：
BEMのclassの命名についての質問なのですが、
以下の様な構造だった場合、
<body>
　<main class="body__main">
　　<section class="main__sec1">
　　　<ul class="sec1__list">
　　　　<li class="sec1__list-item">
　　　<ul>
　　</section>
　</main>
</body>
という命名方法で合っていますでしょうか？
sectionタグ以下の命名を、上記のようにするのか「main__sec1-list」や「main__sec1-list-item」等にすべきなのか分かりません。
ネットで検索しても階層の浅いhtmlの記事ばかりで、イマイチ分かりませんでした。
ご教示よろしくお願いいたします。

103 ：
× sectionタグ以下の
〇 sectionタグ内の階層の

104 ：
>>102
それで問題ないでしょ。
「main__sec1-list」などのハイフンはあくまで名前の区切りであり、構造を示すものじゃない。
重要なのは、切り離して使う可能性があるかどうかじゃないの。

105 ：
main__sec1-list-itemなんて名前付けたら、
main内でしか使えなくなるとかそういう事考えながらやったらええねん

106 ：
>>102
タグ構造と紐付けちゃうとメンテナンス大変だよ
要は名前がバッティングしにくいようにすればよいので、ブロック名は意味的な分類にしたほうが良い

107 ：
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016

MindBEMding による、CSS の構造化について、説明した本

108 ：
htmlとcssのみで要素の表示非表示を切り替えたいのですが、上手くいきません。
どうすればよいでしょうか。

html
<table>
<tr><td><input type = checkbox id = id1 /><label for = id1>タイトル</label></td><td>機動戦士ガンダム</td></tr>
<tr><td>詳細</td><td>あずにゃん</td></tr>
</table>

css
input[type=checkbox]:checked + tr{
display : none;
}

109 ：
>>108
checkbox 表示非表示 切り替え
で検索すれば山程出てくるぞ

110 ：
>>104-107
みなさんありがとうございました。
勘違いして混乱していた部分が解消されました。

111 ：
>>108
ｈｔｍｌとcssのみでやるなら、table使った構造は無理だよ。
隣接セレクタは親(tdやtr)をまたぐことはできないから。
その構造でやるならjQueryでトラバースするしかない。

もしhtml/cssだけでやることに重点をおくなら
これを真似すればいい。
https://webdesignday.jp/inspiration/technique/css/5316/

それと、イコールの後の値は、id="id1"のようにダブルクォーテーションで括りなさい

112 ：
cssのセレクタの書き方で教えてください。
クラスaとbとcを同時に持つAND条件を指定したい場合 .a.b.c のように書きますが
行が長くなりすぎる場合など途中で折り返したりできないのでしょうか。

113 ：
>>112
できない。
仮に出来てしまったら
.a .b .c{}と
.a.b.c{}でぱっと見区別できなくなるだろ

114 ：
ありがとう。やっぱりないですか。
改行のエスケープかなにか方法がないかと思ったけど残念。

115 ：
sassだと&でそれっぽいことができるんだな。ブレースなしで使えたらもっとよかったのに。

116 ：
.a
.b
.c{}

.a
.b
.c{}

.a
.b
.c{}

↑これ半角スペースが隠れてるので全部意味違うけど、こんな事を許したらアカンだろ

117 ：
もし改行を許すならそれとわかるような仕様にすればいいだけで、>>116みたいな
アホな仕様にしなければならない理由はない。

118 ：
半角スペースと改行は同じ「区切り文字」として認識される

119 ：
あのさあ、キミたちお盆やすみなのにコードのお話ですか…

120 ：
>>113
上と下何か違うの？？？

121 ：
ORはカンマ演算子なのにANDは連接で表すという非対称感。CSS4でも特に改善はされないみたいね。

122 ：
>>119
仕事じゃない分楽しいゾ

123 ：
まあ俺らは趣味もコーディングだからなあ
仕事で書いてる時とはやる気やテンションがまったく違う

124 ：
>>120
上は階層、下はANDのセレクタ

125 ：
それってなーに？

126 ：
>>116の半角スペースが消えてしまってるな
半角スペースを■とすると

.a
.b
.c{}

.a■
.b■
.c{}

.a\ｎ
.b■
.c{}

こう表したかった
パット見全部同じだが、全部意味が違うという

127 ：
>>125
どのレベルから教えてほしいの？
htmlとかcssって知ってる？

128 ：
>>125
甘くて切ない夏の思い出かな

129 ：
>>128
なるほど、理解できました
ありがとうございます

130 ：
>>119
コードじゃないよ
スタイルシートだよ

131 ：
>>126
それ意味は違わんだろ。

132 ：
だろ

133 ：
>>131
過去ちゃんと読め

134 ：
>>114や>>115は案としてエスケープとか&とか挙げてるが、既存の仕様とバッティングする
アホな仕様を挙げているのは>>116だけ。
そのうえで「こんな事を許したらアカンだろ」って、なんてマッチポンプｗ

135 ：
バカ：チンコ丸出し街中歩くの法律で許しちゃダメだろ！
バカ：ﾎﾞﾛﾝｯ！
警察：ﾀｲｰﾎ
バカ：ほらな！

こういうこと？

136 ：
>>134
だから流れ読めって。
改行できないんですか？質問だからできないって答えたうえで、
仮にできてしまったらこういうこと（既存の仕様とバッティングする）が起こるだろって
事を具体的に書いて見せてあげたのに、バカなの？？？？

137 ：
途中からかいつまんで見るのはいいけど、
そこだけ見て絡んでくるなよな～

138 ：
cssでエスケープなんて使えるわけないだろ

139 ：
>>112は .a.b を折り返して記述する方法がないかを訊いているだけだが、それを

.a
.b

と書きたいのだと捉えた>>116が短絡的なだけに見えるが。

140 ：
Bracketsは画面広く使えて好きだわ。欠点はもっさりだけ。

初心者には、エクステンションいれまくらないとつかいものにならないVScodeよりおすすめ。

141 ：
>>139
え？ごめん違うの？
じゃあ俺が間違ってたわ
ごめんな

142 ：
> 欠点はもっさりだけ

ゴミ箱ポイッ⌒ヾ( ﾟ⊿ﾟ)

143 ：
VScodeの無駄な枠の太さ

144 ：
SASSの質問もいいですかね？

%placeholder {
color: #ff0000;
}
::-webkit-input-placeholder {
@extend %placeholder;
}
::-moz-placeholder {
@extend %placeholder;
}
:-ms-input-placeholder {
@extend %placeholder;
}

これをコンパイルすると下のようにまとめられた出力になってしまうのですが、
これをセレクタ毎に別々に出力することってできないんでしょうか。

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: #ff0000;
}

ちょうどここに書いてある問題に引っかかってしまったので。
https://on-ze.com/archives/7196

145 ：
>>144
extend使ってるんだからグループ化するのは当たり前
そうなることこそがextendの機能だよ
分けたいのならmixinを使う

146 ：
mixinでいけたわ。ありがとう。

147 ：
>>140
もっさりしすぎだよね。PCが重かったから確認したらcpu40%使用してた

148 ：
.hoge .foo.hage {}
と
.hoge.foo.hage{}
て、結果的に同じじゃないの？

149 ：
半角ぬけてた
.hoge .foo. hage {}

半角があっても改行しても関係ないのでは？

150 ：
>>148
.hoge.foo.hage
↓
<div class="hoge foo hage"></div>

.hoge .foo .hage
↓
<div class="hoge">
<div class="foo">
<div class="hage"></div>
</div>
</div>

151 ：
半角スペースや改行は
https://developer.mozilla.org/ja/docs/Web/CSS/Descendant_combinator

152 ：
>>150
え？？？？
<div class="hoge foo hage"></div>
って.hoge.foo.hageって半角なしで書かなきゃいけないかったの？！

知らなかった
ありがとう一つ賢くなったよ

153 ：
下肢濃くな～れ下肢濃くな～れ

154 ：
ｃｓｓで

img {
pointer-events:none;
}

を指定してますが画像にリンクがつくページとつかぬページで別れてしまいます
これはなぜなのでしょうか？最近cssの最後にこの1文を加えただけなのですが…

155 ：
別れるとは？
<img>
と
<a><img></a>
で振る舞いが違うってこと？
imgに pointer-events:none; したんなら同じだと思うが

156 ：
もはやココで聞くべき事なのかも分からないレベルですが教えて下され
アダルトサイトについてなんで、NGな人はスルーでお願いします

Pornhub→　https://jp.pornhubpremium.com/　ってサイトでGIFを作成
出来るんだけど、

１：https://jp.pornhubpremium.com/gif/24245281 (音声注意！)
みたいな感じで、映像画面下に『GIF』と『HTML5』の切り替えタブが出る様に
したいんだけど、

作成手順通りに手順1から手順3まで入力して作成しても、
２：https://jp.pornhubpremium.com/gif/24245301　みたいな、
切り替えタブが無い物しか作れなくて困ってます

画面下の『リンク』をクリックすると、
『直接リンク』とか『HTML画像』とか『埋め込みコード』とかあるんだけど、
それが何で、どうすれば良いのかもサッパリな状態です

作成したいのは上記１のように映像画面下に『GIF』と『HTML5』の
切り替えタブが出る物で、どうしたらそうなるのかを教えて欲しいです

分かる人いましたら宜しくです

157 ：
>>156
プレミアムの入会断ったらいきなり終わった

158 ：
>>156はプレミアム会員にならないと見れません
これはプレミアム会員にさせようという誘導です
みなさん開かないようにご注意ください

159 ：
>>157
>>158
ほんとうに失礼しました
プレ垢なら作成できるかと思って、拾ったプレ垢でログインしてました・・・
誘導とか勧誘では決してないです・・・すいませんでした

プレミアムじゃない無料のpornhub→　https://jp.pornhub.com

切り替えタブあり→　https://jp.pornhub.com/gif/24245281

切り替えタブなし→　https://jp.pornhub.com/gif/24245301

上記は無料垢の物です・・・
156をクリックしてしまった方々、本当にすみませんでした

160 ：
>>159
拾ったプレ垢って不正アクセスなのでは

161 ：
通報しましたｗｗｗ

162 ：
何もかも駄目でワロタ

163 ：
メモリを一番多く使ってるのが一番重いって事ですよね。
VS codeが一番なんですが何か設定がおかしい？

https://i.imgur.com/jcTsxv2.jpg

164 ：
動作に関してはメモリ沢山使ってる分軽いと言えるのでは？

165 ：
まず、実体が無いデータに対して「重い」とか「軽い」なんていう曖昧かつ不適切な表現をすること自体をやめたほうが良い。

>>164の書いている通り、メモリ上に展開してあれば一々ストレージにアクセスして読み出す、という手間が無くなるので「動作が速い」。
メモリにどのようなデータを保存して扱っているかはいるかはそのソフトウェアによるので、「AよりBの方がメモリ使用量が多いから遅い」などという話にはならない。

166 ：
Win7から10にアプデしたらやたら重くなった
原因が色々ありすぎるけど何やっても解決しないから
クリーンインストールしたら超軽くなった。
ソフトの設定とかめんどくさいから上書きインストールしたくなるんだがいかんね。

167 ：
>>156
埋め込みコードは、自分がエロサイトを作っている場合に、
自分のウェブページ内で、その動画を見る時のもの

つまり、Pornhub へ移動しないで、見れる

知らないけど、自分のウェブページのHTML 内に、
動画を見れる、<video> タグか何かを書くのだろ

168 ：
windows10、Firefox使用です
tweetdeckをサイドバーに表示して使用しようと思っています
ツイートする時にいちいちアイコンをクリックするのが面倒なのですが、かと言って入力欄を広げっぱなしにしているとタイムラインが見れません
というか正直いってメニューも邪魔です
そのため左端を少し開けておきそこにマウスホバーでメニューも含め開けるようにしたいです
(完全に好みですが入力欄のカラム？も細くしたいです、現在他のカラムの幅が200pxなので)
また横スクロールしなくても最低2垢分のTL&通知を常時追えるようにカラムを交互に上下に配置するようにもしたいです
bettertweetdeckのカスタムcssにそのまま貼り付けられるようにしていただけるとありがたいです
あとからカスタマイズできるように場所や値の説明もコメントアウトでつけて下さるとなおよしです
ずぶの素人ゆえこれらのことが全てcssで可能かどうかもわかりません
完全に丸投げですみません、よろしくお願いします

169 ：
>>168
どっかにお金払って依頼しなよ
自分で一切考えもせず、コード丸々ちょうだいとかさすがにないわ
自分で考えてこう書いたけどここがうまくいかないから教えてくれって質問ならみんな答える
ここはそういうスレ

170 ：
>>164
アプリの動作に関してはそうかもしれないけどPC自体には負担かかってるって事にはなる
メモリ全部使ったらPCの動作が重くなりアプリ自体も遅くなるわけだし

171 ：
>>169
そうなのですね
すみませんでした

172 ：
http:をhttps:に変えても表示出来てるってことは
SSL/TLSで転送されたと言うことですか？

173 ：
転送されたということだね

174 ：
>>173
ありがとうございます

175 ：
ありがとうだけで済むと思ってんのか？
あーん？

176 ：
ぜったいにあーんするなよ？
熱々のおでんをぶちこまれるぞ！

177 ：
キンキンのかき氷でもいい

178 ：
>>166
オレも10にしたら無茶苦茶重くなったんで、
新しくパソコン買って、古いのにウブンツ入れたら軽くなった。
ただやっぱり、ウブンツじゃ仕事できないな。

179 ：
レスポンシブに関する質問です。
先日初めてhtml,css,jqueryを使用したwebサイトを作ってみたのですが、デザインがPC専用の為
横幅を狭くすると表示がうまくいきません。
そこでレスポンシブに対応させてみようと思い、
style.cssの他にresponsive.cssというファイルを別途作成し、
画面幅に応じて変化させたい内容を書いてindex.htmlに読み込ませようと考えました。

タブレットやスマートフォンで表示させるにあたって、
画面幅に応じてフォントサイズや画像サイズなどをひとつひとつ
調整するようにコードを書いていくだけ…という単純作業のように思えるのですが、
解釈として間違いでしょうか？
(変化後のレイアウトはできているものとして)
bootstrapのことはよくわからない状態なのですが、とりあえず
CSSでレスポンシブデザインをできるようになりたいという状況です。

レスポンシブ適用にあたってindex.htmlのheadタグの中にビューポート設定というものが必要だそうなので
記述しましたが…これだけで十分なのかやや不安が残ります。
各種ブラウザ上でとりあえず動作はしましたが…
<meta name="viewport" content="width=device-width,initial-scale=1">

responsive.cssには以下のように変化させたい内容を書きました。
/*タブレットPC用表示*/
@media screen and (min-width:480px) and (max-width:768px){
/*表示領域が480～768pxに適用させたい内容を記述*/
}
/*スマートフォン用表示*/
@media screen and (max-width: 480px){
/*表示領域が0～480pxに適用させたい内容を記述*/
}

レスポンシブにまつわる注意点やありがちミスなどあればご教示頂きたいです。
よろしくお願い致します。

180 ：
>>179
合ってるよ。
あとは細かい事や効率化などは
実際やって不快感を感じたり、必要性を感じてから学んだほうが身につく。

気を付けることはandroidとiOSの両方で確認すること。
それと横向きでも確認すること。

それとPCはIE対応も見ておくこと。

181 ：
日本語だけの文章と
英数字だけの文章とで
確認するのをお薦めするよ

改行位置とかフォントとかで
見栄えの違いが出てくると思う

182 ：
>>179
まさに、それをやってるのが、CSS フレームワーク！

Bootstrap 4 は、jQuery を使って、レスポンシブ対応してる

183 ：
VSCode で、HTML ファイル上で、! と入力すれば、emmet の補完が働いて、下のよう展開される

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>
</head>

<body>
</body>
</html>

184 ：
いやいやフレームワークなんて使わんでも
みんなレスポンシブくらいどのサイトも必須よ

185 ：
jQueryなんて関係ないしな

186 ：
みなさんありがとうございます。
言われてみればSafariというか、iOSは未検証でしたね…

なんというかこう、隙を無くしてコーディングしたつもりが
実はこんな落ち度がありました、と後で発覚するのを未然に防ぎたかったのですが…都度修正ということになりそうです

>>183
そんな隠しコマンドが・・・！？Bracketsにもないか探します

187 ：
独学をアピールする程度ののやつが
隙がないコーディングなんてできるわけないやろｗ

188 ：
完璧主義者はコーダーに向いてないよなー
すべての環境で問題なく同じように見せるなんて
画像にする以外方法ないし

189 ：
なんで完璧主義者 = すべての環境で問題なく同じように見せる人
なんて思っちゃったの？

俺はすべての環境で、そのデバイスにあった表示で
見せるという、完璧主義者なんだけど？

190 ：
>>178
個人的な趣味レベルなら良く勉強してると思う。
お金貰ってやってるなら自分なら客になりたくない。

191 ：
↑アンカー間違えた
>>179宛

192 ：
>>189
IE6で崩れてるんだけどさあ、ちゃんとチェックしてんの？（怒）

193 ：
なんか書き込まない方がよかったみたいですね…
お邪魔しました、失礼致します。

194 ：
>>192
ああ、携帯（スマホじゃない）時代に
ネスケもサポートしろだと言っていたやつがいたな
はやばやに、IEしかサポートしませんって言ってやったがｗ

195 ：
>>192
あほ？
今どきIE6とかこの仕事やめた方がいいよマジで

196 ：
今思うと、当時最大シェアのIE6だけに対応して
他のブラウザを切り捨てたのは正解だった。
今もブラウザが違うだけで、少数シェアのブラウザは切り捨ててる。
同じChromeでも古いバージョンだって切り捨てだしな

197 ：
>>195
>>192は怒った客のふりしたネタだろ。これ読み取れないのはちょっとマズイぞ

198 ：
>>195
いや、
俺はすべての環境で、そのデバイスにあった表示で
見せるという、完璧主義者なんだけど？

って書いてるから。。。

199 ：
>>197
だよな。
完璧主義者だか知らんが、シャレが通じない人ってたまにいるけど、
思考の切り替えとか柔軟さがないと生物としては優れてないという評価だわ

200 ：
ちなみに>>189の考えは支持する

201 ：
優れていない生物だと思うわ（ｷﾘｯ
とか言ってるやつが便所に落書きしてんだもんな
確かにそう思うわ

202 ：
完璧主義者の奴とは仕事したくない
だいたいそういう奴はボトルネックになる

完璧度はせいぜい70～80%で十分

203 ：
という奴に限って完成度は10%～１５％だったりする

204 ：
っていう奴に限って完璧主義者だったりする

完成度は足りてるのに、謎の係数を掛けて完成度を下方修正してくる

205 ：
どちらも求めらているクオリティの擦り合わせが出来てないだけだよ

206 ：
>>204
いや俺は利益主義
標準機能でバグが起こらない事を重視しています、IE6は料金3倍ですって営業すれば何の問題もない
ブラウザの差異を無理矢理埋め合わせるのはアホとしか言いようがない
印刷含めれば永久にどちらも立たずでpdfでも生成するしかなくなる

207 ：
完璧度は70～80%で十分。ただし1ドットのズレは許さないし
IEでもChromeでも同じように表示されないといけない。
それぐらいやって80%。残りの20%はあとで修正依頼をする。

208 ：
>>206
80%の中にIE6対応まで入るに決まってるだろ

209 ：
擦り合わせができてないのは完璧主義者のほうだから。

なぜなら実質不可能な100%の完成度をもとめているから

210 ：
80%の意味がわかってないようだが、俺の満足度やで？
これで完璧！ってのが100%で、もっとよくできるはずだけど
とりあえずコレで、っていうのが80%だ

211 ：
>>209
あのなぁ、すり合わせっていうのは両者がやるもんだ。
お前はただ単に、相手に責任を押し付けてるだけ
それを「すり合わせができてない」っていうんだよ。

212 ：
完璧主義者と擦り合わせなんぞしたところでなんの意味もない

奴らは自らの完璧思考でその擦り合わせの情報を上書きしてくるから

213 ：
ほらなｗ すり合わせを拒否してるのは本当は誰かってのがわかるやろ？ｗ

214 ：
どっちとも解釈できる

215 ：
明らかに「完璧主義者とすり合わせはしない」と拒否してるわけだがｗ

216 ：
IE6の検証環境ってどうしてんの？
VMwareとかじゃ実機と違うんでねーの？

217 ：
うちのXPにはちゃんとIE6が入ってるぞ

218 ：
それは恐れ入った

219 ：
IE6は大げさだけど
win7環境残してIEの8～10は起動できるようにはしてある

220 ：
マイクロソフトのブラウザテスト用公式仮想マシンイメージ使えばいいだけなのに

221 ：
>>220
こんな便利なものあったのか、thx
後生大事に残していたわ・・・

222 ：
重要なのは「完璧主義者が否か」ではなくて、「取捨選択」
「俺は完璧主義者ではないから、Firefoxしか対応しないぜ」といわれて、どれ程の人が納得するだろうか
(顧客の要望なら、仕方ない場面もあるだろうけどね)

223 ：
最近完璧主義者という仮想敵を見つけた。
完璧主義者という敵は、なんと携帯サイトまで作るんだ

224 ：
VS codeで標準で使えるctrl+シフトキーでコードの予測が出来る機能はbracketでは何の拡張機能を入れれば出来るようになりますか？

例えばborder: と入力してctrl+シフトキーでsolidやinset、pxやem、#fffffffや#000000など予測が出る機能です

225 ：
>>220
これって結局、>>216で書いてるVMwareとかなのでは・・？

226 ：
VScodeでセレクタやプロパティにマウスが触れるとヒントみたいなのが出てきてうっとおしいんだが
setting.jsonに "editor.hover": falseとか書いても消えないんだが方法わかる？

227 ：
わかるかって聞いてんだよコノヤロウ！！！

228 ：
be cool

229 ：
タイトルや「メニュー」「トップページ」の下半分にほんのり色が付いてるこれってどうやるの？
ソース見るとただの<h1>ですがうちで<h1>にしても文字が太く大きくなるだけです
https://i.imgur.com/kJq0DFS.jpg

230 ：
h1の親のdivにcssで背景画像貼ってある
ブラウザの開発ツールの使い方覚えましょう

231 ：
背景色グラデーションじゃないんですか

232 ：
ほんのりしたい

233 ：
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#eeeeee);

234 ：
何でソースをコピーしてもならないんだろう　小難しい事すんな

235 ：
CSS 見出し　背景　グラデーション　でググるとソース付の沢山出てくるよ

236 ：
cssってのは.cssに次々と足して行けばいいのか
超初心者ですまんな

237 ：
bg_title.pngっていう1*32pxの縦長の画像をrepeat-xで横に繰り返し描画してる感じっぽい。

.page_title {
　background:#FFFFFF url(/design/default_white/images/bg_title.png) repeat-x left bottom;
}

詳しくないからよく知らんけどｗ

238 ：
ほんのりしたいんだけど（怒）

239 ：
俺が見つめると女は皆ほんのり頬を赤くする。
なぜだろう？

240 ：
背景グラデーションタグと画像うｐはどっちがメジャーなんでしょうか？
小さいファイルとはいえ容量とか食うし通信量も若干増えるからタグでしょうか

241 ：
比較的単純なグラデでいいならgradient
IE9以前くらいの古いブラウザに対応させたかったりcssでは表現できない物は画像

242 ：
いや、>>229はCSSを知らないのにそんなこと書いてもわからないぞ
せめてh1にstyle属性をつけた状態で書いてあげないと

243 ：
h1にstyle付けたところでCSS知らない人間には伝わらないだろ

244 ：
CSS知ってる人間ならグラデなんてみんな知ってるだろ

245 ：
.gradient {
background: url(bg_sample-gradient.png) 0 0 repeat-x;/* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#dddddd 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}

246 ：
>>245
仕事にしてる人はここまでやる必要があるの？すげーわ

247 ：
>>226
VSCode の質問は、プログラム板のVSCode スレで、聞いてください！

248 ：
>>246
自動で生成するツールがあるんよ

249 ：
>>245
こんなんしか書けないやつはもう辞めればいいのに
情けないなあ

250 ：
>>247
ほんのりさせてくれまいか？

251 ：
ねぇねぇ、A君、
ボクシングやってるんだってね？！すご～い
A「ああ、そうだね。別に凄くはないんだけどね・・。」
うそ？A君そうなんだ～？ちょっとさぉ、かっこよすぎじゃないのぉアハハ
へー、そうなんだ。A君スリムだけどなんか引き締まってるもんねぇ


B「へぇボクシングねぇ。俺は昔キックボクシングやってて、パンチもキックもできるけどね（キリッ」
↑
Aをダシにしないと自分を上げられない便乗男
それが>>249

女達一同「ふーん・・・そうなんだね」

252 ：
スタイルを変えたい要素ひとつずつにclass名を与えるのと
隣接セレクタや子セレクタを多用して、なるべくclass名を付けない方法ではどちらが速いですか?

253 ：
>>252
相手が使ってるブラウザのバージョンで違います。
速くなったり遅くなったりします。バラバラです。

254 ：
>>253
そんなに違いますかね
ちなみにMypalの現行バージョンではほとんど変わらないという結果になった

例えば、imgタグに隣接するしないでspanのスタイルを変えたいという時
img+span{}
span{}
とすると、キーセレクタspanを2回検索して時間は2倍かかると思っていたのが
imgタグに隣接するspanをclass=aとした時と、ほとんど変わらなかった
厳密に、class=aを付ける付けないでやると、付けない方が速かった
ただこれはコード1万行の文字数が減って軽くなった効果にすぎないだろうと思った

255 ：
はいだから、0.0000000000000001秒ぐらい違います。

256 ：
実際の運用はCSSだけで考えないから
js考えると、必然的にクラス多様はNG

257 ：
>>255
それは実測値？
憶測？

258 ：
妄想です

259 ：
idなんて使う機会ないわとか言ってる人がたまにいるけど
jsの仕組み理解してないんだろうな

260 ：
正直jsよく知らんけどid使わないとなるとめっちゃ面倒そう
document.getElementsByClassName("hoge")[0]とかでやるってことでしょ？
自分なら配列の番号間違えてバグらせそうだわ

261 ：
idは禁止しているわ
メニューボタンはこんな感じ

$( '.menu_btn' ).on( 'click', function ( event ) {
event.stopPropagation();
event.preventDefault();
controller.toggle( 'page_navigation' );
});

一つしかないからID、とするのは分かるんだけど、
結局運用していく内に2つ3つと増えていくからIDにすると不便になるだけだ

262 ：
さすがにメニューボタンは増えなかったけど、googlemapは増えた

263 ：
いや、同じ挙動を割り当てたいならクラスでガバっと指定すりゃ良いけど、
ボタンだのは個別の動作割り当てることも多いんだから、
そういうのにはクラスじゃなくてID割り当てるべきじゃない？って話でしょ。
そういうのも無理やりクラス使う必要ある？

264 ：
>>261
↓もうこの時点で失格だよ・・
$( '.menu_btn' )
使用するであろうセクションのidを指定してからfindなりfilterなりするのが正しい

265 ：
jsでドキュメント内をクラス名で全検索させてるんだから
そんなのと比べたらcssの書き方なんてハナクソレベルの差異だよ

266 ：
>>263
何が増えるか予想できないからIDを割り当てるべきではなく一括でclassでいいじゃんってなった
ボタンだけIDは気持ちは分かるが、じゃあヘッダーは、フッターは、と際限がない
元にheaderは増えた

>>264
個人サイトなら分かるが、現実はそのセクションが予想外の所で増える
最初から幾ら増えてもいいように作るべきという結論以外ない

267 ：
パフォーマンスより汎用性やメンテ性を重視するのは同意だよ。
まあ、速度の改善を求められたときにでも思い出してくれ。

268 ：
まぁ今時は先頭の１つだけ欲しいならquerySelector使っちゃうし

269 ：
>>266
別に際限無い話ではない
ボタンに限らず「この要素のみの機能を実装をしたい」というときにIDを割り当てれば良いだけ
使いもしない不要なIDを各headerやfooterやsectionに付けろという話をしているのではない

個別の要素への機能の適用ならばidで呼んだほうが速い、
複数の要素への機能の適用ならclassの方が楽、

要は適材適所に必要な属性を付けましょうという話で、「idが要らない」とか「classの方が便利」っていうものではない。
盲目に「ID禁止」なんてやっても開発の幅を狭めてパフォーマンスを落とすだけ

270 ：
>>269
だから「この要素のみの機能を実装をしたい」が増えるんだって
これは企業の規模が大きくなった時に発生するもので、そこまで予期して作るもんでもない
idで指定することは将来的に開発効率を落とす事につながるだけ

ただページ内アンカー、あれだけはIDだ

271 ：
>>267
そうそう、ID指定よりclass指定はすごく速度が落ちる
これは悩ましい所

272 ：
クラス指定のほうが良いって
本にかいてあったよ？

273 ：
君らは、BEM とか、CSS の構造化を知らんのかw
この本を読んで、勉強しろw

現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016

MindBEMding による、CSS の構造化

274 ：
BEMは超大規模な開発にはうってつけだけど普通の企業サイト程度だとめんどくさいだけだよ

275 ：
なんちゃってBEM最強説

276 ：
>>266
> 何が増えるか予想できないからIDを割り当てるべきではなく一括でclassでいいじゃんってなった
> ボタンだけIDは気持ちは分かるが、じゃあヘッダーは、フッターは、と際限がない

全部classでいいよ。ボタンも含めて。
ボタンもね。増えることがあるんだよ。例えばページが長くなったから
下にも同じボタンをつけようって。
JavaScriptも全部classで参照。そうすると要素が増えたり減ったりしてもエラーが出ない。

277 ：
>>267
> まあ、速度の改善を求められたときにでも思い出してくれ。
速度の改善を求められるとき = 遅いと体感するとき に
体感する速度向上にはならないclassからIDへの変更を
思い出しても意味がない

278 ：
>>271
> そうそう、ID指定よりclass指定はすごく速度が落ちる
全く落ちない。速度は測ってみ。
10%落ちるとかいう意味がない数字ではなく、
具体的に、どれだけの数を使って何ミリ秒落ちるのか

279 ：
IDとクラス両方付けようという知能は無いんだろうな

280 ：
idがあると開発効率が落ちるとかどんな開発してんだろう

281 ：
>>280
「ページが長くなったから下にもボタンを付けちゃう」行き当たりばったり素人開発
まともな設計できんのが居ないんだろうな
あとはjQueryしか知らないのにjs語ってるとかもありそうだが

282 ：
新人君にid触らせると面倒な事になるって意味ではclassで統一したいのは分かる

283 ：
>>281
意味不明ｗ
お前はHTMLページを書いた後修正せんのか？
あとからデザイン変えることがないのか？

284 ：
>>281
完全に素人の発言でワロタ

285 ：
少し前のレス読めない馬鹿にはわからん話だろうな
そもそもデザインの話じゃねーから

286 ：
じゃあ何の話？

287 ：
もしかしてコンテンツを変更して（ページが長くなって）も
デザインを見直すなんて絶対やらないとか言ってるのかな？
ならそれこそ完全に素人だが

288 ：
>>259から嫁

289 ：
>>287
保守の概念が無いんだろう

290 ：
保守でも同じことだ
idで破綻する開発なんてもんがあったらそもそも根本的に間違えてる

291 ：
idじゃなくて>>281の話だよ

292 ：
だからいきあたりばったりにならないように保守性を考慮して設計したら
IDではなくclassを使うって話をみんなしてるんですよ
その程度のこと、わかりませんかね？

293 ：
>>291
だから>>281の「行きあたりばったりでボタンが増えちゃうからid使えないの」っていう頭がお花畑の無設計素人開発の話やで

294 ：
id使っても保守性は落ちない

295 ：
たぶん静的なHTMLしか使わない開発で
JavaScriptもHTMLも一人が書いてる小規模な
ウェブサイトしかやったことがないんだと思う

動的HTMLなら状態によって要素が表示されたり消えたりするし
（例えばログインしてるかどうかで表示が変わる）
サーバーサイドとフロントエンドで担当が分かれているから
どちらの都合で変更しても問題ないように影響範囲を小さくするのは当たり前だから

296 ：
>>294
ID使っても保守性が落ちないような仕事しかしてないんでしょ？

297 ：
動的生成する要素にid属性とかそりゃ頭湧いてるな

298 ：
ボタンの表示が増えたり減ったりするのはいきあたりばったりじゃなくて
そういう仕様だからなぁ。じゃあどうするかって言うとclassになるんだよ

299 ：
× そういう仕様だからなぁ。
○ そういう要望だからなぁ。

300 ：
>>296
idごときで崩壊しちゃうレベルの設計の仕事しかしてないの？

301 ：
>>298
そういうものにはidは振らないの

302 ：
>>300
だから最初から全部id振らないの

そういうものじゃなくて全部振らないの

303 ：
全部classならidごときで崩壊することもないよｗ

304 ：
>>302
全てが動的な要素でも無いのに？
非効率だねぇ

305 ：
>>303
idあると保守できないんでしょう？
レベル低いねぇ

306 ：
>>304
idにすると何の効率が上がるの？

重要だからもう一回聞くね

idにすると何の効率が上がるの？

307 ：
jsの開発効率だね

308 ：
>>305
どちらが保守が容易かの話だからね

保守できるできないの話だと勘違いしてる時点で
ついてこれてない

309 ：
>>307
なんでjsの開発効率が変わるの？
idとclassで全く変わらないんだけど

310 ：
>>308
保守できないってことは容易もクソもないよね

311 ：
>>310
ん？ ID使うと保守できない
ならclassを使うべきという主張？

312 ：
>>309
>>260は読める？

313 ：
>>311
レベル低すぎだよお前って主張

314 ：
>>312

はっきりした。あんなコードしか書けないのが原因じゃん

315 ：
やっぱりjQuery使えない初心者さんってことかな？

316 ：
>>314
何を勘違いしてるのか知らないが、書いたのは俺じゃないけどな

他人を馬鹿にするならお手本のコードでも書いてみてくれ
ちなみに>>260でも理解できるレベルで

317 ：
>>297
想像してワロタ

318 ：
やっぱ化けの皮が剥がれたかｗ

古臭いjQuery頼りの雑魚かｗｗｗ
乙ｗｗ

319 ：
>>316

お手本？

> document.getElementsByClassName("hoge")[0]とかでやるってことでしょ？

↓ 普通はこうします。

$(".hoge")

320 ：
晒し上げ

321 ：
>>318
化けの皮ってｗ

本末転倒って言葉知ってる？
保守性を下げたのはあんたがjQueryを拒否したからだよ。

あんたが保守性を下げたの

322 ：
ドヤ顔でjQuery書いてるとか時代遅れも良いところだから黙ってたほうがいいと思うｗｗｗ

323 ：
jQueryでｗｗｗｗ保守ｗｗｗｗｗｗ

324 ：
ちなみにjQueryは古臭くもなんとも無くて現役で使われてる。しかも利用者は増えている。
https://w3techs.com/technologies/history_overview/javascript_library/all

73.6% (今年1/1) → 73.7% → 73.8% → 73.9% → 74.0% → 73.9% → 73.9% → 74.1% (8/1) → 74.2% (9/1予定)

今年に入ってから +0.6%

325 ：
JavaScriptの世界を知らないなら黙ってればいいのにｗ

326 ：
JavaScriptの世界でわろた

327 ：
へー、jQueryってそんなに使われてるんだ。

328 ：
そりゃ使われてるだろうよ
今まで無駄に多く使われてきたんだからｗｗ

+0.6％てｗｗｗｗｗｗｗｗｗｗ

329 ：
jQueryがなぜ今まで採用されていたのかとか理由もしらないで未だにかじりついてバカなコード書いてるんだろうなーｗｗ

330 ：
>>328
今まで無駄に多く使われてて飽和状態なのに
まだ増えてるって言うことが脅威なんだよ

他に+0.6%以上のものはBootstrapの+1.3%しかない

331 ：
>>320
> jQueryがなぜ今まで採用されていたのかとか理由もしらないで

> document.getElementsByClassName("hoge")[0]とかでやるってことでしょ？

これ↑がこう↓なるからだよ

> $(".hoge")

332 ：
getElementsByClassNameワロタ
いつの時代だよ
そんな脳だからjQuery使ってるのか

333 ：
Bootstrapはバージョンでガッツリ変わるのがダルい
中身のブラッシュアップだけしてくれれば良いのに

334 ：
飽和状態なのか増えてるのかはっきりしようかｗｗｗｗ
日本語も怪しいねｗｗ

335 ：
>>334
そうだよ。飽和状態なのに増えてる。

336 ：
>>331
やっぱりその程度の理解なんだなｗｗｗｗｗｗｗｗｗｗ

337 ：
論破されるとjQueryを馬鹿にする
何故かこの流れ毎回見る

338 ：
>>331
それ合ってない

339 ：
>>332
じゃあ何を使うのって聞いていい？

それにあんたが答えたら

IDもclassもそれ使えばいいから、保守性変わらないじゃんｗ
って答えるよ。いいかい？

340 ：
>>338
お前があってない。
お前は10年以上前の知識で語ろうとしてる。

341 ：
>>331
見た瞬間間違ってる事に気づかないボンクラはもうコード書くな

342 ：
>>341
間違ってるって何が？
いや、間違ってるんだよね？
もっといい方法があるとかじゃなくて、
間違ってるんだよね？

343 ：
$(".hoge")の為にjQueryｗｗｗｗｗｗ
+0.6%は最強ｗｗｗｗｗｗｗｗｗｗ

344 ：
これからも元気で生きてくれよjQuery君

345 ：
>>343
お前もjQuery馬鹿にするなら間違いぐらい見抜いてそこを突けよ
どっちもゴミだわ

>>340
分からないから適当な事言って真意を引きずり出す話法とか古臭すぎるわとっととRよカス

346 ：
(ｷﾘｯ

347 ：
↓ 普通はこうします。

$(".hoge")



ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

348 ：
>>345
> お前もjQuery馬鹿にするなら間違いぐらい見抜いてそこを突けよ

ことわる。

jQueryは馬鹿にするだけだｗｗｗｗｗ

バーカーバーカ、jQueyは終わるんだぃ。うわーん

349 ：
やっぱりclassに統一でいいんじゃね？

だって $(".hoge") に相当するjQueryを使わないコード
って言ったってたった数行程度でしょ？

そんなのidもclassも保守性変わらないじゃん

350 ：
JavaScript側はidでもclassでも
今は大差ないってことでOK？

jQueryを使わなくても$(".hoge")程度なら大差ないよね。

351 ：
この程度でjQueryを使わないってなるなら
この程度でidやclassを使い分ける必要はない
って結論になるやろな

352 ：
JavaScriptにはクラスという概念はないんだよ。
例えばjQueryの$('.hoge')ってのはjQuery上の構文でしかなくてだね・・

353 ：
ES6がIE11以下で対応してないしな

354 ：
>>319
>>264読め

355 ：
例えばランディングページに汎用的なコンバージョンボタンを複数設置する場合、
どんどん要素追加したとしてもそれぞれのボタンはユニークな識別子をつけるのが望ましい。
何故ならどのボタンがクリックされているのか、idをつけてないと計測できないからだ。
クラスしかつけてないのは、つまりちゃんユーザー動線を解析してない証拠でもある。

356 ：
↑ただし、ヤフーショッピングや楽天などシステムの仕様にクセや制限あったり
運用特性がある（超頻繁に拡張や編集が必要）のは除く。

357 ：
αタグ内に画像と文字がはいってて、αタグにカーソルを合わせると画像のみ薄くなるようにするにはどうすればいいですか？

358 ：
>>357

<div class="parent">
<p class="child1">文字</p>
<p class="child2"><img src="hoge.png"></p>
</div>

.parentr{
position:relative;
}
.child1{
position:absolute;
z-index:2
}

.child2 img:hover{
opacity:0.70;
filter: alpha(opacity=70);
}

359 ：
>>352
jQueryの構文じゃなくて単なるJavaScriptの関数呼び出しだよｗ
jQueryはJavaScriptの構文を拡張してるわけではない。

あとJavaScriptにクラスという概念はある
今その話に何の関係があるのか知らんが

>>354
読んだ。で何の関係が？

360 ：
>>355
コンバージョンのためにJavaScriptコードを書き換えるのは間抜けだろう
理想は、コンバージョンのためのidを追加しても、
ウェブサイトの動作には一切変更がないのが望ましい

361 ：
>>359
そもそも、JavaScriptにクラスという概念は存在していません。
一般体なオブジェクト指向言語がクラスベースというものなのに対して、JavaScriptはプロトタイプベースというものだからです。
JavaScriptでは、クラスという概念がない代わりに、function(関数)を使ってクラスのようなものを作って対応していました。
しかしこの書き方はゴチャゴチャしがちで、わかりづらいことが大きな欠点です。
そんな中、ES2015(ES6)という最新のJavaScriptで、class構文が導入されたのです。(IE11以下未対応)

362 ：
>>359
jQueryのクラスセレクタはjsの関数なわけないだろ
具体的になんの関数だよ
裏でもっとめんどくさい処理してるわ
Sizzleでもな

363 ：
>>361
> 最新のJavaScriptで、class構文が導入されたのです。
だからクラスという概念ができました。

> jQueryのクラスセレクタはjsの関数なわけないだろ
関数だぞ $ 関数。jQueryが定義したJavaScriptの関数で構文じゃない
構文ってわかってるか？

> 裏でもっとめんどくさい処理してるわ
だからなんだよｗ お前が面倒くさいわけじゃないだろ。
今はjQueryで拡張されたセレクタ、jQuery特有もしくは :has擬似クラス等の
まだブラウザでサポートされてないセレクタ（現在策定中）を使ってない限り
面倒くさい処理はしていない

364 ：
>>352,361はとてつもない的外れなこと言ってるから黙ったほうが良い

365 ：
ラジオで言ってた

366 ：
話が一周してる

1. classに統一したほうがいい
→ idとclassに分けないと（jsが）面倒ですよ

2. jQuery使ってれば面倒じゃないですよ
→ jQueryは古いから使わない！だから面倒！

3. 自分で面倒にしてるだけやん。jQuery使えよ
→ たったこれだけのためにjQuery（笑）これだけならjsで書いても面倒じゃない！

4. jsが面倒じゃないって言いました？ならclassに統一したほうがいい
→ （idとclassに分けないと）jsが面倒って言ったのは・・・俺か！？

367 ：
>>319
普通はquerySelectorAllを使います

368 ：
>>367
querySelectorAllを使うと、idとclassに分けなくて良くなりますよね？
だから面倒じゃないですよね？
そういう話をしてるんですが。

↓これはここで言った通りの展開（笑）

339 自分：Name_Not_Found[sage] 投稿日：2019/08/22(木) 07:50:06.67 ID:???
>>332
じゃあ何を使うのって聞いていい？

それにあんたが答えたら

IDもclassもそれ使えばいいから、保守性変わらないじゃんｗ
って答えるよ。いいかい？

369 ：
jsなぁ
なんでgetElementBy～なんて長い名前にしたんだろうな
他になんぼでもいいようがあっただろうに

370 ：
>>369
JavaScript自体は別に長くないんだよ。

長いのはDOM API、言語じゃなくてブラウザという
実行環境で提供される、ブラウザ用のライブラリ

DOM APIはJavaScriptだけではなくJavaなどの他の言語も
念頭に置いていて、その流儀で名前もつけたからそうなった。
JavaのAPIは長いものばかりだからね。

じゃあなんでJavaはあんなに長いのかって話になるわけだけどｗ

371 ：
>>370
へ～勉強になったわ、thx

372 ：
jQueryは古いから使わないのではなくて使うメリットがもう薄いんだよ
古臭いシステムの保守しかやったことない連中は知らんだろうが

373 ：
そりゃ保守なんだから古い物が中心だろう
安定稼働して内容もわかっていれば何の問題もない

374 ：
最先端ですぐに陳腐化するライブラリとかアホな案件掴みたくないわ

375 ：
>>373
だから新しいプロジェクトではjQueryなんて採用しないっつー話だろ
お前の「安定稼働して内容も分かっているプロジェクト」の話をしてるんじゃないの

jQuery使えばidは要らないからjQueryをこれからも使えとかいうアホくさいこと考えてるバカには分からんか

376 ：
新しいものを否定しているくせに
ES6前提（IE11以下未対応）の意味不明さ。

本当はES5まではクラスの概念が無かったことを知らなかったのがバレバレ。
無いものをあるように便利に書けるようにして、jsの処理が煩雑になりパフォーマンスが落ちるから
クラス多様はナンセンスなんだって言ってるのに。

377 ：
>>375
普通に使うぞ

378 ：
>>376
お前がさっきから書いてる「クラス」とここで議論されている「クラス」は別物の話だぞ？

379 ：
>>372
こうですか？

1. classに統一したほうがいい
→ idとclassに分けないと（jsが）面倒ですよ

2. jQuery使ってれば面倒じゃないですよ
→ jQueryは古いから使わない！だから面倒！
→ jQueryは古いから使わないのではなくて使うメリットがもう薄いんだよ！だから面倒！

4. 自分で面倒にしてるだけやん。面倒ってことは、メリットありますよね？ jQuery使えよ
→ たったこれだけのためにjQuery（笑）これだけならjsで書いても面倒じゃない！

5. jsが面倒じゃないって言いました？ならclassに統一したほうがいい
→ （idとclassに分けないと）jsが面倒って言ったのは・・・俺か！？

380 ：
jQueryを使わないことが目的になってしまって、
面倒なことをどうやって解決しているかを
言えないんだよね。あーあ（苦笑）

381 ：
ここに来てまだ「面倒なことをどうやって解決しているのか」を書いてもらわないと分からないってやっぱやばいわｗｗ

382 ：
一生$(".hoge")しといてくれや

383 ：
んで「面倒なことを解決した」ら
やっぱりclassに統一したほうがいいって話になるってのが
わかってないんだよな（苦笑）

もともとそういう話やで？
classに統一しろって言ってるのに、誰がどういう理由で
idとclassに分けないと面倒っていいだしたと思ってるんだ？

384 ：
id使えない馬鹿は一生classで統一しとけよｗｗ

385 ：
$(".hoge")で解決とか言ってるのがやばい

386 ：
ところで、classに統一した方がいい理由って？

387 ：
CSSのセレクターの書き方で表示速度やパフォーマンスについて知りたい
↓
そもそもcssの書き方くらいじゃ差はほとんど出ない。
↓
それよりもjsの書き方の方が差が出る
例えば、jQueryのセレクタをクラス名始まりで使おうとしている人は
裏でどういう処理が行われるかわかってない
cssよりこっちのほうがよっぽど気にしたほうがいい。

388 ：
話がループしてる感じだが、まあ議題としては意義があるし、まともな方だろ
どっちかが草生やしたり、煽り始めたらこの話題おしまいにしようぜ

389 ：
>>387
あほか。今はquerySelectorAllを使って解決じゃ
idとclassに分ける必要はない。

390 ：
>>386
メンテナンス性の向上。

ウェブサイトっていうのは作ったら終わりじゃなくて
メンテナンスされ続ける。一つしか存在しないと思っていても
後の顧客からの要求で複数になったり、なくなったりすることがある。

idにしてしまうとその都度cssの書き換えが必要になるが、
classに統一しておけば要素が増えたり減ったりしても修正の必要がなくなる

391 ：
>>390
やっぱバカだな―お前ｗｗｗ
cssの書き換えとか言ってるけどcssでid指定なんて普通しねーよｗｗｗ
そんなことやってるから破綻してんだろｗｗｗ

392 ：
>>387
> 例えば、jQueryのセレクタをクラス名始まりで使おうとしている人は
> 裏でどういう処理が行われるかわかってない

まじそれな。上の方にもいたけど、未だにSizzleを使ってるとか言ってる
裏でどういう処理が行われるかわかってない。
querySelectorAllがあるブラウザではSizzleを使わずにquerySelectorAllを使ってる。
批判するなら、裏でどういう処理が行われるかちゃんと理解しろって言いたい。

393 ：
>>391
> cssの書き換えとか言ってるけどcssでid指定なんて普通しねーよｗｗｗ

えぇ、ですからclassに統一ですよ。最初から言ってるでしょうに。

394 ：
jQuery書いたら$(".hoge")で
cssでは#hogeとかやってるの想像したら恐ろしいな
論外だわ

395 ：
>>393　>>279
あのな、ほっんっとおおおおに基礎レベルの話やが、
・cssのセレクタ指定はクラス
・idはjsで使う
今はこれが基本やでｗ

396 ：
> ・idはjsで使う

jsでclassも使うでしょうに（笑）

統一しましょう。querySelectorAllがあるから
idでもclassでも大した差はないって言ったでしょうに

397 ：
>>394
誰もそんな話してない。

398 ：
あ、もしかして上で間違ってるって言ってた人

.hoge （hogeクラス）と意図的に書いているのに気づかず
#hoge って書きたかったんだって勘違いしてた？

よく読んだほうがいいよｗ

399 ：
>>396
jsでclass使うときは使えば良いよｗ
しかしcssでidを指定してスタイル適用とかありえないからｗｗ

400 ：
「idにしてしまうとその都度cssの書き換えが必要」
こんなことが起こることがおかしい
cssでid使ってるからそんな書き換えが必要になる

401 ：
>>400
だから設計もクソもない行き当たりばったり開発なんだってｗｗｗｗ

402 ：
>>396
あほか
jsでid使うのは書き方どうこうではなく速度の話だよ
書き方なんかidでもclassでも大差変ないのは当たり前

403 ：
cssのセレクタにタグやID使わないのなんて基本だわな

そんなのも理解してないレベルで
「id禁止で全部クラス、jQueryが解決」
とか低レベルな話していたのか・・・

呆れるわ

404 ：
そもそも速度の話だったのに
いつのまにか使いやすさの話に・・・

405 ：
あとこのjQuery君
一つの要素にidかclassのどちらかしか付けられないと勘違いしてない？

406 ：
cssでもidは普通に使うわ
cssファイルはほとんどが全ページに共通で読み込ませるから
例外処理や固有のデザイン処理をしたい時には、素直にｉd書いたほうが可読性はいいもん。

407 ：
>>405
だとしたらバカを通り越した勘違いだな

408 ：
>>405
> 一つの要素にidかclassのどちらかしか付けられないと勘違いしてない？

IDはコンバージョンのためにつけるんだろう？ｗ
JavaScriptではclassだけ使えばいい。
そうすりゃあとからから複数になっても対応できる。

409 ：
>>406
> 例外処理や固有のデザイン処理をしたい時には

それがいきあたりばったりだという。

410 ：
>>406
あー俺が>>403で書いたのは
基本的にcssのセレクタはクラスを使用して
idやタグの指定は「極力使わない」って意味な

あんたの書いたようなケースも出てくるし
「cssからidやタグの指定を完全に無くす」のが目的ではないからな
分かりにくくてすまん

411 ：
>>403
> cssのセレクタにタグやID使わないのなんて基本だわな

だから最初からclassに統一しろって話をしていたじゃないですか？

412 ：
>>404
> そもそも速度の話だったのに
だってidとclassで速度変わらねーしｗ

413 ：
>>403
> 「id禁止で全部クラス、jQueryが解決」
> とか低レベルな話していたのか・・・

今どきはjQuery使わないでquerySelectorAllで解決したそーですｗ

「id禁止で全部クラス、querySelectorAllが解決」

414 ：
>>411
本当に馬鹿だなお前ｗｗｗｗ
cssには使わなくてもjsで使うっつーのｗｗｗ
アスペすぎるｗｗｗｗｗ

415 ：
>>414
> cssには使わなくてもjsで使うっつーのｗｗｗ

だからなんで使うんだよｗ

querySelectorAllで全部解決！
idでもclassでも保守性を変わらないんだからjsでidを使う理由がない！
（コンバージョンのために使えば良い）

416 ：
>>409
ほう？
例えば、構築1年後に新着情報欄のループの中で2019/7/1の2番目の投稿だけは重要項目なので
常時一番上に表示させておきたいって言われた時はどういう風にするの？

417 ：
>>415
あｗｗｗ
すｗｗｗｗ
ぺｗｗｗｗｗ

速度の話はどこいっちゃったのかな？ｗｗｗｗ

418 ：
jQuery君はホームページ（）レベルのjsしか書いたことないんじゃない？
そのレベルじゃあ$(".hoge")になっちゃうよね

419 ：
>>418
速度なんて気にしないだろうしな

アホみたいな自己満長文書いて
「あっ下にもボタン付けよ、$(".hoge")っと」
とかやってんの想像すると笑うわ

420 ：
ｽﾚﾁ

421 ：
飽和状態で勢いは+0.6%！
やっぱjQuery！

422 ：
jQuery君は夏休みの宿題でホームページ作ってるんかな

423 ：
晒し上げ

424 ：
これ見りゃidで書くべきなのがわかる
https://blog.takakd.com/articles/20171217011236/

cssと違い、jQueryはセレクタ始まりでeachしたりloopしたりの乗算で繰り返し処理をすることを前提に考えないといけないので
コンマレベルでも最善を選択すべき。

425 ：
>>416
> 例えば、構築1年後に新着情報欄のループの中で2019/7/1の2番目の投稿だけは重要項目なので
> 常時一番上に表示させておきたいって言われた時はどういう風にするの？

CSSじゃなくてJavaScriptでやるって話だよね？ループって言ってるし。

.sticky とかいうクラスをつけて、ループの前に取得するとか
ループ表示してから引き上げればいいんじゃねーの？

idでやる場合と何も変わらないんだけど
なにか不都合でもあるの？

426 ：
>>424
速度関係ないホームページ（）しか作らないだろうから関係ないよ

427 ：
>>419
> 「あっ下にもボタン付けよ、$(".hoge")っと」
> とかやってんの想像すると笑うわ

今はquerySelectorAllで全部解決なににな！

428 ：
>>425
何も変わらないとか言ってるけど速度は変わるが？ｗｗ

429 ：
>>428
ちょっと君黙っていて。
速度以外になにか言いたかったから、
あんな具体的な例を出してるはずだから

430 ：
>>425
ループなんてどのプログラム・スクリプト言語でも全部あるだろ。

例えが悪かったが、一意な処理でもクラス使うって事か。
むしろその理由がわからん。
知らぬところで使われてて、cssを編集したら気づかぬうちに他箇所で影響でるかもしれんじゃん。
どのクラスがどのページのどこで使われてるかすべて把握してない人が触ったらどうすんの？

431 ：
こんなことやってるうちにさらに1年後には意味不明なクラスだらけになって崩壊してんだろうなー

432 ：
そして$(".hoge")とquerySelectorAllはどんどん低速になっていくのであった・・・


----- 完 -----

433 ：
section1→背景画像はimage1.pngを使用
section2→背景画像はimage2.pngを使用
section3→背景画像はimage3.pngを使用
とか
トップページだけはサイドバー無くすとかそういうのも
クラスで書くの？
むしろそれ不自然じゃね？

434 ：
>>424のURLに書いている通り、
結局、全体バランスを考えてこういう感じになるはずなのに

> 全てにidを振ればよいですが、保守を考えると作業負担が大きそう。
> 基本は5.や6.を使用して、jQueryオブジェクトで絞り込む時は10.にしようと思います。

クラスだけに固執するのはおかしいだろ

435 ：
>>434
$(".hoge")がすべてを解決してくれるのでクラスだけにしましょう！

しか言わない壊れたラジオになるだけだと思うよ

436 ：
見直すと>>269でとっくに答えが出てるけどjQuery君には分からなかったんだろうなぁ

437 ：
結局際限なく増えるのはクラス名という・・・

438 ：
まあ、ループ=javascriptって言ってる時点でお察しだな
たぶんこの人はphpはおろか、WordPressすら記述経験がないとみた。
たぶんbootstrapに毒されてるんだと思う。
あれは汎用クラスだけで全部作るからなあ。

439 ：
久々に盛り上がったな（質問者そっちのけで）

まあ昔いたような人格が変なヤツとかじゃないし、言いたい事も理解できるし、
主題から話そらさないし、スキルが低すぎるわけでもないから健全な討論だったと思うよ

440 ：
>>430
> 知らぬところで使われてて
いきあたりばったりやなｗ

441 ：
>>438
今さぁ、JavaScriptの話してんの。関係ない人は参加しないで

442 ：
>>430
> むしろその理由がわからん。

お前の例からわかるだろｗ

> 例えば、構築1年後に新着情報欄のループの中で2019/7/1の2番目の投稿だけは重要項目なので
> 常時一番上に表示させておきたい

って言われた後の更に1ヶ月後に、追加で2019/8/1の5番目の投稿も重要項目なので
2019/7/1の次に表示させておきたい

ってなったとき、ID使ってると困るやろ
お前が考えた「ありえそうな変更」がさらにもう一つ追加されただけだから「ありえそうだろ？」

443 ：
>>425は、こういうレスが返ってくることを想定して
複数あってもいいような書き方をしてます（笑）

↓これな

> .sticky とかいうクラスをつけて、ループの前に取得するとか
> ループ表示してから引き上げればいいんじゃねーの？

444 ：
その問題に対処するにしても
.sticky2(仮)みたいなバカなクラスを増やすよりは素直にID振ったほうが分かりやすいし速いと思うよ

445 ：
>>444
お前 .sticky クラスを 複数の要素につけるって発想持ってないの？

446 ：
>>445
それじゃあどっちらも.stickyなんだから上下が決められないじゃん
さらにもう1つ増えたらどうすんの？ｗ

447 ：
>>446
> さらにもう1つ増えたらどうすんの？ｗ
こっちが聞きたいわｗ

さらにもう1つって増えるたびに、JavaScriptを書き換えるのか？
それがメンテナンス性が低いってことやで

448 ：
> それじゃあどっちらも.stickyなんだから上下が決められないじゃん
出た順 or 逆順。もしくはセレクタに書いた順

まあいずれにしろ、classで複数あることを想定してるので修正は楽やな
最初からclassにしてるからね。

あ、querySelectorAllで全部解決っす！

449 ：
>>448
>>424のページ見た感想は？

450 ：
結局どっちも書きかえてる件ｗｗｗ
メンテナンス性ｗｗｗｗ

451 ：
>>448
なあ、このサイトって知ってる・・？
https://developer.mozilla.org/ja/

かなりid多様してるんだけどどう思う？ダメだよな？レベル低いよな？
https://dotup.org/uploda/dotup.org1927969.png

452 ：
「重要なお知らせ」が複数になる可能性があるなら
そもそも「普通のお知らせの一番上」に来るような設計や改変をすべきじゃない

idとかclassとかそういう以前の問題
「重要なお知らせ」が必要になった時点でid1個割り当ててちょろまかすような修正で済まさないこと
ここ本当にレベル低いスレだな

453 ：
>>452
なあgoogleのページ、ソースみるとid多様してるんだけどどう思う？
本当にレベル低いよな？

454 ：
>>451
まともなサイトならidは使わないなんて馬鹿なことやってるとこの方が少ないよねｗ

455 ：
すべきじゃないとか言ってるけど
構築1年後にクライアントがそうしたいって言ってるんだから
まずはそうしてあげようよ。

456 ：
>>455
クライアントの希望に対して全く意見や提案ができない環境でしか仕事してないんだな

457 ：
>>452
「単一責任の原則」なんて言ってもこいつらはただのバカコーダーだから分からんぞｗｗｗ

458 ：
>>456
意見や提案ができない環境じゃなくて
意見や提案を生む脳みそがないのｗｗｗｗｗｗ

かわいそうだよねｗ

459 ：
>>456
営業の基本は聞き上手になること。
まずは相手の要望を聞いてあげないとこちらの提案は刺さらない。
だから「まずはそうしてあげようよ。」と書いた。
つーか、実際に一番上にサクッと表示しておしまいだわ。
レスポンシブだし急ぎだし、それが一番良いと思ったからね。

460 ：
営業ｗｗｗｗの基本ｗｗｗｗｗｗｗｗｗｗ

461 ：
それと自演しなくていいよバレバレだから。
ちなみにこっちは自演じゃない。
こっちが何人とか気にするな。

462 ：
だれも要望を聞かないなんて書いてないよね

463 ：
>>460
草生やし始めたね
ギブアップか？
つーか新規営業したことあるの？？
基本中の基本なんだが。

464 ：
辛くなっちゃって等々敗北宣言（自演認定）ｗｗｗｗｗｗｗｗ

465 ：
>>463
営業さん大変だねｗｗｗｗ
自分エンジニアなんで営業なんて無いんですわｗｗｗｗｗｗｗｗｗｗｗ

466 ：
草生やし始めたとか書いてるけどかなり前からいるじゃん

467 ：
営業さん(jQuery君)はついに論点ずらししかできなくなっちゃったね

468 ：
>>465
やはり経験ないんだな。すぐわかるわ。

なのに経験者に向かって提案の事語っちゃってどうするの？
恥ずかしくないの？
草はやすのは敗北宣言な

469 ：
ギブアップか？ｗｗｗｗｗｗｗｗｗｗｗｗｗ


$(".hoge")ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

470 ：
>>468
エンジニアとしてクライアントと関わったことないんだな
そりゃ設計もしたことないわけだ

クライアントと話するのは営業だけじゃない

471 ：
オウム返しで敗北宣言ｗｗｗｗｗｗｗｗｗ

472 ：
営業の経験があるとクラスだけ使うようになるのかすごいな

473 ：
>>472
それしか使えない、の間違いだろｗｗｗｗｗ

久々にこんな低レベルのやつ見たわｗｗｗｗ

474 ：
>>470
phpやWordPressの記述経験も怪しいのに
エンジニアですか？
まさか営業経験ある俺にエンジニアとしての知識と経験で負けちゃうような事は
さすがにないとは思うけど、
例えばクラスだけで構成されてる有名企業のサイトを教えてくれないか？

475 ：
>>474
phpやWordPressの前に君はもう少し文章を読めるようになったほうが良い
俺は「クラスだけで構成されているサイトがあるなんて一言も書いていない」

idとクラスを適宜使い分けろと言っている

476 ：
俺
・営業経験ある人

俺のレスは
>>424,>>430,>>433,>>434,>>438,>>451など

477 ：
>>475
どっかで絡み間違えたようだ
すまんね

478 ：
$(".hoge")がすべて解決ｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

479 ：
こういう営業が無茶振りな仕事請け負ってくるんだな
というのがよくわかる一コマでした

480 ：
idは結局速度のメリットしかないの？

481 ：
>>479
php書いてるだけでもこの営業はマシだろ

482 ：
無茶ぶりかな？
自分で作ったサイトってのもあるけど30分以内で終わらせたわ。
様々なケースを想定して汎用クラスにする事もあるけど
そこに時間かけるべきじゃやないケースだったし。

483 ：
>>480
速度以外にも正しく適用してる分には可読性も増す

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

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

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

質問側も節度あるレスで！質問前にスレ内を検索しましょう

485 ：
$(".hoge")はすべて解決するので覚えておいて損は無いです！

486 ：
ここまでidとクラスを使い分けろに
根拠が一つも出てない件について

487 ：
速度っていう根拠が散々出てるだろ

488 ：
>>487
ゲームの上級者は1フレームの争いをしてるらしいが、
それが1秒間60フレームで、1/60 = 16.7ms
つまり15msの違いはわからないと言っていいだろう。

この15msの差が生まれるためには、
idだと何個で、classだと何個なのか？
そこまで計算して、根拠が出てるって言えるんだよ。

489 ：
>>488
上の方に書いてあるだろ

>>424より、
idだと28846個、classだと8241個だよ

1ページの間にこれだけ含まれてると
ページの表示が15ms遅くなる。

普通のページがどれだけ含まれてるか知らんが

490 ：
やっぱclass統一教会の信者はバカなんかな
15msの差なんてjsを実行する環境によっても変わるだろ

今はスマートフォンの環境にも対応するのが当たり前なんだから、少し古いスマホも考慮して速度設計するんだよ。
物知らずにバカなこと書くのも大概にしろ

491 ：
少し古いスマホを考慮すると、classの数はさらにへるで？
ページサイズを減らすわけだから

492 ：
ちなみにどっから持ってきたかは知らないが、何故60fpsが人間の認識の限界だっていう根拠があるんだ？
ゲーマーは120Hzや240Hzのモニタを使うこともあるし、「60Hzとはかなり変わる」と答えるぞ。

こんなもん根拠にしてたら8msや4ms以内に収めないといけないなｗ

493 ：
>>489は間違い。

コードを見る限りclassが多いと表示が遅くなるという話じゃなくて
なんらかのDOM操作をするときにidやclassを検索する速度だ。

言い換えると$(selector)の発行回数。

ページを表示したときに、idだと28846回、classだと8241回
$(selector)を発行したら15ms遅くなる

ページ表示時の$(selector)の発行回数なんて多くても十数回程度だろう

494 ：
>>492
> ゲーマーは120Hzや240Hzのモニタを使うこともあるし
使うのと、目で見てわかる判別できるかどうかは話が別だろう
例えばテレビは30フレームだし、映画なんか24フレームだ
テレビや映画に不満がある人っているの？

495 ：
>>494
やっぱり馬鹿なんだな―お前
ゲームと映画やテレビでは全然描画の仕組みが違うっつーの

496 ：
人間が「連続した映像である」と認識できる仕組みがテレビや映画にはあるから24や30fpsで済んでいるが、
ゲームの場合は「細かく撮影したスクリーンショット」なんだよ。パラパラ漫画と同じ。

そういうものを滑らかな連続した映像に見せようとすると60fpsや120fps必要になるんだよ。

だからそもそもjsの処理速度とか瞬間的な評価をするための引き合いに「映像」を出してくること自体がずれてると思う。

497 ：
ゲーマーが画面見てないってマ？ｗｗｗｗｗｗ

498 ：
>>495
> ゲームと映画やテレビでは全然描画の仕組みが違うっつーの

もう地デジとフルHDになってから随分立つけど？
4Kとか8Kとか

ぜんぜん違うと知っているなら、テレビがどうなっているのか説明してみせなさいｗ

499 ：
> 人間が「連続した映像である」と認識できる仕組みがテレビや映画にはあるから24や30fpsで済んでいるが、
> ゲームの場合は「細かく撮影したスクリーンショット」なんだよ。パラパラ漫画と同じ。
>
> そういうものを滑らかな連続した映像に見せようとすると60fpsや120fps必要になるんだよ。

ふむ？そいで、テレビにつないでるプレステはフレーム表示なん？ｗ

500 ：
ふむ？そいで、テレビにつないでるプレステは何フレーム表示なん？ｗ

501 ：
説明して見せなさいｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

502 ：
>>500
は？60pか59iだろ？聞く必要ある？

503 ：
> 滑らかな連続した映像に見せようとすると60fpsや120fps

結局60フレームで滑らかな連続した映像に見えるってことじゃんｗ
つまりそれが、16.7msやで？
これ以上早くしても人間の目が追いつけないよｗ
ってか、動画見てるわけじゃないんだしさ

504 ：
>>502
いままで60フレームの話してましたよね？
やっぱり60フレームで十分なんじゃないですかｗ

> ゲームの上級者は1フレームの争いをしてるらしいが、
> それが1秒間60フレームで、1/60 = 16.7ms
> つまり15msの違いはわからないと言っていいだろう。

505 ：
>>503
だからさ、細切れのゲームの映像と、カメラで撮影された映像や編集された24fpsでは全く物が違うの。
まぁバカには分からんよな。

506 ：
>>504
なんでプレステを引き合いに出してくるの？
だから59iや60pと答えてるまでなんだが。

pcゲーマーは120や240がゴロゴロいるぞ

507 ：
> pcゲーマーは120や240がゴロゴロいるぞ

ゴロゴロいるのと知覚できてるのは話が違うって言ってる意味分かんない？ｗ

508 ：
>>507
知覚できてるからわざわざ高い金払って高い高リフレッシュレートのモニタ買うんやで

509 ：
ちなみにリフレッシュレートの意味ではいまだにブラウン管を惜しむゲーマーもいるからな

510 ：
どーせ1ページのダウンロードが120FPSの1フレームで
終わるわけないんだから、そんなの気にしてもいみねーよ
ばかだなぁ

511 ：
はい、知覚できるかできないかっていう馬鹿な議論を吹っかけておいて負けるとこれｗｗｗ
よっわｗｗｗｗｗｗｗｗ

512 ：
>>508
それは嘘だよ。違いわからんってさ。

513 ：
>>512
せめてゲーミングモニタの一つでも買ってからもの言ってくれ
すでに買ってるなら設定を見直すか眼科に行ってくれ

514 ：
ゲームで15msを引き合いに出しておきながらゲームとテレビの違いも分からない馬鹿ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

515 ：
話を120FPSの1フレームを近くできるかどうかにすり替わっているが、
本質は120FPSの1フレーム以下で処理できてしっまうんだから
jQueryでも差がわからんって話だから

516 ：
挙句の果てに60ｆｐｓ以上は意味が無いとｗｗｗｗｗｗｗｗｗｗｗ

517 ：
>>513
ゲーミングモニタでウェブサイトを見て
120FPSだと何がどう変わって見えるの？

クリックした後のページの表示の仕方がなめらかだとか？

518 ：
>>516
でも確かにウェブページの表示で60fps以上は意味ないんじゃね？

519 ：
ちなみに120fpsの時代はもう古いからｗｗ
今あるモニタの240Hzを最高点にしようよｗｗｗｗ

id禁止のclassのみで4msに収まってるなら良いんじゃない？ｗｗｗ
そりゃホームページ（）なら収まるだろうねｗｗｗｗｗ

520 ：
>>518
表示速度の話なんてしてねーよばーか

521 ：
よくこんなバカな基準で話を進めるな・・・

522 ：
まったくだ。15msは十分短い時間だっていう例なのにわかってないな
15msで十分処理できるならjQueryでいいだろ・・・

523 ：
いやいや4msでしょｗｗｗｗｗｗｗｗ

524 ：
速度の観点でidとclassを使い分ける必要があるのは
idやclassの数が数万個と数千個とかかある場合でしょ？

525 ：
15msならね

でも4msに基準が変わったのでｗｗｗｗｗｗｗｗｗｗ

526 ：
>>524
4msって何の基準？

仮にページ上のidを全部classにしたって
4msもかからないと思うけど？

これみりゃわざわざ使い分ける意味がないってことがわかる
https://blog.takakd.com/articles/20171217011236/

> no type time[msec]
> 5 .class 0.00182
> 6 #id 0.00052

classでも4msかかるには2197回ものjQuery DOM検索が必要

527 ：
2197回ものjQuery DOM検索っていうのは$(selector)の呼び出し回数ね
DOM要素の数じゃないから

528 ：
やっぱバカには話通じないなー

class統一教会がゲームの60fps、つまり15msを基準に使用とか言い出したんだろ？
でもゲームも今は求められる基準は240fps、4msってのもあるんだからこっちでいいじゃん、という話。

さっきも言ったが、今はスマホが当たり前の時代なんだから、
少し古いスマホにも合わせた速度設計が必要だろうって話しなわけ。

つまりどんなサイトなのかは置いといて、このバカが言い出したゲーマーを基準にするとなると、
「少し古いスマホで実行しても4ms以内で処理を終えるjs」が書けないとダメっつーこと。

class統一教会の信者とゲーマーは大変だねーｗｗｗ

529 ：
>>528
> 少し古いスマホにも合わせた速度設計が必要だろうって話しなわけ。

じゃああなたは少し古いスマホはPCよりどれくらい遅いと思いますか？

530 ：
JavaScriptは2197回のDOM検索してるだけじゃなくて他の処理もあるだろ…
他の処理も含めて色々やるのだからそれを考慮せずにクラスだけで良いという話にはならない…

531 ：
>>529
ほんっとバカだなーｗｗｗｗｗｗ
どんなPCと比較すんの？ｗｗｗｗｗｗｗｗｗ

532 ：
「最近のスマホは十分速い」とか言い出すのに1票

533 ：
html/cssの構造上、idからclassになることはあるかもしれないが、classからidになることはほぼ無いんだから、
jsの速度を確保するという意味ではidで呼べるものは呼んで、どうしても呼べないものはclassで呼ぶ、というだけの話じゃないの？
最初から全てclassにしてしまっては速度の確保は難しいね。（後からいちいちidに置き換えていくなら別だけど）

534 ：
>>533
idからクラスになるのもおかしいっつーのｗｗ
そんなガバい設計してるからid恐怖症になってclass統一教会になんのｗｗｗｗｗｗ

535 ：
>>534
セレクタがidからclassに置き換えられることが無いってどういう設計なの？

536 ：
統一教会では$(".hoge")がすべて解決しますｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

537 ：
>>534
cssやjsのセレクタがidからclassに変更される事が無い設計なんて存在するの？

538 ：
>>537
最初から全てclassにすれば変更されることが無いよ

539 ：
>>538
そんなトンチ話をしているのではなくて、
速度の意味でidを使う必要があるようなプロジェクトでも、
idからclassに変更する必要が無い設計なんて存在するのか、
という話をしているのです。

540 ：
>>539
トンチ話じゃなくて実際そうでしょう
速度がどうのこうのアホみたいにそれしか書けない人もいますが
クラスでも十分にはやいです

541 ：
class統一教会は会話ができませんｗｗｗｗｗｗｗｗｗｗｗｗｗ

542 ：
>>540
だから、
・idが必要な場面もある
・充分に速いと言っても古い環境を考慮しなければならない場合もある
という話をしているので、何でもかんでもclassだけで良い、とはなりません。

しかし場合によってはidで指定していたものをclassに変更せざるを得ないことがありますよね？
っていう質問をしているのです。

543 ：
聖戦やな

544 ：
classだけで良いって書いた物だけど、まだやっててわらった
俺はそっちが良いって言うだけで、
ノータイムで適切に使い分けできるならidあってもいいんじゃないか？
俺は使い分ける意味はないと思うし統一した方が早いけど、使い分ける方が早い人もいるのだろう

545 ：
開き直りだしたｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

546 ：
どいつもこいつもうぜぇ
ここが何のスレか考えろ

547 ：
つーか、ID出せ
みんなNGに突っ込むから

548 ：
>>544=545
という自演荒らしだから絶対にIDは出さないぞ

549 ：
$(".hoge")はさすがにどうかと思う
hogeだと何の意味も持たないのでなんのためのclassかがわからない
他人が見てもちろんわからないし、作った本人ですら時間が経つとなんだったのかわからなくなるも思う
ちゃんとした意味を持ったclass名にすべき

550 ：
新たな馬鹿、爆誕ｗｗｗｗｗｗｗｗｗｗ

551 ：
最近優しくよね、このスレ
良スレだったのに残念

552 ：
$(".hage")

553 ：
>>533に一票

554 ：
まだ伸びてたかｗ
とこでクラスだけで構成されている有名サイトって具体例ないの？
bootstrap以外で。

555 ：
じゃあbootstrapで作られたサイト

556 ：
具体的なURLで頼む

557 ：
荒らしの立てたもぬけスレ行け

558 ：
あ？なんで命令すんの？
ご主人様

559 ：
JavaScriptではdata-*を使うぼく
高みの見物

560 ：
HTML側を常に自由に弄れる程度の規模なそれでいいけどね
カスタムデータ属性なんてそれこそ汎用性落ちるじゃん

561 ：
HTML側の編集がjsフレームワークでも何でもよくて自由に書けるなら
それこそjQuery不要でReactとかVue.jsでゴリゴリ書けばいい話になるから、
話の方向がずれるな

562 ：
ボタンのラベルにアイコンを表示するのに、HTMLに直接書くかCSSで追加するか迷う。

563 ：
その辺はもうどっちでもいいでしょ
font-awesomeだってあんなクラス名にしたらもう実質HTML側に記述してるようなもんだよ。

564 ：
<a href＝″toTop″>ページTOPへ</a>
みたいなコード書いたんですけど、スムーススクロールしながらTOPに戻るようにするにはどうすればよいでしょうか？

現状はボタンをクリックすると一瞬でTOPにもどります。

565 ：
誤 <a href＝″toTop″>ページTOPへ</a>

正 <a href＝″#top″>ページTOPへ</a>

566 ：
jQueryは使いたくないです。
Reactでスムーススクロールする方法はないですか？

567 ：
>>566
jsじゃなくcssのanimationで指定した方がきれいになる

568 ：
これじゃだめ？

body {
scroll-behavior: smooth;
}

569 ：
>>567
あぁ、使えない機能ですね
https://kuzlog.com/2018/01/09/2049/

570 ：
> IEとSafariが対応していないので、常用はまだ無理ですね…
> ブラウザの対応状況が変わるまでは、素直にjQueryに頼ったほうが良さそうです。

571 ：
Safariなんて弱小ブラウザ切り捨てればいいやんｗ

572 ：
サポート率75%かぁ
まぁレイアウト崩れるとかじゃないんだから妥協できるなら良いんじゃない

573 ：
今ってウェブの原始時代だよね…
あれには対応、これには未対応とか未来ではありえないと思うわ

今の俺たちは未来人からしたら棍棒振り回してマンモスを追いかける原始人だよ

574 ：
そんなのは人類史上ではいつもいつもそうなんだからそれでいいの
大所に立って偉ぶりたいのは分かるけど人類はいつもそう
文句ばかりつけるひとより一歩一歩確かに歩みを進めるひとが偉いのよ

575 ：
いまがWebの原始時代とかホントのWeb原始時代を知らんひとの戯言だわん
この20年でどれだけ進歩したか想像の枠外なんだろうなぁ

576 ：
未来人A「WEB原始時代(1990年代～2040年代)の旧人たちが狭議的な発言してる笑」

未来人B「シンギュラリティを迎えてないんだから視野が狭いのは仕方ないよ笑」

未来人C「笑」

577 ：
>>448
> あ、querySelectorAllで全部解決っす！

#a,#b で複数指定出来るし、属性でも複数指定出来るし、classに拘る必要はないね

578 ：
数十年後にこのスレ見られることがあると思うと不思議な嬉しさがある

579 ：
スレ間違えたわ

580 ：
>>577
> #a,#b で複数指定出来るし、属性でも複数指定出来るし、classに拘る必要はないね

うん。そうすると、idの方がJavaScriptが簡単！ってことにはならないわけで、
やっぱり全部classでよくね？

581 ：
>>577
>>580
君たち意味不明。
jQueryでのquerySelectorAllの使われ方理解したほうがいい
https://techblog.kayac.com/jquery-selector-api-tuneup.html

582 ：
2011-12-01 の記事を持ち出されましても・・・

583 ：
> Sizzleとは
> SizzleとはもともとquerySelectorAllがサポートされないブラウザ用にjQuery内部で使用されていた
> セレクタAPIを切り出したもので、CSSセレクタを受け取ってそれに一致する要素を返すライブラリです。

Sizzleが作られたときは、”すべての"ブラウザでquerySelectorAllがサポートされてなかったんですが？
むしろjQueryでその有効性が認められたから、あとからブラウザがサポートした機能なわけで

584 ：
>>580
セレクタ文字列にはclass以外も指定出来るよね？

585 ：
classもできるしjQuery特有の擬似クラスなんかも使えますよ
それどころかセレクタ文字列じゃなくて、DOM要素も指定できるし
DOM要素の配列にまで対応してます。

586 ：
idの方が簡単！とか馬鹿じゃねーの

587 ：
>>586
それな。

588 ：
idを使うにしてもJavaScriptから
その要素が一つだけしか存在しない または 必ず一つ存在する
なんて前提にはしないな。

589 ：
idが2つある場合、jsで2つめを取得することは出来るんでしょうか？

590 ：
idを使わずに取得すれば出来るんじゃね？
まあ最初からid使うなって話だし
俺は使わないが

591 ：
IDを使わないとJavaScriptが簡単！とかいうレベルの技術力なら基礎からやり直したほうが良い。
設計しろとまではいわないがHTML/CSS、jsの構造を決めてから書き始める習慣をつけるべき。
それすらできないならクラスだけ使っていても結局後が悲惨なことになる。

592 ：
>>591
変化に耐えられるようにするのが設計ってもんだよ
将来のことなんて誰にもわからないんだから余計な前提を作ってはいけない
構造は細かいパーツの組み合わせにするべきで
全体を決めてしまうと変化に耐えられなくなる。

593 ：
>>589
あれこれわからんｗ
前提がアホすぎて考えたこともなかった

594 ：
>>592
＞細かいパーツの組み合わせにするべき
べき、とかじゃなくてそれを構造っていうんだよ。
何の仕組みも組み合わせも無いものに対して「構造」なんていう表現はほぼ使わない。

「構造を決める」っていうのは、拡張性が無い決め打ちのひと固まりを作る、という意味ではない。

595 ：
idを使うと決め打ちになってしまう
そういうのを避けろということ

細かいパーツになっていれば、
同じパーツを1ページに複数置くことが出来る

596 ：
>>595は
>>433とかもclassでやってんの？

597 ：
ID=決め打ちという発想自体に柔軟性が無いなぁ

598 ：
>>597
JavaScriptの話やで？
わかってるのか？

なんでもclassを使うよりもidを使うほうが楽らしい
俺に言わせればどちらも変わらないんだが、
「idの方が楽」というのなら、classの場合とは違うコードを書いてるわけで
それはid前提のコードを書いてるってことだろう

599 ：
classだけで統一しちゃおう！ってのがそもそも"決め打ち"なんだよなぁｗ

600 ：
>>598
お前は>>259あたりからよーく読み直せ
その辺りからこのクラスかIDか議論始まってるから

「苦か楽か」なんていう基準の話じゃないのが理解できなかったらもう書くのやめたほうが良い

601 ：
読み直したが結果は一緒だ（あーだるいｗ）
なにか言いたいことが有るなら、自分で言え

602 ：
>>601
言いたいことは書いてあるが読めないのか？

603 ：
え、class統一教会の人は「classだけだと書くのが楽」スタンスに移行したの？ｗｗ

604 ：
そりゃ楽だろうな後からどうなるかは知らんが

605 ：
まあ、そうなんだからそうなんだろうな、つまりはそうだからそうなんだろう

606 ：
つーか本当にidって不要なら
誰も使わなくなるんじゃいのけ？

607 ：
>>589って本当にどうやるの？
IDが2つあるって設計ミスだけど、実際発生すると取得できないの？

608 ：
>>607
どういう方法を使うかで結果がかわるだけ。

例えばjQueryなら、1番目のidだけが対象と認識され、2番目以降は認識されない。

同じ名前のidの二番目を取得したいなら
$('#hoge:nth-child(2)')などとcss派生セレクタでやれば取得できる。
$('#hoge').eq(1)なだとjQueryの関数だと取得できない。

609 ：
jsから取得することはできるけどCSSは知らない
https://imgur.com/a/BHGE4zD

610 ：
まあjsの質問はスレチだな。
jsのスレ行けばマニアみたいな詳しい人がわんさかいるから
そこで怒られてくるのもいい経験だ

611 ：
というか、前にいた荒らしがﾈﾀを変えて荒らしに来てるんだろ
https://mevius.2ch.sc/test/read.cgi/hp/1517028608/228
https://mevius.2ch.sc/test/read.cgi/hp/1519547237/

612 ：
今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」

613 ：
まぁ結局そこに直結するんだけどな

「idってどこに付ければ良いですか？」
「classってどのように使えば良いですか？」

楽するためにjsを分離して考えたいのだろうけど、それこそ「構造」なので、
フロントエンド(HTML/CSS/js)くらいは理解してる人間が質問に答えてくださいね♪

614 ：
cssで変数も関数も使えるようになりそうだし
Sassもいずれ不要になるんだろうね。

利用者が不便に感じ、便利ツールやフレームワークが先行してから
ネイティブが真似して遅れながら進化してくwebの流れみてると
どこで飛び乗ってどこで捨てるかの見極めってほんと大事だと思うわ。

615 ：
>>613
> 「idってどこに付ければ良いですか？」
> 「classってどのように使えば良いですか？」

その答えとして、1個しか無い場合はidです。
ってやるからだめなんだよね
増えたときに困るから

idで実現できることは、classを使っても実現できるわけで、
そう考えるとJavaScriptでidを使うメリットはない

616 ：
>>614
> cssで変数も関数も使えるようになりそうだし
> Sassもいずれ不要になるんだろうね。

sassで一番重要なのは、変数でも関数でもなくて
ネストできるってことだぞ

617 ：
これからは○○だ → 消える
○○は不要になる → 生き残る

いつもこんな感じｗ

618 ：
>>615
>.増えたときに困るから

なんか変な理屈だな。
最初に「1個しかない」と設計したものが勝手に増えるわけはないんだから、
それは困るような設計変更をしたってことだろう。

619 ：
>>592
セレクタなら「idもclassも属性も指定できる」のに、classに限定するとか、頭堅いよ？

620 ：
>>618
1個しかない設計ってどういう意味？
1個しかない前提の設計というのならわかるけど
「1個しかない設計」という言葉の意味がわからん。

621 ：
>>619
JavaScriptの話だよ。
getElementByIdとかを使わないってこと、
idに頼ったコードは書かないということだよ。

idに頼ったコードは書かないので、
「idを使ったほうがJavaScriptは楽になる」という主張は
なりたたないという話をしている。

622 ：
>>621
そもそも誰がそんな主張してるの？

623 ：
>>622
こことか。読めばわかるけど、jsでid使うのが普通だとか、id使わないと面倒だとか言ってる。
そんなことありえないのに

259 名前：Name_Not_Found[sage] 投稿日：2019/08/21(水) 20:51:21.80 ID:???
idなんて使う機会ないわとか言ってる人がたまにいるけど
jsの仕組み理解してないんだろうな

260 名前：Name_Not_Found[sage] 投稿日：2019/08/21(水) 20:55:07.89 ID:???
正直jsよく知らんけどid使わないとなるとめっちゃ面倒そう
document.getElementsByClassName("hoge")[0]とかでやるってことでしょ？
自分なら配列の番号間違えてバグらせそうだわ

624 ：
今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」

625 ：
>>623
そんな前のレスから一々話蒸し返してるの？

626 ：
>>106
1ようそ1クラスみたいな構造は?
例: <span class="16pt nowrap redfont">

627 ：
>>621
こっちもJvaScriptの話
querySelectorAllとidは併用可

628 ：
だからquerySelectorAllを使うなら
idに依存してないということで、

idの方が簡単ことにはならんだろって話

629 ：
class統一教会は悔しくてたまらないそうですｗｗｗｗｗｗｗｗｗｗｗｗ

630 ：
>>628
idの方が簡単なんて話は「俺は」してない

俺「idもclassも自由に使え」
お前「classだけを使え」

631 ：
今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」

632 ：
今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」

633 ：
今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」

634 ：
何度も書かなくてよろしい

635 ：
何度も書かないとわからないバカがいるからね

636 ：
class統一教会の人はjsスレに言ったら２秒で論破されそう

637 ：
じゃあ2秒で論破されれば俺の負け
2秒で論破できなければ俺の勝ちということで

638 ：
そのまま2度とこのスレに戻って来ないでほしい

639 ：
もうダメだね
荒らしの餌場と化してる

640 ：
かもねぎ

641 ：
>>620
たしかに「1個しかない設計」だと日本語として不自然な気がするが、そもそもそんなこと書いてないのだが。

642 ：
新たな議題を投下

テーマ：数字は半角がよいか、全角がよいか。

入力フォームで住所の番地の数字を全角数字で入力しろというサイトと
が結構多いのは何故？（大手でも）

またフォームではなく文中の数字を全角数字にしたがるクライアントが多い。
理由は半角だと数字部分が目立たないからだという。

大手サイトになるとサイト内の表記揺れは必ず問題視され、修正するハメになるので、
一部を全角数字にするということは、サイト内の数字を全て全角数字に統一する覚悟が必要になる。

しかし全角数字にするということは、cssやプログラムで制御（数値ではなく文字列としてしか）できなくなる。
個人的には全角数字をこの世から消したい。

643 ：
ここは討論するスレじゃない
やりたきゃ別スレを立ててやれ

644 ：
HTMLおよびCSSの技術的な質問とそれに対する回答をするスレ

645 ：
荒らしうぜぇ

646 ：
ID出してないからスルー

647 ：
本当にスレタイが何回貼られても分からないバカっているんだな

648 ：
ボッコボコでワロタｗｗｗｗｗ

649 ：
>>635
3回書けば、説得力が3倍になるわけではないんだがね
純粋に、うざいだけ

650 ：
え、ここ雑談スレじゃないの？
何のスレだっけ？

651 ：
ホントにスレタイ読めなかったｗｗｗ

652 ：
id排除主義者もうざいが、タイトル連呼する奴もうざい
無駄なことに労力使うだけで無意味

653 ：
お前がRば有意義だな

654 ：
隣あった要素の高さ揃えるのにはflexbox使うのですが、その中の要素同士の高さ揃えるにはどうすればいいですか
例えば
<div class="list">
    <div class="item">
        <div class="title"></div>
        <div class="photo"></div>
    </div>
    <div class="item">
        <div class="title"></div>
        <div class="photo"></div>
    </div>
</div>
の場合、.itemの高さはflexboxで揃うのですが、.titleが片方だけ2行の時とか、.photoの大きさが違ったりとかしても.title同士、.photo同士のそれぞれの高さを揃えたいです。
flexboxでは無理ですか？

655 ：
>>654
はい

656 ：
>>654
https://webdesignday.jp/inspiration/pickup/4175/

657 ：
https://support.sugutsukaeru.jp/ja/customize/homepage-design/247.html

658 ：
質問と関係ないけど全部divなのが気になっちゃうｗ

659 ：
>>656
>>657
ありがとうございます。
書かれてある内容はすべて理解しています。
やっぱりflexboxでは無理なんですね。
flexboxにこだわらなくともcssで実現できればいいのですが…

>>658
実際にコーディングする時はsectionとかfigureとか使ってますがここに書くのに適当な例として書いただけです
構造を表したかっただけなので

660 ：
>>653
鏡

661 ：
スレタイに漢字が多くて読めないわ

662 ：
えいちてぃーえむえるすらっしゅしーえすえすのどんなしつもんにやさしくこたえるすれよんじゅう

663 ：
超絶解読可能良好(笑)

664 ：
以下、全部質問必須漢字

禁止漢字以外言語！！

665 ：
そういやまだ夏休みだったか

666 ：
平仮名禁止！

使用奴大馬鹿笑

667 ：
タイトル連呼君はアホの子だったか

668 ：
アルファベットと記号とひらがなと漢字と半角カタカナと数字が入った難易度が高いスレタイだわ

669 ：
body.hoge
div.fuga
{
　width: 900px;
　position: relative;
}
こんな感じで記述されているcssを

body.hoge div.fuga { width: 900px; position: relative; }
このような1行タイプに換えたいんだけど、なにかそういうwebサービスはある？

cssファイルの書き方も時代によって違うの？

正規表現で\n を \sに置き換えても、ちょっと意図しないものになりそう

670 ：
>>669
sassコンパイラ通しちゃえば？

671 ：
>>669
https://qiita.com/tkiryu/items/016aa9ef8a25b631e7e6
https://qiita.com/ayuareu/items/3010140dcc35dc730377

Prettierというなんでもかんでも整形してくれるツールと、
StyleLintというCSSが自分があらかじめ設定したルールに従っているかチェックしてくれるツールを組み合わせて使う。
>>669の要件だと適用すべきルールは、
"block-closing-brace-newline-after": "always" とかかな？
https://stylelint.io/user-guide/rules/block-closing-brace-newline-after#always

まあ沢山ルールあるから満足いくまで好きに組み合わせてみればいい。

672 ：
縮めたい行の量が少ないのならvimでS-vしてJで簡単に1行にできる
大量だと結局マクロとか必要になるだろうけど

673 ：
WPやMT、パワーCMSくらいならまだいい
SiteCoreとかいう魔物をなんとかしてくれ…

674 ：
誤爆すまぬ

675 ：
>>669
\nを\sに変換したあと\}\sを\nに変換すればもしかして

676 ：
vscodeは置換が1行だから
改行含んだ正規表現のマッチパターンで作れないのが残念だね。
アドオンであるのかな

677 ：
複数行置換だけ別のエディタ使ってるわ

678 ：
色々アドバイスありがとうございます。

>>675さんのやり方でほぼ合致していますが
あれから正規表現を勉強してみて、
\tを消して行頭に集め、\nを" "に置換して1行にまとめ、\}を}\nにしてサイトをチェックすると、ほぼほぼ理想通りでした。
元のソース的に不適格で置換後におかしい点はサイトを確認してからcssを見ると、
要素がスペースが無くくっつていたので、矩形選択してスペースを追加していくというやり方でいけました。

200個ぐらいの要素が1000行ぐらいになっていたので、かなりすっきりしました。
アプリケーションに読ませて解釈させてから吐き出させるのも良いかと思ったのですが、
自分でどこまでできるかやってみました。

たしかにターミナル上のvi上でJ連打でも良かったのですが、タブもあったので
これはアンドゥの効くローカル上で置換すればなんとかなるかもと思いました。

679 ：
>>669の改行ありとなしで、どう違うの？

680 ：
SassMeister
https://www.sassmeister.com/

上のサイトへ入力して、その出力結果は、

body.hoge div.fuga {
width: 900px;
position: relative;
}

VSCode の拡張機能にも、Live Sass Compiler がある。
Code formatter では、VSCode の標準が、Prettier かな？

681 ：2019/08/29
>>669
正規表現でも十分実装出来そうだが…(未検証)

検索 = "([^{\s\n\r])[\s\n\r]+"
置換 = "$1 "

【SEO】Bing対策 パート１【MSN】
次世代田代砲の開発・研究
+ JavaScript の質問用スレッド vol.122 +
ネットショップ開業したい（＾-＾）
+ JavaScript の質問用スレッド vol.127 +
Web制作者が愚痴るスレ 47クレーム目
個人サイトにありがちなこと
【パクリ】キュレーションサイト被害者の会
Web制作者が愚痴るスレ 45クレーム目
HTMLソース閲覧の禁止を提供するソフトが登場！
--------------------
キン・ボールについて語る
ニュース女子実況 【YouTubeライブ・ニコニコ生放送・AbemaFresh! 月曜22：00】 #15
｡*＊花火AA＊*｡
熊野尾鷲道路 4車線目
反社会的な男になりたい。　具体的になにすればええの？ [513871482]
復活してほしいパチンコ
ワタミンは変態！ネットストーカーは当たり前！逮捕一直線！！！
【日テレ系木曜プラチナイト】ブラックスキャンダル part5【山口紗弥加・松本まりか・松井玲奈】
円窓とその一門
ステイブルスター　４レース目【G1ステイブルもOK】
STAR WARS スター・ウォーズ 模型総合スレ Episode 45
盗用したコードどれくらい書換えれば合法になるの？
使ってはいけないお金を使ってしまった勇者の墓場99
非処女を好きになることの馬鹿らしさ Part 118
ブラックデビルを語るスレ　3本目
隔週刊チャンピオンバイクコレクション
【悲報】自民党さん「赤坂自民亭で宴会しながら、随時指示を出していたので、支障はない」 [155869954]
集団ストーカー/テクノロジー犯罪
ハン・ソロ：スター・ウォーズ・ストーリー Solo: A Star Wars Story 12
大学ラグビーを語る
TOP カテ一覧 スレ一覧 100～終まで 2ch元 削除依頼