【簡単】取っ付き易いWebページ講座Part3【正確】
■ このスレッドは過去ログ倉庫に格納されています
内容はきちんとしているけど初心者にとって取っ付き易い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/ >>491
パソコン遊戯の管理人２ちゃんねらーだから当然でしょ。
彼はこのスレ見てるんじゃないの？ >>492
初代スレの>>1のリファラからこのスレ知って見てるかも… パソコン遊戯のおかげでGoogleに登録されたみたい。でもって
今自ら華麗に1000getしてきたw 逆引きリファレンス完成記念age
http://www.k2.dion.ne.jp/~spag/reverse/
気をつけた点は
・物理要素は使わない
・非推奨のものは非推奨であることを言う
・アクセシビリティやユーザビリティにも配慮
など。論理マークアップの逆引きリファレンスは今まであまりなかった
気がするので、そこそこ使えるかと思う。
そろそろ検索エンジンに登録しようかな 文字コードのページ、コード別に定義リストにでもしたほうがいい気がする。
ひとつの枠に収めちゃうと初心者がコピペするときに迷うんじゃない？ ＞ページの四隅の余白をなくすには？
たしかOperaではpaddingで余白とってる気がするので
padding:0も必要だと思う。
＞マウスを乗せると説明を表示したい
dfn title="○○"やem title="強調は引用者"、q title="○○より"、img title="○○"、a title="○○へ"などもあるよ。imgとaのtitleは項目がすでにあるのでリンクしとけばいい。
＞画像の周りに文字を回り込ませたい
class-aより素直にimgをセレクタにすればいいんじゃない？
＞画像にリンクを張りたい
目次の「リンク」の項目だけじゃなく、「画像」の項目にもあったほうがよさげ。
「画像リンクの枠を消すには？」もあるといいな。
…すみません・ﾟ・(つД｀)・ﾟ・
ってか学校生活がヤバｽ('A`)留年のｵｶﾝ。。。 <!--さてと、叩かれるかもしれないが続きをするか…--> >>504
<!--あんまり期待されても(´･ω･`)-->
てか、SHARUL、SHARULって…しょこらﾀﾝ？( ﾟдﾟ）ﾎﾟｶｰﾝ ごめん、間違えた。>>504は初代スレの１さんのサイトで、しょこﾀｿじゃなかった。 いや、やっぱり初代スレの1もしょこﾀｿだったから、これで合ってるみたい >>505
もしかして同じ大学の方…？
<!--できればそっちのハンドルはあまり書かないでいただけると… あんま知り合いにこのｽﾚ見つかりたくないので…-->
>>150ﾀｿ
混乱しすぎ(´･ω･`)
>>504は中途で終わってるからなぁ…… >>511
別に俺は何も晒してないよ。505が書いた文字列をGoogleに送信しただけ。
リンク先のページで本名とか性癖とか晒してるのはその当人だろ。 >>513
リンクって文書と文書を関連付けることだからね 3カラムと2カラムの切り替えScriptを付けてみました。
http://www.geocities.jp/multi_column/tutorial/float.html
このページがfloat解説の一番のポイントだと思って書いてますが、
分かりにくいところがあれば、指摘してください。
あとoverflowの件で、理由を仕様を根拠に解説できる方いませんか？ >>519
何て言うか、全体的に難しいね。3回くらい読んでやっと理解できた。
「フロートが存在しないかのように」をもうちょっと詳しく説明してほしいと思った。
overflow:hiddenを設定したときは、floatを設定したボックスも何らかの要因で
コンテナボックスの内容とみなされ、コンテナボックスの高さが自動的に
変わってるんだと思うけど、なぜそうなるのかはわからない。
>>520
ありがとうございます。やはり難しいですか。
overflowの件はさっき調べていて解決しました。
仕様書邦訳には載っていませんが、英語版CSS2.1仕様書の10・6・7に書いてありました。
overflowがvisible以外の非置換ブロック要素の高さは、
その要素の外下辺より下に来る子孫フロートをもつ場合、
フロートの外下辺を含むように拡張されるそうです。
って、理解したつもりの自分で書いてても意味不明な解説だ……。 >>521
難しいのはfloat自体が難しいから仕方ない。
説明は具体例や図が多くてわかりやすいです。中級者以上にはよいサイトだと思う。
こんなものを書いてみた。
アクセシビリティとユーザビリティ ― みんなに見てもらえるホームページ
http://www.k2.dion.ne.jp/~spag/accessibility/access1.html
「たくさんの人に見てもらえるホームページをつくろう」というテーマで、
アクセシビリティやユーザビリティを考える内容。まるでアクセスアップを
扱うかのようなタイトルで、初心者に読ませようという魂胆 >>522
ホームページ・リーダーで読み上げた音声があって(･∀･)ｲｲ!
参考になりますた。 Lynxの紹介をしようと思った矢先、Lynxのページが消滅している・・・なぜだぁぁ 話題がないのでネタ投下。こんなページを発見。
ホームページ作成の第一歩
http://www.7key.jp/hp/
初心者が好みそうなデザイン、文章、逆引きリファレンスなど
自分が当初目指していたものに近い。サンプルソースは仕様を
守っているが、仕様を守ることに言及はしていない。
見た目に関することはHTMLとCSSを両方載せている。
初心者向けのサイトとしてはかなりよいところだと思う。
リンク集のサイトが物理マークアップ解説サイトなのがちょっと不満。 >>521
遅レスですが、Netscapeでコンテナブロックにoverflow:hiddenを設定した
ページを表示すると、フロート部分が表示されなくなるバグがあるみたいです。
>>527
Netscape7.1で確認しました。
結局、このテクニックも使い物にならないようですね overflow:autoの場合のサンプルも追加しました。
あと第5回のページ（>>519）から4⇒3⇒2⇒1と辿れるので、そっちのほうにも
なにかあればコメントほしいです http://www.geocities.jp/multi_column/tutorial/doctype.html
システム識別子の有無でDOCTYPEスイッチが切り替わることにも触れるといいと思う。
後方のボックスにfloatではなくmargin-leftを設定して段組をする方法も載せてほしい。
#boxA { float: left; width: 200px; }
#boxB { margin-left: 200px; }
>>530
実は５日目のlink要素から６日目に辿れます。
そこで２カラムレイアウトのまとめページが未完成ながらあります。
そこにはmarginの方法も一応書いてあります。
５日目の「通常フローから取り除かれたボックスがまるで存在しないかのように」
をもう少し詳しく書く予定なので、そこでもmargin-leftの方法を書こうと思います。 >>531
marginでやるならpx指定がよいと思う。左側（or 右側）の幅を固定できて、
%指定のときのようにウィンドウを縮めると狭くなりすぎたりしないから。
更新しました。アクセシビリティの低いページの例に自民党のページを
取り上げたけれど、問題ないかな？
Lynxでアクセシビリティチェック ― みんなに見てもらえるホームページ
http://localhost/~spag/accessibility/access2.html
誰でも利用できるページをつくるには ― みんなに見てもらえるホームページ
http://localhost/~spag/accessibility/access3.html
それと些細なことだが、ナビゲーションバーはリストとして表すことにした。 乙
＞推奨環境を書かない
が微妙。「〜でご覧ください」はともかく「〜という環境で表示確認しています」程度なら書いても問題ないと思う。
「どんなブラウザでも見られるようなページ」を作れればベストだけど、CSSが原因で閲覧者の環境でレイアウトが崩れた場合にも、少なくとも制作者の意図するレイアウトを表示できる環境を知ることはできる。
たとえばIE6で崩れてても、「Safariで表示確認してます」って書いてあれば、ダメなのはIEのバグのせいで、
OperaやFirefoxで見れば問題ないだろうと（多少の知識があれば）推測できるし。
>>533
推測できたところでそれが意味を持つとは限らないだろう。
閲覧者が「インターネット = IE」という認識だっていうことだって珍しくない。 CSSを使うときはいろいろな種類のブラウザで表示確認をして、どの環境でも
問題なく表示できるようにするのが一番いい。その上で「Internet Explorer、
Firefox、Mozilla、Netscape、Operaで表示確認しました。これらのブラウザなら
CSSが適用されて見栄えよく表示されます。」と書くのはありだと思う。
「こうこうこういう環境で閲覧してください。（でないと表示が崩れて見られません。）」
と書くのはよくない。「推奨環境を書かない」より「閲覧環境を限定しない」と
言ったほうがいいかもしれない。 最近書き込み無いね。
HTML要素タイプ別リファレンス
CSSプロパティ別リファレンスもあるといいなぁ
と言ってみる もう見ている人はいないのかな…？
現在本編を手直しして短くしているところなので、完成したら感想をもらいたい。 ﾉｼ
いるよー、ど素人なので見てるだけだけど。
150のサイトを見て目覚めたのでこっそり御礼を言う。
>>540
ありがとう。見ているだけでなく感想を言ってくれるとうれしい。
知識のある人たちは内容の正確さについて言及してくれるので、
「ここが難しい・わかりにくい」などの意見がほしい。 ＞「ここが難しい・わかりにくい」などの意見がほしい。
だ、ダメ出しムズイ……。えっと、
http://www.k2.dion.ne.jp/~spag/html-css/html1-5.html#sec1
「気をつけなければならないのは、インライン要素の中に
ブロック要素が現れてはいけないこと」とあるのですが、
最初にそこだけ読んだとき
「逆に言うと、それ以外はいいの？ ブロック要素の中にブロック要素を、
インライン要素の中にインライン要素を入れるのはOKか？」と迷いました。
もちろん先へ読み進めていくと分かってきましたが。
興味のある箇所から読んでいく人もいると思うので
"もっと詳しい説明は「要素の親子関係」にあります。"とか、
リンクが張ってあると便利だったかも、と思う。
逆に分かりやすかったのはテーブルの項目あたり。特にセルの結合が助かりました。
サイトをちまちま直しながらCSSで装飾するって難しいなぁ、と意気消沈。
ボーダーとか背景に凝ってみたつもりでもシンプル。デザインセンスを問われているような >>542
ブロックとインラインの明確な定義はないのかな？
ブロックの場合は前後に改行を伴うとか。 >>543
「前後に改行を伴う」というのは視覚的な話。
構造のレベルを考えた方が理解しやすいというか合理的。
とか書くと「取っ付き易くない」とか言われるのかな。 >>544
＞構造のレベルを考えた方が理解しやすい
構造のレベルを考えてどう定義するのですか？ ”視覚的には通常、ブロック要素は開始時に改行を伴い、インライン要素は改行を伴わない。”
という一文を入れれば、初心者にはその違いが分かりやすいと思う。 個人的には「ブロックレベル要素は前後に改行が入る」というのがわかりにくいような
気がして、「ブロックレベル要素は見出し・段落などの大きなパーツ、インライン要素は
その中で使う要素」と表現しています。そのほうが構造を考えながらマークアップできる
と思うからです。
>>543
ブロックレベル要素
http://www.w3.org/TR/html401/sgml/dtd.html#block
インライン要素
http://www.w3.org/TR/html401/sgml/dtd.html#inline
どちらにも属さない要素（li要素など）もあります。
書き直したのでさらしてみます。
クラスとIDの説明を変更（内容が正しくなったはず）
http://www.k2.dion.ne.jp/~spag/html-css/css1-2.html
CSS切り替えスクリプトを導入
http://www.k2.dion.ne.jp/~spag/html-css/css1-3.html
URLの説明を書き直し
http://www.k2.dion.ne.jp/~spag/html-css/html2-1.html#sec1
その他微妙にいろいろ変わっています。ここにさらすついでに
HP評価スレッドで見てもらおうか。
乙です。
相対URLの説明のとこいい感じです。
自分でこういうの作ろうとすると画像の作成が面倒でなかなかできません。
要望としては、ケースごとに見出し（h4）をつけたほうが読みやすいかも。 マーカーやペンで印をつけるときに
・四角く囲いたくなる要素→ブロック要素
・アンダーライン引きたくなる要素→インライン要素
って教わって納得した記憶があるんだけど、さすがにこれはダメだろうなぁ。 >>550
クラスとIDの違いを説明するのが意外と難しい。「例えるなら、クラスが普通名詞で
IDが固有名詞です」と言えばいいのかもしれないけれど、CSSのところでHTMLの
機能の話をするのがやりにくいです。もうちょっと考えます。
スクリーンショットを撮ったらKonquerorで崩れるみたいorz
http://browsershots.org/website/627573/
原因がわからない。
>>551
見出しなんかだと枠よりアンダーラインのイメージのほうが強いかも 自分の感覚では、IDというのはname属性に変わるアンカーであったりDOMで
使うものであり、CSSとのかかわりは薄い気がする。
DHTML（Javascript、CSS、DOM）という大枠から見て、IDが存在するのであるから、
CSSだけの話でIDを語ると、どうしても初心者には理解しずらい表現になると思う。
実際、CSSでしか使わないのであれば、全てclassにしても問題はない。
そのため、初心者はID識別子の存在意義がなかなか見出せない。
と、想像します。 >>553
そのとおりだと思います。
一応IDとクラスの違いの説明をつけてみました。
「class="red"などのクラス名はよくない」なども
書いたほうがいいのかな。 今、アクセシビリティとユーザビリティに関する記事を書いているんですが、
「入り口ページは不要」「工事中ページはつくらない」なども書いたほうが
いいでしょうか。工事中ページなんて最近見た記憶がないんですが、
初心者だとやってしまうかもしれない？ まぁ入り口ページにもいろいろあるからね。明らかに不要なものもあれば、
必要な場合もあると思うし。
入り口ページは不要な場合が多いが、効果的に使っているサイトも紹介する
という形ならあってもいいんじゃないでしょうか。
工事中ページについては少し触れる程度でいいと思います。 スタイルの指定方法 その2
* {
color: black;
background-color: white;
text-decoration: none;
font-weight: normal;
}
「font-style:normal」も追加希望。
ところでCSSファイル内でのコメントの書き方ってどこかで説明してたっけ？ >>556
入り口ページを効果的に使っているサイトがあったら教えてください。
>>557
サンクス。うっかり忘れてました。 FLASHを貼り付けたい ― こんなときはどうするの？
http://www.k2.dion.ne.jp/~spag/reverse/flash.html
Line: 38
<p>HTML文書に音楽や動画を埋め込むにはobject要素を使います。この方法はHTMLの使用に準拠していますが…</p>
~~~~
使用 or 仕様 ? すみません。誤字です。正しくは「仕様」です。
やっぱり誤字脱字チェックが甘い。少なくとも3回は読み直しているんだけれど。
「TOP」「BBS」などのへリンクが画像になっていることはユーザビリティを
低下させるでしょうか？
最初はよくないと思っていたけれど、よくよく考えると利用者はそれらが
各コンテンツへのリンクであることを「TOP」「BBS」などの文字から判断
しているのではないかと思うようになり、だったら別に画像でもテキスト
でも同じではないかと考えています。
別の考え方をお持ちの人がいたら聞かせてください。 経験上、きちんとTOP等と書いてあれば
テキストか画像かはあまり関係ないように感じるな。
むしろちょっと凝って分かりにくく表現してる
(例えばリンクを『環』とか書いてみたり)方が
圧倒的にユーザビリティを引き下げると思う。
やたらと小さい画像だとうざい。テキストなら「最小フォントサイズ」で対処できるが。
可読性に問題が無ければ、画像でもテキストでもどっちでもいい。 ユーザビリティに関する記述を追加しました。感想求む
http://www.k2.dion.ne.jp/~spag/access/ あれを見ている人がいたのか。自分で読んだらつまらなかったし、
検索エンジンにもキャッシュされていないし、読んでいる人も
いないだろうと思って消しちゃった フォントサイズを固定しない
→px固定するとブラウザ側で文字サイズを変えられないのは、IEくらいで、
そのIEにしても、「Webページで指定されたフォントサイズを使用しない」こともできるので、
「ブラウザの設定で文字サイズを「大」や「小」にしても、サイズが変わらなくなってしまいます。」
というのはちょっと正確じゃないです。ブラウザ＝IEという想定なのかもしれませんが。
あと、フォントサイズの指定と見た目との兼ね合いについては、
それだけで1ページ分書けるくらい複雑な問題ですね。
新しいウィンドウを勝手に開かない
→「新しいウィンドウを勝手に開かせない方法がない」
これも同様に「ない」わけではないので、「非常に難しい」くらいの表現が無難かと。 学校の宿題で、ウェブページの仕組とデザインについての説明を以下のキーワード
を使って200字程度で書かなければならないんですが、いまいちよくわかりません。
誰か教えてください。
キーワード：HTML，タグ，スタイルシート(CSS)
ポイント：
HTMLの使い途。HTMLでできることとできないこと
HTMLとCSSの役割分担
役割分担させる意義 暇つぶしに書いてみる。
HTMLはハイパーリンクが可能・環境に依存しないという特徴を持つマークアップ言語で
あり、ウェブページの記述に利用されることが多い。HTMLでは文書に潜在する要素をタ
グと呼ばれる記号でマーク付けし、UAに文書の構造を伝える。論理構造の明示はHTML、
見た目の定義はスタイルシートで行うことで、メンテナンス性・アクセシビリティを向
上させることができる。HTMLはプログラミング言語ではないから、コンピュータに命令
を下すことはできない。(211字)
今さらながらこのスレ見つけて読んでたんだが・・・
ttp://www.k2.dion.ne.jp/~spag/html-css/css1-2.html#sec3
id属性値は、CSS2の正誤表からアンタースコアも使えるようになってます。
あと同じくid属性値に関して、HTMLではすべて大文字が好ましいことは書かなくてもいいのかな？ リファレンス作るなら、スクロールなしで目次が見渡せるレイアウトがいいな
改編版 HTML4.01リファレンスや猫式みたいな感じ。 >>580
> CSS2の正誤表からアンタースコアも使えるようになってます。
「CSS1を扱います」と宣言しているので間違いではないと思いますが、
追記しておきます。
> HTMLではすべて大文字が好ましい
SGML的にIDは大文字に変換されて解釈されるから云々って話ですね
http://www.k2.dion.ne.jp/~spag/html-css/html3-6.html#sec0
で言及してはいるんですが、スタイル指定のところでも書いたほうが
いいですか？
* * * * * * * * * * * * * * * * * * * * * * * * * * *
とりあえずhtml要素の解説だけ書いた。
http://www.k2.dion.ne.jp/~spag/html4ref/html.html
フォーマットは
http://www.ne.jp/asahi/minazuki/bakera/html/reference/reference
をだいぶ参考にした。
これでよければこのフォーマットで続きを書きます。
>>487
亀ですが、的を思いっきり絞っている所がいいですね。
期待しています。 >>582
解説記事（http://www.k2.dion.ne.jp/~spag/html-css/html1-4.html）へのリンクもあるといいと思った。
いや、なくてもいいか？
ソースの例で該当要素を強調して目立たせるといいんじゃない？
<code class="tag"><em><html lang="ja"></em></code>
リファレンスの目次はスクロールなしで一画面に収まるようにしてほしいなぁ。
○○要素の「要素」は省略していいと思う。
詳細目次は別ページに移すか、要素タイプ別一覧の下（横ではなくて）にしてほしい そんなことよりこれ。
「横罫線を引く」
ttp://www.k2.dion.ne.jp/~spag/html-css/html2-2.html#sec3
サンプル表示で非表示になっているから、これだけ
class属性付けてdisplay:blockした方がいいんじゃない？ ttp://www.k2.dion.ne.jp/~spag/
フォントが… ■ このスレッドは過去ログ倉庫に格納されています
