HTML/CSS のどんな質問にも優しく答えるｽﾚ 40
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 39 ﾐｯｸﾐｸ
https://mevius.5ch.net/test/read.cgi/hp/1559446058/
■関連スレ
Webサイト制作初心者用質問スレ part251
https://mevius.5ch.net/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 HTMLとCSSの全てについて、教えて下さい。
ぐぐりません。
あんたが答えろ。優しくな！ >>2
キミいつの時代の人だい？
そんなスキル、脳内のマイクロチップにインストールすれば一瞬で習得可能じゃないか
これだかは令和以前の旧人類は… 股間のマイクロチップに俺のスキルをインストール！一発で そんな事どうでもよい事ばかり話してないで、
片方だけになったAirPodsの使い道を早く考えろよ >>6
うどんの話は食べ物スレでやってください
ここは神聖なるHTML/CSSスレなのですよ！ 初心者スレで聞いたがやはりよくわからんのでここでも聞かせてくれ
html4.01サイトで外部JSを非同期で呼び出すコードを書いて、WYSIWYG上で更新するとコードが変わってしまうんだわ
<script src="https://hoge.js"; async>
これが↓
<script src="https://hoge.js"; async="">
KompozerとBluegriffonで同じ結果になること確認した
勝手に変わる以上これが正だってことなんだろうが、「async=""」ってなんだ？
asyncがhtml5向けってのは理解してるつもりなんだが
>>13
原則、
html5の宣言なら、async="async"が正しい記述
html4.01の宣言なら、asyncのみでOK
しかし、CMSの方か、WYSIWYGの方でHTML5を強制前提にしているクソ仕様の可能性があるので、
ページの宣言が無視されて修正されている可能性がある。
トリアエズ、async="async"にしとけばいい。 >>13
それと、html4.01でなぜ、html5向けの内容を書こうとしてるんだ？
>html4.01サイトで
>asyncがhtml5向けってのは理解してるつ
html4.01でやる理由はもうないはずだからhtml5にすべて統一したほうがいい。
技術上、doctype宣言をhtml5に書き換えられないなら、仕方ないけど>>10 怒ってる？ >>15
thx
丁度ググり続けて似たようなの見つけたところだったので助かった。
つまるところ
async
async=""
async="async"
は全部（動作するならば）同じ動作って事で良いんだよね。後はWYSIWYGの仕様って事で
>>16
いろいろあるんだ、察してくれ
html5に統一すべきってのは重々承知、その準備作業とでも
>>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 >>15
> html5の宣言なら、async="async"が正しい記述
嘘を教えるな。ブール値の属性は値を省略できると
HTML5の仕様で決まってる。
値を省略できないのは冗長な記述しかできないクソXHTMLだ。
XHTMLは滅んだ。今更対応する必要もない。ブール値属性は
値を省略してasyncやcheckedでいいし、<br/>は間違いで<br>が正しい >>15
> html5の宣言なら、async="async"が正しい記述
属性値は省略しても良いし、空文字でも良い
https://momdo.github.io/html/common-microsyntaxes.html#boolean-attributes
※なお、XHTMLはHTML Standardの中で生きている あの人は死んだけどみんなの心の中で生きてる。みたいな表現いらないからｗ HTML+CSSのデザインで
・フレキシブルボックス
・CSSグリッド
この2つの軸があるようですが
どっちが良いのですか？
それとも用途によって使い分けるのですか？ 大変申し訳ございません。
当スレは現在、夏休みにつき運休となっております。
つきましては、質問者様ご自身での解決をお願いいたします。 >>24
現実に生きているものを心の中に仕舞わなくていいから XHTMLは死んでますよ。残ってるのは名前だけです。 >>30
>>1の「HTML Living Standard 日本語訳」を読むといいよ >>26
最近は、flex らしいけど、
互換性については知らない > >>1の「HTML Living Standard 日本語訳」を読むといいよ
名前しか登場してませんね（笑） 自分、令和生まれなんスけど
XHTMLってなんスか？ 笑
原始人が使ってたナニカっすか笑 >>34
君の目が節穴なだけ
XML構文の節を読んでみな あん、あん、あん、とっても大好き♫
ドラえ～もん(怒) なんで起こってるのか、明日までに考えといてください。 >>26
グリッドの方が多様性あるけど
まだまだ新しい概念なので
古いブラウザが対応してないとか
整備が整ってないので
今のところフレキシブルボックスが主流
IE10が駆逐されたらグリッドの方に一気に変わるかと思われる >>43-44
1. 間違ってると煽る
2. 仕様で言い負かされる
3. 怒ってる？
このパターンはお腹一杯だよ
初めから煽らなければいいのに 生産のある仕様を書き込むと、「怒ってる？」と返すスレ htmlを初めて組んでみたんだが、どうやってネットの海に放流すればいいかわからん。
ガチ初心者なので教えてください…。ちな、簡単なテキストだけのサイトを公開したいから、一番シンプルな放流の仕方が知りたい。 webサーバを借りるなり立ててそのhtmlファイルを放り込めば良い
windowsでは立てたらダメだけど(Windows Serverでなければ) >>53
ありがとうございます。サーバーが必須なのを理解してなかった。
立てるのは難しそうだから鯖借りる方向で調べなおしてみる。ありがとう。 >>54
契約してるプロバイダに無料のホームページサービスとかないの？
テキストだけのサイトならそれで十分。 >>52 ワイはロリポップっていうレンタルサーバー借りてるで マック買い換えるけどテンキーありキーボードのほうがいい？ >>62
メリット・デメリットがあり、好みによるので何とも
まぁ無くてもなんとでもなるし、
あまりに数字を打つ機会が多いなら後でテンキーだけ買うという選択肢もあり ／⌒ヽ
/ ´_ゝ`） ここ通らないと行けないので、ちょっと通りますよ・・・
| /
| /| |
// | |
Ｕ .Ｕ CSSの質問です
とりあえず最新のChromeで表示できればいいのですが
#A > #B > #C と要素が入れ子になっていて#Aと#Bに背景が指定されている場合に#Cの背景に#Aの背景が表示されるように透過させることってできますか？ 親要素の指定を継承するタグがあったはず
名前は忘れた
インヘリットみたいなやつ 確かそれは出来るはず
float、fix、z-index辺り使うんだっけな。かなりキモイcssを書いた気がする
今も通用するかどうかは知らん ドリームウィーバーと同じような感じで使えるエディタあれば教えてください。
期間限定で使ってみてCTRL +シフトキーでタグの予測変換、関連項目を全て置換できる点、
アップロードが同じソフトで簡単にできる点はかなりいいと思いましたのでそういう機能もあるソフトがいいです。 Microsoftが作ったVisual Studio Codeがおすすめ DreamweaverだとBracketsって手もあるけど
まぁ、今はVSCodeだろうなぁ。軽いし。
個人的にはAtomも好きで使ってるけど、その辺を
適当に調べて好きなのを選べば良いと思う。 >>84
visual studio codeはドリームウィーバーでいうサイト管理とアップロード機能がありますか？ >>87
前者はVS Codeのプロジェクトマネージャーがあたるのかな？
後者の機能はありますよ。SFTP 関連項目を全て置換できるってのが意味不明だな
置換に完全一致と類似なんてないだろ bracketとvisual studio code使ってみた。
どちらも基本は似たようなソフトで拡張機能で自分好みにしていくんだろうけどbracketの方が始めから日本語対応してる点で使い易いかなと思った。
しかしbracketは重すぎてPCが何度か止まりかけた。
ドリームウィーバーではそういう事がなかったからそこだけは残念。
だとしたらbracketと使い勝手がほとんど変わらないvisual studio codeになるのかなってとこ dreamweaverなんてクソ重いだろ。
無駄な機能とかつけすぎ。 bracketsもそんなに思いエディタじゃないと思うけどなあ
ATOMは起動がすごい遅く感じるが DWの起動の遅さは以前このスレでネタになってたぞｗ
父がDWを起動させ、その後父は亡くなり
あれから3年経ちましたが、未だに当時起動したDWが立ち上がりません
私は父の遺志を引き継ぎ、DWが起動するのをうんぬん つまりVSCodeですら手間取るうちのマシンでは使うな、と。ｏｒｚ アドビのソフト自体起動が遅いからな
その中でも他社のエンジンつかったままのDWはお察し vscodeはクソ軽だぞ
起動しようと思った時には既に起動してるレベル そこまでではないけどまあ軽いよね
うちのPCではメモ帳とかと変わらないぐらいには軽いと感じる 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の記事ばかりで、イマイチ分かりませんでした。
ご教示よろしくお願いいたします。 × sectionタグ以下の
〇 sectionタグ内の階層の >>102
それで問題ないでしょ。
「main__sec1-list」などのハイフンはあくまで名前の区切りであり、構造を示すものじゃない。
重要なのは、切り離して使う可能性があるかどうかじゃないの。 main__sec1-list-itemなんて名前付けたら、
main内でしか使えなくなるとかそういう事考えながらやったらええねん >>102
タグ構造と紐付けちゃうとメンテナンス大変だよ
要は名前がバッティングしにくいようにすればよいので、ブロック名は意味的な分類にしたほうが良い 現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
MindBEMding による、CSS の構造化について、説明した本 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;
} >>108
checkbox 表示非表示 切り替え
で検索すれば山程出てくるぞ >>104-107
みなさんありがとうございました。
勘違いして混乱していた部分が解消されました。 >>108
ｈｔｍｌとcssのみでやるなら、table使った構造は無理だよ。
隣接セレクタは親(tdやtr)をまたぐことはできないから。
その構造でやるならjQueryでトラバースするしかない。
もしhtml/cssだけでやることに重点をおくなら
これを真似すればいい。
https://webdesignday.jp/inspiration/technique/css/5316/
それと、イコールの後の値は、id="id1"のようにダブルクォーテーションで括りなさい cssのセレクタの書き方で教えてください。
クラスaとbとcを同時に持つAND条件を指定したい場合 .a.b.c のように書きますが
行が長くなりすぎる場合など途中で折り返したりできないのでしょうか。 >>112
できない。
仮に出来てしまったら
.a .b .c{}と
.a.b.c{}でぱっと見区別できなくなるだろ ありがとう。やっぱりないですか。
改行のエスケープかなにか方法がないかと思ったけど残念。 sassだと&でそれっぽいことができるんだな。ブレースなしで使えたらもっとよかったのに。 .a
.b
.c{}
.a
.b
.c{}
.a
.b
.c{}
↑これ半角スペースが隠れてるので全部意味違うけど、こんな事を許したらアカンだろ もし改行を許すならそれとわかるような仕様にすればいいだけで、>>116みたいな
アホな仕様にしなければならない理由はない。 半角スペースと改行は同じ「区切り文字」として認識される あのさあ、キミたちお盆やすみなのにコードのお話ですか… ORはカンマ演算子なのにANDは連接で表すという非対称感。CSS4でも特に改善はされないみたいね。 まあ俺らは趣味もコーディングだからなあ
仕事で書いてる時とはやる気やテンションがまったく違う >>116の半角スペースが消えてしまってるな
半角スペースを■とすると
.a
.b
.c{}
.a■
.b■
.c{}
.a\ｎ
.b■
.c{}
こう表したかった
パット見全部同じだが、全部意味が違うという >>125
どのレベルから教えてほしいの？
htmlとかcssって知ってる？ >>128
なるほど、理解できました
ありがとうございます >>114や>>115は案としてエスケープとか&とか挙げてるが、既存の仕様とバッティングする
アホな仕様を挙げているのは>>116だけ。
そのうえで「こんな事を許したらアカンだろ」って、なんてマッチポンプｗ バカ：チンコ丸出し街中歩くの法律で許しちゃダメだろ！
バカ：ﾎﾞﾛﾝｯ！
警察：ﾀｲｰﾎ
バカ：ほらな！
こういうこと？ >>134
だから流れ読めって。
改行できないんですか？質問だからできないって答えたうえで、
仮にできてしまったらこういうこと（既存の仕様とバッティングする）が起こるだろって
事を具体的に書いて見せてあげたのに、バカなの？？？？ 途中からかいつまんで見るのはいいけど、
そこだけ見て絡んでくるなよな～ >>112は .a.b を折り返して記述する方法がないかを訊いているだけだが、それを
.a
.b
と書きたいのだと捉えた>>116が短絡的なだけに見えるが。 Bracketsは画面広く使えて好きだわ。欠点はもっさりだけ。
初心者には、エクステンションいれまくらないとつかいものにならないVScodeよりおすすめ。 >>139
え？ごめん違うの？
じゃあ俺が間違ってたわ
ごめんな > 欠点はもっさりだけ
ゴミ箱ポイッ⌒ヾ( ﾟ⊿ﾟ) 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 >>144
extend使ってるんだからグループ化するのは当たり前
そうなることこそがextendの機能だよ
分けたいのならmixinを使う >>140
もっさりしすぎだよね。PCが重かったから確認したらcpu40%使用してた .hoge .foo.hage {}
と
.hoge.foo.hage{}
て、結果的に同じじゃないの？ 半角ぬけてた
.hoge .foo. hage {}
半角があっても改行しても関係ないのでは？ >>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> >>150
え？？？？
<div class="hoge foo hage"></div>
って.hoge.foo.hageって半角なしで書かなきゃいけないかったの？！
知らなかった
ありがとう一つ賢くなったよ ｃｓｓで
img {
pointer-events:none;
}
を指定してますが画像にリンクがつくページとつかぬページで別れてしまいます
これはなぜなのでしょうか？最近cssの最後にこの1文を加えただけなのですが… 別れるとは？
<img>
と
<a><img></a>
で振る舞いが違うってこと？
imgに pointer-events:none; したんなら同じだと思うが もはやココで聞くべき事なのかも分からないレベルですが教えて下され
アダルトサイトについてなんで、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』の
切り替えタブが出る物で、どうしたらそうなるのかを教えて欲しいです
分かる人いましたら宜しくです >>156
プレミアムの入会断ったらいきなり終わった >>156はプレミアム会員にならないと見れません
これはプレミアム会員にさせようという誘導です
みなさん開かないようにご注意ください >>157
>>158
ほんとうに失礼しました
プレ垢なら作成できるかと思って、拾ったプレ垢でログインしてました・・・
誘導とか勧誘では決してないです・・・すいませんでした
プレミアムじゃない無料のpornhub→ https://jp.pornhub.com
切り替えタブあり→ https://jp.pornhub.com/gif/24245281
切り替えタブなし→ https://jp.pornhub.com/gif/24245301
上記は無料垢の物です・・・
156をクリックしてしまった方々、本当にすみませんでした メモリを一番多く使ってるのが一番重いって事ですよね。
VS codeが一番なんですが何か設定がおかしい？
https://i.imgur.com/jcTsxv2.jpg 動作に関してはメモリ沢山使ってる分軽いと言えるのでは？ まず、実体が無いデータに対して「重い」とか「軽い」なんていう曖昧かつ不適切な表現をすること自体をやめたほうが良い。
>>164の書いている通り、メモリ上に展開してあれば一々ストレージにアクセスして読み出す、という手間が無くなるので「動作が速い」。
メモリにどのようなデータを保存して扱っているかはいるかはそのソフトウェアによるので、「AよりBの方がメモリ使用量が多いから遅い」などという話にはならない。 Win7から10にアプデしたらやたら重くなった
原因が色々ありすぎるけど何やっても解決しないから
クリーンインストールしたら超軽くなった。
ソフトの設定とかめんどくさいから上書きインストールしたくなるんだがいかんね。 >>156
埋め込みコードは、自分がエロサイトを作っている場合に、
自分のウェブページ内で、その動画を見る時のもの
つまり、Pornhub へ移動しないで、見れる
知らないけど、自分のウェブページのHTML 内に、
動画を見れる、<video> タグか何かを書くのだろ windows10、Firefox使用です
tweetdeckをサイドバーに表示して使用しようと思っています
ツイートする時にいちいちアイコンをクリックするのが面倒なのですが、かと言って入力欄を広げっぱなしにしているとタイムラインが見れません
というか正直いってメニューも邪魔です
そのため左端を少し開けておきそこにマウスホバーでメニューも含め開けるようにしたいです
(完全に好みですが入力欄のカラム？も細くしたいです、現在他のカラムの幅が200pxなので)
また横スクロールしなくても最低2垢分のTL&通知を常時追えるようにカラムを交互に上下に配置するようにもしたいです
bettertweetdeckのカスタムcssにそのまま貼り付けられるようにしていただけるとありがたいです
あとからカスタマイズできるように場所や値の説明もコメントアウトでつけて下さるとなおよしです
ずぶの素人ゆえこれらのことが全てcssで可能かどうかもわかりません
完全に丸投げですみません、よろしくお願いします >>168
どっかにお金払って依頼しなよ
自分で一切考えもせず、コード丸々ちょうだいとかさすがにないわ
自分で考えてこう書いたけどここがうまくいかないから教えてくれって質問ならみんな答える
ここはそういうスレ >>164
アプリの動作に関してはそうかもしれないけどPC自体には負担かかってるって事にはなる
メモリ全部使ったらPCの動作が重くなりアプリ自体も遅くなるわけだし http:をhttps:に変えても表示出来てるってことは
SSL/TLSで転送されたと言うことですか？ ぜったいにあーんするなよ？
熱々のおでんをぶちこまれるぞ！ >>166
オレも10にしたら無茶苦茶重くなったんで、
新しくパソコン買って、古いのにウブンツ入れたら軽くなった。
ただやっぱり、ウブンツじゃ仕事できないな。 レスポンシブに関する質問です。
先日初めて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に適用させたい内容を記述*/
}
レスポンシブにまつわる注意点やありがちミスなどあればご教示頂きたいです。
よろしくお願い致します。 >>179
合ってるよ。
あとは細かい事や効率化などは
実際やって不快感を感じたり、必要性を感じてから学んだほうが身につく。
気を付けることはandroidとiOSの両方で確認すること。
それと横向きでも確認すること。
それとPCはIE対応も見ておくこと。 日本語だけの文章と
英数字だけの文章とで
確認するのをお薦めするよ
改行位置とかフォントとかで
見栄えの違いが出てくると思う >>179
まさに、それをやってるのが、CSS フレームワーク！
Bootstrap 4 は、jQuery を使って、レスポンシブ対応してる 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> いやいやフレームワークなんて使わんでも
みんなレスポンシブくらいどのサイトも必須よ みなさんありがとうございます。
言われてみればSafariというか、iOSは未検証でしたね…
なんというかこう、隙を無くしてコーディングしたつもりが
実はこんな落ち度がありました、と後で発覚するのを未然に防ぎたかったのですが…都度修正ということになりそうです
>>183
そんな隠しコマンドが・・・！？Bracketsにもないか探します 独学をアピールする程度ののやつが
隙がないコーディングなんてできるわけないやろｗ 完璧主義者はコーダーに向いてないよなー
すべての環境で問題なく同じように見せるなんて
画像にする以外方法ないし なんで完璧主義者 = すべての環境で問題なく同じように見せる人
なんて思っちゃったの？
俺はすべての環境で、そのデバイスにあった表示で
見せるという、完璧主義者なんだけど？ >>178
個人的な趣味レベルなら良く勉強してると思う。
お金貰ってやってるなら自分なら客になりたくない。 >>189
IE6で崩れてるんだけどさあ、ちゃんとチェックしてんの？（怒） なんか書き込まない方がよかったみたいですね…
お邪魔しました、失礼致します。 >>192
ああ、携帯（スマホじゃない）時代に
ネスケもサポートしろだと言っていたやつがいたな
はやばやに、IEしかサポートしませんって言ってやったがｗ >>192
あほ？
今どきIE6とかこの仕事やめた方がいいよマジで 今思うと、当時最大シェアのIE6だけに対応して
他のブラウザを切り捨てたのは正解だった。
今もブラウザが違うだけで、少数シェアのブラウザは切り捨ててる。
同じChromeでも古いバージョンだって切り捨てだしな >>195
>>192は怒った客のふりしたネタだろ。これ読み取れないのはちょっとマズイぞ >>195
いや、
俺はすべての環境で、そのデバイスにあった表示で
見せるという、完璧主義者なんだけど？
って書いてるから。。。 >>197
だよな。
完璧主義者だか知らんが、シャレが通じない人ってたまにいるけど、
思考の切り替えとか柔軟さがないと生物としては優れてないという評価だわ 優れていない生物だと思うわ（ｷﾘｯ
とか言ってるやつが便所に落書きしてんだもんな
確かにそう思うわ 完璧主義者の奴とは仕事したくない
だいたいそういう奴はボトルネックになる
完璧度はせいぜい70～80%で十分 という奴に限って完成度は10%～１５％だったりする っていう奴に限って完璧主義者だったりする
完成度は足りてるのに、謎の係数を掛けて完成度を下方修正してくる どちらも求めらているクオリティの擦り合わせが出来てないだけだよ >>204
いや俺は利益主義
標準機能でバグが起こらない事を重視しています、IE6は料金3倍ですって営業すれば何の問題もない
ブラウザの差異を無理矢理埋め合わせるのはアホとしか言いようがない
印刷含めれば永久にどちらも立たずでpdfでも生成するしかなくなる 完璧度は70～80%で十分。ただし1ドットのズレは許さないし
IEでもChromeでも同じように表示されないといけない。
それぐらいやって80%。残りの20%はあとで修正依頼をする。 >>206
80%の中にIE6対応まで入るに決まってるだろ 擦り合わせができてないのは完璧主義者のほうだから。
なぜなら実質不可能な100%の完成度をもとめているから 80%の意味がわかってないようだが、俺の満足度やで？
これで完璧！ってのが100%で、もっとよくできるはずだけど
とりあえずコレで、っていうのが80%だ >>209
あのなぁ、すり合わせっていうのは両者がやるもんだ。
お前はただ単に、相手に責任を押し付けてるだけ
それを「すり合わせができてない」っていうんだよ。 完璧主義者と擦り合わせなんぞしたところでなんの意味もない
奴らは自らの完璧思考でその擦り合わせの情報を上書きしてくるから ほらなｗ すり合わせを拒否してるのは本当は誰かってのがわかるやろ？ｗ 明らかに「完璧主義者とすり合わせはしない」と拒否してるわけだがｗ IE6の検証環境ってどうしてんの？
VMwareとかじゃ実機と違うんでねーの？ IE6は大げさだけど
win7環境残してIEの8～10は起動できるようにはしてある マイクロソフトのブラウザテスト用公式仮想マシンイメージ使えばいいだけなのに >>220
こんな便利なものあったのか、thx
後生大事に残していたわ・・・ 重要なのは「完璧主義者が否か」ではなくて、「取捨選択」
「俺は完璧主義者ではないから、Firefoxしか対応しないぜ」といわれて、どれ程の人が納得するだろうか
(顧客の要望なら、仕方ない場面もあるだろうけどね) 最近完璧主義者という仮想敵を見つけた。
完璧主義者という敵は、なんと携帯サイトまで作るんだ VS codeで標準で使えるctrl+シフトキーでコードの予測が出来る機能はbracketでは何の拡張機能を入れれば出来るようになりますか？
例えばborder: と入力してctrl+シフトキーでsolidやinset、pxやem、#fffffffや#000000など予測が出る機能です >>220
これって結局、>>216で書いてるVMwareとかなのでは・・？ VScodeでセレクタやプロパティにマウスが触れるとヒントみたいなのが出てきてうっとおしいんだが
setting.jsonに "editor.hover": falseとか書いても消えないんだが方法わかる？ タイトルや「メニュー」「トップページ」の下半分にほんのり色が付いてるこれってどうやるの？
ソース見るとただの<h1>ですがうちで<h1>にしても文字が太く大きくなるだけです
https://i.imgur.com/kJq0DFS.jpg h1の親のdivにcssで背景画像貼ってある
ブラウザの開発ツールの使い方覚えましょう filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff, endColorstr=#eeeeee); 何でソースをコピーしてもならないんだろう 小難しい事すんな CSS 見出し 背景 グラデーション でググるとソース付の沢山出てくるよ cssってのは.cssに次々と足して行けばいいのか
超初心者ですまんな bg_title.pngっていう1*32pxの縦長の画像をrepeat-xで横に繰り返し描画してる感じっぽい。
.page_title {
background:#FFFFFF url(/design/default_white/images/bg_title.png) repeat-x left bottom;
}
詳しくないからよく知らんけどｗ 俺が見つめると女は皆ほんのり頬を赤くする。
なぜだろう？ 背景グラデーションタグと画像うｐはどっちがメジャーなんでしょうか？
小さいファイルとはいえ容量とか食うし通信量も若干増えるからタグでしょうか 比較的単純なグラデでいいならgradient
IE9以前くらいの古いブラウザに対応させたかったりcssでは表現できない物は画像 いや、>>229はCSSを知らないのにそんなこと書いてもわからないぞ
せめてh1にstyle属性をつけた状態で書いてあげないと h1にstyle付けたところでCSS知らない人間には伝わらないだろ CSS知ってる人間ならグラデなんてみんな知ってるだろ .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 */
} >>245
仕事にしてる人はここまでやる必要があるの？すげーわ >>226
VSCode の質問は、プログラム板のVSCode スレで、聞いてください！ >>245
こんなんしか書けないやつはもう辞めればいいのに
情けないなあ ねぇねぇ、A君、
ボクシングやってるんだってね？！すご～い
A「ああ、そうだね。別に凄くはないんだけどね・・。」
うそ？A君そうなんだ～？ちょっとさぉ、かっこよすぎじゃないのぉアハハ
へー、そうなんだ。A君スリムだけどなんか引き締まってるもんねぇ
B「へぇボクシングねぇ。俺は昔キックボクシングやってて、パンチもキックもできるけどね（キリッ」
↑
Aをダシにしないと自分を上げられない便乗男
それが>>249
女達一同「ふーん・・・そうなんだね」 スタイルを変えたい要素ひとつずつにclass名を与えるのと
隣接セレクタや子セレクタを多用して、なるべくclass名を付けない方法ではどちらが速いですか? >>252
相手が使ってるブラウザのバージョンで違います。
速くなったり遅くなったりします。バラバラです。 >>253
そんなに違いますかね
ちなみにMypalの現行バージョンではほとんど変わらないという結果になった
例えば、imgタグに隣接するしないでspanのスタイルを変えたいという時
img+span{}
span{}
とすると、キーセレクタspanを2回検索して時間は2倍かかると思っていたのが
imgタグに隣接するspanをclass=aとした時と、ほとんど変わらなかった
厳密に、class=aを付ける付けないでやると、付けない方が速かった
ただこれはコード1万行の文字数が減って軽くなった効果にすぎないだろうと思った はいだから、0.0000000000000001秒ぐらい違います。 実際の運用はCSSだけで考えないから
js考えると、必然的にクラス多様はNG idなんて使う機会ないわとか言ってる人がたまにいるけど
jsの仕組み理解してないんだろうな 正直jsよく知らんけどid使わないとなるとめっちゃ面倒そう
document.getElementsByClassName("hoge")[0]とかでやるってことでしょ？
自分なら配列の番号間違えてバグらせそうだわ idは禁止しているわ
メニューボタンはこんな感じ
$( '.menu_btn' ).on( 'click', function ( event ) {
event.stopPropagation();
event.preventDefault();
controller.toggle( 'page_navigation' );
});
一つしかないからID、とするのは分かるんだけど、
結局運用していく内に2つ3つと増えていくからIDにすると不便になるだけだ さすがにメニューボタンは増えなかったけど、googlemapは増えた いや、同じ挙動を割り当てたいならクラスでガバっと指定すりゃ良いけど、
ボタンだのは個別の動作割り当てることも多いんだから、
そういうのにはクラスじゃなくてID割り当てるべきじゃない？って話でしょ。
そういうのも無理やりクラス使う必要ある？ >>261
↓もうこの時点で失格だよ・・
$( '.menu_btn' )
使用するであろうセクションのidを指定してからfindなりfilterなりするのが正しい jsでドキュメント内をクラス名で全検索させてるんだから
そんなのと比べたらcssの書き方なんてハナクソレベルの差異だよ >>263
何が増えるか予想できないからIDを割り当てるべきではなく一括でclassでいいじゃんってなった
ボタンだけIDは気持ちは分かるが、じゃあヘッダーは、フッターは、と際限がない
元にheaderは増えた
>>264
個人サイトなら分かるが、現実はそのセクションが予想外の所で増える
最初から幾ら増えてもいいように作るべきという結論以外ない パフォーマンスより汎用性やメンテ性を重視するのは同意だよ。
まあ、速度の改善を求められたときにでも思い出してくれ。 まぁ今時は先頭の１つだけ欲しいならquerySelector使っちゃうし >>266
別に際限無い話ではない
ボタンに限らず「この要素のみの機能を実装をしたい」というときにIDを割り当てれば良いだけ
使いもしない不要なIDを各headerやfooterやsectionに付けろという話をしているのではない
個別の要素への機能の適用ならばidで呼んだほうが速い、
複数の要素への機能の適用ならclassの方が楽、
要は適材適所に必要な属性を付けましょうという話で、「idが要らない」とか「classの方が便利」っていうものではない。
盲目に「ID禁止」なんてやっても開発の幅を狭めてパフォーマンスを落とすだけ >>269
だから「この要素のみの機能を実装をしたい」が増えるんだって
これは企業の規模が大きくなった時に発生するもので、そこまで予期して作るもんでもない
idで指定することは将来的に開発効率を落とす事につながるだけ
ただページ内アンカー、あれだけはIDだ >>267
そうそう、ID指定よりclass指定はすごく速度が落ちる
これは悩ましい所 君らは、BEM とか、CSS の構造化を知らんのかw
この本を読んで、勉強しろw
現場のプロが本気で教える HTML/CSSデザイン講義 (Design & IDEA)、ヤフー、2016
MindBEMding による、CSS の構造化 BEMは超大規模な開発にはうってつけだけど普通の企業サイト程度だとめんどくさいだけだよ >>266
> 何が増えるか予想できないからIDを割り当てるべきではなく一括でclassでいいじゃんってなった
> ボタンだけIDは気持ちは分かるが、じゃあヘッダーは、フッターは、と際限がない
全部classでいいよ。ボタンも含めて。
ボタンもね。増えることがあるんだよ。例えばページが長くなったから
下にも同じボタンをつけようって。
JavaScriptも全部classで参照。そうすると要素が増えたり減ったりしてもエラーが出ない。 >>267
> まあ、速度の改善を求められたときにでも思い出してくれ。
速度の改善を求められるとき = 遅いと体感するとき に
体感する速度向上にはならないclassからIDへの変更を
思い出しても意味がない >>271
> そうそう、ID指定よりclass指定はすごく速度が落ちる
全く落ちない。速度は測ってみ。
10%落ちるとかいう意味がない数字ではなく、
具体的に、どれだけの数を使って何ミリ秒落ちるのか IDとクラス両方付けようという知能は無いんだろうな idがあると開発効率が落ちるとかどんな開発してんだろう >>280
「ページが長くなったから下にもボタンを付けちゃう」行き当たりばったり素人開発
まともな設計できんのが居ないんだろうな
あとはjQueryしか知らないのにjs語ってるとかもありそうだが 新人君にid触らせると面倒な事になるって意味ではclassで統一したいのは分かる >>281
意味不明ｗ
お前はHTMLページを書いた後修正せんのか？
あとからデザイン変えることがないのか？ 少し前のレス読めない馬鹿にはわからん話だろうな
そもそもデザインの話じゃねーから もしかしてコンテンツを変更して（ページが長くなって）も
デザインを見直すなんて絶対やらないとか言ってるのかな？
ならそれこそ完全に素人だが 保守でも同じことだ
idで破綻する開発なんてもんがあったらそもそも根本的に間違えてる だからいきあたりばったりにならないように保守性を考慮して設計したら
IDではなくclassを使うって話をみんなしてるんですよ
その程度のこと、わかりませんかね？ >>291
だから>>281の「行きあたりばったりでボタンが増えちゃうからid使えないの」っていう頭がお花畑の無設計素人開発の話やで たぶん静的なHTMLしか使わない開発で
JavaScriptもHTMLも一人が書いてる小規模な
ウェブサイトしかやったことがないんだと思う
動的HTMLなら状態によって要素が表示されたり消えたりするし
（例えばログインしてるかどうかで表示が変わる）
サーバーサイドとフロントエンドで担当が分かれているから
どちらの都合で変更しても問題ないように影響範囲を小さくするのは当たり前だから >>294
ID使っても保守性が落ちないような仕事しかしてないんでしょ？ ボタンの表示が増えたり減ったりするのはいきあたりばったりじゃなくて
そういう仕様だからなぁ。じゃあどうするかって言うとclassになるんだよ × そういう仕様だからなぁ。
○ そういう要望だからなぁ。 >>296
idごときで崩壊しちゃうレベルの設計の仕事しかしてないの？ >>300
だから最初から全部id振らないの
そういうものじゃなくて全部振らないの 全部classならidごときで崩壊することもないよｗ >>302
全てが動的な要素でも無いのに？
非効率だねぇ >>303
idあると保守できないんでしょう？
レベル低いねぇ >>304
idにすると何の効率が上がるの？
重要だからもう一回聞くね
idにすると何の効率が上がるの？ >>305
どちらが保守が容易かの話だからね
保守できるできないの話だと勘違いしてる時点で
ついてこれてない >>307
なんでjsの開発効率が変わるの？
idとclassで全く変わらないんだけど >>308
保守できないってことは容易もクソもないよね >>310
ん？ ID使うと保守できない
ならclassを使うべきという主張？ >>312
はっきりした。あんなコードしか書けないのが原因じゃん やっぱりjQuery使えない初心者さんってことかな？ >>314
何を勘違いしてるのか知らないが、書いたのは俺じゃないけどな
他人を馬鹿にするならお手本のコードでも書いてみてくれ
ちなみに>>260でも理解できるレベルで やっぱ化けの皮が剥がれたかｗ
古臭いjQuery頼りの雑魚かｗｗｗ
乙ｗｗ >>316
お手本？
> document.getElementsByClassName("hoge")[0]とかでやるってことでしょ？
↓ 普通はこうします。
$(".hoge") >>318
化けの皮ってｗ
本末転倒って言葉知ってる？
保守性を下げたのはあんたがjQueryを拒否したからだよ。
あんたが保守性を下げたの ドヤ顔でjQuery書いてるとか時代遅れも良いところだから黙ってたほうがいいと思うｗｗｗ ちなみに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% JavaScriptの世界を知らないなら黙ってればいいのにｗ そりゃ使われてるだろうよ
今まで無駄に多く使われてきたんだからｗｗ
+0.6％てｗｗｗｗｗｗｗｗｗｗ jQueryがなぜ今まで採用されていたのかとか理由もしらないで未だにかじりついてバカなコード書いてるんだろうなーｗｗ >>328
今まで無駄に多く使われてて飽和状態なのに
まだ増えてるって言うことが脅威なんだよ
他に+0.6%以上のものはBootstrapの+1.3%しかない >>320
> jQueryがなぜ今まで採用されていたのかとか理由もしらないで
> document.getElementsByClassName("hoge")[0]とかでやるってことでしょ？
これ↑がこう↓なるからだよ
> $(".hoge") getElementsByClassNameワロタ
いつの時代だよ
そんな脳だからjQuery使ってるのか Bootstrapはバージョンでガッツリ変わるのがダルい
中身のブラッシュアップだけしてくれれば良いのに 飽和状態なのか増えてるのかはっきりしようかｗｗｗｗ
日本語も怪しいねｗｗ >>331
やっぱりその程度の理解なんだなｗｗｗｗｗｗｗｗｗｗ 論破されるとjQueryを馬鹿にする
何故かこの流れ毎回見る >>332
じゃあ何を使うのって聞いていい？
それにあんたが答えたら
IDもclassもそれ使えばいいから、保守性変わらないじゃんｗ
って答えるよ。いいかい？ >>338
お前があってない。
お前は10年以上前の知識で語ろうとしてる。 >>331
見た瞬間間違ってる事に気づかないボンクラはもうコード書くな >>341
間違ってるって何が？
いや、間違ってるんだよね？
もっといい方法があるとかじゃなくて、
間違ってるんだよね？ $(".hoge")の為にjQueryｗｗｗｗｗｗ
+0.6%は最強ｗｗｗｗｗｗｗｗｗｗ >>343
お前もjQuery馬鹿にするなら間違いぐらい見抜いてそこを突けよ
どっちもゴミだわ
>>340
分からないから適当な事言って真意を引きずり出す話法とか古臭すぎるわとっとと死ねよカス ↓ 普通はこうします。
$(".hoge")
ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ >>345
> お前もjQuery馬鹿にするなら間違いぐらい見抜いてそこを突けよ
ことわる。
jQueryは馬鹿にするだけだｗｗｗｗｗ
バーカーバーカ、jQueyは終わるんだぃ。うわーん やっぱりclassに統一でいいんじゃね？
だって $(".hoge") に相当するjQueryを使わないコード
って言ったってたった数行程度でしょ？
そんなのidもclassも保守性変わらないじゃん JavaScript側はidでもclassでも
今は大差ないってことでOK？
jQueryを使わなくても$(".hoge")程度なら大差ないよね。 この程度でjQueryを使わないってなるなら
この程度でidやclassを使い分ける必要はない
って結論になるやろな JavaScriptにはクラスという概念はないんだよ。
例えばjQueryの$('.hoge')ってのはjQuery上の構文でしかなくてだね・・ 例えばランディングページに汎用的なコンバージョンボタンを複数設置する場合、
どんどん要素追加したとしてもそれぞれのボタンはユニークな識別子をつけるのが望ましい。
何故ならどのボタンがクリックされているのか、idをつけてないと計測できないからだ。
クラスしかつけてないのは、つまりちゃんユーザー動線を解析してない証拠でもある。 ↑ただし、ヤフーショッピングや楽天などシステムの仕様にクセや制限あったり
運用特性がある（超頻繁に拡張や編集が必要）のは除く。 αタグ内に画像と文字がはいってて、αタグにカーソルを合わせると画像のみ薄くなるようにするにはどうすればいいですか？ >>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);
} >>352
jQueryの構文じゃなくて単なるJavaScriptの関数呼び出しだよｗ
jQueryはJavaScriptの構文を拡張してるわけではない。
あとJavaScriptにクラスという概念はある
今その話に何の関係があるのか知らんが
>>354
読んだ。で何の関係が？ >>355
コンバージョンのためにJavaScriptコードを書き換えるのは間抜けだろう
理想は、コンバージョンのためのidを追加しても、
ウェブサイトの動作には一切変更がないのが望ましい >>359
そもそも、JavaScriptにクラスという概念は存在していません。
一般体なオブジェクト指向言語がクラスベースというものなのに対して、JavaScriptはプロトタイプベースというものだからです。
JavaScriptでは、クラスという概念がない代わりに、function(関数)を使ってクラスのようなものを作って対応していました。
しかしこの書き方はゴチャゴチャしがちで、わかりづらいことが大きな欠点です。
そんな中、ES2015(ES6)という最新のJavaScriptで、class構文が導入されたのです。(IE11以下未対応) >>359
jQueryのクラスセレクタはjsの関数なわけないだろ
具体的になんの関数だよ
裏でもっとめんどくさい処理してるわ
Sizzleでもな >>361
> 最新のJavaScriptで、class構文が導入されたのです。
だからクラスという概念ができました。
> jQueryのクラスセレクタはjsの関数なわけないだろ
関数だぞ $ 関数。jQueryが定義したJavaScriptの関数で構文じゃない
構文ってわかってるか？
> 裏でもっとめんどくさい処理してるわ
だからなんだよｗ お前が面倒くさいわけじゃないだろ。
今はjQueryで拡張されたセレクタ、jQuery特有もしくは :has擬似クラス等の
まだブラウザでサポートされてないセレクタ（現在策定中）を使ってない限り
面倒くさい処理はしていない >>352,361はとてつもない的外れなこと言ってるから黙ったほうが良い 話が一周してる
1. classに統一したほうがいい
→ idとclassに分けないと（jsが）面倒ですよ
2. jQuery使ってれば面倒じゃないですよ
→ jQueryは古いから使わない！だから面倒！
3. 自分で面倒にしてるだけやん。jQuery使えよ
→ たったこれだけのためにjQuery（笑）これだけならjsで書いても面倒じゃない！
4. jsが面倒じゃないって言いました？ならclassに統一したほうがいい
→ （idとclassに分けないと）jsが面倒って言ったのは・・・俺か！？ >>319
普通はquerySelectorAllを使います >>367
querySelectorAllを使うと、idとclassに分けなくて良くなりますよね？
だから面倒じゃないですよね？
そういう話をしてるんですが。
↓これはここで言った通りの展開（笑）
339 自分：Name_Not_Found[sage] 投稿日：2019/08/22(木) 07:50:06.67 ID:???
>>332
じゃあ何を使うのって聞いていい？
それにあんたが答えたら
IDもclassもそれ使えばいいから、保守性変わらないじゃんｗ
って答えるよ。いいかい？ jsなぁ
なんでgetElementBy～なんて長い名前にしたんだろうな
他になんぼでもいいようがあっただろうに >>369
JavaScript自体は別に長くないんだよ。
長いのはDOM API、言語じゃなくてブラウザという
実行環境で提供される、ブラウザ用のライブラリ
DOM APIはJavaScriptだけではなくJavaなどの他の言語も
念頭に置いていて、その流儀で名前もつけたからそうなった。
JavaのAPIは長いものばかりだからね。
じゃあなんでJavaはあんなに長いのかって話になるわけだけどｗ jQueryは古いから使わないのではなくて使うメリットがもう薄いんだよ
古臭いシステムの保守しかやったことない連中は知らんだろうが そりゃ保守なんだから古い物が中心だろう
安定稼働して内容もわかっていれば何の問題もない 最先端ですぐに陳腐化するライブラリとかアホな案件掴みたくないわ >>373
だから新しいプロジェクトではjQueryなんて採用しないっつー話だろ
お前の「安定稼働して内容も分かっているプロジェクト」の話をしてるんじゃないの
jQuery使えばidは要らないからjQueryをこれからも使えとかいうアホくさいこと考えてるバカには分からんか 新しいものを否定しているくせに
ES6前提（IE11以下未対応）の意味不明さ。
本当はES5まではクラスの概念が無かったことを知らなかったのがバレバレ。
無いものをあるように便利に書けるようにして、jsの処理が煩雑になりパフォーマンスが落ちるから
クラス多様はナンセンスなんだって言ってるのに。 >>376
お前がさっきから書いてる「クラス」とここで議論されている「クラス」は別物の話だぞ？ >>372
こうですか？
1. classに統一したほうがいい
→ idとclassに分けないと（jsが）面倒ですよ
2. jQuery使ってれば面倒じゃないですよ
→ jQueryは古いから使わない！だから面倒！
→ jQueryは古いから使わないのではなくて使うメリットがもう薄いんだよ！だから面倒！
4. 自分で面倒にしてるだけやん。面倒ってことは、メリットありますよね？ jQuery使えよ
→ たったこれだけのためにjQuery（笑）これだけならjsで書いても面倒じゃない！
5. jsが面倒じゃないって言いました？ならclassに統一したほうがいい
→ （idとclassに分けないと）jsが面倒って言ったのは・・・俺か！？ jQueryを使わないことが目的になってしまって、
面倒なことをどうやって解決しているかを
言えないんだよね。あーあ（苦笑） ここに来てまだ「面倒なことをどうやって解決しているのか」を書いてもらわないと分からないってやっぱやばいわｗｗ んで「面倒なことを解決した」ら
やっぱりclassに統一したほうがいいって話になるってのが
わかってないんだよな（苦笑）
もともとそういう話やで？
classに統一しろって言ってるのに、誰がどういう理由で
idとclassに分けないと面倒っていいだしたと思ってるんだ？ id使えない馬鹿は一生classで統一しとけよｗｗ CSSのセレクターの書き方で表示速度やパフォーマンスについて知りたい
↓
そもそもcssの書き方くらいじゃ差はほとんど出ない。
↓
それよりもjsの書き方の方が差が出る
例えば、jQueryのセレクタをクラス名始まりで使おうとしている人は
裏でどういう処理が行われるかわかってない
cssよりこっちのほうがよっぽど気にしたほうがいい。 話がループしてる感じだが、まあ議題としては意義があるし、まともな方だろ
どっちかが草生やしたり、煽り始めたらこの話題おしまいにしようぜ >>387
あほか。今はquerySelectorAllを使って解決じゃ
idとclassに分ける必要はない。 >>386
メンテナンス性の向上。
ウェブサイトっていうのは作ったら終わりじゃなくて
メンテナンスされ続ける。一つしか存在しないと思っていても
後の顧客からの要求で複数になったり、なくなったりすることがある。
idにしてしまうとその都度cssの書き換えが必要になるが、
classに統一しておけば要素が増えたり減ったりしても修正の必要がなくなる >>390
やっぱバカだな―お前ｗｗｗ
cssの書き換えとか言ってるけどcssでid指定なんて普通しねーよｗｗｗ
そんなことやってるから破綻してんだろｗｗｗ >>387
> 例えば、jQueryのセレクタをクラス名始まりで使おうとしている人は
> 裏でどういう処理が行われるかわかってない
まじそれな。上の方にもいたけど、未だにSizzleを使ってるとか言ってる
裏でどういう処理が行われるかわかってない。
querySelectorAllがあるブラウザではSizzleを使わずにquerySelectorAllを使ってる。
批判するなら、裏でどういう処理が行われるかちゃんと理解しろって言いたい。 >>391
> cssの書き換えとか言ってるけどcssでid指定なんて普通しねーよｗｗｗ
えぇ、ですからclassに統一ですよ。最初から言ってるでしょうに。 jQuery書いたら$(".hoge")で
cssでは#hogeとかやってるの想像したら恐ろしいな
論外だわ >>393 >>279
あのな、ほっんっとおおおおに基礎レベルの話やが、
・cssのセレクタ指定はクラス
・idはjsで使う
今はこれが基本やでｗ > ・idはjsで使う
jsでclassも使うでしょうに（笑）
統一しましょう。querySelectorAllがあるから
idでもclassでも大した差はないって言ったでしょうに あ、もしかして上で間違ってるって言ってた人
.hoge （hogeクラス）と意図的に書いているのに気づかず
#hoge って書きたかったんだって勘違いしてた？
よく読んだほうがいいよｗ >>396
jsでclass使うときは使えば良いよｗ
しかしcssでidを指定してスタイル適用とかありえないからｗｗ 「idにしてしまうとその都度cssの書き換えが必要」
こんなことが起こることがおかしい
cssでid使ってるからそんな書き換えが必要になる >>400
だから設計もクソもない行き当たりばったり開発なんだってｗｗｗｗ >>396
あほか
jsでid使うのは書き方どうこうではなく速度の話だよ
書き方なんかidでもclassでも大差変ないのは当たり前 cssのセレクタにタグやID使わないのなんて基本だわな
そんなのも理解してないレベルで
「id禁止で全部クラス、jQueryが解決」
とか低レベルな話していたのか・・・
呆れるわ そもそも速度の話だったのに
いつのまにか使いやすさの話に・・・ あとこのjQuery君
一つの要素にidかclassのどちらかしか付けられないと勘違いしてない？ cssでもidは普通に使うわ
cssファイルはほとんどが全ページに共通で読み込ませるから
例外処理や固有のデザイン処理をしたい時には、素直にｉd書いたほうが可読性はいいもん。 >>405
> 一つの要素にidかclassのどちらかしか付けられないと勘違いしてない？
IDはコンバージョンのためにつけるんだろう？ｗ
JavaScriptではclassだけ使えばいい。
そうすりゃあとからから複数になっても対応できる。 >>406
> 例外処理や固有のデザイン処理をしたい時には
それがいきあたりばったりだという。 >>406
あー俺が>>403で書いたのは
基本的にcssのセレクタはクラスを使用して
idやタグの指定は「極力使わない」って意味な
あんたの書いたようなケースも出てくるし
「cssからidやタグの指定を完全に無くす」のが目的ではないからな
分かりにくくてすまん >>403
> cssのセレクタにタグやID使わないのなんて基本だわな
だから最初からclassに統一しろって話をしていたじゃないですか？ >>404
> そもそも速度の話だったのに
だってidとclassで速度変わらねーしｗ >>403
> 「id禁止で全部クラス、jQueryが解決」
> とか低レベルな話していたのか・・・
今どきはjQuery使わないでquerySelectorAllで解決したそーですｗ
「id禁止で全部クラス、querySelectorAllが解決」 >>411
本当に馬鹿だなお前ｗｗｗｗ
cssには使わなくてもjsで使うっつーのｗｗｗ
アスペすぎるｗｗｗｗｗ >>414
> cssには使わなくてもjsで使うっつーのｗｗｗ
だからなんで使うんだよｗ
querySelectorAllで全部解決！
idでもclassでも保守性を変わらないんだからjsでidを使う理由がない！
（コンバージョンのために使えば良い） >>409
ほう？
例えば、構築1年後に新着情報欄のループの中で2019/7/1の2番目の投稿だけは重要項目なので
常時一番上に表示させておきたいって言われた時はどういう風にするの？ >>415
あｗｗｗ
すｗｗｗｗ
ぺｗｗｗｗｗ
速度の話はどこいっちゃったのかな？ｗｗｗｗ jQuery君はホームページ（）レベルのjsしか書いたことないんじゃない？
そのレベルじゃあ$(".hoge")になっちゃうよね >>418
速度なんて気にしないだろうしな
アホみたいな自己満長文書いて
「あっ下にもボタン付けよ、$(".hoge")っと」
とかやってんの想像すると笑うわ 飽和状態で勢いは+0.6%！
やっぱjQuery！ jQuery君は夏休みの宿題でホームページ作ってるんかな これ見りゃidで書くべきなのがわかる
https://blog.takakd.com/articles/20171217011236/
cssと違い、jQueryはセレクタ始まりでeachしたりloopしたりの乗算で繰り返し処理をすることを前提に考えないといけないので
コンマレベルでも最善を選択すべき。 >>416
> 例えば、構築1年後に新着情報欄のループの中で2019/7/1の2番目の投稿だけは重要項目なので
> 常時一番上に表示させておきたいって言われた時はどういう風にするの？
CSSじゃなくてJavaScriptでやるって話だよね？ループって言ってるし。
.sticky とかいうクラスをつけて、ループの前に取得するとか
ループ表示してから引き上げればいいんじゃねーの？
idでやる場合と何も変わらないんだけど
なにか不都合でもあるの？ >>424
速度関係ないホームページ（）しか作らないだろうから関係ないよ >>419
> 「あっ下にもボタン付けよ、$(".hoge")っと」
> とかやってんの想像すると笑うわ
今はquerySelectorAllで全部解決なににな！ >>425
何も変わらないとか言ってるけど速度は変わるが？ｗｗ >>428
ちょっと君黙っていて。
速度以外になにか言いたかったから、
あんな具体的な例を出してるはずだから >>425
ループなんてどのプログラム・スクリプト言語でも全部あるだろ。
例えが悪かったが、一意な処理でもクラス使うって事か。
むしろその理由がわからん。
知らぬところで使われてて、cssを編集したら気づかぬうちに他箇所で影響でるかもしれんじゃん。
どのクラスがどのページのどこで使われてるかすべて把握してない人が触ったらどうすんの？ こんなことやってるうちにさらに1年後には意味不明なクラスだらけになって崩壊してんだろうなー そして$(".hoge")とquerySelectorAllはどんどん低速になっていくのであった・・・
----- 完 ----- section1→背景画像はimage1.pngを使用
section2→背景画像はimage2.pngを使用
section3→背景画像はimage3.pngを使用
とか
トップページだけはサイドバー無くすとかそういうのも
クラスで書くの？
むしろそれ不自然じゃね？ >>424のURLに書いている通り、
結局、全体バランスを考えてこういう感じになるはずなのに
> 全てにidを振ればよいですが、保守を考えると作業負担が大きそう。
> 基本は5.や6.を使用して、jQueryオブジェクトで絞り込む時は10.にしようと思います。
クラスだけに固執するのはおかしいだろ >>434
$(".hoge")がすべてを解決してくれるのでクラスだけにしましょう！
しか言わない壊れたラジオになるだけだと思うよ 見直すと>>269でとっくに答えが出てるけどjQuery君には分からなかったんだろうなぁ まあ、ループ=javascriptって言ってる時点でお察しだな
たぶんこの人はphpはおろか、WordPressすら記述経験がないとみた。
たぶんbootstrapに毒されてるんだと思う。
あれは汎用クラスだけで全部作るからなあ。 久々に盛り上がったな（質問者そっちのけで）
まあ昔いたような人格が変なヤツとかじゃないし、言いたい事も理解できるし、
主題から話そらさないし、スキルが低すぎるわけでもないから健全な討論だったと思うよ >>430
> 知らぬところで使われてて
いきあたりばったりやなｗ >>438
今さぁ、JavaScriptの話してんの。関係ない人は参加しないで >>430
> むしろその理由がわからん。
お前の例からわかるだろｗ
> 例えば、構築1年後に新着情報欄のループの中で2019/7/1の2番目の投稿だけは重要項目なので
> 常時一番上に表示させておきたい
って言われた後の更に1ヶ月後に、追加で2019/8/1の5番目の投稿も重要項目なので
2019/7/1の次に表示させておきたい
ってなったとき、ID使ってると困るやろ
お前が考えた「ありえそうな変更」がさらにもう一つ追加されただけだから「ありえそうだろ？」 >>425は、こういうレスが返ってくることを想定して
複数あってもいいような書き方をしてます（笑）
↓これな
> .sticky とかいうクラスをつけて、ループの前に取得するとか
> ループ表示してから引き上げればいいんじゃねーの？ その問題に対処するにしても
.sticky2(仮)みたいなバカなクラスを増やすよりは素直にID振ったほうが分かりやすいし速いと思うよ >>444
お前 .sticky クラスを 複数の要素につけるって発想持ってないの？ >>445
それじゃあどっちらも.stickyなんだから上下が決められないじゃん
さらにもう1つ増えたらどうすんの？ｗ >>446
> さらにもう1つ増えたらどうすんの？ｗ
こっちが聞きたいわｗ
さらにもう1つって増えるたびに、JavaScriptを書き換えるのか？
それがメンテナンス性が低いってことやで > それじゃあどっちらも.stickyなんだから上下が決められないじゃん
出た順 or 逆順。もしくはセレクタに書いた順
まあいずれにしろ、classで複数あることを想定してるので修正は楽やな
最初からclassにしてるからね。
あ、querySelectorAllで全部解決っす！ 結局どっちも書きかえてる件ｗｗｗ
メンテナンス性ｗｗｗｗ 「重要なお知らせ」が複数になる可能性があるなら
そもそも「普通のお知らせの一番上」に来るような設計や改変をすべきじゃない
idとかclassとかそういう以前の問題
「重要なお知らせ」が必要になった時点でid1個割り当ててちょろまかすような修正で済まさないこと
ここ本当にレベル低いスレだな >>452
なあgoogleのページ、ソースみるとid多様してるんだけどどう思う？
本当にレベル低いよな？ >>451
まともなサイトならidは使わないなんて馬鹿なことやってるとこの方が少ないよねｗ すべきじゃないとか言ってるけど
構築1年後にクライアントがそうしたいって言ってるんだから
まずはそうしてあげようよ。 >>455
クライアントの希望に対して全く意見や提案ができない環境でしか仕事してないんだな >>452
「単一責任の原則」なんて言ってもこいつらはただのバカコーダーだから分からんぞｗｗｗ >>456
意見や提案ができない環境じゃなくて
意見や提案を生む脳みそがないのｗｗｗｗｗｗ
かわいそうだよねｗ >>456
営業の基本は聞き上手になること。
まずは相手の要望を聞いてあげないとこちらの提案は刺さらない。
だから「まずはそうしてあげようよ。」と書いた。
つーか、実際に一番上にサクッと表示しておしまいだわ。
レスポンシブだし急ぎだし、それが一番良いと思ったからね。 それと自演しなくていいよバレバレだから。
ちなみにこっちは自演じゃない。
こっちが何人とか気にするな。 >>460
草生やし始めたね
ギブアップか？
つーか新規営業したことあるの？？
基本中の基本なんだが。 辛くなっちゃって等々敗北宣言（自演認定）ｗｗｗｗｗｗｗｗ >>463
営業さん大変だねｗｗｗｗ
自分エンジニアなんで営業なんて無いんですわｗｗｗｗｗｗｗｗｗｗｗ 草生やし始めたとか書いてるけどかなり前からいるじゃん 営業さん(jQuery君)はついに論点ずらししかできなくなっちゃったね >>465
やはり経験ないんだな。すぐわかるわ。
なのに経験者に向かって提案の事語っちゃってどうするの？
恥ずかしくないの？
草はやすのは敗北宣言な ギブアップか？ｗｗｗｗｗｗｗｗｗｗｗｗｗ
$(".hoge")ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ >>468
エンジニアとしてクライアントと関わったことないんだな
そりゃ設計もしたことないわけだ
クライアントと話するのは営業だけじゃない 営業の経験があるとクラスだけ使うようになるのかすごいな >>472
それしか使えない、の間違いだろｗｗｗｗｗ
久々にこんな低レベルのやつ見たわｗｗｗｗ >>470
phpやWordPressの記述経験も怪しいのに
エンジニアですか？
まさか営業経験ある俺にエンジニアとしての知識と経験で負けちゃうような事は
さすがにないとは思うけど、
例えばクラスだけで構成されてる有名企業のサイトを教えてくれないか？ >>474
phpやWordPressの前に君はもう少し文章を読めるようになったほうが良い
俺は「クラスだけで構成されているサイトがあるなんて一言も書いていない」
idとクラスを適宜使い分けろと言っている $(".hoge")がすべて解決ｗｗｗｗｗｗｗｗｗｗｗｗｗｗ こういう営業が無茶振りな仕事請け負ってくるんだな
というのがよくわかる一コマでした >>479
php書いてるだけでもこの営業はマシだろ 無茶ぶりかな？
自分で作ったサイトってのもあるけど30分以内で終わらせたわ。
様々なケースを想定して汎用クラスにする事もあるけど
そこに時間かけるべきじゃやないケースだったし。 >>480
速度以外にも正しく適用してる分には可読性も増す ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう $(".hoge")はすべて解決するので覚えておいて損は無いです！ ここまでidとクラスを使い分けろに
根拠が一つも出てない件について >>487
ゲームの上級者は1フレームの争いをしてるらしいが、
それが1秒間60フレームで、1/60 = 16.7ms
つまり15msの違いはわからないと言っていいだろう。
この15msの差が生まれるためには、
idだと何個で、classだと何個なのか？
そこまで計算して、根拠が出てるって言えるんだよ。 >>488
上の方に書いてあるだろ
>>424より、
idだと28846個、classだと8241個だよ
1ページの間にこれだけ含まれてると
ページの表示が15ms遅くなる。
普通のページがどれだけ含まれてるか知らんが やっぱclass統一教会の信者はバカなんかな
15msの差なんてjsを実行する環境によっても変わるだろ
今はスマートフォンの環境にも対応するのが当たり前なんだから、少し古いスマホも考慮して速度設計するんだよ。
物知らずにバカなこと書くのも大概にしろ 少し古いスマホを考慮すると、classの数はさらにへるで？
ページサイズを減らすわけだから ちなみにどっから持ってきたかは知らないが、何故60fpsが人間の認識の限界だっていう根拠があるんだ？
ゲーマーは120Hzや240Hzのモニタを使うこともあるし、「60Hzとはかなり変わる」と答えるぞ。
こんなもん根拠にしてたら8msや4ms以内に収めないといけないなｗ >>489は間違い。
コードを見る限りclassが多いと表示が遅くなるという話じゃなくて
なんらかのDOM操作をするときにidやclassを検索する速度だ。
言い換えると$(selector)の発行回数。
ページを表示したときに、idだと28846回、classだと8241回
$(selector)を発行したら15ms遅くなる
ページ表示時の$(selector)の発行回数なんて多くても十数回程度だろう >>492
> ゲーマーは120Hzや240Hzのモニタを使うこともあるし
使うのと、目で見てわかる判別できるかどうかは話が別だろう
例えばテレビは30フレームだし、映画なんか24フレームだ
テレビや映画に不満がある人っているの？ >>494
やっぱり馬鹿なんだな―お前
ゲームと映画やテレビでは全然描画の仕組みが違うっつーの 人間が「連続した映像である」と認識できる仕組みがテレビや映画にはあるから24や30fpsで済んでいるが、
ゲームの場合は「細かく撮影したスクリーンショット」なんだよ。パラパラ漫画と同じ。
そういうものを滑らかな連続した映像に見せようとすると60fpsや120fps必要になるんだよ。
だからそもそもjsの処理速度とか瞬間的な評価をするための引き合いに「映像」を出してくること自体がずれてると思う。 >>495
> ゲームと映画やテレビでは全然描画の仕組みが違うっつーの
もう地デジとフルHDになってから随分立つけど？
4Kとか8Kとか
ぜんぜん違うと知っているなら、テレビがどうなっているのか説明してみせなさいｗ > 人間が「連続した映像である」と認識できる仕組みがテレビや映画にはあるから24や30fpsで済んでいるが、
> ゲームの場合は「細かく撮影したスクリーンショット」なんだよ。パラパラ漫画と同じ。
>
> そういうものを滑らかな連続した映像に見せようとすると60fpsや120fps必要になるんだよ。
ふむ？そいで、テレビにつないでるプレステはフレーム表示なん？ｗ ふむ？そいで、テレビにつないでるプレステは何フレーム表示なん？ｗ 説明して見せなさいｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ >>500
は？60pか59iだろ？聞く必要ある？ > 滑らかな連続した映像に見せようとすると60fpsや120fps
結局60フレームで滑らかな連続した映像に見えるってことじゃんｗ
つまりそれが、16.7msやで？
これ以上早くしても人間の目が追いつけないよｗ
ってか、動画見てるわけじゃないんだしさ >>502
いままで60フレームの話してましたよね？
やっぱり60フレームで十分なんじゃないですかｗ
> ゲームの上級者は1フレームの争いをしてるらしいが、
> それが1秒間60フレームで、1/60 = 16.7ms
> つまり15msの違いはわからないと言っていいだろう。 >>503
だからさ、細切れのゲームの映像と、カメラで撮影された映像や編集された24fpsでは全く物が違うの。
まぁバカには分からんよな。 >>504
なんでプレステを引き合いに出してくるの？
だから59iや60pと答えてるまでなんだが。
pcゲーマーは120や240がゴロゴロいるぞ > pcゲーマーは120や240がゴロゴロいるぞ
ゴロゴロいるのと知覚できてるのは話が違うって言ってる意味分かんない？ｗ >>507
知覚できてるからわざわざ高い金払って高い高リフレッシュレートのモニタ買うんやで ちなみにリフレッシュレートの意味ではいまだにブラウン管を惜しむゲーマーもいるからな どーせ1ページのダウンロードが120FPSの1フレームで
終わるわけないんだから、そんなの気にしてもいみねーよ
ばかだなぁ はい、知覚できるかできないかっていう馬鹿な議論を吹っかけておいて負けるとこれｗｗｗ
よっわｗｗｗｗｗｗｗｗ >>512
せめてゲーミングモニタの一つでも買ってからもの言ってくれ
すでに買ってるなら設定を見直すか眼科に行ってくれ ゲームで15msを引き合いに出しておきながらゲームとテレビの違いも分からない馬鹿ｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ 話を120FPSの1フレームを近くできるかどうかにすり替わっているが、
本質は120FPSの1フレーム以下で処理できてしっまうんだから
jQueryでも差がわからんって話だから 挙句の果てに60ｆｐｓ以上は意味が無いとｗｗｗｗｗｗｗｗｗｗｗ >>513
ゲーミングモニタでウェブサイトを見て
120FPSだと何がどう変わって見えるの？
クリックした後のページの表示の仕方がなめらかだとか？ >>516
でも確かにウェブページの表示で60fps以上は意味ないんじゃね？ ちなみに120fpsの時代はもう古いからｗｗ
今あるモニタの240Hzを最高点にしようよｗｗｗｗ
id禁止のclassのみで4msに収まってるなら良いんじゃない？ｗｗｗ
そりゃホームページ（）なら収まるだろうねｗｗｗｗｗ まったくだ。15msは十分短い時間だっていう例なのにわかってないな
15msで十分処理できるならjQueryでいいだろ・・・ 速度の観点でidとclassを使い分ける必要があるのは
idやclassの数が数万個と数千個とかかある場合でしょ？ 15msならね
でも4msに基準が変わったのでｗｗｗｗｗｗｗｗｗｗ >>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検索が必要 2197回ものjQuery DOM検索っていうのは$(selector)の呼び出し回数ね
DOM要素の数じゃないから やっぱバカには話通じないなー
class統一教会がゲームの60fps、つまり15msを基準に使用とか言い出したんだろ？
でもゲームも今は求められる基準は240fps、4msってのもあるんだからこっちでいいじゃん、という話。
さっきも言ったが、今はスマホが当たり前の時代なんだから、
少し古いスマホにも合わせた速度設計が必要だろうって話しなわけ。
つまりどんなサイトなのかは置いといて、このバカが言い出したゲーマーを基準にするとなると、
「少し古いスマホで実行しても4ms以内で処理を終えるjs」が書けないとダメっつーこと。
class統一教会の信者とゲーマーは大変だねーｗｗｗ >>528
> 少し古いスマホにも合わせた速度設計が必要だろうって話しなわけ。
じゃああなたは少し古いスマホはPCよりどれくらい遅いと思いますか？ JavaScriptは2197回のDOM検索してるだけじゃなくて他の処理もあるだろ…
他の処理も含めて色々やるのだからそれを考慮せずにクラスだけで良いという話にはならない… >>529
ほんっとバカだなーｗｗｗｗｗｗ
どんなPCと比較すんの？ｗｗｗｗｗｗｗｗｗ html/cssの構造上、idからclassになることはあるかもしれないが、classからidになることはほぼ無いんだから、
jsの速度を確保するという意味ではidで呼べるものは呼んで、どうしても呼べないものはclassで呼ぶ、というだけの話じゃないの？
最初から全てclassにしてしまっては速度の確保は難しいね。（後からいちいちidに置き換えていくなら別だけど） >>533
idからクラスになるのもおかしいっつーのｗｗ
そんなガバい設計してるからid恐怖症になってclass統一教会になんのｗｗｗｗｗｗ >>534
セレクタがidからclassに置き換えられることが無いってどういう設計なの？ 統一教会では$(".hoge")がすべて解決しますｗｗｗｗｗｗｗｗｗｗｗｗｗｗ >>534
cssやjsのセレクタがidからclassに変更される事が無い設計なんて存在するの？ >>537
最初から全てclassにすれば変更されることが無いよ >>538
そんなトンチ話をしているのではなくて、
速度の意味でidを使う必要があるようなプロジェクトでも、
idからclassに変更する必要が無い設計なんて存在するのか、
という話をしているのです。 >>539
トンチ話じゃなくて実際そうでしょう
速度がどうのこうのアホみたいにそれしか書けない人もいますが
クラスでも十分にはやいです class統一教会は会話ができませんｗｗｗｗｗｗｗｗｗｗｗｗｗ >>540
だから、
・idが必要な場面もある
・充分に速いと言っても古い環境を考慮しなければならない場合もある
という話をしているので、何でもかんでもclassだけで良い、とはなりません。
しかし場合によってはidで指定していたものをclassに変更せざるを得ないことがありますよね？
っていう質問をしているのです。 classだけで良いって書いた物だけど、まだやっててわらった
俺はそっちが良いって言うだけで、
ノータイムで適切に使い分けできるならidあってもいいんじゃないか？
俺は使い分ける意味はないと思うし統一した方が早いけど、使い分ける方が早い人もいるのだろう 開き直りだしたｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ >>544=545
という自演荒らしだから絶対にIDは出さないぞ $(".hoge")はさすがにどうかと思う
hogeだと何の意味も持たないのでなんのためのclassかがわからない
他人が見てもちろんわからないし、作った本人ですら時間が経つとなんだったのかわからなくなるも思う
ちゃんとした意味を持ったclass名にすべき まだ伸びてたかｗ
とこでクラスだけで構成されている有名サイトって具体例ないの？
bootstrap以外で。 JavaScriptではdata-*を使うぼく
高みの見物 HTML側を常に自由に弄れる程度の規模なそれでいいけどね
カスタムデータ属性なんてそれこそ汎用性落ちるじゃん HTML側の編集がjsフレームワークでも何でもよくて自由に書けるなら
それこそjQuery不要でReactとかVue.jsでゴリゴリ書けばいい話になるから、
話の方向がずれるな ボタンのラベルにアイコンを表示するのに、HTMLに直接書くかCSSで追加するか迷う。 その辺はもうどっちでもいいでしょ
font-awesomeだってあんなクラス名にしたらもう実質HTML側に記述してるようなもんだよ。 <a href＝″toTop″>ページTOPへ</a>
みたいなコード書いたんですけど、スムーススクロールしながらTOPに戻るようにするにはどうすればよいでしょうか？
現状はボタンをクリックすると一瞬でTOPにもどります。 誤 <a href＝″toTop″>ページTOPへ</a>
正 <a href＝″#top″>ページTOPへ</a> jQueryは使いたくないです。
Reactでスムーススクロールする方法はないですか？ >>566
jsじゃなくcssのanimationで指定した方がきれいになる これじゃだめ？
body {
scroll-behavior: smooth;
} > IEとSafariが対応していないので、常用はまだ無理ですね…
> ブラウザの対応状況が変わるまでは、素直にjQueryに頼ったほうが良さそうです。 Safariなんて弱小ブラウザ切り捨てればいいやんｗ サポート率75%かぁ
まぁレイアウト崩れるとかじゃないんだから妥協できるなら良いんじゃない 今ってウェブの原始時代だよね…
あれには対応、これには未対応とか未来ではありえないと思うわ
今の俺たちは未来人からしたら棍棒振り回してマンモスを追いかける原始人だよ そんなのは人類史上ではいつもいつもそうなんだからそれでいいの
大所に立って偉ぶりたいのは分かるけど人類はいつもそう
文句ばかりつけるひとより一歩一歩確かに歩みを進めるひとが偉いのよ いまがWebの原始時代とかホントのWeb原始時代を知らんひとの戯言だわん
この20年でどれだけ進歩したか想像の枠外なんだろうなぁ 未来人A「WEB原始時代(1990年代～2040年代)の旧人たちが狭議的な発言してる笑」
未来人B「シンギュラリティを迎えてないんだから視野が狭いのは仕方ないよ笑」
未来人C「笑」 >>448
> あ、querySelectorAllで全部解決っす！
#a,#b で複数指定出来るし、属性でも複数指定出来るし、classに拘る必要はないね 数十年後にこのスレ見られることがあると思うと不思議な嬉しさがある >>577
> #a,#b で複数指定出来るし、属性でも複数指定出来るし、classに拘る必要はないね
うん。そうすると、idの方がJavaScriptが簡単！ってことにはならないわけで、
やっぱり全部classでよくね？ 2011-12-01 の記事を持ち出されましても・・・ > Sizzleとは
> SizzleとはもともとquerySelectorAllがサポートされないブラウザ用にjQuery内部で使用されていた
> セレクタAPIを切り出したもので、CSSセレクタを受け取ってそれに一致する要素を返すライブラリです。
Sizzleが作られたときは、”すべての"ブラウザでquerySelectorAllがサポートされてなかったんですが？
むしろjQueryでその有効性が認められたから、あとからブラウザがサポートした機能なわけで >>580
セレクタ文字列にはclass以外も指定出来るよね？ classもできるしjQuery特有の擬似クラスなんかも使えますよ
それどころかセレクタ文字列じゃなくて、DOM要素も指定できるし
DOM要素の配列にまで対応してます。 idを使うにしてもJavaScriptから
その要素が一つだけしか存在しない または 必ず一つ存在する
なんて前提にはしないな。 idが2つある場合、jsで2つめを取得することは出来るんでしょうか？ idを使わずに取得すれば出来るんじゃね？
まあ最初からid使うなって話だし
俺は使わないが IDを使わないとJavaScriptが簡単！とかいうレベルの技術力なら基礎からやり直したほうが良い。
設計しろとまではいわないがHTML/CSS、jsの構造を決めてから書き始める習慣をつけるべき。
それすらできないならクラスだけ使っていても結局後が悲惨なことになる。 >>591
変化に耐えられるようにするのが設計ってもんだよ
将来のことなんて誰にもわからないんだから余計な前提を作ってはいけない
構造は細かいパーツの組み合わせにするべきで
全体を決めてしまうと変化に耐えられなくなる。 >>589
あれこれわからんｗ
前提がアホすぎて考えたこともなかった >>592
＞細かいパーツの組み合わせにするべき
べき、とかじゃなくてそれを構造っていうんだよ。
何の仕組みも組み合わせも無いものに対して「構造」なんていう表現はほぼ使わない。
「構造を決める」っていうのは、拡張性が無い決め打ちのひと固まりを作る、という意味ではない。 idを使うと決め打ちになってしまう
そういうのを避けろということ
細かいパーツになっていれば、
同じパーツを1ページに複数置くことが出来る >>595は
>>433とかもclassでやってんの？ >>597
JavaScriptの話やで？
わかってるのか？
なんでもclassを使うよりもidを使うほうが楽らしい
俺に言わせればどちらも変わらないんだが、
「idの方が楽」というのなら、classの場合とは違うコードを書いてるわけで
それはid前提のコードを書いてるってことだろう classだけで統一しちゃおう！ってのがそもそも"決め打ち"なんだよなぁｗ >>598
お前は>>259あたりからよーく読み直せ
その辺りからこのクラスかIDか議論始まってるから
「苦か楽か」なんていう基準の話じゃないのが理解できなかったらもう書くのやめたほうが良い 読み直したが結果は一緒だ（あーだるいｗ）
なにか言いたいことが有るなら、自分で言え >>601
言いたいことは書いてあるが読めないのか？ え、class統一教会の人は「classだけだと書くのが楽」スタンスに移行したの？ｗｗ まあ、そうなんだからそうなんだろうな、つまりはそうだからそうなんだろう つーか本当にidって不要なら
誰も使わなくなるんじゃいのけ？ >>589って本当にどうやるの？
IDが2つあるって設計ミスだけど、実際発生すると取得できないの？ >>607
どういう方法を使うかで結果がかわるだけ。
例えばjQueryなら、1番目のidだけが対象と認識され、2番目以降は認識されない。
同じ名前のidの二番目を取得したいなら
$('#hoge:nth-child(2)')などとcss派生セレクタでやれば取得できる。
$('#hoge').eq(1)なだとjQueryの関数だと取得できない。 まあjsの質問はスレチだな。
jsのスレ行けばマニアみたいな詳しい人がわんさかいるから
そこで怒られてくるのもいい経験だ 今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」 まぁ結局そこに直結するんだけどな
「idってどこに付ければ良いですか？」
「classってどのように使えば良いですか？」
楽するためにjsを分離して考えたいのだろうけど、それこそ「構造」なので、
フロントエンド(HTML/CSS/js)くらいは理解してる人間が質問に答えてくださいね♪ cssで変数も関数も使えるようになりそうだし
Sassもいずれ不要になるんだろうね。
利用者が不便に感じ、便利ツールやフレームワークが先行してから
ネイティブが真似して遅れながら進化してくwebの流れみてると
どこで飛び乗ってどこで捨てるかの見極めってほんと大事だと思うわ。 >>613
> 「idってどこに付ければ良いですか？」
> 「classってどのように使えば良いですか？」
その答えとして、1個しか無い場合はidです。
ってやるからだめなんだよね
増えたときに困るから
idで実現できることは、classを使っても実現できるわけで、
そう考えるとJavaScriptでidを使うメリットはない >>614
> cssで変数も関数も使えるようになりそうだし
> Sassもいずれ不要になるんだろうね。
sassで一番重要なのは、変数でも関数でもなくて
ネストできるってことだぞ これからは○○だ → 消える
○○は不要になる → 生き残る
いつもこんな感じｗ >>615
>.増えたときに困るから
なんか変な理屈だな。
最初に「1個しかない」と設計したものが勝手に増えるわけはないんだから、
それは困るような設計変更をしたってことだろう。 >>592
セレクタなら「idもclassも属性も指定できる」のに、classに限定するとか、頭堅いよ？ >>618
1個しかない設計ってどういう意味？
1個しかない前提の設計というのならわかるけど
「1個しかない設計」という言葉の意味がわからん。 >>619
JavaScriptの話だよ。
getElementByIdとかを使わないってこと、
idに頼ったコードは書かないということだよ。
idに頼ったコードは書かないので、
「idを使ったほうがJavaScriptは楽になる」という主張は
なりたたないという話をしている。 >>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]とかでやるってことでしょ？
自分なら配列の番号間違えてバグらせそうだわ 今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」 >>623
そんな前のレスから一々話蒸し返してるの？ >>106
1ようそ1クラスみたいな構造は?
例: <span class="16pt nowrap redfont"> >>621
こっちもJvaScriptの話
querySelectorAllとidは併用可 だからquerySelectorAllを使うなら
idに依存してないということで、
idの方が簡単ことにはならんだろって話 class統一教会は悔しくてたまらないそうですｗｗｗｗｗｗｗｗｗｗｗｗ >>628
idの方が簡単なんて話は「俺は」してない
俺「idもclassも自由に使え」
お前「classだけを使え」 今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」 今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」 今一度ここのスレタイ貼っておく
「HTML/CSS のどんな質問にも優しく答えるｽﾚ 40 」 class統一教会の人はjsスレに言ったら２秒で論破されそう じゃあ2秒で論破されれば俺の負け
2秒で論破できなければ俺の勝ちということで >>620
たしかに「1個しかない設計」だと日本語として不自然な気がするが、そもそもそんなこと書いてないのだが。 新たな議題を投下
テーマ：数字は半角がよいか、全角がよいか。
入力フォームで住所の番地の数字を全角数字で入力しろというサイトと
が結構多いのは何故？（大手でも）
またフォームではなく文中の数字を全角数字にしたがるクライアントが多い。
理由は半角だと数字部分が目立たないからだという。
大手サイトになるとサイト内の表記揺れは必ず問題視され、修正するハメになるので、
一部を全角数字にするということは、サイト内の数字を全て全角数字に統一する覚悟が必要になる。
しかし全角数字にするということは、cssやプログラムで制御（数値ではなく文字列としてしか）できなくなる。
個人的には全角数字をこの世から消したい。 ここは討論するスレじゃない
やりたきゃ別スレを立ててやれ HTMLおよびCSSの技術的な質問とそれに対する回答をするスレ 本当にスレタイが何回貼られても分からないバカっているんだな >>635
3回書けば、説得力が3倍になるわけではないんだがね
純粋に、うざいだけ id排除主義者もうざいが、タイトル連呼する奴もうざい
無駄なことに労力使うだけで無意味 隣あった要素の高さ揃えるのには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では無理ですか？ 質問と関係ないけど全部divなのが気になっちゃうｗ >>656
>>657
ありがとうございます。
書かれてある内容はすべて理解しています。
やっぱりflexboxでは無理なんですね。
flexboxにこだわらなくともcssで実現できればいいのですが…
>>658
実際にコーディングする時はsectionとかfigureとか使ってますがここに書くのに適当な例として書いただけです
構造を表したかっただけなので えいちてぃーえむえるすらっしゅしーえすえすのどんなしつもんにやさしくこたえるすれよんじゅう アルファベットと記号とひらがなと漢字と半角カタカナと数字が入った難易度が高いスレタイだわ body.hoge
div.fuga
{
width: 900px;
position: relative;
}
こんな感じで記述されているcssを
body.hoge div.fuga { width: 900px; position: relative; }
このような1行タイプに換えたいんだけど、なにかそういうwebサービスはある？
cssファイルの書き方も時代によって違うの？
正規表現で\n を \sに置き換えても、ちょっと意図しないものになりそう >>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
まあ沢山ルールあるから満足いくまで好きに組み合わせてみればいい。 縮めたい行の量が少ないのならvimでS-vしてJで簡単に1行にできる
大量だと結局マクロとか必要になるだろうけど WPやMT、パワーCMSくらいならまだいい
SiteCoreとかいう魔物をなんとかしてくれ… >>669
\nを\sに変換したあと\}\sを\nに変換すればもしかして vscodeは置換が1行だから
改行含んだ正規表現のマッチパターンで作れないのが残念だね。
アドオンであるのかな 色々アドバイスありがとうございます。
>>675さんのやり方でほぼ合致していますが
あれから正規表現を勉強してみて、
\tを消して行頭に集め、\nを" "に置換して1行にまとめ、\}を}\nにしてサイトをチェックすると、ほぼほぼ理想通りでした。
元のソース的に不適格で置換後におかしい点はサイトを確認してからcssを見ると、
要素がスペースが無くくっつていたので、矩形選択してスペースを追加していくというやり方でいけました。
200個ぐらいの要素が1000行ぐらいになっていたので、かなりすっきりしました。
アプリケーションに読ませて解釈させてから吐き出させるのも良いかと思ったのですが、
自分でどこまでできるかやってみました。
たしかにターミナル上のvi上でJ連打でも良かったのですが、タブもあったので
これはアンドゥの効くローカル上で置換すればなんとかなるかもと思いました。 SassMeister
https://www.sassmeister.com/
上のサイトへ入力して、その出力結果は、
body.hoge div.fuga {
width: 900px;
position: relative;
}
VSCode の拡張機能にも、Live Sass Compiler がある。
Code formatter では、VSCode の標準が、Prettier かな？ >>669
正規表現でも十分実装出来そうだが…(未検証)
検索 = "([^{\s\n\r])[\s\n\r]+"
置換 = "$1 " >>679
>200個ぐらいの要素が1000行ぐらいになっていた
とのことなので
・800or1600バイト軽くなった
・人間が読みづらくなった
などの違いがあるな 有名なサイトとか開いてデベロッパツール開くとerrorがたくさん出ることがあるのって自分の環境が原因なのかな？
大手のゲームメーカーのサイトのソースを試しに読んでみようと思ったらエラーたくさんという...
Adblockとかいろいろブラウザに入れてるからその絡みなのかと勘繰ってみたり >>683
まずそのエラーメッセージをちゃんと読むところから初めたら良いんでないかい？ >>683
エラーが出る大手サイトなんて結構あるから気にしなくていい。
自分で作るときはちゃんとエラーや警告を無視せずに作らないといけないと思うけど、大手のサイトのエラーなんて一々読まずに、
参考になりそうな部分だけ取り入れれば良いよ。 >>684
まぁそうね
あまりにもたくさん出るから驚きww
とりあえずググってみるか... >>682
なるほど。サンクス。
特に、１行or数行にしないと認識しないとか、そういうのはないんだね。
あとはもう作り手の好みってことか >>685
とりあえず自分のソースのエラー気にしとくかぁ～サンクス >>683
Adblockを疑うなら、全ての拡張を殺してみるとか、プロファイルを作り直すとか、試すべき事があるような シークレットウィンドウよりゲストウィンドウの方がよりシークレットという謎なネーミング IEもダメだろ
シークレットウィンドウやゲストウィンドウのいいところは拡張などがないのはもちろん、cookieが保存されないから純粋にアプリの素の動作が確認できるところにある シークレットウィンドウに許可してる場合もあるんだな、これが 他人のサイトは、非同期読み込みが失敗したとか、無数にエラーが出る
5ch なんて、何十万人も見てるから、広告動画の読み込みなんて、エラーばっかりだろ。
だって、配信サーバーが落ちる
何十万人に、動画を配信できるわけない
それに、広告をブロックしたら、読み込めないからエラーになるし >>696
>何十万人に、動画を配信できるわけない
ずいぶん貧弱だなおい サーバーやCDN等の仕組みをもう少し理解してから書いたほうが良いぞ <fieldset>
<label>A<input value="エー"></label>
<label>B<input value="ビー"></label>
</fieldset>
となっているとき、labelとinputを横並びで
A エー
B ビー
という配置にするにはどうすればよいでしょうか？ 文字でAの読みを表記するのに「エイ」なんて書くバカはお前と辞書くらいしかねーよ htmlやcssにも著作権とかあるんでしょうか？
その辺他サイトから貰ってベースにして
書き換えながらサイト作ろうと思ってるのですが >>707
著作者が放棄していない限り、どんな著作物にも必ず著作権がある。
著作物にどのようなライセンスが適用されているかは著作者次第なので確認する。
丸パクリとかでなければ基本的に問題無いことが多い。 >>705,706
単語の話ではなくて「A」一文字をカタカナで「エイ」なんて書くか？って話だと思うぞ？ >>707,708
もう裁判になって判例あるよ
HTMLやCSSに著作性は認められないって コーディングってコピペありきだと思ってた
難しいな と、流石に訴えられて負ける事って無いよね？
クラス名とかも変えるし、いくらでも言い逃れできそうだｗｗｗ コーディングに関わらず、基本的に許されるのは「引用」まで。
部分的に構造を模倣したりするのも問題無い。
著作者の意向にもよるけど、許可無く複製して丸々同じものを別のドメインで勝手に公開、とかしなければ問題にはならない。 色やフォントサイズとか細かい数値は変えようかと思うが
Class名とか弄らずそのまま使いたいわ
全体の配置とかjQueryのスライドショーとかアコーディオンメニューとかそのままで
記事の内容は全く違う新規のものだが
htmlとcssだけ使いたい
自分でも書けるが、どうせ似たもの作りたいんだし二度手間感がある なあに誰も見ないサイトを作ってるんだから
バレやしないさ。 >>716
えっ公開して見てもらう為に作るんじゃないの！？
どういうことや・・・ 誰がどう考えてもそのコードになるなら使っていいって法務に言われたことある
ライセンス書いてないブログのコピペは使っちゃダメだった
厳しい会社であった >>717
俺が今日やってるお仕事
たぶん俺、ディレクター、客以外、何人が見るのかな… >>718
なんかアホな会社だな
手段ばかりにこだわって何の価値も生み出せてなさそう >>719
詐欺用のダミーサイトとかかな？
閲覧者は
チミ、ディレクター、客(反社)、騙され奴www >>718の数行見ただけでそう断ずるのも
そんなに賢いようには見えない気が… >>721
見る人の数が少ない理由は
・カスタマーのほとんどが人生で1～2回しか買わない商品
・その商品を店頭で買ったときに渡されるパンフにしかパブってないCSRサイト
・しかも今どきフルFlash
っていう、ユーザが到達するまでの障壁が異常に高いサイトなんだ >>719
自分の仕事は見る人いるはずだけどヤラセみたいな手前味噌なサイト
詐欺じゃないけど詐欺の片棒担ぐの嫌だ >>707
コード自体には著作権はない
その実装方法、運用方法には著作権が生じる >>725
エスパーじゃなくエスパー使いなのか…
そんなのポケモントレーナーくらいしか居ないぞ 勉強のために写経するのと、パクったものをそのまま使うってのはまた意味合いが違う気がするｗ ページごとに個別に背景を設定したいのですがこういうのはできるんでしょうか？
とりあえずＴＯＰページは
ｈｔｍｌに <body background="img/top/unko.jpg">
ｃｓｓに body {background: url(img/top/unko.jpg) center center / cover no-repeat fixed;}
とやっています。１つのｃｓｓで複数のページの背景を管理するのはどうすればいいでしょうかぁ 各ページのbodyにidなりclassなりを付けてやって、それにcssで背景を付けてやれば良いんじゃない？ 使ってないけど慣れれば便利そうだとは思ってるな
articleとかいうのもあるよね devだらけになるよりsectionで区切ってる方が可読性良いよね。
main, cuticle, menu, asideとかもちゃんと使い分けてあるとすごい読みやすい。 セクショニング要素にCSS設定するなって言われても実際しちゃうよね DB探ったらセクションの中身が無かった場合に、無駄なpadding/marginやbackgroundが生まれるから？ >>743
天下のGoogle様からのお達しじゃなかったっけ？
sectionの中にsectionとか入れてると、sectionにcss 指定すると全部のsectionに同じ指定がかかるからややこしくて使ってない
まあワイ初心者やからよくわからんけど http://www.htmq.com/html5/section.shtml
「レイアウト目的のコンテナ要素として用いるなら、
<section>ではなく、<div>を使用してください。」
sectionタグはコンテナ要素ではないから
要素を包んでCSSで弄るなら<div>で囲むべきってことなんか・・・
なんや難しいな >>746
日本語大丈夫か？
レイアウト目的ならdivを使えって言ってるだけで
sectionにレイアウトするな。なんて言ってないんだが まああれだな、タグの意味を理解しないで
レイアウトしたい、何のタグを使えばーなんて思ってるから
divやcssを適用するときは全部divなんや
なんて意味不明なことを言い出す。
えとなぁ、タグを使うときはレイアウトのことなんて
考えずに使えや、アホども ヘッダーに必要な情報ってこれで必要十分ですか？
<meta charset="UTF-8" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content=" " />
<meta property="og:url" content=" " />
<meta property="og:type" content="website" />
<meta property="og:title" content=" " />
<meta property="og:site_name" content=" " />
<meta property="og:description" content=" " />
<meta property="og:author" content=" " />
<meta property="og:image" content=" " />
<title> </title> ぅあ…divを減らせばリアルで痩せる説を信じて今日から頑張ります…はぁ、はぁ… >>746
<body>があるのにわざわざ<div>を使う意味がよく分からない。 >>751
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> 初歩的な質問なのだけど
フロントエンドのフレームワークっていうと、reactみたいなJSのフレームワークとbootstrapみたいなcssのフレームワークがあるわけだけど
違いというか使い分けって言うのはどうなってるのかな？ bracketsから流行りのvscodeに乗り換えてみた
流石に流行っているだけあってよく出来ているなと思うんだけど
bracketsのリアルタイムプレビューが俺には合ってたみたいでbracketsと同じようなリアルタイムプレビューできる拡張機能を探し中
だけどなかなかしっくりこない
みなさんvscodeでのリアルタイムプレビューどうしてますか？ >>758
react・・・HTMLとCSSというウェブ標準は捨て去りましょう。
javaScriptで全部やるんです。
bootstrap・・・HTMLとCSSというウェブ標準でいきましょう
jQuery・・・HTMLとCSSというウェブ標準でいきましょう >>758
①jsは主に機能を制御するもの
②cssは主に見た目やレイアウトを制御するもの
③htmlは主に表記や要素を構成するもの
react→①と②
bootstrap→②
それぞれ畑が違うので比較対象にはならない。 reactの比較対象はvue.js、AngularJSや
phpのテンプレートエンジンとかだろな atomで編集したフォルダーをgoogle chromeで読み込む時や更新するときに5秒くらいかかるのは普通ですか？他のサイトを開くときは普通に開けてます
使っているpcのスペックはcore i7で8gbです。
デスクトップでフォルダ新規作成→atomで開く→html/cssで編集する→デスクトップでフォルダ開く→プログラムで開く(google chrome)の順に開いてます phpもjsも使わずに
ブラウザキャッシュさせない方法ないですかね？
cssファイル、img、iframeをchromeで表示する時。
ちなみに
<meta http-equiv="Pragma" content="no-cache">
などのmeta関連は効かないようです・・ CGIを使ってランダムなクエリをつけたリンクに置き換える >>773
CGIもSSIもperlもjavaもphyson、rubyその他プログラム系はダメっす そんなゴミサーバーで無理難題押し付けてくるクライアントをキャッシュしない >>776
まあそうなんだが、ヤフショや楽天、ポンパレなどのECプラットフォームはみんなセキュリティ厳しいから
こうなってんだよ >>778
じゃあ「セキュリティ厳しくて無理です」でいいじゃん
てか楽天が「セキュリティ厳しい」とか笑えるわ
だったら抜け穴みたいな編集テクを黙認してるのはなんでだ？誰も幸せにならないゴミシステム >>780
そこをクライアントに求められてるわけじゃないんだわ
確認時に誤解が出ないように予め対策しておきたいんだ
てか楽天の事よく知ってるじゃん
侮ってたわ >>758
CSSフレームワーク Bootstrap入門、掌田津耶乃、2018
Bootstrap 4 の本 >>769
VSCode の拡張機能で、同じ作者が作っている、
Live Server, Live Sass Compiler を使うと、
HTML, SASS ファイルを変更して保存すると、自動的にブラウザに反映される！
VSCodeのスレは、プログラム板にあります スマホからなので見づらいかもしれません。
各部署がそれぞれのページをブログ形式で更新しています。
トップページには新着情報として、タイトル(リンクあり)が表示される形式になっています。
ここに更に、最も最新のブログ記事の中身(一部で構わない)を表示したいのですが、どうすれば良いのか教えてください。
調べたらフレームタグで出来そうと思いましたが、URLが各部署のページで異なるため、リンク先の設定で行き詰まりました。 >>785
なんのブログシステムでやってるかによってやり方がバラバラだよ。
例えばWordPressならトップページの新着情報を出力しているソース（ループ部分）を編集する必要があるけど
そういうの大丈夫？
こういう構文突っ込んだろとか。
<?php if (strlen($post->post_content) > 40) {
echo mb_substr(the_content('...'; } else {
the_content();
} ?> >>785
これの回答をjQueryでやったろうかと一瞬考えたが
別ページの本文テキストを動的に引っ張ってくる方法がわからんな 最も最新のブログ記事だけ（ループ処理1回目のみ）に処理を行う場合はこんな感じ
<?php if ($wp_query->current_post == 0) { ?> 最近の中小企業は社内でHPくらい改変・運用できるだろって考えなのかね
DB周りとかフォーム周りを素人がいじくって情報漏洩したり、ウイルス仕込まれたりとかされても
気が付かなそうだな 皆さん返信ありがとうございます。
ハード面で詳しいからという理由だけで９月よりＨＰの更新を任せられました。
基本的なＨＴＭＬくらいしか分からないので、ソースを見ても何がどこに影響しているのか・・・
変にいじると大変なことになりそうなので、しばらく勉強してからまた聞きに来ます。 何度もすみません。
ＨＰ管理のためには何を学べばいいか、もし宜しければ教えてください。
HTML CSS Javascript PHP はこの機会に一通りやってみようと思います。 素直に外注に任せるべき
お前はその会社で何を期待されてるのか知らないが
本業の合間程度にできるような業務内容を超えている
勉強したり作業するのに使う時間を他のことに回して、外注費用を捻出したほうがよっぽど効率的 ハード詳しいからとかアホなのかその会社
Web制作を仕事として結構な金取ってとこもあるんだぞ
フライパン作ってる職人はレストランのシェフ並みに料理上手だとでもいうのか まずはhtmlとcssだな
次にとっつきやすさで言えばphp
そんでJavaScriptだが
JavaScriptよりjQueryを優先して
書けなくてもだいたい読める
フリーで配布されてるjQueryをサイトに導入できる
くらいになるのが汎用性高そう
でも外部に頼んだ方がいいよ
俺はhtmlだけちょっと分かる程度の知識から始めて
半年間職業訓練で終日勉強して覚えた
仕事しながらとか年単位で時間かかるんじゃね？ こうやってサイトが属人化して
勝手につくったPHPやJSバニラ＆スパゲティで
その人が辞めたら何もできなくなって
制作会社に泣きついてめちゃくちゃ高額取られるオチな >>785をテキトウにjQueryでクソコード書いてみたw
var getFile = $('#news-area li:first a').attr('href');
$.ajax({
type: 'GET',
url: getFile,
dataType: 'html',
success: function(data) {
var contentsText = $(data).find('.contentsText');
$('#news-area li:first').html(contentsText);
$(this).each(function(){
var txt = $(this).text();
if(txt.length > 40){/*文字数*/
txt = txt.substr(0, 10);
$(this).text(txt + "...");
}
});
}
}); >>797
>>785のバックエンドがどういう状況になっているのか理解もしないで適当なajaxをここに貼ってもクソの役にも立たん
あとそのゴミはここに直接直接書くんじゃなくてJSbin等の外部サービスに記述してからURLを貼れ >>799
へ？出力後のDOM操作なんだからバックエンド関係ないやん
まあ自分では何もせずいきなり人に命令するようなやつに絡むとは嫌な予感しかしないが また？ではないけど、
やはりそういう感じで絡んできましたかｗ
まず、俺が上で書いたphpとjQueryのどこをどうすべきか答えようね。
それ以外の煽りとか付き合いたくないんで。 >>800
バカだろお前
「新着が表示されているトップページ」というのがサーバー側で動的に生成しているページだったならバックエンドがどういう状況なのか大いに関係あるだろう
今はタイトル（リンク）を一覧にしているが、そこに記事内容の一部も加えるとなれば、サーバー側のコードの書き換えの可能性もある。
今どういう状況になっているのか考慮しないで適当なajax貼り付けてやっつけ仕事で片付ける話じゃないの >>802
お前の役に立つかもわからないゴミを一々ここで推敲するなんてただの時間の無駄だよ jQueryくんはすぐに脳内で妄想Webシステムを組み上げてjQueryですべて解決しちゃうから仕方ないｗ >>803
はあ？？
おまえjsもサーバーサイドも両方とも弱いだろ？
上で書いてるajaxが何してるかすら内容理解できてないようだが・・・。
>>805
jQueryくんじゃないし、最初にphpでのソースかてますが？
何で書いたら満足なの？vue.js?node.jsでごきぼうでつか？ そもそも
CMSがなにかわからない
サーバーサイドが何のプログラムで書かれてるかもわからない
↓
残された方法としてクライアントサイド（js）の上書き（DOM操作）
↓
しかしHTMLの構造もわからない
↓
これで解決方法をやっつけ以外でどうやって書くんだよ。
手法としてこういう方法が取れるって例を書いてるのになんで基地外みたいに絡むの？
jQuery君て誰だよｗ jQuery君の何が一番迷惑かバカな君に教えてあげよう
めちゃめちゃスレチだということ 実際の仕様が異なるのなら例外処理を書いたり、修正すりゃいい
・各新着情報にはリンクがついている前提である（無い可能性もゼロではない）
・そのリンクはその投稿ページへのリンクである前提（外部サイトへ直接飛ばす可能性もゼロではない）
・投稿ページとトップページの関係はクロスドメインではない
・トップページの新着情報はliタグの前提である
・各IDやクラスはわからないので仮でつけたものである >>811
あれだけ馬鹿みたいにこのスレ荒しておいてとぼけなくて良いよ これだけ文章の特徴も似てるのに他人は無いわな
どう見ても>>319,331のjQueryくんじゃん >>814
俺がそいつではない事が証明できるまで質問などに答えてやっても構わないが
それやっても俺に何のメリットもないし、仮にjQuery君であると勘違いされたままのデメリットもそんなにないんだよね。 >>815
あ、おまえjQueryくんだろ？
はい。違うって証明できますか？ >>816
お前はアスペだから理解できないんだろうけど、
お前もjQueryくんもスレチだからここから消え失せろって遠回しに言われているんだよ。 >>818
おまえ、さんざんスレ荒らしておいてまだいたのかよjQueryくんよぉ >>816
質問に答えなくていいし大して役にも立ってないからレスするのやめてくれ
マジでただの嵐だろお前 誰も頼んでないコード書き始めたり、絡んでくるなとか言いながらも一々反論しないと気が済まないところを見ると、
無駄にプライドだけは高いか子供なんだろうね。
んで今回もおもちゃになったと。 お、今日も$(".hoge")祭りですか？ｗｗｗｗｗｗｗｗｗｗ そのコードも未だにvarと$.ajaxだもんな
そりゃ役立たずだわ >>827
jQueryくんはなんで今来たみたいな雰囲気でレスしたの？ｗ >>828
はい批判じゃなくて、具体的な修正案を書こうね？
絶対逃げないでね☆ >>830
お前が自信満々にこのアホなコード書かないのが一番の修正案だよ $(".hoge")は具体性も無い話なのにコード書いちゃうｗｗｗｗｗｗｗｗｗ >>831
そういうのいいから制作者なら具体的な修正案を書こうね？
期待してるから絶対逃げないでね☆ >>832
具体的なHTMLが欲しいなら書いてやろうか？
その代わり逃げられなくなるぞ？
いいか？ >>833
ここそういう話するスレじゃないんで
本当に迷惑なのでやめてもらえませんか？ >>834
さっさと書いて自己満して消え失せてくれ 具体的な修正案を求めてる奴なんていないのに勝手に話進めるのがすごいよな
やっぱアスペってすげぇ >>835
jQueryくんは黙っててよ。
まさかここまでケンカ吹っ掛けておいて
今更そんな逃げ方するようなヤツじゃないでしょ
きっと、プライド持ってちゃんと書いてくれるのまってるんだから。 クソみたいなプライド抱えて荒らしｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ >>837
俺：質問の回答を書いた
↓
おまえ：そのコードも未だにvarと$.ajaxだもんな
↓
俺：じゃあ具体的におまえならどう書くの？
何がおかしいの？おかしくないよね？
冷静に見てよ 自分で糞コードとか書いておきながら批判されるのは気に食わないというｗｗ
なら掲示板に書かなければ良いのではｗｗｗｗｗｗ >>840
おかしくないおかしくない
君はいつだって正しいからもう休んで良いよ つーか、お前jsもサーバーサイドも弱いのが透けて見えるから
具体的な修正案がかかれない限り、今後何言われても響かないんだよね。
お前も制作者ならわかるだろ？
人の批判だけして自分では実際には何もしないヤツ見てどう思う？
そういうヤツってお前の周りにいない？ >>843
そんなものをここで議論する意味が無いのでやめてください。
あなたが触らなければ良いだけの話です。 仮にこれがjQuery君じゃないとしてもやっぱりjQueryをドヤ顔で貼り付けるやつはおかしいやつ多いのかなーと思うわ >>845
5年～10年前から全く進歩してないガイジだから仕方ない 質問に対する回答を書いたら、いきなり関係ないやつにケンカ腰で絡まれて
触るなとかそりゃないだろ
もし俺が間違ってるなら論理的に具体的なコ－ド返してこいよ。
それが素晴らしいなら俺だって納得する余地はあるんだから。 >>847
なのでそういうことをするスレではないのでやめてください。
少しはスルーできないんですか？ >>848
お前が俺をスルーできないのに何言ってんだよ
このままだと俺はスゲー無駄な時間を過ごしたことになる。
まともなコードの話も生産的な話もできないという判断するけどいい？ >>849
あなたが求めていることはこのスレの趣旨とは違います。
あなたの自己満足がこのスレの生産性ではありません。 散々荒しといて無駄な時間とはこれいかにｗｗｗｗ
すげー楽しんでるじゃんｗｗｗｗｗｗｗ すでに書かれてるが批判されるのが嫌ならここに書かなければ良いし
生産性云々が大事ならこんな掲示板なんてやらなければ良い >>855
しかも挙句には「お前も落書きしろ」ときたもんだｗｗｗｗｗｗｗｗｗｗｗ どうでもいいけどせめて今はletとfetchくらいは使ってほしいよね jQuery君って騒いでるやつがいるが、
jQuery君は俺やで？
>>797みたいなクソコードを俺が書くわけ無いだろ
例えばtext()で取ってきたものをtext()で書き込むいなら
text(function() { })を使う。
ajaxでGET使うなら$.getを使う
明らかに俺じゃないやつをjQuery君と呼ぶのはやめて欲しいんだが HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.child::after{
content: "example";
}
.child::afterの親要素って.child同様parentだよね？合ってる？？ すまん、初心者で何も分からんのだが
jQueryはオワコンなの？
今は何が主流？ >>864
Vue.js vs, react で宗教論争 >>864
何でも使いたいものを使えばいい
大事なのは流行り廃りではなく、思う通り動くかどうか >>785-797
サーバー側は、Ruby on Rails などを学ぶだけでも、1年は掛かる。
サーバーを立てていないと、クロスドメインアクセスを拒否される
Rails開発では、HTML, CSS/SASS, Bootstrap,
JavaScript, jQuery, Node.js, VSCode, Git, データベースなどが必須 >>864
ここ見ればわかるよw
2017年 JavaScript★71.9%ものサイトがjQueryを利用 [無断転載禁止]©2ch.net
https://medaka.5ch.net/test/read.cgi/prog/1485008061/ 2年もあるスレなのにレス数たったの64ってマジか
オワコン感半端ないやん >>870
なんつーか、頑張ったねｗ
でもjQueryのシェアの話をしようね どっちもいつまでもしつこいよなぁ
使いたいもの勝手に使えば良いじゃん >>873
それな。もう一時期のブームは去ったようだが、
脱jQueryなんてありえない話だったんだよ。
あれから何年も経って結論が出てしまった。
そもそも目的が脱jQueryとかいうのが馬鹿らしい発想
もっと良いなにかに移行するって話ではなったからな そうそう、手段と目的履き違えたらいかんよな。
意味も分からずに脱jQueryが目的になってしまってるのが増えた気がするわ。
結局はプロジェクトの内容に合わせて取捨選択すれば良いだけ。
ネイティブのJavaScriptが変わってきたり、CSSでアニメーションさせることができるようになったりで、
何年も前の様にjQueryが重宝されることは減ってきてしまっているのかもしれないが、
今でも記述量を減らしてサクッと小規模なアプリを作りたい、とかだったらjQueryの採用はあり得るし、
SPAの様なアプリだったらjQueryよりVue等のフレームワークを採用するほうが良い場合もある。
そういう適材適所が分からないで、こんなとこでオワコンだのシェアの値だのギャーギャー騒いでも何の意味も無いのにな。
まぁ、そもそもスレチだから迷惑って話なんだが。 html, css初心者の俺からすると、ゴミレスで埋めずにjQueryスレでやって欲しいなぁ html,cssスレでJavaScriptやjQueryの話すればマウントとれると思ってるからね
あほ丸出し >>875
> まぁ、そもそもスレチだから迷惑って話なんだが。
わかってるなら釣られるなよ・・・ gulp-sassとgulp-autoprefixerでscssをコンパイルしているんですが
autoprefixerの部分で、環境によって差が出てしまっているのですが
これって、そういうものなんでしょうか
.browserlistrcは
last 2 version
iOS >= 9
Android >= 5
としています
※すれ違いだったら誘導おなしゃす 別件なのでレスわけました
ウィンドウズで、gulp.watch() を使う時
path.join()を使ってソースファイルのパスを作ると
結果がバックスラッシュ区切りになってwatchがコケるのですが
これも、そういうものなんでしょうか
gulpは4です
※すれ違いだったら誘導おなしゃす require('path')してresolveじゃないの >>885
すみませんちょうどさっき解決しました
const sass_watch = () => {
let src_file = path.join(config.path.src, '**/*.scss');
return gulp.watch(src_file, gulp.series('sass_compile'));
};
module.exports.sass_watch = sass_watch;
gulp.task('sass_watch', sass_watch);
こんなふうにしてたのですが
config.path.srcには、ディレクトリのパスが入っています
たとえば「./foo/bar/baz」だとすると
Windows10ではこのsrc_fileに入るのは
foo¥bar¥baz¥baz¥**¥*.scss
になっていて、gulp.watch()でだけ
このバックスラッシュ区切りパスは駄目、ということだったようです
path() を使わずに、+演算子で繋いだら動きました
お騒がせしました Ruby では、Windows でも、C:/Users/Owner/Documents/a.txt
みたいに、/ 区切りでも、動くのだけど
JavaScript では、OS によって、自動的に切り替えてくれないのか。
そういう関数を、誰かが作っていないのか？
最近は、gulp の代わりに、npm scripts でやる人も多いみたい VSCode なら、拡張機能に、Live Sass Compiler がある。
これは、Live Server と同じ作者が作っている
プログラム板に、VSCodeのスレもある >>887,888
あざます
存じておりました
vscodeのsassコンパイラも、ruby-sassも使うこともあるんですが
autoprefixerを噛ませたかったので、今回は使ってませんでした
開発者全員で、prefixの付け方等、統一したかったので bootstrapでfooter領域を作成中なのですが
元のページでは画面幅一杯に表示されているのに
別のページにHTMLをコピペすると変な幅に縮んでしまいます
どのページでも画面一杯に表示する方法はありますか？ 質問です。
画像(img)とタイトル(h1)をclassでくくっていて、このclass上にカーソルが合わさった時に、画像とタイトルが両方透明になるようにしたいのですが、上手くいきません。
画像とタイトルそれぞれにカーソルをあわせると個別には透明になりますが、classの領域内にカーソルが合わさったら画像もタイトルも両方同時に透明になるようにするにはどうすればよいでしょうか？ >>890
その別のページでコンテンツ幅が設定されてるのでは？
bodyとか .wrapperとか
そっちを見直すべきたけど、それを無視してやりたいのなら
width: 100vw; あ、bootstrapか
今のhtml構造がわからないから答えにくいけど、とりあえずは
class="vw-100"
かな >>891
.class:hover * {
opacity: .7;
}
とか？ >>894
そんな感じで指定していますが上手くいきません
あと、その星マークは何でしょうか？ >>895
HTMLの方を晒したほうがいいと思うよ
>>891の方は用語の使い方が間違ってて、ちょっと分かりづらい文章だから >>892-893
ありがとうございます。
widthを100%やdevice-widthにしても変わらないので困ってたんですよ…。
本文のclassをcontainerからcontainer-fluidに変更したら何故かfooterも連動して画面ほぼ一杯になりました！
今度は左右に余白が付いてしまいましたがネガティブマージンでなんとかしました！w コードはこんな感じです<br>
<div class="wrap">
<a href="5ch.html">
<img src="img/5ch.jpg" width="400" height="400">
<h1>タイトル</h1>
</a>
</div>
.wrap :hover{
opacity: 0.9;
transition: 0.3s;
}
画像とタイトルが両方とも同時に透明になるようにしたいのですが、上手くいきません。
画像かタイトルの一方しか透明になりません。 例えば
.wrap :hover, a:hover{
opacity: 0.9;
transition: 0.3s;
}
とか
a {
display: block;
}
.wrap :hover {
opacity: 0.9;
transition: 0.3s;
}
とかは？ >>898
セレクタおかしい
.wrap :hover
ではなく
.wrap:hover
こう >>901
コピペしてたから気付かなかった
.wrap:hover, a:hover{
opacity: 0.9;
transition: 0.3s;
}
とか
a {
display: block;
}
.wrap:hover {
opacity: 0.9;
transition: 0.3s;
}
だな 質問したものです。
>>901さんの指摘とおり、不要な改行を消したら
解決しました。
ありがとうございます >>894のとおり
.wrap:hover * {
opacity: 0.9;
transition: 0.3s;
}
でいいじゃん この場合ホバーされた.wrapの下の要素全部に適用される *を付けると、html内のすべての.wrapがホバるってことですか？ えぇ…
>>908をどう読めばそう思うのか・・・
.wrap aは.wrapの下のaでしょ？
.wrap imgは.wrapの下のimgでしょ？
.wrap h1は.wrapの下のh1でしょ？
なので
.wrap *は.wrapの下の全部 途中で送信しちゃった
で、
.wrap:hoverはホバーした.wrapだから
.wrap:hover *はホバーした.wrapの下の全部
なので.wrapの上にマウスカーソルが乗ったらその下の要素全部にスタイルが適用される 試しにワイルドカード付きにして更新したら何も反応しなくなった ていうか、いらんだろ、ワイルドカード
.wrap:hover{
opacity: 0.9;
transition: opacity 0.3s;
}
で良いじゃない >>890-897
列数を割り当てていないのでは？
class="col-画面サイズ-列数"
例えば、class="col-sm-3" >>916
列数は割り当ててありました…。
class="col-12"と指定してもfooter要素と
本文で横幅が違ってしまうので困ってました。
それにしてもbootstrapって<dev></dev>でめちゃくちゃ太りますねw $( ´_ゝ`).hover(function(){ >>924
(*)は入口じゃなくて出口ですよ
っていう医者の話思い出した 思う存分insertしたあとrollbackしたい サイト内で複数のページをリンクしたいんですが、ロリポップの無料sslというのを入れた後からは記述してもエラーページが出て繋がらなくなりました
アドレスhttpsではなく.htmlで繋げたいのですがなんとかならないでしょうか？
<a href="unko.html">テキスト</a> bracketsを使っているのですが、トップページのindex.htmlファイルだけ「UTF-8」に出来ません。
画面右下の
INS・SHIFT JIS・HTML・スペース4
↑この「SHIFT JIS」の部分を「UTF-8（指定なし）」に変えたいです
トップページだけ文字化けしているので原因はこれのせいだと思ってます
やり方を教えて下さい。何卒宜しくお願い致します。 >>930
UTF-8(BOM無し)にして保存し直すだけかと
やり方はエディタによりけりだから何のエディタ使ってるかを書くか、調べて ごめん
bracketsって書いてあったね
bracketsって文字コード指定できたっけ… その「SHIFT JIS」とこをクリックしたら文字コードの選択出てこない？ >>933
出てくるんですけど、何度「UTF-8」を選んでも「SHIFT JIS」のままなんですよね >>934
一度他のフリーのエディタとかでutf-8に変換してから
bracketsで取り込んだら？
もしかしたら変換できない依存の文字コードが混ざっていてエラーを警告してくれるかもしれない >>928
関係をrollbackして割り切ったお突き合い html/cssの合同スレですらこんなペースなのにsass単独スレなんてどうなのかね？
ここでもよかった気がするが。 >>936
メモ帳でやったら出来ました！
ありがとうございました！ 例えばサイトtopに画像を表示させたいときに、CSSでbackground-imageをつかうのと、普通にHTMLにimgのリンクを書き込むのとでは何が違うのでしょうか？ >>953
元々、background-imageは要素の背景などに使うものだったが
今となっては、それぞれなんでもできるから、ざっくり言うとどれでやってもいい。
imgタグはalt属性が入れられたり、解像度で切り替えたり、アスペクト比で可変できたりの特性はある >>953
seoでは基本的にcssは読まないからseo評価はプラスもマイナスもない
htmlで貼れば何かしら評価はある >>954
続き
background-imageは画像の繰り返し表示ができたり
スクロール時の見え方や親要素に合わせたフィッティングなども行える flexってベンダープレフィックスを付けないとSafariでうまく表示されないですか？ >>962
使ってるPCのOSがWindows10で、最新のSafariブラウザをダウンロードできないので、確認方法がないんです。
ちなみにHTML/CSSは趣味でやってる初心者です。 「can i use flex」で検索！
Can I use のサイトで、調べれば？
CSS Flexible Box Layout Module
https://caniuse.com/#feat=flexbox
【2019年版】Flexboxの対応ブラウザとベンダープレフィックスまとめ
https://webdesign-trends.net/entry/8257 あ？ビックキャメラで確認すればいいって言ってるだろ？ before/after要素で、background-imageが表示されない時って、原因として何が考えられますか？
試しにbackground：#fffでやったらちゃんと表示される。
content:' ' に文字を入れてもちゃんと表示される。
background-imageだけは何も出てこないbackgroundに変えても同じ。
でも試しにimgタグで同じソースを入れるとちゃんと表示される。
heightもwidthも入れてるしdisplayもblockやinline-blockを試したけどやっぱり出ない。
原因としては何が考えられますか？ とりあえずコード貼ってみなよ
簡略化したので良いから background-image :url(…) center center no-repeat;
とかやってんじゃないの？ 相対パスの指定がおかしいとかかもな
HTMLファイルからの相対パスを指定しちゃったり CSSでのパス指定ミスはやったことあるｗ
灯台下暗しですわ～ >>972->>974
あ？偉そうに上から物言うなや
大変お手数ですが、おコードを貼っていただきたくって言えや 9月からweb制作のスクールに通い始めたのですが
すでにHTMLとCSSの内容が覚えきれなくて(特にCSS)落ちこぼれになりそうです
そこで質問をさせて頂きたいのですが
1.効率的な勉強方法を教えて欲しいです
(ノートにひたすらタグを書いて覚えるのがいいのか、パソコンに向かってひたすらタグを打ち続ける方がいいのか等)
2.タグは全て英語or英語の略らしいので出来たら沢山のタグの読み方と英語の意味が分かるリストや辞典が欲しいのですがオススメの本やサイトはないでしょうか？
(中学生以下の英語力なのでタグの意味を理解する事から始めたく…)
長々とすみません
どうぞよろしくお願い致します >>984
1）パソコンに向かってタグ打ち
2）アンクのHTML5＆CSS3辞典 >>984
誰かに見せるなにかを作るのがいいんじゃない?
家族でも恋人でも友達でもいいから見てもらうとなると
わりと真剣に覚えるし考えるんじゃないかな >>984
ワイは数ヶ月前から独学でHTMLとCSSを勉強してるけど、ゲームをプレイするのと同じ感覚で、とりあえず説明書(参考書)をさらっと読んで、とりまプレイしまくるのが一番いいと思う。
途中で基本操作方法わからなくなったり、知りたい事が出てきたらその都度ググって実行する感じ。
モンハンで言うなら
最初はいろんな武器やアイテム、ステージがあって混乱するけど、とりあえずいつかは強いモンスターを狩れる一流ハンターになりたいと目標をもちつつ、まずは目先のヤンクックの討伐に尽力する感じ
つまりHTML/CSSはモンスターハンターってことね >>984
意味も無くひたすらタグを打ったり書いたりしても覚えにくいと思うから、
そのスクールで習った内容をノートにまとめるのではなくて、htmlとcssでまとめて振り返ってみたら？
箇条書きにしてみたい、とか
リンクにしてページで分けたい、とか
ここは中央揃えにしたい、とか
スクールのホワイトボード撮った画像を貼り付けたい、とか
色々とあーしたいこーしたいが出てくると思う
多分自分で何か見やすくまとめようとすると
「じゃあどう書けば目的通りに表示させられるか」
と自然とタグやcssの書き方が身に付くと思う。
元々HTMLっていうのは文書の管理の為に生まれたようなものだし。
的外れな意見だったら申し訳ない。 それで言うと、女性にモテたいです
札風呂に入って札束で女をビシバシひっぱたくのが僕の夢ですね 札束に魅力があるのであって、お前に魅力があるわけではないからな 俺も独学で、その都度調べてたな
未だにうろ覚えなとこ多いからMDN読み返したりするし、タグの読み方とかも適当だけど
英語の意味まで解説してる本なんてあるのかな？
普通の英語の辞書でいいし、それよりHTMLやCSSの辞典買った方が便利
あとは配布されてるチートシートとか、まとまってて良いかもな >>984
サブライムを使えば
それから何文字か打ち込んださ候補のタグを表示してくれる機能入れると
作業が天と地の差になるぞ 最近だとsublimeよりVScodeが推されがち。
というか、未だ候補を表示させる以前の段階だからな。
タグ知らなきゃ1文字目を打てないし。
でも今後のために何かしらの高機能エディタは導入しといて損は無いよね。 英語が苦手なんて言ってる奴はさっさと諦めるべき
話せなくてもいいけど少なくとも読めなきゃ話にならない
一生htmlコーダー(笑)でいいなら別にいいけど コーダーなんて10年もすればAIが代替してるよな
知らんけど サブプライムって低所得者を対象としたヤツですよね？
私をバカにしてるんですか？
確かにセブンイレブンのペイキャンペーンで100円づつ使ってますが、
だからっていきなり失礼じゃないですか >>997
> 私をバカにしてるんですか？
はい。そのとおりです。
だけど、馬鹿にしてるのは貴方だけです。 >>985-988
>>992-994
まとめてですみません
みなさんアドバイス本当に有難うございました！
辞典はアンクのものを買うことにしました
勉強方法もとても参考になりました
ノートに向かうよりも実技あるのみでパソコンで練習した方が効果ありそうなんですね
サブライムはmacでも使えそうなのでこちらも試してみます このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 42日 20時間 30分 14秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
