HTML/CSS のどんな質問にも優しく答えるスレ 35
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 34
http://mevius.5ch.net/test/read.cgi/hp/1538966757/
■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html </li>
など省略してもいい終了タグはどれを省略しますか。全部？一部？
省略しない方が分かりやすいタグ一覧とかありますか？ >>3
省略しない。自動保管してくれるし、省略しても見にくくなるだけでメリットないし 997 名前：Name_Not_Found[sage] 投稿日：2018/12/10(月) 23:57:00.01 ID:???
確かにHTML4で実際H1を使うとなるとどうなるかわからんな
sectionタグもないわけだし
998 名前：Name_Not_Found[sage] 投稿日：2018/12/10(月) 23:57:27.14 ID:???
↑H1複数を使うと >>7
え？なんかなるの？
H2が複数あるのと何も変わらないんだけど
変わる要素なんかなにかあるのか？
例えば複数の論文を1ページに全部表示した
程度の話でしょう？ 992 返信：Name_Not_Found[sage] 投稿日：2018/12/10(月) 22:53:45.63 ID:???
>>989
全部テーブルで作ってた時代とか透過gifのスペーサーとかしってる？
そういうやつにも文句いってたんだよね？ >>9
ネスケ4でCSSを使うと高確率で落ちる時代とか知ってる？
テーブルや透過gifでしか実現出来ない時代には、文句言うわけ無いでしょw
その時代であってもh1は複数使えたし、それでvalidだし
テーブルや透過gifを使っても、validなんだよ。
validなのに文句言うわけないよね？
もちろんCSSで出来るようになった時代には、CSSを使えって文句言ったけど？ あれ？もしかして、テーブルや透過gifが、
HTML的にはvalidってあることに気づいてないのかなｗ
恥ずかしいね。その程度の知識で反論しちゃったんだｗ live2chのスレッド一覧はCSSカスタムできないんでしょうか >>12
大昔使ってたけど、まだあったのかアレ
live2chスレで聞いた方が良いと思う >>3
img、br、inputあたりは書かんね
あとmetaとlink >>3
</li>は省略する
省略すると、li要素の間のスペース問題無くなって楽
でもそれ以外は特に省略しない。
エディタで補完されるのでわざわざ消す事はしない
後は>>14と同じ >li要素の間のスペース問題
改行しなけりゃいいじゃない >>15
その対処法、定期的に書く奴いるよな
display: inline系指定したとき限定だし、li要素に限定する意味も分かんない(div要素/dt要素だって再現するのに)
あと、スペース問題いうなら、コピペしたときに行末に余計な半角スペースが入る問題にも注目してくれよ >>11
あれ？もしかして全部divでつくってvalidだから！っていってるアホ？www
テーブルで作ってるのにvalid云々の話持ち出してる時点でお門違いなんだよ
お前のほうが恥ずかしいわwww >>11
お前の理論だとh1にページ内の全テキストまとめて書いてあってもvalidだから許される！ってことだからな？その程度の仕事しかしてないのばれちゃったね >>3
開始タグごと省略する事はあるが、開始タグがあって終了タグを省略はしない
基本、HTML5以降を使うので、空要素は / で閉じてる >>18
> テーブルで作ってるのにvalid云々の話持ち出してる時点でお門違いなんだよ
validの話は複数のh1の話でしょう？
そこにテーブルの話を持ち出してくる時点でお門違いなんだよ
これは誰に言うべき言葉ですか？ >>19
> お前の理論だとh1にページ内の全テキストまとめて書いてあってもvalidだから許される！
お前の理屈だと、aタグにページ内の全テキストまとめて書いたら許されないから、
aは使ってはだめだ！って言うことになるよｗ
俺はただ、h1を複数使ってもいいと言ってるだけ
お前は、全テキストまとめて書いたら許されないから
h1とかaとか使うなと言ってる。屁理屈もいいところだ >>20
> 基本、HTML5以降を使うので、空要素は / で閉じてる
空要素を/で閉じるのはXHTML（XML）の決まりでHTMLでは/で閉じない
/で閉じるように書いても無視されて、/で閉じるという効力はないので
空要素以外を/で閉じることが出来ないし、
逆に<br></br>と書いても空要素<br />と同じ意味にはならない >>10
最初にかったのが発売されたばっかりのpowerMac9500だったからネスケ4ももちろん知ってるけどだからなに？ >>24
だから〜のあとは>>10の中に書いてある はっきりさせとこうか。
HTML5では「要素を/で閉じることは出来ない」
HTML5では、タグ毎に空要素 or 空要素ではない or 終了タグが省略可能
と決まっている
brは空要素と決まっているから、<br>と書くのがHTML5では正しい。
ただしXHTMLとの互換性のため <br/> という書き方も許容された
くり返し言うが、この書き方に空要素という意味はない。
<br/>と書いても<br>と同じであるという意味になってる >>3
> </li>
> など省略してもいい終了タグはどれを省略しますか。全部？一部？
一部だな。ブロックとして書きたいか、一行で書きたいかで使い分ける
具体的言うと、liの中が短く一行で余裕を持って収まる場合には一行で書く
<ul 途中で書き込んでしまった
>>3
> </li>
> など省略してもいい終了タグはどれを省略しますか。全部？一部？
一部だな。ブロックとして書きたいか、一行で書きたいかで使い分ける
具体的言うと、<li>の中が短く一行で余裕を持って収まる場合には一行で書く
<ul>
<li>りんご
<li>みかん
<li>ばなな
</ul>
みたいに。もし<li>の中が長く、一行で確実に一行で終わらない場合は
<li>の後ろに改行を入れて複数行で書く
<ul>
<li>
いろんな長いメッセージやいろんなタグ
いろんな長いメッセージやいろんなタグ
いろんな長いメッセージやいろんなタグ
</li>
</ul> >>30のような書き方はHAMLを見て、そういう書き方でも
わかりやすいんだからわざわざ</li>必須というルールを
作ることに意味はないなと思ったから
ちなみにHAMLではこのように書く
https://qiita.com/pecomeri/items/ffa45f3a6adc04a7f7fd
%ul
%li リスト1
%li リスト2
%li リスト3
このような書き方をすることで短く書く・・・が独自の文法になるぐらいなら
HTMLの範囲内で省略できるところを省略して短く書いたほうがいいだろう >>28
aタグには意味がないから極論全部入っててもいいでしょ？html5ではブロック要素の外囲ってもokなんだし
h1は見出しって意味があるから全文入ってたら明らかにおかしいでしょ
validは単にタグの形に間違いがあるかどうかなだけでタグの意味に対する使い方には関係ないからvalidを持ち出してくるのはおかしいっていってんの > h1は見出しって意味があるから全文入ってたら明らかにおかしいでしょ
そうだね。俺はh1に全文入れるなんて一言も言ってないけどね。
h1に全文入れるとか言い出した馬鹿に言ってねｗ
で、h1は複数使って良い。そんだけ >>32
> validを持ち出してくるのはおかしいっていってんの
validか否か以外に、複数のh1がだめな理由なんて思いつかないからな
どこぞの馬鹿が、タグの中に全部入れられるから
だめなんだって理由ならaだって同じだしぃ〜？（笑）
だめな理由がなければ、いいってことだよねｗ >>32
validであること以外に
なんら強制される義理はないですしおすし h1複数でどう解釈されようとも、外部リンクぶっさすだけで帳消しになった時代の話だろ
今更何をワイワイやってるんだ >>33
>>34
>>35
もうちょっとまとめてからかいて しらねｗ h1複数は昔から今もずっと許容されている状態で
SEO業者だけが、なんの根拠もなくh1は一つじゃなきゃだめなんだって言っていたのが
Googleに否定され、それを持ち出してきても、なお受け入れられないのは
いままで、正しいことをしてきた（つもり）というプライドでもあるんだろ
客に嘘を言っていたことになるしな >>37
複数h1を使うことは、昔から今までずっと問題がない この辺のスレが作られたころ
http://mevius.2ch.net/test/read.cgi/hp/1187492274/
http://mevius.2ch.net/test/read.cgi/hp/1127409018/
http://mevius.2ch.net/test/read.cgi/hp/1125430395/
それまでのテーブルレイアウトに反発するかのように「ウェブ標準」が標榜され
ストリクトなHTML+CSSでのコーディングがウェブ制作界隈で流行った
彼らの中から、Validであること以上にセマンティクスを重要視する一派が現れ
ストリクト教だの、ストリクト原理主義だと呼ばれた
<h1>１個しか認めないマンの彼は、この一派の末裔なんだろう
ソースは元教徒だった俺 セマンティクス（意味）を重視するなら
なおのことh1複数を認めなきゃいけない
例えば1ページに論文を複数表示するとき、
意味的にh1であるならば、表示がどうであれh1はh1であるべきだからだ
1ページに複数表示したから、それぞれの論文の1レベル下げますなんておかしいだろ >>41
例えが変だよ
それを複数掲載するような内容が最も重要な内容だろう
<h1>xxについての論文集約</h1>
<h2>論文A</h2>
<h2>論文B</h2>
<h2>論文C</h2>
例え集約するような内容が無い場合でも、何かに添ったh1があるはず
<h1>山田の論文一覧</h1>
<h2>論文A</h2>
<h2>論文B</h2>
<h2>論文C</h2>
でなければ全く意味のない、論文を雑多に並べただけというページになる
<h1>論文A</h1>
<h1>論文B</h1>
<h1>論文C</h1>
もちろん何の意味もないページであるなら、それはそれでh1複数はアリだと思うけど・・・
その場合見出しじゃなく<li>になるんじゃないの >>42
> それを複数掲載するような内容が最も重要な内容だろう
なんで最も重要なものが複数あったらだめなんだ？
1ページに重要なのは一つだけ
これはSEO業者が作ったルールに過ぎない
読む人にとってなにか困ることでもあるか？
それともまたSEOガーSEOガーか？ >>43
別に複数あってもいいんだけど、ページ構成がどうしても想像できない
もし可能ならそのページか、実際のhtml構成、つまりどんなページでどんなh1を設定したかを教えて欲しい
＞「最も」
＞もっとも
＞【最も・尤も】 《副》何よりも一番。他に比べ第一に。?「この病気の―多い地方は」
通常「最も」と言えば一つだし、そういう感覚の人は多いと思う
あるカテゴリに属する物の方向性が違う場合は複数存在するとは思う
最も好きな食べ物がラーメンと寿司、決められない＞＜
にしてもこの場合のページ構成はh1は「好きな料理」になり、
h2にラーメンと寿司が来る
一体どういうページなのかが分からない
実際のページ構成を教えて貰えれば皆納得すると思う
今までの流れを見て「ページを想像できない」というのが正直な感想なんだわ
もちろん俺はh1一個しか使わないし、それで何も不自由を感じていない。 >>43
頭が固いというか日本語が不自由というか…ほんと典型的な［ついていけないおっさん思考］だなお前さんは 最も重要なものが複数あってもvalidだ！
なぜならvalidであることが最も重要だからだ！
とかいいだすんだろどうせ one of the bestの訳し方問題を思い出した >>47
実際に言ってるのは、h1が複数あるのはvalidだ！
でも俺の定義だとinvalidだ！
なぜなら俺が使い方を思いつかないからだ！
って言ってるんだけどなｗ 使い方が思いつかないなら使わなければいいじゃん
でもh1を複数使いたい（使い方を思いついている人）が
使うことになんの問題もないよって話 俺には想像すら出来ないので、参考にしたいってだけだよ
どうしてどういうhtmlなのか教えてくれないのだろう
不思議だ >>52
これはhtml5の話だね
アウトライン毎にh1から始める事ができるのは、見出しレベル下げてるのと同じだから問題が無い
https://cdn.tutsplus.com/webdesign/uploads/2013/11/html5markup.png
これで言うとheaderのh1が最も重要で、
articleの中のh1はページ全体から見れば実質h2と同じって事
articleが何回出てきてもh1使えるし、asideの中にh1があっても良い
そうではなく、上に出てるのはhtml4の話で、
アウトラインもロクに無かった時代にh1を複数書いても問題なかったらしい
どんなページを作っていたかを知りたいだけよ そもそもsection、aside、articleというものが出来た理由の一つは
ドキュメントの中で複数のh1を使ったときに、
セクションを正しく解釈することが難しいからなんだが。
広告の中にもh1はあるだろうが、それはページのドキュメントの本筋の
アウトラインとは分離されている。h1じゃなくてh2を使えばいいという反論も無意味だよな
広告の最初の見出しがh2だとしても本筋のh2の一つになるわけではない
「セクションが出来たから複数のh1が使えるようになった」のではない
複数のh1を使ったときの問題を解決するためにセクションが出来たんだよ
最初に複数のh1を使うという需要があることを示してる >>53
> これはhtml5の話だね
昔から複数のh1を使いたいという需要があって、
それがHTML5で解決したという話
articleやasideがなくても、やりたいことは同じなわけで
articleやasideがないぞ！というHTML4の欠点であって
複数のh1を使いたいはずがない。ということにはならない んで、昔からやりたかった複数のh1だが、
HTML5で複数のh1を使っても、コンピュータは正しく
アウトラインを理解できるようになった。
だが、section、aside、articleって目に見えないだろ？
CSSで装飾すれば見えるけど、それを言ったらdivで代用することも出来る
じゃあ、一体誰が、アウトラインを理解できなくて困ったのか？
それはコンピュータ（検索エンジン）の話なんだよ。
つまり、SEOガー、SEOガーの話でしかなくなる。
SEO抜きに話をすると、昔から複数のh1は許容されていたし、
人間は（section、aside、articleがある今と比べて）何も困らない ん？ということはアウトライン無しでh1使っていたってこと？
当時風に書くとこんな感じ？
<body>
<div id="header">
<h1>xxx</h1>
</div>
<div id="contents">
<div id="ronbun1">
<h1>論文1</h1>
<p>論文1の概要</p>
<h2>論文1の詳細</h2>
<p>論文1の詳細内容</p>
</div>
<div id="ronbun2">
<h1>論文2</h1>
<p>論文2の概要</p>
<h2>論文2の詳細</h2>
<p>論文2の詳細内容</p>
</div>
</div>
</body> h1使っていたってこと？
↓
h1複数使っていたってこと？ >>57
リンク先に書いてあることまんまだなｗ
まあ、その程度ならh1で区切ればいいだけだから
アウトラインは解釈可能なんだよな
だから当時は複数のh1を使っても、section、aside、articleなどは
必要ないと考えられていたのかもしれない
問題はネストが入る場合。例えば論文1の中に別の論文が引用される場合とか。
これはどのレベルのヘッダを使おうが間違いになる。
>>57のような形で複数のh1を使う場合は、アウトラインは正しく生成できていたが
ネストするような場合は、正しく生成できなかった。
だからHTML5でsection、aside、articleができて、今まで正しく
解釈出来なかったタイプのアウトラインでh1を複数使っても扱えるようになった。
もっとも解釈っていうのはコンピュータによる解釈の話で
文章からコンテキストを解釈できる人間にとってはさほど意味がないけどね
これでh1を複数使いたいというパターンが昔からあるということは理解できたね？ >>60
そこまでSEO犠牲にするとは思わなかった
順位はともかく検索結果の表示も何もかも犠牲にするとは予想外だったわ
理解はしたけどドン引きだ >>61 OK
<h1>年末年始に食べたいものリスト</h1>
<h2>年末編</h2>
<ul>
<li>お鍋（海鮮系、お肉系）</li>
<li>おさしみ</li>
<li>蕎麦</li>
<li>みかん</li>
</ul>
<h2>年始編</h2>
<ul>
<li>おせち</li>
<li>お餅（お雑煮、焼き）</li>
<li>とろろ</li>
</ul>
補完してください！＞＜ >>62
昔から全コンテンツを1ページに表示するか、章ごとに分けて表示するか
選べるサイトあるだろ。印刷するなら1ページに全部表示されていたほうが楽だし
そういった場合に、h1は複数書いてはいけませーんとか、
オレオレルールを作るなって話をしてる
適切な理由があれば、h1は複数使用して構わない <main>
<header>
<h1>年末年始に食べたいものリスト</h1>
</header>
<article>
<h2>年末編</h2>
<ul>
<li>お鍋（海鮮系、お肉系）</li>
<li>おさしみ</li>
<li>蕎麦</li>
<li>みかん</li>
</ul>
</article>
<article>
<h2>年始編</h2>
<ul>
<li>おせち</li>
<li>お餅（お雑煮、焼き）</li>
<li>とろろ</li>
<li>みかん</li>
</ul>
</article>
</main> 補完ってこういうことじゃないの？
<h2>年末編</h2>
<ul>
<li>お鍋（海鮮系、お肉系）
<ul>
<li>鱈</li>
<li>カニ</li>
<li>牡蠣</li>
</ul>
</li>
<li>おさしみ</li>
<li>蕎麦</li>
<li>みかん</li>
<li>日本酒</li>
</ul>
<h2>年始編</h2>
<ul>
<li>おせち</li>
<li>お餅（お雑煮、焼き）</li>
<li>とろろ</li>
</ul> SEOガーうぜぇけどそれいじょうにvalidダーもうぜぇからどっかいけよ <h1>年末年始に食べたいものリスト</h1>
<h2>年末編</h2>
<ul>
<li>お鍋（海鮮系、お肉系）
<ul>
<li>鱈</li>
<li>カニ</li>
<li>牡蠣</li>
</ul>
</li>
<li>おさしみ</li>
<li>蕎麦</li>
<li>みかん</li>
<li>日本酒</li>
</ul>
<h2>年始編</h2>
<ul>
<li>おせち
<ul>
<li>昆布巻</li>
<li>黒豆</li>
<li>栗きんとん</li>
</ul>
</li>
<li>お餅（お雑煮、焼き）</li>
<li>とろろ</li>
</ul>
なぜとろろ >>65
<main>
<header>
<h1>年末年始に食べたいものリスト</h1>
</header>
<article>
<h1>年末編</h1>
<ul>
<li>お鍋（海鮮系、お肉系）</li>
<li>おさしみ</li>
<li>蕎麦</li>
<li>みかん</li>
</ul>
</article>
<article>
<h1>年始編</h1>
<ul>
<li>おせち</li>
<li>お餅（お雑煮、焼き）</li>
<li>とろろ</li>
<li>みかん</li>
</ul>
</article>
</main> >>23
> 空要素を/で閉じるのはXHTML（XML）の決まりでHTMLでは/で閉じない
HTML5では、XHTMLからの移行に配慮して、空要素を/で閉じても良いことになっている
これは逆にHTML5からXHTML5に移行する時にも使えるので、/で閉じている >>70
XHTMLの未来なんてあるのかなあ
ティムたんが血涙流して捨てたのに >>31
Hamlは改行とインデントを強制するから、あの仕様なのであって、HTMLにそのまま適用して良しとするのはおかしいと思うぞ。
Hamlでは、下記のように変換される。
%ul
%liりんご
%liバナナ
↓
<ul>
<li>りんご</li>
<li>バナナ</li>
</ul>
つまり、終了タグを省略したHTMLと等価ではない。
改行が終了タグと代わりとなるから、終了タグを省略出来るだけだ。
<ul>
<li>りんご
<li>バナナ
</ul> >>70
> HTML5では、XHTMLからの移行に配慮して、空要素を/で閉じても良いことになっている
> これは逆にHTML5からXHTML5に移行する時にも使えるので、/で閉じている
違う。「閉じてない」
空要素はそもそも開くものでもないし、閉じる必要もないし、閉じることも出来ない
例えば、<br> はこれ単体で完結してる。これを閉じる<br></br>は間違い
そもそもHTMLは昔から未知の属性は無視されるという仕様だった
<br asdfa bsgadf baf> というのは<br>タグの使い方として間違いではあるが、
未知の属性だから無視されるだけで、<br>タグとして使える
同じように <br /> も未知の/という属性があるだけで昔から使えた。
これを未知の属性ではなく「意味はないけど、互換性のために書いても良い」としたのがHTML5
閉じるという効果はないけど、書いても仕様違反にはならなくしただけ >>72
的外れだな。liのためだけにHAMLを覚えるよりも、liの終了タグは省略できると覚えるほうが楽
あとは省略して書くと楽だよって話なだけ みなさんが使ってきて、使わなくなったライブラリやフレームワーク、
使わなくなった理由を教えて頂けますか smarty：
単純に古い。悪くは無いんだけどねぇ
jQuerymobile：
FWとは思えないめんどくささ >>74
> <br />の/って属性扱いだったのか
HTML4以前の古いブラウザではまさにそのとおりに解釈される。
HTML4では仕様上未定義もしくは違反だが、そういったミスがあっても動くように作られてる。
HTML5の仕様っていうのは、現実のブラウザの挙動を考慮した上で作られてる。
だからXHTMLでは <br/> とbrと/の間にスペースを入れなくても許されるが
HTML5では、昔のブラウザの挙動に合わせてスペースを入れて
（スラッシュを入れるならば）<br />と書くことが推奨されてる。
もちろんXHTMLとの互換性を考慮しないならば、<br> でよい
そしてHTML5ではタグを閉じるという効果はない。 >>76
Prototype、jQueryの方が優れていたから
backbone、なんか知らんけど死んだｗ
Angular1、互換性のないAngular2に変わりやがった
jQueryだけだよ。こんなに長く使えるライブラリは あぁそういやPrototypeも使ってたな。jQueryに完全に呑まれた
競合無ければもう少し長生きしたかも pugはいいよねー
閉じなくてよいだけでこんなに楽になるとは .mywife {
face: beautiful;
height: 168cm;
three-size: 90cm 55cm 95cm;
personality: good;
}
あと何か設定しといた方がいいことある？ なんでもいいんじゃね？
どちらにしろリアル嫁がそうなるわけじゃないんだから なんでクラスなんだよID使うぐらいの心意気見せろよ >>86
えっ…ならないの？(´・ω:;.:... 今季の俺の嫁は○○とか
最短で1クールごとに変わるからな >>73
俺は「HTMLパーサーが閉じていると認識するか」の話はしていない
「仕様として <tag /> が認められている」という話をしている
それぐらい文脈で理解して欲しいのだが >>75
的外れというなら、Hamlを例に出した>>31が間違い
終了タグを省略出来る理由を全く考慮せず、文法を見て真似しているだけなんだからな Pugとかsassとかやりてえですが導入するまでの環境構築でつまづいています。
いろんなインストしたくないのでcodekit+compassにpug対応させるまで待っていようかと思っていますが
参考までに皆さんの環境良かったら教えていただけませんか？
いまのところsubrime3でhtml+cssぺちぺと手打ちしてるものです sassはvscodeでlivesass入れるのがオススメ
vscodeいいよ、昔ほど重くないしsublimeより補間しっかりしてる 静的サイトジェネレータを使っている人いる？
いろいろあるようだけど、使っている人の使用感とか、お勧めレビューを聞きたい
Hamlやmarkdownとは違うんだよね？ 静的サイトジェネレータはその構成パーツとして基本的に何らかのテンプレートエンジン採用してるぞ。
Pugでもejsでもhandlebarでもmarkdownでも好きに選べるやつもある。 タイトル:どいつもこいつも
死ねよマジで
タイトル:どいつもこいつも
死ねよマジで
こうしたいんだけどどうすればいいですか？ タイトル:どいつもこいつも
死ねよマジで
タイトル:どいつもこいつも
空白空白死ねよマジで
こうしたいんだけどどうすればいいですか？ ■ このスレッドは過去ログ倉庫に格納されています
