X



【簡単】取っ付き易いWebページ講座Part3【正確】
■ このスレッドは過去ログ倉庫に格納されています
0001しょこら ◆SHR/5x7B2U
垢版 |
2005/07/08(金) 13:38:17ID:???
内容はきちんとしているけど初心者にとって取っ付き易い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/
0202150 ◆x/HTMl8.Ok
垢版 |
2005/08/15(月) 22:19:30ID:???
とりあえず削除依頼出しておきました
0203Name_Not_Found
垢版 |
2005/08/15(月) 22:35:12ID:???
こんなん削除されるわけねーだろ。
0205Name_Not_Found
垢版 |
2005/08/15(月) 23:36:35ID:???
ホントに削除依頼出てたよ。
>>202タン優しすぎ。
この程度なら放置で済むのに。

でも、乙。>202
0206Name_Not_Found
垢版 |
2005/08/16(火) 04:15:24ID:???
|ω・`).。oO(スレ主が顔出せない状況で申し訳ないです…)

|彡サッ
0207Name_Not_Found
垢版 |
2005/08/16(火) 06:50:39ID:???
スレ主つうか、実際お前何もしてないしな。空気コテは自意識過剰にならなくていいよ。
0209 ◆yone./iSHg
垢版 |
2005/08/16(火) 07:36:43ID:???
>>207
>実際何もしてない
ネタ投下などかなり貢献してると思いますが。

>>105タマ
また、よこから口出ししますね、どうでもよかったらスルーしてください。
初心者向けなのでググルという事もすこし触れた方がいいかと思います。
--------------具体例--------------------

どんな人でもわから事が出てきます。そこですぐ人に聞く、クレクレ厨にならないように検索サイト Google(グーグル)を活用しましょう。
そのサイトで調べることを俗に"ぐぐる"といいます。そのような言葉が出てくるほどGoogleで調べることは基本中の基本です。

# ここで、必要ならば and検索の説明 のせるかのせないか場合は150さんの判断で。

活用例
たとえばfloatプロパティの使い方がわからない(忘れた)とします。そこですぐさま人に聞かずにググッて見るのです。
しかしそこで”float”でいきなり検索をかけてはいけません、floatはcssと関係するWebページを見たいのだから
アンド検索を使い css float を検索キーワードにして検索します。
そうすればアンド検索で ”css ” と ”float” に関するWebページがヒットします。その検索結果で出たサイトをいくつか見れば、floatプロパティについてわかるでしょう。


# こんな感じで、ググルについてちょっとは触れてみたら?ってことです。

0210150 ◆x/HTMl8.Ok
垢版 |
2005/08/16(火) 12:41:38ID:???
>>209
毎度毎度ありがとうございます。

and検索は確実に必要なので載せるつもりです。or検索も知っておいたほうが便利なので説明すると思います。


「アニメGIF」と検索しただけでは「GIFアニメ」や「アニメーションGIF」と表記しているページは表示されません。
そこで「アニメGIF OR GIFアニメ OR アニメーションGIF」と検索語を「OR」でつなぐといずれかの語が含まれている
ページが表示されます。

応用編として「CSS OR スタイルシート float」と検索すると、「CSS」か「スタイルシート」が含まれ、かつ「float」
が含まれているページが見つかります。

0211Name_Not_Found
垢版 |
2005/08/22(月) 10:04:14ID:tz/+hkvo
0212Name_Not_Found
垢版 |
2005/08/27(土) 00:55:58ID:???
議論厨はスレを焦土にして、他の獲物を探しに行く。
0213150 ◆x/HTMl8.Ok
垢版 |
2005/09/07(水) 05:49:04ID:???
8月は忙しくてほとんど更新することができませんでした。すいません。
すっかり過疎化してしまい見ている人がいるかわかりませんが、とりあえず
さらしてみます。

画像を貼る / 改行する / 横罫線を引く ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html2-2.html

0214150 ◆x/HTMl8.Ok
垢版 |
2005/09/07(水) 08:39:28ID:???
dl要素(とdd要素・dt要素)は初心者にとって必要かな?
ul要素・ol要素と一緒に説明するのと、後で説明するのとどっちがよろしい?
0215Name_Not_Found
垢版 |
2005/09/07(水) 09:09:18ID:???
話が元に戻って申し訳ないけど、ブロックとインラインの説明って難しそうだな。
これ↓はちょっと分かりにくいと思うけど、現段階ではこの程度がいいのかな。

ブロックレベル要素
  段落(p要素)、見出し(h1-h6要素)など文書のパーツとなる要素。ほかにリストや表などがある。
インライン要素
  ブロック要素の中に出てくる要素。強調(em要素、strong要素)など。

W3C↓によると、改行を伴うか、伴わないかという感じだけど。

  Generally, block-level elements begin on new lines, inline elements do not.
0216150 ◆x/HTMl8.Ok
垢版 |
2005/09/07(水) 12:10:13ID:???
見てくれている人がいてよかったヽ(´∀`)ノ

>>215
即興で画像をつくってみたんだけど、どうかな。
ブロックレベル要素が外側で、インライン要素が内側っていうのが
わかればいいかなと思う。
http://www.k2.dion.ne.jp/~spag/html-css/inline-block.png

0217215
垢版 |
2005/09/07(水) 12:13:22ID:???
>>216
こらなら分かりやすくていいと思う。
0218Name_Not_Found
垢版 |
2005/09/07(水) 22:27:46ID:???
今回は初登場?の空要素の説明ですよね。
ならそのページは空要素の説明だけして、
要素の親子関係は別ページにしたほうがいいんじゃない?

title,hn,p⇒基本的なインライン要素⇒空要素⇒要素の親子関係⇒リスト(初めての入れ子)
という流れはなかなかいいと思う。
0219Name_Not_Found
垢版 |
2005/09/09(金) 00:25:52ID:???
>>214
乙。
hxとpで代替がきくから、ul要素・ol要素と一緒に説明するの方がいいな。
0220Name_Not_Found
垢版 |
2005/09/09(金) 00:41:43ID:???
>>214
「カテゴリとその説明」を書いてナビゲーションバーに使ったり、
「リンク先とその説明」を書いてリンク集に使ったり、使い始めると便利だよね>dl要素

別段分ける必要性が感じられないので、他と一緒に説明していいと思うよ。
0221150 ◆x/HTMl8.Ok
垢版 |
2005/09/09(金) 19:42:17ID:???
アドバイスthx

>>218
空要素はmeta要素の説明(http://www.k2.dion.ne.jp/~spag/html-css/html1-4.html#sec2)
のところで一度登場しています。が、body要素の中で使うやつは初登場なので、改めて
説明したほうがいいかな。
親子関係については別ページに分けることにします。

>>219,220
dlもul,olと一緒のページで説明することにします。リストの入れ子も解説したほうがいい?
初心者が扱うにはちょっと難しそうなこと(テーブルのセル結合など)は後ろのほうで
応用編としてまとめる予定なんだけど、そっちにまわしたほうがいいかな?
0222150 ◆x/HTMl8.Ok
垢版 |
2005/09/10(土) 12:51:08ID:???
ページを更新しました。要素の親子関係の説明は別ページに移して、
内容も書き直しました。表の説明でth要素やcaption要素は後々
紹介します。(初心者だとtable tr tdの入れ子の関係を覚えて、罫線を引いたり
パディングを調整したりするので精一杯だと思うので、一度に一気には出さない方針)

要素の親子関係 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html2-3.html
リストを使う ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html2-4.html
表を使う ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html2-5.html
0223Name_Not_Found
垢版 |
2005/09/10(土) 16:50:46ID:???
>>222
私が読んだ限りでは特に問題ないと思う。分かりやすいしグッジョブ。

それと新たに更新されたところとは全然関係ないんだけど、
目次から飛べるリンク集見ていて思ったこと。

単にずらずらリンク先を並べられてもちょっとな、って気がする。
軽く各リンク先について説明っていうか紹介した方が
初心者には親切じゃないかな。
0224150 ◆x/HTMl8.Ok
垢版 |
2005/09/11(日) 10:01:31ID:???
span要素とdiv要素の使い方を書いてみた。ちょっと自信がないので
これでいいのか意見をいただきたいです。

グループ化する ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html2-6.html
0225名無しさん@そうだ選挙に行こう
垢版 |
2005/09/11(日) 17:03:42ID:???
>>224
>「日付の部分を斜体表示にしたい」

なんか意味づけ(マークアップ)と視覚化がごっちゃになってませんか?

そこが「日付の部分」であるというマークアップをするのに
spanとclassを用いることと、そこを「斜体表示」するために
classを利用したcssを適用するのは一旦切り離して考えるべきと
思います。
0226225
垢版 |
2005/09/11(日) 17:15:27ID:???
続き:

 例えば、自分は日付をマークアップしたい場合には、
たいがい<em>にclass付けしております。
 <em>であれば旧来のUAやcssが適用されないUAにも
強調箇所であることが伝わると思いますので。
(極端な場合には、<p>要素内での箇条書きを
マークアップするのにも<em>+classを使用したりしてますが)

0227名無しさん@そうだ選挙に行こう
垢版 |
2005/09/11(日) 17:17:51ID:???
なんで斜体にしたいのか(ちょっと目立たせたいんじゃないの?)って事を考えれば
em class="date"のほうがよさそうだし、わざわざspan使う必要もないとも思う。

たしかにspanの存在意義なんてほとんどCSS用しかないから説明が大変そうだけど。
0228名無しさん@そうだ選挙に行こう
垢版 |
2005/09/11(日) 17:22:12ID:???
>次の例では背景をベージュにするarticleクラスを定義し、それぞれのdiv要素に適用しています。

記事ごとのdiv要素にarticleクラスを定義し、その背景をベージュにしています。
のほうがいいんじゃない?
0229150 ◆x/HTMl8.Ok
垢版 |
2005/09/12(月) 05:02:52ID:???
修正版:グループ化する ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html2-6.html

仕様書(http://www.w3.org/TR/html401/struct/global.html#h-7.5.4)を見ると
「顧客情報のデータベースを作ろうとしてもHTMLには『顧客』『電話番号』『メールアドレス』
を扱う要素がないので、span要素やdiv要素を使うんだよ」とあります。span要素や
div要素はclass属性やid属性と一緒に使い、中身の部分に日付、電話番号といった何らかの
意味を与えるもの、と理解しておけばいいと思います。

ですから、目的が「日付であると強調すること」なら<em class="date">〜</em>でいいし、
「日付であることを示すこと」なら<span class="date">〜</span>でいいでしょう。
0230225
垢版 |
2005/09/12(月) 11:06:12ID:???
あら探しみたいで済みませんが・・・

「リストを使う」のページの
http://www.k2.dion.ne.jp/~spag/html-css/html2-4.html

>定義型リストはdl要素、dt要素、dd要素という三つの要素を必ずセットで使います。すべて
>ブロックレベル要素です。

という項ですが、dt要素、dd要素はブロック要素じゃないと思います。

仕様書では、
>HTMLの要素のうち、BODY要素に出現し得る要素のあるものは「ブロックレベル」と呼ばれ、
>他のものは「行内」 (これは「テキストレベル」としても知られている)と呼ばれる。

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html

とされておりますし。
0231227,228
垢版 |
2005/09/12(月) 14:48:51ID:???
>>229
今度は文句ないです。

あとリストの説明ページでいくつかliの終了タグが開始タグになってるので
修正お願いします。
0232Name_Not_Found
垢版 |
2005/09/12(月) 14:58:59ID:???
テーブルに関することですが、

>CSSの部分で背景を水色にするjpnクラスと、
>背景をピンクにするwashクラスを定義しています。
>そして「日本 東京 1億3千万人」の横1行にjpnクラスを使い、
>「ワシントンD.C.」のセルに対してwashクラスを使っています。

日本に関する横一行にjpnクラスを使い、「ワシントンD.C.」のセルに対してwashクラスを使っています。
そしてjpnクラスの背景を水色、washクラスの背景をピンクにしています。

のほうがいいなぁ。
要は、区別の仕方に「背景色を変える」という発想がまず出てくるのは仕方ないと思いますが、
説明上はclass属性で区別してからその表現として背景色を変えるという手順を
一応守ったほうがいいのでは、ということです。
0233225
垢版 |
2005/09/12(月) 15:28:17ID:???
肝心なこと忘れてました。。。

修正乙です。>>228>>232さんの末の一行に同意です。
0234150 ◆x/HTMl8.Ok
垢版 |
2005/09/13(火) 01:41:48ID:???
みなさんコメント乙です。また修正しました。

>>230
確かにdt、dd要素はブロックレベル要素ではないです。そういえばli要素もそうでした。
ほかにも誤りがあればどんどん指摘してください。

>>231
おぉ、恥ずかしい。「いくつか」どころかかなり大量に間違ってました。

>>232
直しました。わかりやすさと記述の正確さを両立させるのはなかなか難しいです。
(そもそも「○○要素を使います」という表現が不適切ですが・・・)
0235Name_Not_Found
垢版 |
2005/09/14(水) 00:48:16ID:???
>>234
読んでたら誤植発見。

「CSSのメリット・デメリット」の「デザインの一括指定」の最後の1文。
「気が向いたらやるかもし"て"ません。」になってるよ。
0237150 ◆x/HTMl8.Ok
垢版 |
2005/09/16(金) 12:00:20ID:???
更新しました。

スタイルの指定方法 その2 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/css2-1.html
全称セレクタ、子孫セレクタと、規則集合のグループ化を説明しています。

ボックスのボーダー・パディング・マージン ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/css2-2.html
タイトルのとおりです。ボーダーはborder、border-left、border-right、border-top
border-bottomの5つのプロパティだけを説明し、初心者にとっては覚えるものは少ない
ほうがいいだろうと思って、border-width、border-color、border-styleは補足メモに
まわしたんですが、問題ないでしょうか。この補足自体も不要な気がするんですが
いかがでしょう。
0238Name_Not_Found
垢版 |
2005/09/16(金) 12:51:22ID:???
>>237
padding、margin、borderの定義が終わった後、これからすることを簡潔に
まとめた文を載せてみてはいかかでしょうか?
こん↓な感じで、

paddingやmarginの幅は自分の好きな大きさを指定でき、さらに上下左右、個別
指定もできます。
borderも同様で、幅・色・スタイル(線種)を上下左右、個別に指定できます。
では具体的に見ていきましょう。
0239150 ◆x/HTMl8.Ok
垢版 |
2005/09/17(土) 10:04:34ID:???
>>238
ありがとうございます。そのまま使わせてもらいました。

ボックスのボーダー・パディング・マージン ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/css2-2.html
width, heightプロパティの説明もつけました。border-width, border-color,
border-styleに関する補足説明は削除しました。

背景を変える ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/css2-3.html
backgroundプロパティの使い方です。

0240150 ◆x/HTMl8.Ok
垢版 |
2005/09/17(土) 15:28:40ID:???
floatプロパティの説明を途中まで書いてIE6で表示させたら
とんでもなく表示が崩れましたorz

誰か助けてください。

http://www.k2.dion.ne.jp/~spag/html-css/css2-4.html
0241Name_Not_Found
垢版 |
2005/09/17(土) 15:52:57ID:???
>>240
最初のfloatをclearするのを忘れているとか
0242Name_Not_Found
垢版 |
2005/09/17(土) 21:25:12ID:???
うお、マジだ
パッと見何が悪いか良く分からん。ちょっと調べてみるか
0244150 ◆x/HTMl8.Ok
垢版 |
2005/09/18(日) 03:12:55ID:???
「背景色が指定された要素内にフロートがあるときに要素内の文字が消える」
が原因みたいです。親要素をwidth:99%としてやったら直りました。ありがとう
ございます。しかしIEのこのバグはかなり致命的では・・・
0245Name_Not_Found
垢版 |
2005/09/18(日) 07:17:22ID:???
>>244
xml宣言外さないと互換モードになる方が致命的・・・
0247Name_Not_Found
垢版 |
2005/09/18(日) 16:02:45ID:???
あんたのマシンに進入しろとでも言うのかい?
0248Name_Not_Found
垢版 |
2005/09/18(日) 16:23:56ID:???
>>246
ワラタ
てか、まだうpしてないって事だよね?<localhost
0250150 ◆x/HTMl8.Ok
垢版 |
2005/09/19(月) 10:20:56ID:???
間違えた、本物はこっち↓
回り込みの設定 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/css2-4.html

今後の予定はこんな感じ
* 引用する (blockquote q cite)
* いろいろなインライン要素 (dfn abbr sup sub del ins)
* 整形済みテキスト (pre)
* 表のセル結合、見出し、キャプション (colspan rowspan th caption)
* リストの階層化
* 文書の特定の場所へのリンク

分量が増えてきたから、別にHTML入門ページをつくったほうがいいかも
0251150 ◆x/HTMl8.Ok
垢版 |
2005/09/21(水) 02:38:21ID:???
初心者が好みそうなデザインのよい見本はありませんか。
CSSを時々いじってみたりするが、いまいちぱっとしない。
0252150 ◆x/HTMl8.Ok
垢版 |
2005/09/24(土) 22:52:44ID:OvGHP8a0
沈没しそうなのでage

CSSを変更したが派手にしすぎて失敗orz
初心者に受けるデザインってなんだろう

更新したページ:
いろいろなブロックレベル要素 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html3-3.html
表を使う その2 ― 初めての人のためのHTMLとCSS
http://www.k2.dion.ne.jp/~spag/html-css/html3-4.html
0253Name_Not_Found
垢版 |
2005/09/25(日) 01:11:51ID:???
>>252
タイトルバーに使われてる黄色ってどうなのよ。
黄色がよくないってわけじゃなくて色が強すぎて目が痛い。
それ以外は無難にまとまってると思うよ。
私もデザインについて勉強中のみだからあまり大したこと言えないんだけど、スマソ

あと、そろそろ(仮)っての外してもいいんじゃないの?
0254Name_Not_Found
垢版 |
2005/09/25(日) 13:04:01ID:???
ソース部分の背景色(白)がチカチカする……かな?

これで注目度Up、カッコイイ!と思った配色はたいてい目に優しくなかったりする。

長時間読む時は、輝度を落としてグレー系が楽。
でもそうすると見た目がパッとしなくなっちゃうんだよね。ジレンマ
0255しょこら ◆SHR/5x7B2U
垢版 |
2005/09/25(日) 13:30:41ID:???
パステル系とか中間色の原色系がうけそう。
背景を中心に画像を適度に入れたりとか。
hover疑似クラスによる装飾は絶対受けるので取り入れるべきかも。
玉手箱とかとほほとか参考になるかも。

なるべくカラフルに落ち着かないデザインで(酷
0256Name_Not_Found
垢版 |
2005/09/25(日) 13:37:29ID:???
というやつがまずスタイル書けという話
0260150 ◆x/HTMl8.Ok
垢版 |
2005/09/25(日) 22:00:48ID:???
CSSを微修正、タグの玉手箱をちょっとまねしてみた
IEで変な位置にスクロールバーが出るが、とりあえず無視

初めての人のためのホームページ作成講座(仮)
http://www.k2.dion.ne.jp/~spag/

サイト名どうしよう。「初めての人のためのホームページ作成講座」は
ありきたりな感が否めないが「ホームページ」って単語は入れたい。
「初心者」などの言葉を入れずに初心者向けなことをアピールできるような
タイトルを思案中です。
0261150 ◆x/HTMl8.Ok
垢版 |
2005/09/25(日) 22:03:15ID:???
言いそびれましたが、コメントしてくれた人ありがとうございます。
よく見たらしょこらタソが復活してる
0262Name_Not_Found
垢版 |
2005/09/25(日) 22:51:44ID:???
ちょっといいですか、そこのページに書かれているように

<h3>1.1. バロック音楽</h3>

<p>17世紀初頭から18世紀中葉までの音楽です。
組曲「四季」で有名なヴィヴァルディや音楽の
父ことバッハなどがいます。・・・</p>

こう書いたところで、そこにあるような

1.1. バロック音楽

17世紀初頭から18世紀中葉までの音楽です。
組曲「四季」で有名なヴィヴァルディや音楽の
父ことバッハなどがいます。・・・

こういう表示にはならないと思います。

1.1. バロック音楽

17世紀初頭から18世紀中葉までの音楽です。組曲「四季」で有名なヴィヴァルディや音楽の 父ことバッハなどがいます。・・・

こうなると思います。

0263Name_Not_Found
垢版 |
2005/09/25(日) 22:53:29ID:???
だから、そこのソースは

ブラウザでそこのサイトに表示されるようにしたかったら

<h3>1.1. バロック音楽</h3>

<p>17世紀初頭から18世紀中葉までの音楽です。<br>
組曲「四季」で有名なヴィヴァルディや音楽の<br>
父ことバッハなどがいます。・・・</p>

と書かなければいけないと思います。
0264150 ◆x/HTMl8.Ok
垢版 |
2005/09/25(日) 23:01:08ID:???
>>262
http://www.k2.dion.ne.jp/~spag/html-css/html1-3.html#sec2
この項目の最初の
-ここから-------------------------------------------
クラシック音楽を聞こう

1. クラシック音楽の歴史

1.1. バロック音楽

17世紀初頭から18世紀中葉までの音楽です。
組曲「四季」で有名なヴィヴァルディや音楽の
父ことバッハなどがいます。・・・
-ここまで-------------------------------------------
の部分は、タグでマークアップする前の文書です。これは
ソースコードであって、表示例ではないです。

ちょっと誤解を受けるような書き方をしてしまったようです。
表示例もあったほうがいいですか?

0265Name_Not_Found
垢版 |
2005/09/25(日) 23:21:44ID:???
>>264
あー、そうですか、ソースコードですか。
なんか今ひとつ・・
タグも何もない文章でもソースコードっていうのが。

表示例はやはりほしいと思います。


0266265
垢版 |
2005/09/25(日) 23:25:21ID:???
いや、よく見るとこう書くのがいいのかもしれません。
他の書方が思いつきませんから。
0267Name_Not_Found
垢版 |
2005/09/26(月) 01:10:41ID:???
h2 に border-left するなら padding もほしい
0268265
垢版 |
2005/09/26(月) 01:41:33ID:???
ちょっと聞きたいのですが下のような書方はやはり見やすいからされているのだと思いますが、
これと同様の表現を簡単にするのはどのようにソースを書くのが正しいのですか?
-ここから-------------------------------------------
クラシック音楽を聞こう

1. クラシック音楽の歴史

1.1. バロック音楽

17世紀初頭から18世紀中葉までの音楽です。
組曲「四季」で有名なヴィヴァルディや音楽の
父ことバッハなどがいます。・・・
-ここまで-------------------------------------------
0269Name_Not_Found
垢版 |
2005/09/26(月) 02:18:48ID:???
下らない質問かもしれないけど、brタグを多用しちゃいけないのはナゼ?
0271150 ◆x/HTMl8.Ok
垢版 |
2005/09/26(月) 11:25:37ID:???
>>268
スペースや改行で形を整えた後、pre要素としてマークアップすると
スペースや改行がそのまま表示されます。
http://www.k2.dion.ne.jp/~spag/html-css/html3-3.html#sec1

>>269
“文書の形を整えるため”に<br>を使うのは「文章構造をHTMLで
あらわし見た目をスタイルシートで定義する」という考え方に
反するからです。
改行することに意味があるなら使ってもいいのです。
たとえば、小説の中の会話文の「」の後ろや、プログラムのコードの
中で改行する部分などです。
0272Name_Not_Found
垢版 |
2005/09/26(月) 23:36:35ID:???
誘導済みなんだからスレ違いの質問に答えんなや
0273265
垢版 |
2005/09/27(火) 03:42:06ID:???
>>268
>スペースや改行で形を整えた後、pre要素としてマークアップすると
>スペースや改行がそのまま表示されます。

いや、そういう意味ではなくて・・

>>269
>“文書の形を整えるため”に<br>を使うのは「文章構造をHTMLで
>あらわし見た目をスタイルシートで定義する」という考え方に
>反するからです。

その考え方にこだわる必要性ってのがどれほどあるかっていう事について
疑問を感じます。
「見た目」「どう改行をするか」という事とは違うレベルの「見た目」では
ないかと思うのですが。
文字の大きさとか、行間とかいう「見た目」と、どこでどう改行するかというのは
異なる問題ではないかと思います。

私の想像ですが、多分小説家とかの文筆業の人はどこでどのように改行するか
という事にも注意をはらって文章を書いていると思います。

改行というのは単なる「見た目」というより「作風」という場合もあるのではないか、
つまり、文章の内容の一つではないかと思います。
0274265
垢版 |
2005/09/27(火) 03:56:11ID:???
>>271

例えば普通HTMLで自分のサイトで文章を書くとき
---------------------------------------------------------------------------
<p>“文書の形を整えるため”に<br>を使うのは「文章構造をHTMLで
あらわし見た目をスタイルシートで定義する」という考え方に
反するからです。<br>
改行することに意味があるなら使ってもいいのです。<br>
たとえば、小説の中の会話文の「」の後ろや、プログラムのコードの
中で改行する部分などです。</p>
--------------------------------------------------------------------------
こんなふうに書きませんか?

下の様に空白行が入るのは好まないケースもあると思います。
------------------------------------------------------------------
文書の形を整えるため”に<br>を使うのは「文章構造をHTMLで
あらわし見た目をスタイルシートで定義する」という考え方に
反するからです。

改行することに意味があるなら使ってもいいのです。

たとえば、小説の中の会話文の「」の後ろや、プログラムのコードの
中で改行する部分などです。
------------------------------------------------------------------------
0275265
垢版 |
2005/09/27(火) 04:00:16ID:???
その時に<p>にたいしてクラスでも割振って空白が出来る<p>と出来ない
<p>を使い分けるなんて事するんでしょうか?
するんだったらどう指定するんでしょう?
0276265
垢版 |
2005/09/27(火) 04:40:21ID:???
「見た目はCSSで」というお話ですが

-ここから-------------------------------------------
クラシック音楽を聞こう

1. クラシック音楽の歴史

1.1. バロック音楽

17世紀初頭から18世紀中葉までの音楽です。
組曲「四季」で有名なヴィヴァルディや音楽の
父ことバッハなどがいます。・・・
-ここまで-------------------------------------------

これをCSSを使ってどう書けばいいのでしょうか?
0278Name_Not_Found
垢版 |
2005/09/27(火) 09:50:45ID:???
>>276

-ここから-------------------------------------------
<style type="text/css">
h2:before{
content:counter(chapter) ". ";
counter-increment:chapter;
counter-reset:section;
}
h3:before{
content:counter(chapter) "." counter(section) ". ";
counter-increment:section;
}
</style>
<h1>クラシック音楽を聞こう</h1>

<h2>クラシック音楽の歴史</h2>

<h3>バロック音楽</h3>

<p>17世紀初頭から18世紀中葉までの音楽です。
組曲「四季」で有名なヴィヴァルディや音楽の
父ことバッハなどがいます。・・・</p>
-ここまで-------------------------------------------
0279265
垢版 |
2005/09/27(火) 11:50:16ID:???
>>278
意味が分らないですけど。

<p>で囲まれた部分がこういう表示になりませんか?

17世紀初頭から18世紀中葉までの音楽です。組曲「四季」で有名なヴィヴァルディや音楽の父ことバッハなどがいます。・・・
0280Name_Not_Found
垢版 |
2005/09/27(火) 11:56:08ID:???
>>279
お前のがわからん
改行に意味があると思うならbr使え
そこが意味のかわりめだと思うならpにしろ
質問スレ逝け


昔違うスレでも同じ話題があったな
0281Name_Not_Found
垢版 |
2005/09/27(火) 12:00:50ID:???
>>280
逆に聞くなら元の解説サイトで

-ここから-------------------------------------------
クラシック音楽を聞こう

1. クラシック音楽の歴史

1.1. バロック音楽

17世紀初頭から18世紀中葉までの音楽です。
組曲「四季」で有名なヴィヴァルディや音楽の
父ことバッハなどがいます。・・・
-ここまで-------------------------------------------

こう書いているわけでしょ。

なぜ

17世紀初頭から18世紀中葉までの音楽です。<br>
組曲「四季」で有名なヴィヴァルディや音楽の<br>
父ことバッハなどがいます。・・・

改行しているんですか?
0282Name_Not_Found
垢版 |
2005/09/27(火) 12:19:22ID:???
>>281
エディタで書くときに改行したほうが横スクロールでなくて楽だからじゃね?
0283Name_Not_Found
垢版 |
2005/09/27(火) 12:57:03ID:???
それでは論理上の理由ではなく、「見た目」という
観点から改行したい、と思ったときはどのようにすればいいですか?
0284Name_Not_Found
垢版 |
2005/09/27(火) 12:59:45ID:???
何このスレ違い。

>150 ◆x/HTMl8.Ok
細かいことだが「とか」→「や」「など」に直してほしい。

>>283
いい加減質問スレできけよ。
0285150 ◆x/HTMl8.Ok
垢版 |
2005/09/27(火) 14:53:27ID:???
いろいろ議論が出て参考になりました。「p要素とbr要素を
どのように使い分けるのか」といったことも、どこかで
説明することにします。

>>281
HTMLのソースコードが改行されていることと、<br>タグで改行
することは、まったく別の次元の話です。HTMLはどこで改行しても
いいので、ソースコードを見やすくするために(見た目のために)
適当なところで改行しています。<br>は見た目のためではなく
改行が意味を持つときに使います。(意味を持つ改行とは>>271
住所の宛名書きや詩の1行なども考えられる)
あとは質問スレでお願いします。
0286Name_Not_Found
垢版 |
2005/09/27(火) 15:50:39ID:???
>>285
見た目のための改行をしたいときはどうするのかって話なんだけど。
0287150 ◆x/HTMl8.Ok
垢版 |
2005/09/27(火) 15:58:48ID:???
改行して整形した文書をpre要素としてマークアップすればOK
<br>は「見た目のため」には使わない
0288286
垢版 |
2005/09/27(火) 16:00:36ID:???
普通にhtmlで文章を書いてて、ここだけ見た目のために改行したい
と思ったときどうするのかという話。
0289286
垢版 |
2005/09/27(火) 16:02:21ID:???
>>287
それは例えば他の改行も全部そのままの形になっちゃうだろうし、
ウインド幅を変えて見たとき対応しないんじゃないですか?
0290Name_Not_Found
垢版 |
2005/09/27(火) 16:03:04ID:???
>>286
日本語読めないのか?
スレ違いだと言ってるだろう。いい加減にしろ。
0291286
垢版 |
2005/09/27(火) 16:04:23ID:???
>>290
レスしてくれてるから、それに対してまた質問しただけ。
ちょっとそのレスは違うんじゃないかと思ったから。
0293286
垢版 |
2005/09/27(火) 23:35:03ID:???
>>292
そっちのスレにだれかがわざわざ質問してくれたようだが、
あちらのスレでの結論は下のようになったようだ。

363
>具体例って、このスレでもいくらでも改行されてるじゃん。
>例えていえば、
>自分の気持の中でここで改行したいと思ったらそれが改行
>したいところ。おれはいくらでも改行するよ。
>改行は気分の問題、特別な意味なくても
>"ここで改行したい"ってのは気分の問題。

373
>なら素直にbr使えばいい。
>StrictなHTMLを書く気が無いんであれば。
>自分もここではその場の気分で改行してるしね。

374
>まあまあ、稀に論文とか教科書とか専門解説書とか、そういう類いの
>本ばかり読んでいる人もいるんだよ。
>任意で改行できなきゃ、縦読みのような表現法も生まれんだろうに…
0294Name_Not_Found
垢版 |
2005/09/28(水) 02:29:50ID:???
>レスしてくれてるから、それに対してまた質問しただけ。

典型的な「空気読めないやつ」だな。
0295Name_Not_Found
垢版 |
2005/09/28(水) 02:45:44ID:???
>>294
空気としては「その問題についてはこれ以上突っ込まないで」という
空気をただよわせたかったわけか?
0296Name_Not_Found
垢版 |
2005/09/28(水) 02:54:47ID:???
スレ違いだと何度も指摘されてるのに移動ができないことが、
*漂わせたい、漂わせたくないに関わらず* 空気読めないってことだよ。
0297Name_Not_Found
垢版 |
2005/09/28(水) 08:27:08ID:???
>>296
初心者向け講座の内容面についてのことだから、一概に
スレ違いとも言えないんじゃないの。
0298Name_Not_Found
垢版 |
2005/09/28(水) 20:51:51ID:???
内容についてのレスやり取りでなぜ本物初心者の質問に答えにゃならんのか。
0299Name_Not_Found
垢版 |
2005/09/28(水) 21:48:09ID:???
まぁまぁ。>>297の意見でいくと、このスレは初心者質問スレ化しても然るべきってことなんだよ。
おもしろいじゃないか。DQNで。
0300Name_Not_Found
垢版 |
2005/09/28(水) 21:53:09ID:???
<p style="margin-bottom:250px"> これでpタグ直下に空白を作る
分かったか。テストに出すぞ
0301Name_Not_Found
垢版 |
2005/09/28(水) 21:57:24ID:???
>>299
要するに遠回しにスレを潰したいってことか
■ このスレッドは過去ログ倉庫に格納されています

ニューススポーツなんでも実況