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 > h1は見出しって意味があるから全文入ってたら明らかにおかしいでしょ
そうだね。俺はh1に全文入れるなんて一言も言ってないけどね。
h1に全文入れるとか言い出した馬鹿に言ってねw
で、h1は複数使って良い。そんだけ >>32
> validを持ち出してくるのはおかしいっていってんの
validか否か以外に、複数のh1がだめな理由なんて思いつかないからな
どこぞの馬鹿が、タグの中に全部入れられるから
だめなんだって理由ならaだって同じだしぃ〜?(笑)
だめな理由がなければ、いいってことだよねw >>32
validであること以外に
なんら強制される義理はないですしおすし h1複数でどう解釈されようとも、外部リンクぶっさすだけで帳消しになった時代の話だろ
今更何をワイワイやってるんだ >>33
>>34
>>35
もうちょっとまとめてからかいて しらねw 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>1個しか認めないマンの彼は、この一派の末裔なんだろう
ソースは元教徒だった俺 セマンティクス(意味)を重視するなら
なおのこと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だ!
なぜなら俺が使い方を思いつかないからだ!
って言ってるんだけどなw 使い方が思いつかないなら使わなければいいじゃん
でも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
リンク先に書いてあることまんまだなw
まあ、その程度なら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、なんか知らんけど死んだw
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でも好きに選べるやつもある。 タイトル:どいつもこいつも
死ねよマジで
タイトル:どいつもこいつも
死ねよマジで
こうしたいんだけどどうすればいいですか? タイトル:どいつもこいつも
死ねよマジで
タイトル:どいつもこいつも
空白空白死ねよマジで
こうしたいんだけどどうすればいいですか? >>100
<p>タイトル:どいつもこいつも<br>死ねよマジで</p>
<p>タイトル:どいつもこいつも<br> 空白空白死ねよマジで</p>
<style>
p {
margin-bottom: 1em;
}
</style> >>98
ありがと、好きなテンプレートエンジンを使えるのね
実際の使用感を聞きたいな >>99
padding-left: 1em;
text-indent: -1em; >>102
俺はhandlebarsやmustashが好き。
Pugやslmみたいな省略して書けるんです系のは嫌い。 >>73
>同じように <br /> も未知の/という属性
/ は属性とは認識されないはず
>>56
>つまり、SEOガー、SEOガーの話
section、aside、article などは、
SEO ではなく accessibility の話じゃないのかな? >>105
section、aside、article などで
アクセシビリティがどのように変わるというの? >>105
SEOガーいってるやつは負けて荒らすために書いてるだけだから >>107
公式な取り決めとして
<main>やら<nav>やらの意味が定義されると
マシンリーダブルになるんさ
従来のHTMLは
語や句をマークアップする要素は沢山あったんだけど
ブロックについては<form>くらいしか意味のあるものがなくて
セクションを明示するものは全くなかった
だから、たとえばプログラムで
ナビやら広告やらではなく本文部分にアクセスしたい
なんて時に、とても難儀してた
これがHTML5で定義されたセクショニング系要素があると
<nav>や<aside>は本編ではない、<main>が本編、とわかっているので
大変アクセスしやすくなったわけですな
そういう観点でアクセシビリティに大いに寄与している >>109
マシンリーダブルとアクセシビリティにはなんの関係もないですよね >>110
アクセシビリティってのは
ドキュメント内の要素へのアクセス出来やすさ具合のことよ
要素内のコンテンツを得るための障壁がいかに低いか、だけでなく
要素自体へどれだけ到達しやすいか、も重要なファクターなわけよ 国語 : 50点
算数 : 70点
みたいな表を作るとき、HTMLの要素はなにが適してますか?
自分の知識では
<ul>
<li><label>国語</label><label>:</label><p>50点</p></li>
<li><label>算数</label><label>:</label><p>70点</p></li>
とかなんですがlabelでもpでもなんか違う気がしてまして…… ふつうに書き直しました
<ul>
<li><label>国語</label><label>:</label><p>50点</p></li>
<li><label>算数</label><label>:</label><p>70点</p></li> >>115
ありがとうございます
table調べてみます tableを知らない世代が出てきたか。
かつてのHTMLはtableだらけだったんだよ。 >>116
tableはやめとけwww
そんなことしたら恥ずかしすぎるぞwww
どう考えてもdl >>123
tableでもdlでもおかしくないと思うがな dl好きなやつ一定数いるよなあ
dtとddをセットにして括る要素がないから使いづらいと思うんだが >>125
いや基本文章なんてタイトルと本文だろ?
それの繰り返しでhを下げていってhほどでもないものはdlになるわけだから増えるのが当たり前 headerとかh1とか邪魔だったんで、display:noneしちゃったんですけど、seo的にやばかったりします? >>113は「表を作る」とはっきり書いているので、<table>が適切なのだろうな >>128
いいえ。SEOなんて嘘、まやかしです。
そんなものありません。HTMLの書き方で変わることなんてありません >>127
また国語勉強しないといけない人?
リストであればいれるでしょ
どうして「なんでも」になるの? ■ このスレッドは過去ログ倉庫に格納されています