1read 100read
2012年6月Web制作490: 【簡単】取っ付き易いWebページ講座Part3【正確】 (641) TOP カテ一覧 スレ一覧 2ch元 削除依頼
YST対策 パート6 (376)
相互リンク論 (848)
イラストサイトで1日3〜50HITぐらいの人のスレ Part21.5 (532)
自分のホムペの弱点を書くスレ (936)
■テキストエディタだけで製作してる人って・・・■ (342)
Dreamweaver CS3 (733)

【簡単】取っ付き易いWebページ講座Part3【正確】


1 :05/07/08 〜 最終レス :10/02/27
内容はきちんとしているけど初心者にとって取っ付き易いWebページ作成講座とは
どんなものかを考えるスレです。ここで言う「内容がきちんとしている」とは
文法がデタラメでないこと、要素タイプの役割を正しく解説していることなどを
指します。*物理マークアップは間違い(誤り)とはしません*
・既存の良質解説サイトの発掘
・どんなサイトを初心者が好むかの議論
・実際にそんなサイトを製作してみる
などを扱います。次の話題はスレ違いです。*他所でお願いします*
・物理マークアップおよびテーブルレイアウトを「間違い」「誤り」と主張する行為
・論理マークアップを「信者」「一部のオタにしか理解できない」と罵る行為
==過去スレ==

初心者が好むHTML解説サイトって?
http://pc8.2ch.net/test/read.cgi/hp/1086682230/
【中身は】取っ付き易いWebページ講座Part2【正確】
http://pc8.2ch.net/test/read.cgi/hp/1118956381/
==まとめサイト==
ことばのストレージ
http://kitsune.info/WebStart/

2 :
落ちていたので立てちゃいました。
誰も立てないので需要ないのかもしれないけど……
私と違って既に行動に移して頑張ってくれている方もいらっしゃるので
やっぱり立てないのも失礼かと思いたてますた。
使ってください。

3 :
しょこらたん、Good Job!
アク禁食らってスレを立てられなかったので誰か立ててくれるのを待ってたんだよ。

4 :
>>1 GJ ダコノヤロー!
>>3 Me too ダコノヤロー!
-----
めでたくスレがおっ勃ちやがったので、本日 20:00 ごろをめどに Wiki のアップデートをします。
希望的予定時間は 1時間。その間はたぶん Forbidden を出します。

5 :
過疎ってるのでネタ投下。
先日講習会の生徒からホームページ作成の質問ってことで
いくつか質問を受けました。そのときHTMLとCSSを説明するのに
Wordの講習会で使った「見出し」や「箇条書き」の機能と比較して
教えたら結構わかってくれたみたいでした。
で、Wordのときにはどう説明したかというと、やっぱり
「後から全部の見出しのデザインを一括設定・変更できる」っていう
メリットを強調するのが一番わかりやすくて納得しやすいんじゃないかと。
なんか日本語変な気がしますが眠いのでそのまま投下。

6 :
>>5
「後から全部の見出しのデザインを一括設定・変更できる」のは
CSSの話だよね。自分もそんな感じでCSSを説明するつもりです。
人が少ないので同じくネタ投下。
新しくページを追加しました。かなり適当になってきた気がする。
説明は堅くないでしょうか。暇な人がいたらコメントしてください。
初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/index.html
見出しのつけ方 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html1-3.html
HTMLの基本形 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html1-4.html
強調 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html1-5.html

7 :
>6
釈迦に説法な気もしつつ,私ならこうするかなというのを何点か
相変わらずよく判っていないので変なことや余計なことを言っていたらスルーしてやって下さい
>見出しのつけ方
<div class="source">〜</div> を <kbd>〜</kbd> に
<code class="tag">〜</code> とかを <em class="tag">〜</em> に
まとめてhn要素と呼ばれることもあります のところに "nには1-6の数字が当てはまるわけです" 的な注釈を入れる
>HTMLの基本形
作成したテンプレートをDLできるようにしておくと喜ばれる……かもしれません
"このテンプレートを自分なりに改良して,より使いやすくして下さい" 的な文章を入れる
>強調 ― 初めての人のためのHTMLとCSS
|文字を赤くして強調 下線を引いて強調 文字サイズを大きくして強調
のところはリストにせず <samp><em style="color:red;">-</em>(中略)</samp> にする
(<p>要素は<samp>要素を含むことができるので不自然(?)に段落を切らずにすむかなと)
(class を振らずに style を指定するのは,なんとなくその方が自然かなと思えたからです)
|どの要素もブロックレベル要素かインライン要素に分類することができます。
|新しい要素が出てきたら、どっちなのかを毎回覚えるようにしてください。
これはブロック要素をリストアップしておいて,判らなくなったらその都度参照してもらう方が親切である気がします
もしくは,どこか適当なページを紹介してしまうのも1つの手かもしれません
|段落全体を強調したいからといって、
|<em><p>〜〜</p></em>
|とするのは間違いです。
段落全体を強調したい場合は
<em><p>--</p></em>
ではなく
<p><em>--</em></p>
とします

8 :
>>7
アドバイスありがとうございます。とても参考になりました。
まだまだ改善の余地は大きいなと感じました。
マークアップの仕方について2点質問です。
kbd要素はユーザーがキーボードで入力する部分を示すときに使うんですよね。
「<kbd>Enter</kbd>を押してください」のような感じで。
ソースコードを全部囲んじゃっていいんでしょうか(インライン要素なのに)・・・
<html>などははHTMLのコードなのですべてcode要素としてマークアップして、
その中で強調したい部分は<span class="attn">ほげほげ</span>としていたんですが、
code要素をem要素に変えるとどう違ってくるんでしょうか。

9 :
>>8
ちょっと前に Strict スレで似た話が出ていたのだけど<code/kbd の使い分け
・HTML や Perl なんかのソースは <pre><code>ソース</code></pre> が妥当だろうな
・input の type="text" とか type="password" なんかは <kbd>テキスト</kbd> ジャマイカ
・DOS とか UNIX シェルのコマンドラインなら <kbd>コマンド</kbd> じゃね?
といったあたりが基本だと思う。
HTML ソースの中の一部について、たとえば「href="hoge.html" と書いてみましょう」な提示の仕方だったら
<kbd>href=&quot;hoge.html&quot;</kbd> と書いてみましょう ←こんな感じか。
要するに、読み手に「こんな風に入力してね」のニュアンスが強ければ kbd にするのが妥当なんだと思う。
ただ、ソース全体を提示するなら「ひとまとまりのソース」として意味を持つので、
これを全部 kbd に入れる必要はないと思う。
つづく。

10 :
つづかれ。
HTML では改行や tab 文字は意味を持たない。だから、以下の二つのソースは同じものとしてパースされる。
------------------------
<!DOCTYPE (ry>
<html>
[tab]<title>hoge</title>
</html>
------------------------
<!DOCTYPE (ry><html><title>hoge</title></html>
------------------------
kbd で示した場合は改行や tab 文字なども含めて「このように入力してね」というニュアンスを含む。
しかしここでは HTML の解説書であるという文脈上、おそらくそこまでは言ってないはずだ。
「(改行や tab などはさておき、)このようにソースを書きますよ」ということなので、
それは code でじゅうぶんに意味付けできているはずだと思う。
# この場合、あえて別の要素を加えるとしたらむしろ samp かも。

11 :
>9-10
なるほど……少し理解が進みました
1つ疑問があります
>10 の1つ目の例示(整形済みテキスト)として表示したい場合はcode要素とするだけだと不都合が生じると思います
その場合はpre要素の子としてcode要素とするのが妥当なのでしょうか?
(尤も,手元の環境ではcode { white-space : pre } が効いているので問題はありませんけれど)
>8
>7 で私ならcode要素をem要素に置き換えると言ったのは,強調した個所がマークアップしている部分(=タグである)と伝わるかなと思ったからです
title属性に"これがタグです"という風な値を与えるとより良いかなと今更補足しておきます
しかし,>9-10を読んでみるとタグであることを明示するのならcode要素とする方が良さそうに思えてきました
(どうやらcode要素は子要素にcode要素を持てるようですので)
#何となく寝付けなくて気が付いたらこんな時間
#眠気で文章が支離滅裂気味かもしれません

12 :
>>11
>>10 の1つ目の例示(整形済みテキスト)として表示したい場合はcode要素とするだけだと不都合が生じると思います
>その場合はpre要素の子としてcode要素とするのが妥当なのでしょうか?
そんで妥当だと思いまちゅ。俺も普段はそう書いてるし。
ただ、狭いモニタとかで見たら横スクロールが出るかも知んないのよね<pre
まあ BASIC と違って改行に文法的な意味はないんだから、適当な箇所で改行して書くよう心がけましょうってな話かな。
>>8
>しかし,>9-10を読んでみるとタグであることを明示するのならcode要素とする方が良さそうに思えてきました
タグは原則として code に入れるってことでいいと思うのね。
ただ、要素名として語るときは em でもいいかも。
<em>ol</em> の直下の子要素は、<em>li</em> だけです ←みたいな。
まあ与えたいニュアンス次第やね。code に em をネストしてもいいんだし、
要素名に共通の class を持たせたら見た目も共通できるし。
このへんは文脈次第じゃなかろうかと。
# おいらは夕方から深夜まで寝てしまい、それからずっと調べものとかメール対応とか orz

13 :
うぅぅ 後半ちょっとミスった。
>>8>>8,11 のつもりでしたおやすみなさい ←また寝るのかYO

14 :
レスサンクスです。
タグは<code class="tag">〜</code>で囲み、サンプルのソースを
<div class="source">〜</div>でグループ化することに統一していたんですが
これで問題ないでしょうか。それともサンプルのソースを
<div class="source"><code>〜</code></div>で囲むようにしたほうがいい?

15 :
>>14
class ってのは基本的にスタイルシートのセレクタでしかないのですわ。
簡単に言い換えると、class="source" と書いても、
UA が「ああ、ここはソースコードね」と理解してくれるわけではない。
これは、以下のような問題があるかも知れない。
1. 信者的な解釈
「ソースコードを示すには code 要素が用意されているのだから、使わんといかんと思う」
2. 実装の問題
「CSS が無効でも、code に入れておけばブラウザが TT フォントをあててくれると期待できる。
code を使わずに div のスタイルで文字種を指定した場合、CSS が無効だと見た目が地の文と同じになってしまう」
要するに、class で意味をつけるのは補助的なものだってこと。
そのものズバリの要素があるのであれば、それを使うのが当然つか自然だあね。

16 :
>14
15さんに言いたいことは殆ど言われてしまいましたので1点だけ
|<div class="source"><code>〜</code></div>で囲むようにしたほうがいい?
これは<code class="source">HTMLソース</code>とする方が自然かと思います
……あくまでも"私は"ですけれど(いい加減くどいですね,私)
この辺りはページ製作者の好みの問題なのかもしれません

17 :
そういう場所はsample要素使うんじゃなかったっけ?

18 :
>>15,16
なるほど、class="source"と指定しても、HTMLとしてはそれが
プログラムのコードを意味していることにはならないんですね。
結局HTMLのソースは<pre class="source"><code>〜</code></pre>
で囲んで、整形済みテキストとしてマークアップして、さらに
タグを<code class="tag">〜</code>でマークアップすることに
しました。
>>17
samp要素はプログラムの表示例に使うそうです。
例を挙げるとこんな感じです。
<code><em>強調したい文字列</em></code>
とすると、
<samp><em>強調したい文字列</em></samp>
のように表示されます。

19 :
ミスった。
<code>&lt;em&gt;強調したい文字列&lt;/em&gt;</code>
とすると、
<samp><em>強調したい文字列</em></samp>
のように表示されます。

20 :
またミスった(´・ω・`)ショボーン
&が表示できない??

21 :
スレの方向性が変ったね。
私が荒していたころとは。

22 :
>>6
http://www.k2.dion.ne.jp/~spag/html-css/html1-3.html
>見出しはレベル1から順に使うようにしましょう。いきなりレベル2から始まったり、
>レベル3を飛ばしてレベル4を使ったりするのはよくありません。
こんな事にこだわるのはかえって使い方を不自由にするだけ。
「よくない」なんて事はW3Cで言ってるの?

23 :
>>6
http://www.k2.dion.ne.jp/~spag/html-css/html1-3.html
>HTMLはW3Cという団体が開発しています。
これもおかしくないか?開発しているってのは。
W3CはHTMLの一つのガイドラインを発表しているにすぎない。

24 :
>>23はともかく>>22は別にいいんじゃね?
レベルをとばさないといけなくなるケースなんてそうないし
とばすなっていいきっちゃったほうが
「上(のレベル)から順に数字ふればいいんだ」ってわかってもらいやすいかと
自分なら「1から順に飛ばさず使わないといけないということはないけども
飛ばさないといけないケースなんてほとんどないと個人的には思います。
構造をはっきり明確にするためにも順番に使いましょう」みたいなこと書くかな
##っつーかサークルでそう話した

25 :
>>22
>こんな事にこだわるのはかえって使い方を不自由にするだけ。
見出し要素をh1から順に使っていくと、どんな不自由があるんでしょうか。
>「よくない」なんて事はW3Cで言ってるの?
とは言っていないかもしれません。これは自分の判断です。
>>23
「標準化を行っています。」に直します。

26 :
CSSについてちょっと書いてみました。
セレクタの説明はかなり邪道かもしれません。
* 最初は神崎さんのところ(http://www.kanzaki.com/docs/html/htminfo17.html#S32
の流れで説明しようと思ったけど、セレクタのいろいろな書き方(要素名、要素名.クラス、
要素名#ID、.クラス、#ID)が出てくると、初心者が混乱するかもと思ったので、
要素名、.クラス、#IDの書き方をメインに書いた。これで大体まかなえるので。
初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/
CSSの基礎 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/css1-1.html
スタイルの指定方法 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/css1-2.html

27 :
>>25
トップページではサイトのタイトルをh1にするだろ。
でも全部のページにサイトのタイトルを入れるのはくどいから
ページのタイトルをh1にしたい。
そうするとサイトタイトルほどでかい字で書きたくない。
外部スタイルシートを使うときには初心者にとって設定がめんどくさいことになる。
それよりもサイトタイトルはh1でページタイトルはh2って使い方の方が分りやすくてすっきり
することもある。
だから、h1から順番に使っていかなきゃならないなんてのはおかしな制約だとおもうよ。

28 :
>>25
>>「よくない」なんて事はW3Cで言ってるの?
>とは言っていないかもしれません。これは自分の判断です。
だったら不必要な制約を自分の判断で作るような事は初心者に対して
好ましくないと思うよ。
めんどくさくなるわけだから。
>>27に書いたような使い方をしろと言っているわけではないが、そういう
使い方を否定するような記述はいかがなものか。

29 :
>>27
確かにそういう使い方もできますね。
調べてみたけど、確かに見出しを飛ばすのは「悪い」とは言っていないようです。
「悪いと考える人もいる」そうです。
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5
Some people consider skipping heading levels to be bad practice.
They accept H1 H2 H1 while they do not accept H1 H3 H1 since the
heading level H2 is skipped.
h2から書き始めることについては何も言っていないし、わざわざ初心者に
そのことを言及する必要もないかも。

30 :
w3c信者って、w3cの言及を引用すると反論しなくなるんだね。
だから信者って言われるのか・・・

31 :
反論するヤツはスレ違いですよ。「初心者にどこまで教えるか」がテーマなんだから。

32 :
>27
最初にこの投稿の結論から
"見出しのマークアップはレベル1であるh1要素から始めるのが自然だと思います"
--
見出しのレベルは"ページ内でどの程度重要であるか"によって決定されるようです
即ち,ページ内の一番重要な見出しをh1要素,次に重要な見出しをh2要素とするのが自然であると
#サイトのタイトルはサイト全体の見出しですので,各ページの見出しとしては相応しくないのかもしれません……私見ですけれど
"トップページの最重要な見出しとしてサイトのタイトルがあるならh1(要素)にする"
"トップページ以外では,サイト名を入れるとくどいので,トップレベルの見出しをページのタイトルにしたい"
ということで,上記2点は理解し納得することができます
|そうするとサイトタイトルほどでかい字で書きたくない。
トップレベルの見出しを"でかい字"でレンダリングされない為にh2要素とするのは,意味付けの仕方を間違えていると思います
#視覚系ブラウザはより重要な見出しをより大きなサイズでレンダリングするという慣習があるのは事実ですけれど
HTML文書は見栄えを決めるものではなく,文章を意味付けするものだと思います
また,解釈するのはブラウザであって閲覧者ではないとも
つまり,ブラウザが正しく解釈可能となるように,ページ内の最重要な見出しはh1要素とするべきかなと
|それよりもサイトタイトルはh1でページタイトルはh2って使い方の方が
|分りやすくてすっきりすることもある。
という意見は理解できますけれど,HTML文書としてはどうかなと
<サイト名>-<サイト名>とか<ページタイトル>-</ページタイトル>みたいな要素があればより分かりやすくすっきりするのもしれません

33 :
じゃあサイトタイトルはむしろ address で、とか言ってみる。
hn のレベル飛ばし問題は、単純に仕様の不備だと思っている。
HTML がネストすることによって文書構造を表現する前提なのに、
hn は div に入れない限り、前後するブロックとの関係を明示できない。
h1 は h2 から見て「暗黙の親要素」って感じ(もちろん親要素ではないが)。
暗黙じゃなくてきちんと明示するのがマークアップの本質なので、これにはとても不満だ。
# このへんは XHTML 2.0 時代を待たざるを得ないだろうなあ。
いずれにせよ、文字の大きさや字種(bold とか italic とか)はスタイルシートでという大前提がある以上
h1 から h2 を飛ばして h3 を書く理由がない。
h2.section とかクラスを与えずに、普通に生の h2 にスタイル指定した方が楽なのは心情的に理解できるが、
スタイルに従ってマークアップを変更するのは本末転倒だと思わんか。

34 :
ところで、俺はむしろ初心者向けだからこそ h1 から順に振っていけと指導したい。
Strict ベースで教えるなら、原則をシンプルにしなければ Strict であるメリットが失われるからだ。
そしてもう一つ、自分で書いた HTML は自分で説明できなければならないと思っている。
仮に初心者が「このマークアップは、なんで h2 を飛ばして h3 なんですか?」と尋ねてきた時、
まともに答えられないようならやっぱどっかおかしいってことだ。
やはり必要があるならきちんとクラスを振ってレンダリング結果を調整すべき。
俺は valid なマークアップしかやりたくないが、それは仕様書で制限されていないことなら
何をやってもかまわない、という意味ではない。
h2 飛ばしは厳密には禁止行為ではないから valid ではあるんだが、
そのような美しくないマークアップを指導したくはない。
「仕様書に書いてあるからこれでいいのだ」というのと
「仕様書で禁じられていないからこれでいいのだ」というのは違う。
h2 飛ばしは言ってみりゃ仕様書の不備をついた裏技なので、それこそ初心者に教える値打ちを感じない。
「h2 飛ばしてもバリデータに合格判定をもらったんだけど、いいの?」と聞かれたら
その時「よく気づいたね。実は特に制限されていないから仕様上問題はない。
でも、美しくないから個人的には却下」と答えたら済む話で、わざわざこっちから触れる必要はないと思う。
ちと蛇足ながら、前にも書いたように見出しレベルを抜き出して目次を作ったりしてくれるアプリケーションがあるので、
h2 飛ばしはアクセシビリティ/ユーザビリティ的に難があることも指摘しておきたい。

35 :
>>31
>>30を反論、煽りととるの?
目的はw3cのガイドラインを教えるかじゃないよね?
だいたいISOでは飛ばしちゃいけないし。
>見出しはレベル1から順に使うようにしましょう。いきなりレベル2から始まったり、
>レベル3を飛ばしてレベル4を使ったりするのはよくありません。
こう↑考える方が普通じゃない?
Tranはstrictへの移行措置だし、strictはXHTMLへの移行措置。
そもそも、XHTMLはコンピュータが理解できるように構造を記述するのが目的なんだから。
w3cが言っていないから自分の意見の方が間違いなの?

36 :
>>34
あんたが作るStrict 解説サイトにはそう書けばいいよ。

37 :
>>35
「信者」って言葉が出てくると煽られてるような気がする
いろいろ意見が出て参考になりました。
私の意見をまとめておきます。
* h1から順番に使うことは、28さんが言うように初心者にとって
負担となるのか考えてみたけど、「ページのタイトルをh1要素にして、
各々の記事にh2要素で見出しをつける」とかページのスタイルを
全体で統一しておけば、27のような使い方をしなくても済む。
トップのページは「ページのタイトル=サイトのタイトル」だと
考えれば矛盾しない。
* h1から順番に使うほうがシンプル。
* 文字の大きさなどはスタイルシートで変更する方法を説明するので
問題ない。
* 「よくない」という言い方は主観的なので、理由を説明する。
私のサイトのスタンスは「ValidなHTMLを書けるようにする&
(文法的な意味ではなくHTMLの理念に照らし合わせて)Strictな
HTMLを目指す」なので、29の最後の2行は撤回して、理由も含めて
見出し要素はh1から順番に使うよう言うことにします。

38 :
>>34.>>35
サイト全体を通してみたときにh1はサイト名、h2はページのタイトルっていうふうに
統一するってのも一つの考えてして成立するって事を言ってるんだけど。
共通スタイルシートも使いやすいし。

39 :
初心者的立場からいえばスタイルシートでページ毎にh1、h2の大きさを
変えるように設定するのは実につまらない下らない負担だと思う。
サイトタイトルとページタイトルのケースはごく普通にあるケースだと
おもうが、fontタグで指定する簡便さとくらべりゃまったく回りくどい
手間のような気がする。

40 :
>>37
>トップのページは「ページのタイトル=サイトのタイトル」だと
>考えれば矛盾しない。
サイトのタイトルはサイト名として明らかにしてるんじゃないの?
そのページだけが例えばサイトタイトル「〜の記録簿」なのか?
マークアップに理由付を求めるならそんなご都合主義もおかしなもの。

41 :
つまらん制約とか自分の思いこみで作るようなルールは人を縛るもの
だからなるべく教えないほうがいい。

42 :
>>35
>>見出しはレベル1から順に使うようにしましょう。いきなりレベル2から始まったり、
>>レベル3を飛ばしてレベル4を使ったりするのはよくありません。
>こう↑考える方が普通じゃない?
そうは思いません。

43 :
http://www.microsoft.com/japan/

44 :
>>29
それは4.0の時には飛ばしちゃいけないって書いてあったらしい。
それが4.01になったときに「だめだと考える人もいる」に変ったらしい。
なぜわざわざ書きかえたのか考えてみるといい。

45 :
「だめだと考える人もいる」じゃなくて「悪い習慣だと考える人もいる」か。

46 :
個人的には、スキップするメリットが見当たらない。
TeXでのpart, chapter, section, subsectionみたいに、
順序だてて使ったほうがいいのかな、と思う。
まぁこれも慣れなのかもしれないけど。

47 :
メリットデメリットの話か?
論理マークアップなのだから、「飛ばす理由がない」で FA なんでないの?
スタイルシートの記述が面倒だという意見もあったが、初心者に与えるロードマップとしては
文章を書く → マークアップする → スタイルをあてる だと思うわけ。
最初はこの順序でやらないと、マークアップとスタイル記述を分離する習性が身に付きにくい。
一通り学んだ後で「面倒だから飛ばしちゃえ」ってのは好きにしたらいいと思うが、
初心者が上記のステップを踏むとしたら h1 から順に振っていった方がわかりやすいと思うぞ。
あと、サイトタイトルは <h1>サイト名 - ページ名</h1> に汁とかもありかも。
サイト名を span に入れて display: block でもいいかもな。
てか、俺は必須のものではないと思うんだが<サイト名
title に入れておく(<title>[サイト名] ページ名</title> とか)なりパン屑リストに入れるなり、どうにでもできるだろ。

48 :
>>47
そのためにサイトタイトル名の付け方を制限するなんてのは、それこそ道具としての
「本末転倒」だろ。

49 :
>>46
メリットがないというが、個人的にはサイト名がh1、ページタイトルがh2
ページのその中にある章みたいなものがh3って決めてやっていけばサイトとして
のhnタグの役割に一貫性ができるだろ。
あとで章の部分の色だけ変えたいと思えばそのhnのスタイルだけ変えれば全部の
ページが変る。
そういう使い方だってありだろうって言ってるわけだよ。

50 :
それとまず初心者がサイトを作るときに共通スタイルシートを使えば
すぐにぶち当る問題のはず。
そこでhnにたいしてclassなり何なりを割振ってページ毎で大きさを
変えるって作業が、fontで直接サイズを指定することの直感的わかりやすさ
と比べると、扱いやすいというイメージは持たれない。

51 :
>>47
>サイト名を span に入れて display: block でもいいかもな。
初心者にそんな事をやれって教えるのか?
そんな不自然なことをやらなきゃいけないって事自体ばかげてる
って思わない?

52 :
ここのスレタイを見れば分ると思うが「取っつき易いWebページ講座」だぞ。
ずっと昔からスタイルシートとかマークアップになれてるやつらはごく簡単で
当り前に見えることでも、初心者にとってはそうではない。
h1から順番に振っていくって教え方を否定はしないが、だからといってそうしない
間違いであるとわざわざ記述する必要はないだろ。

53 :
>>48,51
俺はサイトタイトルはいらんと思っている。
入れるとしてもナビゲーションの中かな。
なので、どうしても見出しに入れたいのなら本末転倒とか不自然になるのはある意味当然かなとw
ただ、title の一部に含めるのは悪くない選択肢だと思うよ。
ブックマークした人が見つけやすそうだし。
このへんはユーザビリティの話だけどな。
>>50
それはわかるんだが、デザイン・レイアウトをマークアップに含めないというのは基本。
この場合は見出しに限って「font を使うのが楽」とか書いちゃうことになるので、
それはどうかと思うんだな。例外は作るべきじゃない。
だいいち、それでは説明に一貫性がなくなってしまう。
個人的には、これは hn の仕様の不備だと考えているから、
正直俺も邪魔臭いと思ってるんだけどな。
>>51
半分同意。
確かに間違いにはならないんだよな。
が、同様にわざわざ「スキップしてもいいです」とか書く必要もなさげ。
なぜかというと、スキップしなければならない状況がイメージできないから。
穏便な線で考えると、「原則として h1 から順番に並べましょう」とだけ書いておき、
細かい説明は別ページに逃がしておくってのはどうだろ。
初心者レベルから見るとちとマニアックだし、上級編的な扱いで。

54 :
間違えた。最後の >>51(半分同意〜)は >>52 だった。

55 :
>>52
この議論は前スレでもあったことだろ。
というかお前は暇潰しに荒らしてるだけじゃないのか?>>21か?
それはおいといて、
>h1から順番に振っていくって教え方を否定はしないが、だからといってそうしない
>間違いであるとわざわざ記述する必要はないだろ。
に対しては
>一通り学んだ後で「面倒だから飛ばしちゃえ」ってのは好きにしたらいい(>>47
これでいいじゃん。
それかお前の言うような問題に対処するような解説ページや
>サイト名がh1、ページタイトルがh2
>ページのその中にある章みたいなものがh3って決めてやっていけばサイトとしての
>hnタグの役割に一貫性ができるだろ。
という考えを支持する解説ページでも作れば問題ないか?
個人的にはページ毎にh1とh2の文字サイズを変える必要はないと思うけどね。
うちのサイトはトップページはもちろんh1がサイト名だけど
「このサイトについて」のページのh1はサイト名じゃなく「このサイトについて」だし
見た目もそのまま(サイト名と同じ文字サイズ、背景画像)だよ。
まぁサイト名のロゴはあるけどね。

56 :
……いつも2番煎じ気味なレスをしている気がしますが,折角書いたので投稿してしまいます
>49
例えばh2要素以降しか見出しが無い場合は,省略されているけれど暗黙のうちにサイトタイトルがh1要素としてマークアップされている……ということなのでしょうか?
(少なくとも私は)元の文章に無い(省略されている)ものをマークアップする/されているとみなすのは不自然であると考えます,ひどく感覚的なものですけれど
#ふと思ったのですが,サイトタイトルをh1要素でマークアップしておき,CSSで display:none するというのは如何でしょうか?
#要素としては存在するけれど,視覚系ブラウザではウザイorクドイから表示はしない……不自然ではないと思います
|サイトとしてのhnタグの役割に一貫性ができるだろ。
見出し要素(h1-6)の本来の役割はそれがその章または節の端的な要約であることを意味付けることであるように思えます
ですから,サイトタイトルを常にh1要素としたいのでしたら,最重要な見出し(h1要素)がサイトタイトルとなるようにマークアップする為の文章を書くべきなのだと思います
>52
|スレタイを見れば分ると思うが「取っつき易いWebページ講座」だぞ。
同様に"正確"という言葉も含まれています
現状で私は以下に引用する個所を以って"正確"であるか否かを考えるべきかなと思っています
>37
|私のサイトのスタンスは「ValidなHTMLを書けるようにする&
|(文法的な意味ではなくHTMLの理念に照らし合わせて)StrictなHTMLを目指す」
--
h1-6要素はページ内の見出しであることを意味付けるものです
最重要な見出しはh1要素とし,次に重要なものはh2要素とします
以下,重要度が下がるたびに数字が増えていきます
--
……けして難しくはないと思うのですけれど
#そもそも"タグって何"という人はfont要素の属性を指定する方がCSSよりも楽だとは言い出さないような
#そして,font要素の属性で装飾することを知っている向きの人には,より正確な(推奨されている)のはCSSで装飾することですと説明します
#講座の目的は知識を養ってもらうことだと考えれば,それで十分なのかもしれません

57 :
>>41
同意

58 :
>>56
>#ふと思ったのですが,サイトタイトルをh1要素でマークアップしておき,CSSで display:none するというのは如何でしょうか?
その話題はもうでてる。
>>56の書込みはすごい内容がない。
めんどうくさいんでたくさん書いてあるレスはいちいち読まない。
俺が書いたことをもう一度読直せよ。
あえてhnを飛ばすなと書く必要はないであろう、とかいたんだ。
おまえら、みんな変なところにとらわれすぎ。
一番最初の説明でhnが順番に振られている説明で理解したからそうじゃないのは間違いだと思いこんでる。
論理的ってことでもその論理の解釈は一人一人解釈が違っていてもいいと思う。
現実のWebでもそう、どうでもいいようなルールの細部にこだわるのを原理主義者という。

59 :
>>55
>>一通り学んだ後で「面倒だから飛ばしちゃえ」ってのは好きにしたらいい(>>47
>これでいいじゃん。
だからそのためには、hnは飛ばしちゃだめ、なんてルールにもない説明はないほうがいい。
>個人的にはページ毎にh1とh2の文字サイズを変える必要はないと思うけどね。
>うちのサイトはトップページはもちろんh1がサイト名だけど
あんたがそうであってとしてもおれはそうじゃない、サイト作る人はみんなそれぞれ違うわけだろ
おれのところはこうだ、なんて言ってもそんな事に意味はない。

60 :
>>53
>俺はサイトタイトルはいらんと思っている。
お前がそう思うのは勝手だが、他の人はみんなそれと同じ事を思うかどうか
文法のためにサイトタイトルをなくするとか
>なので、どうしても見出しに入れたいのなら本末転倒とか不自然になるのはある意味当然かなとw
本末転倒を自分で認めてるんだろ。
>ただ、title の一部に含めるのは悪くない選択肢だと思うよ。
>ブックマークした人が見つけやすそうだし。
>このへんはユーザビリティの話だけどな。
タイトルが長くなると、それをリンクしたページでよけいなスペースが必要になったりするわけだろ。
タイトルを正式に全部入れようとすると、タイトルをどうつけるかなんてのも個人の好みの問題で、
文法にあわせるようなものじゃない。

61 :
>>53
>それはわかるんだが、デザイン・レイアウトをマークアップに含めないというのは基本。
>この場合は見出しに限って「font を使うのが楽」とか書いちゃうことになるので、ー略ー
何ピントはずれなこと言ってるんだ。
>この場合は見出しに限って「font を使うのが楽」とか書いちゃうことになるので
こんな事書かなくても、hnの指定のやり方で飛び番を使えばできることだろ。
だから、あえてhnの飛び番を否定する必要はないだろ、っていってるんだけど。
もちろん説明に飛び番をつかえとか説明しろって言ってるんじゃない。
ただ、否定する必要がないっていってるだけ。

62 :
>>53
>が、同様にわざわざ「スキップしてもいいです」とか書く必要もなさげ。
>なぜかというと、スキップしなければならない状況がイメージできないから。
それはもう書いただろ。
スキップした方が簡単になる例としてのサイトタイトルとページタイトルの例で。
>が、同様にわざわざ「スキップしてもいいです」とか書く必要もなさげ。
わざわざ書けとは言ってない。
説明もしなくていいよ。
スキップすることを否定するなと言っているだけ、ここらへんのところが理解できない
のかな?

63 :
>>53
>ただ、title の一部に含めるのは悪くない選択肢だと思うよ。
>ブックマークした人が見つけやすそうだし。
>このへんはユーザビリティの話だけどな。
タイトルが長くなると、それをリンクしたページでよけいなスペースが必要になったりするわけだろ。
タイトルを正式に全部入れようとすると、タイトルをどうつけるかなんてのも個人の好みの問題で、
文法にあわせるようなものじゃない。
>>60で以上のように書いたけど、文法の話とは別にページタイトルにサイト名を入れることに対しては
否定するわけじゃない。ユーザビリティって点からみればたしかに悪くない選択肢だと思う。
だから>>60の上の記述は部分的に取消す。適当に解釈してくれ。

64 :
>>63
OK、
仕様書に書いてないような「文法外」のことは書かないべき
という意見なわけだな。
ただ、見出しレベルの解説としては
ページ内での見出しの階層順に番号をつける
というのは妥当だと思うけど。
http://www.k2.dion.ne.jp/~spag/html-css/html1-3.html
>見出しはレベル1から順に使うようにしましょう。いきなりレベル2から始まったり、
>レベル3を飛ばしてレベル4を使ったりするのはよくありません。
これをもう少し穏便に書けばいいか?

65 :
前にも書いたが、サイト名をh1にして各ページタイトルをh2にするってのは
共通スタイルシートを使う場合利点があるし、そういったやり方もひとつの
「論理」によるマークアップだろ。
例えば「章」の色だけ変えたかったら一度に変更できるってメリットがある。
どっかで習ったときのやりかたで、各ページの中で順番に割振っていくって方法
は解説のためには基本的で理解しやすいが、一つの方法論に過ぎないのであって、
そうでなければいけないとか、それ以外は間違いとかいうのは例示をルールと思
いこんでしまうある意味「トラウマ」(言葉変かな?)変な思いこみにとらわれ
すぎていないか?

66 :
>>64
>>見出しはレベル1から順に使うようにしましょう。いきなりレベル2から始まったり、
>>レベル3を飛ばしてレベル4を使ったりするのはよくありません。
>これをもう少し穏便に書けばいいか?
穏便にっていうより、全くその部分は必要ないじゃない。

67 :
>>64
>穏便な線で考えると、「原則として h1 から順番に並べましょう」とだけ書いておき、
これでいいんじゃないの。

68 :
つーか「サイトタイトルをどこに書くべきか」なんてことはそれこそ仕様書には書いてないわけで、
確かに好きにすれなんだが。
手間ひまの問題に絞るなら、要は自サイト内で書式が統一されていればあんまり問題ではないだろう。
実際の書き手が「h1 は必ずサイト名」と決めておけばサイトタイトルの話は済む。
または、hn じゃなくて何らかの div に入れておく(id="site_title" とかでもいいし、パン屑リストに入れるのも一例だ)と
これは個々人が俺様ルールで決めていい話だから、あんまり議論しなくてもいいように思う。
スキップの話を一緒に書くと混乱を招くので、分割。

69 :
場合によっては飛ぶ場合もありますが意味もなく飛ばさないようにしましょう。
大体の文書では飛ぶことはなく、原則h1から順番になります。
程度に書いておけばよくないでしょうか?
何も書かなかったら書かなかったで意味もなく飛ばす人が出てきそう(有名解説サイトの誰かさんみたく)。
基本h1から順番に振るって説明は軽くあったほうが初心者にとって
具体的な使い方の手引きになってピンときやすそう。
ただ「レベルを表します」より「1から順番に振ります」のがわかりやすいかなぁと思います。
あとは作る人各人の自由でいいのでは?
wikiにも書いてあるけどスタンスや説明に着いての言及は意見に留めて
否定はしないってことでいきましょうよ。

70 :
hn の基準は h1 だ。
だから、見出しを書くならそのうちのいずれかは h1 であるべきだ。
まだ調べてないけど、仕様書にはそこまで書いてないと思う。
しかし、h1 がなくて h3〜h5 だけで見出しをマークアップしてある文書は、なんか変だ。
基準が存在しないから、「h3 は何が 3なの?」ということになってしまう。
もう少し進めて、h2 がなくて h3 が出てくる文書の場合の話。
ここまでは「なんで h2 がないの?」というのが焦点だったのだが、
h2 の有無にかかわらず「なんで h3 なの?」にも適切な理由が与えられるべきだ。
上から順に振っておくと、「そらおめえ、2 の次だからだ」で済む。
要するに「h1 のすぐ下のレベルの見出しには h2 でマークアップしておきましょう」だけでいいのかもな。
それ以上の細かい話をしょっぱなに与えるメリットが見えん。
別ページにコラムかなにか用意して、「見出しレベルの与え方は仕様書ではこうなっていて、
これについて○○という議論があります」てなところが落としどころか?
# 説明文の具体例希望。「書く必要ないだろ」ではどんな風に書くべきか見えてこない。

71 :
>>70
>「原則として h1 から順番に並べましょう」
これでいいだろ。
>h2 の有無にかかわらず「なんで h3 なの?」にも適切な理由が与えられるべきだ。
>上から順に振っておくと、「そらおめえ、2 の次だからだ」で済む。
だから、それは個人のルールであればよい。
「章」がh2「節」をh3とか決めるのは個人で決めりゃいいこと。
そんな人の心の中の事まで口出す事じゃないだろ。他人が。

72 :
>>69
>場合によっては飛ぶ場合もありますが意味もなく飛ばさないようにしましょう。
>大体の文書では飛ぶことはなく、原則h1から順番になります。
回りくどい、極論すれば意味なく飛んだって別にかまわないわけだろ。
あんまり下らんことにこだわるな。

73 :
>>70
>しかし、h1 がなくて h3〜h5 だけで見出しをマークアップしてある文書は、なんか変だ。
そりゃ変な先入観。
そんな事自由にやればいい、他人が口出す事じゃないと俺は思う。
まあ、これは他人の解説文だから俺が口出す事についても同じような文句で切換えす事ができるがな。
意味するところは違うが。

74 :
見出しレベルはページ内での順番につけるというのが本来の使い方でそう解説するのは当然。
サイト名はh1,章はh2,節はh3…と決めてつかうのは個人の自由かもしれんが。
>>72
>回りくどい、〜
毒のある言い方だが、その意図は
>>「原則として h1 から順番に並べましょう」
>これでいいだろ。
と受け取っていいんだな。
>>69がこんな「まわりくどい」言い回しをしてるのはお前がくだらんことにこだわるから
妥協してるんだよ。

75 :
>>74
>>>「原則として h1 から順番に並べましょう」
>>これでいいだろ。
>と受け取っていいんだな。
そういうこと。

76 :
またやってるよ・・・
俺もそうだが暇なんだな・・・

77 :
FoxMX6a/hk を NGワード に 登録した。
つかお前も解説サイト作ってくれ。

78 :
こういう話題になると一気にレスがついて、
終わると過疎化してしまうのは寂しいなぁ
文法議論をするだけでなく、私のサイト(>>6)の
内容に関してコメント・アドバイス・批判などを
いただけるとありがたいです。
>>77
FoxMX6a/hk殿は解説サイトは作っていないけれど
まとめサイト(http://kitsune.info/WebStart/
を管理してますよ。
私以外にも解説サイトを作る人が現れるともっと
活気が出ると思うんですが・・・よかったら77さんも
つくってみませんか、と言ってみるテスト

79 :
もう説明するのがめんどくさくなったので少しの文章と例だけ出して終わりにする俺は負け組

80 :
解説するだけして意見批判を一切受け付けてない俺のサイトは真の負け組

81 :
こりゃ廃スレ行き間違いないね。

82 :
>>78
ただで作れるホームページのところは、電気代も書いておいては。
>h1〜h6要素は見出しを示すために使います。文字が大きくなるからといって、文字を大きくするために使ってはいけません。
「使ってはいけない」ではなくて「使うことはできない」だと思います。
あと「見栄え」→「見た目」の方がいいかな。

83 :
>>82
>>h1〜h6要素は見出しを示すために使います。文字が大きくなるからといって、文字を大きくするために使ってはいけません。
>「使ってはいけない」ではなくて「使うことはできない」だと思います。
使うことできるじゃない。

84 :
>>74
>「原則として h1 から順番に並べましょう」
しかしこの書方は誤解を受ける恐れもあるな。
「h1 から順番に」と書くとh2,h1,h3と書くのはいけないことのような
印象を受けちゃうな。
だから番号を飛ばさないようにという表現になるのだろうが、原則として
という書方で書けばいいかな。

85 :
そもそもhnをどう振るかといった問題は1ページ単位での問題のわけなのだが
共通スタイルシートを使うと、そのスタイルは複数ページに適用されるわけで
考え方としてはその複数ページに対しての共通のhnのあり方として扱った方が
自然になる。
ここらへんはWebの本来の単位(ページ単位)でhnなどを考えるのと、共通ス
タイルシートという複数のページをたばねての適用というものとのズレがある
わけで、hnに対しては原則どおりでないケースがおきるのも多くはここに起因
するような気がする。

86 :
>>83
>>h1〜h6要素は見出しを示すために使います。文字が大きくなるからといって、文字を大きくするために使ってはいけません。
使ってはいけません、じゃなくて本来の使い方ではありませんが正しい。
「使うことはできない」なんてのは論外。

87 :
>>83
>h1〜h6要素は見出しを示すために使います。文字が大きくなるからといって、文字を大きくするために使ってはいけません。
h1〜h6を文字の大きさを変えるために使っても何のメリットもないわけだし、fontタグを使うのと簡便さにおいて変るわけでも
ないので「h1〜h6を文字の大きさを変えるために使うのは間違いです」と書いてもいいとは思うが。

88 :
>>83
とりあえずlynxでは無理だよ。

89 :
付け足すと、「文字が大きくなるからといって」と言うならその前に「あなたの環境で」を付け加えるべきだと思う。
hnをどのように表すかは個々のUAのスタイルシートに依存するから。
もちろんfontやCSSを使って文字の大きさを指定してもUAが無視する・理解できないことはあるが、これはまた別の問題。
>>88のlynxを例にとれば、lynxはhnを無視しているから・知らないから文字を大きくしないわけではない。
hnは、その内容がどのレベルの見出しかを示すためのもので、それ以上でもそれ以下でもない。
hnに大きさを変えるという言う意味はこの世界のどこにも存在しない。
だから文字を大きくするためにhnを使うというのは、まったく意味不明ということになる。
下線を引くためにアンカーを使うとか、特殊な環境の人が色を赤にするためにdivを使うとか言ってるのと同じこと。
(もちろん例に挙げたような人が実際にいるということではない)
そういう使い方ができるという考え方があるのが私には理解できないのだが。
「h1〜h6を文字の大きさを変えるために使うのは間違いです」の文は間違ってないからこれでもいいと思うけど、
>>87に書かれている理由はよく理解できない。
hnはfont+brですとか解説しているサイトがどこかにあった気がしたが、そういう人にはメリットがあるように感じるらしいし。
そもそもhnを文字の大きさを変えるために使うことは不可能なんだからメリットも何もないんだが。

90 :
>>88
できない特殊環境をあげればきりがない。
一つの特殊環境をもって全体を断言するのは間違いである。

91 :
>>89
>そもそもhnを文字の大きさを変えるために使うことは不可能なんだからメリットも何もないんだが。
不可能じゃないよ。
IEやNNその他のほとんどの一般的ブラウザでhnで文字の大きさを変えることができる。
そのような使い方もできる。
例えばまったく文字の大きさが最初から一定の表示しかできないブラウザがあったとしたら、
それはCSSを使おうが何を使おうが文字の大きさは変えられないのだから、そういった特殊ブラウザの
例を挙げても無意味。

92 :
>>88
例えばCSSを使えば文字の大きさが変えられます、といっても
もし文字の大きさが全く変えられないブラウザがあったらその
説明は間違いって事になるのかね?
CSSに全く対応してないブラウザではCSSでは文字の大きさは
変えられないんだが。

93 :
>>89
>そもそもhnを文字の大きさを変えるために使うことは不可能なんだからメリットも何もないんだが。
現実にできてるじゃない。

94 :
>>93の補足
>>89
>そもそもhnを文字の大きさを変えるために使うことは不可能なんだからメリットも何もないんだが。
に対して
>そもそもhnを文字の大きさを変えるために使うことは不可能なんだから
と書いてあるが
hnで文字の大きさを変えることは現実にできてるじゃない。
論理的マークアップでもあるが同時に見栄を調整することもできるだろ。

95 :
>>89
おれは
「h1〜h6を文字の大きさを変えるために使うのは間違いです」
こういうふうに説明すればいいっていってるんだけどな。

96 :
たかが言葉のニュアンスの違いでそこまで争わんでも…
「赤信号で横断歩道を渡るのは間違いです」に対して
「赤信号では横断歩道を渡ることはできません」のほうがいいと言ったら
「できないことはないだろ」と突っ込んでる
ような馬鹿馬鹿しさを感じる。

97 :
>>96
それほどこだわるほどのことじゃないが
くだらない変な例えはよけいに論点をあいまいにする。
現実問題としてサイズはhnで変えられるし変えてる。
もちろんCSSを使ってだがな。
>>83
>とりあえずlynxでは無理だよ。
こんな理由付はおかしいだろ。


98 :
>>96
>「赤信号では横断歩道を渡ることはできません」
これは「できません」という言葉の中に「禁止」という意味を含んでいる。
だからこれは間違いではない、一方
hnで文字サイズを変えることはできません、というのは現実問題として
hnで文字サイズは変えられる(もちろんCSSで指定するわけだが)

99 :
もし>>96のたとえに従えば
「hnタグでは文字の大きさを変えることはできません」と書けば
「赤信号では横断歩道を渡ることはできません」(禁止)と同様に
「hnタグでは文字の大きさを変えることはできません」(禁止)
と初心者に解釈されるおそれが十分にあり、hnにCSSで文字サイズ
を設定する(他の文字サイズと変える)こと自体が(禁止)という
ニュアンスで初心者に受取られるおそれがある。

100read 1read
1read 100read
TOP カテ一覧 スレ一覧 2ch元 削除依頼
◆ おいお前ら、HNはどうしてますか? ◆ (542)
Flash MX登場 (581)
Web製作板【中級者スレッド】 (252)
歴史サイト管理人雑談スレ (205)
■□アクセス数増やしたいんだけど□■part ,1 (534)
【i・Ez・S】携帯サイトのSEO【G・Y・B】 (875)
--log9.info------------------
【アマノカズミ】   佐久間レイ   【マイメロディ】 (238)
稲村優奈スレッド Part 8 (410)
【骸骨Deathヨッ!】中村繪里子アンチスレ01【骸骨ッ! (629)
久川綾アンチスレ (858)
◎◎◎三木眞一郎・16th◎◎◎ (212)
近藤佳奈子 Part2【コンドム】 (924)
儀武ゆう子のギブスレ その14 (969)
現在本スレが立ってない声優 Part6 (566)
【イイ人】荒浪和沙Part1【カワイソウ】 (727)
★頑張れ暴走声優三石琴乃! 13★ (246)
松本梨香 Vol.7 (622)
森嶋秀太 Part1 (404)
幼馴染は気弱な看板娘〜川澄綾子58〜 (645)
☆ 保志総一朗 その37 ☆ (454)
近藤隆 8 (346)
くまいもとこ (384)
--log55.com------------------
【PC】StylishNoob専用スレpart356
【自己顕示欲】ツイステツイヲチ【創作監督生】
★りおかハマりたいのウザいツイートを晒すスレ
★メンヘラグレイ隔離スレ
★型月なりきりヲチ&愚痴スレその16
婚活アカウントとその周辺ヲチ PART-95
惚気界隈29
☆☆A関係Twitterヲチスレ PART19☆★