HTMLとスタイルシートのタグの違い

Question

Webサイトを作りを始めたばかりの初心者です。私は、スタイルシートを使うにはheadの部分に次のタグを埋め込むことを知りました。また、「style.css」というファイルを「index.html」とは別に用意することも知りました。そして私はWebサイト作りのために、まずはhtmlだけを記述し、その後にスタイルシートを使ってデザインをしようと思うようになりました。そこで、htmlとスタイルシートのタグの違いを把握するために、次のスタイルシートの一覧表を確認しました。 http://www5.airnet.ne.jp/tomy/knowhow/stylepty.htm この一覧表では、COLORやFONTなども含まれておりますが、このタグは「style.css」のファイルを用いなくても「index.html」のファイル内だけで使用することでWebサイト内にある文章などの色やサイズを変えられるはずです。そのため、HTMLとスタイルシートのタグの違いがわからなくなり、htmlだけを記述するということが難しくなってしまいました。デザインを考えずに、まずはhtmlだけで全体を記述する場合、デザインの境界線は何なのでしょうか？改行を指定する
もデザインに含まれるのでしょうか？質問が漠然としているかもしれませんが、何でも良いのでいろんな人からのアドバイスを頂きたいです。

meah1835 · Accepted Answer

みなさん知識がありすぎて難解ですね

＞デザインを考えずに、まずはhtmlだけで全体を記述
デザインを考えずしてホームページは作れませんので
質問自体が無意味になってしまいます。

HTML と CSS はセットです。

こちらで一通り作ってみましょう
http://homepage.shichihuku.com/003.html

質問文のURL先
プロパティ一覧表なんて役に立ちませんよ。　実践あるのみ！

tracer · Answer

htmlのfontタグやcolorタグでも見た目を変更することができます。しかし、語弊を恐れずに言えば、fontタグやcolorタグを使う手法は昔のものです。そして今はstylesheetを使うのが主流です。ここでfujino00さんが考えるべきことは、「なぜ昔の手法は使われなくなったのか」ということです。 stylesheetを使用することには多くのメリットがあります。代表的なメリットを言うならば、効率がよく制作が楽ということです。そのメリットの詳細は、是非、ご自身で検索していただきたいところですが、簡単に表現すると、デザイン(レイアウト・色・透明度・大きさ)を一元管理できるということです。 100ページあるホームページを想像してみてください。仮に、その全てのページ内に

ようこそホームページへ

という文字列があったとします。全てのページのその文字列の色を変更しなければならなくなったとき、全てのページを開いて編集しなければならないのが昔の手法(font/color)です。stylesheetなら1行の修正で終わります。もちろん、他の方が回答されてるように、HTMLの文章構造的な意味合いもありますが、まあ、そこれは追々理解すればよいでしょう。

DrFell · Answer

結論を先にいうと htmlには内容や、文章構造を書きます。 cssでは、見た目のデザインを指定します。簡単なデザインでしたら、ｈｔｍｌにある非推奨のタグも駆使すれば、作者の環境に特化すればｃｓｓを使用しなくてもｈｔｍｌでデザインできるので、迷っておられるのだと思います。これは「作者の環境」に特化すれば出来るということで、他の人の環境では事情が変わります。例えば見出しを赤く表示させたいということで、タグを使った時と

タグを使いｃｓｓで赤く表示させた場合意味が違ってきます。タグはただ赤くしただけ。
タグは見出しと指定しただけ。見出しというのは文章構造です。でカラーは文章構造ではなく見た目の変化です。htmlで見た目の変化に対するタグはすべて、非推奨となっています。殆んどはhtml5で廃止が決定しています。「非推奨タグ一覧」で検索すると一覧がでてきます。タグでデザインする目的は、見出しに見せるためだと思うのですがいかがでしょう？それなら、文章構造タグであるを使ってください。というように、色や大きさなど変更したい場合には、何らかの意図があるはずです。見出しにしたい。強調したい。表にしたい。など。文字を赤くしたいのではなく、見出しとしてデザインするために、赤く表現しているのではありませんか？なら、後で気が変わった時にスタイルシートで1行変えるだけで、サイト内前同じ見出しに反映さることのできるｃｓｓほうが、管理が楽です。さらに、作者と違う環境の人にも（白黒ブラウザ・音声ブラウザ・画像非表示環境・検索ロボット）赤くは表示されなくても、見出しとして伝わるようになっています。見た目のデザインをｃｓｓに任せると特定のブラウザや環境に依存しないhtmlができます。作者の主張・伝えたい事はhtmlで伝える。ｃｓｓでは見た目でそれらが伝わりやすいよう、わかりやすいようにデザインするという役割分担となっています。本に例えると、20ポイント活字が見出しで、12ポイントの活字が本文で書かれたハードカバーの内容を、文庫本にする時は20ポイントの主張をしませんね。大事なのはそこじゃなく見出しとして見せること。本文12ポイントだったが、文庫本にするときは12ポイントが見出しとなる場合もあります。見出しとわからせるためのデザインなのでではなくとなるわけです。
ですが、使い方で文章構造になったり、見た目的に使われる場合もあるようで、一概には言えません。発言を「カギカッコ」でくくり文頭に持ってくる場合があります。この場合は文章構造です。でも
を重ねて間を空ける方がいます。これは、間を空けるという見た目の操作です。この場合はスタイルシートを使うべきです。

ORUKA1951 · Answer

＞この一覧表では、COLORやFONTなども含まれておりますが、このタグは「style.css」のファイルを用いなくても「index.html」のファイル内だけで使用することでWebサイト内にある文章などの色やサイズを変えられるはずです。

　ここが違います。学ぶときは正確にその用語の意味を把握することが必要です。HTML(小文字じゃない--すなわち略語ですから大文字です。)は、Hyper Text Markup Languageの略で、文字通りHyperなマークアップ言語です。文章を、それを構成する要素に分解し、それぞれの要素が何であるかを機会にも人にもわかるようにタグでマークアップしていくもので、それをハイパー--超えたリンク機能をもっいるもの。その要素が何であるかを示すタグ。
　一方スタイルシートでは、プロパティと言います。タグとは言いません。スタイルシートではタグを示すものは要素セレクタと呼ばれるものですね。

＞このタグは「style.css」のファイルを用いなくても「index.html」のファイル内だけで使用することでWebサイト内にある文章などの色やサイズを変えられるはずです。
　index.htmlの中に書ければ、そのHTMLだけにしか適用されません。
・<head></head>内に書けば
　外部スタイルシートの呼び出しより後に書かれていれば【同じ詳細度なら】それで上書きしますし、逆だったら外部スタイルシートの記述で上書きされます。
・HTMLのタグ内に書けばその要素にしか適用されません。
　詳細度がA=1になり、すべての宣言より優先されます。

　外部スタイルシートの本来に期待される「Webサイト内にある文章などの色やサイズを変えられる」がうしなわれます。ウェブサイトとはHTMLなどで構成された全体。
★14.3 外部スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　HTMLやスタイルシートではデザインとは言わずにプレゼンテーションと言います。なぜなら、相手はscreen端末だけではないからです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　あなたがまず読むべきは、それぞれの仕様書です。ろくに理解もしていないのに変にまとめたものを読んでも誤解が誤解を生むだけです。
★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　CSS2.1のものとCSS3のもの、採用されなかったプロパティを一緒に、他のプロパティとの相互作用など何の説明もなく羅列したって意味ありません。
　なによりも、スタイルシートで肝心なカスケーディングについては一言も言及していない。
<table width="700">
<table style="width:600px;">
table{width:500px;}
table[summary="test"]{width:400px;}
table#test[width:300px;}
div.section table#test{width:200px;}
の違い解ってますか？

　<br>は通常はまず使うことのない要素です。なぜならひとつの段落内で視覚的に折り返すという意味を持つにしても、プレゼンテーション的な意味を含んでいるからです。HTML5では厳しくなりました。
4.6 Text-level semantics — HTML5 ( http://www.w3.org/TR/2011/WD-html5-20110525/text … )

＞この一覧表では、COLORやFONTなども含まれておりますが、
　たぶん、ここが大きな誤解でしょう。
<FONT COLOR="red">のCORORは、HTMLのFONT要素のcolor属性です。いずれも非推奨
スタイルシートの
fontは、簡略化プロパティです。

　
　

table{width:500px;} table[summary="test"]{width:400px;} table#test[width:300px;} div.section table#test{width:200px;} の違い解ってますか？　
は通常はまず使うことのない要素です。なぜならひとつの段落内で視覚的に折り返すという意味を持つにしても、プレゼンテーション的な意味を含んでいるからです。HTML5では厳しくなりました。 4.6 Text-level semantics — HTML5 ( http://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-br-element ) ＞この一覧表では、COLORやFONTなども含まれておりますが、　たぶん、ここが大きな誤解でしょう。のCORORは、HTMLのFONT要素のcolor属性です。いずれも非推奨スタイルシートの fontは、簡略化プロパティです。　　

anyhelp · Answer

デザインを考えない文書構造だけのHTMLというのはCSSを一切適用しない構造を決定するTAG(H1/DIV/NAVなど)のみで情報設計されたHTML文書のことをいいます。
webページのソースを表示した状態が"コンピュータが理解するための情報"で、要素(見出し、本文等を表すTAG)の種類、前後関係、入れ子関係からコンピュータから見た情報の重要度が変化します。これ(文書構造設計)をするのが今のHTML TAGの仕事です。BRタグは"人間への読みやすさへの配慮"に使われ、BRタグの有無で情報の重要度に変化はありません。一方でBRタグは人間への見た目が変わる事から見やすさを制御した事なり、BRタグは視覚デザインに利用されます。
商用から見れば標語や文言をどこで区切るか？改行するか？文章のどこに句読点を打つか？つまり文字の見やすさ・読みやすさを決定するデザイナ/コピーライターの仕事の一部と言え、紙や映像などあらゆるデザイン分野からいっても改行は見栄えに影響するものです。WEBでも間違いなくデザイン作業ともいえるし、ならばCSSでやるのがお作法ではということになりますが、HTMLのBRタグでやるのが今も昔も同じ方法です。このHTMLファイルにCSSを適用したものがデザインを適用した最終形のページとなります。

taloo · Answer

小学校の国語の時間で習ったもの、たとえば「改行して行頭の1文字分開けると、そこが段落の開始を意味する。」というようなものが、デザインと文書構造が融合したものです。 HTMLでは、デザインと文書構造は分離させる考え方ですので、文書構造が「ここから段落です」という目印、つまりHTMLタグがついていると、たとえ改行が無かったり、行頭に1文字分空いていなくてもそこが段落となります。

吾輩は猫である。名前はまだ無い。

どこで生まれたかとんと見当がつかぬ。

このように書いた場合、

から

までが段落です。ブラウザはこの段落の部分を、人が見た時にわかりやすくするために改行します。 --------------------- 吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。 --------------------- スタイルシートで改行しないように指定すると、「改行を伴わない段落」ができます。

吾輩は猫である。名前はまだ無い。

どこで生まれたかとんと見当がつかぬ。

これをブラウザで表示すると、1行で表示されます。 --------------------- 吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。 --------------------- また、「吾輩は猫である。名前はまだ無い。」という部分は、２つの文で１つの段落ですが、見た目だけ変更する事も出来ます。

吾輩は猫である。名前はまだ無い。

どこで生まれたかとんと見当がつかぬ。

--------------------- 吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。 --------------------- このように表示されていると、1行ずつ改行されているため段落が３つあるように見えますが、HTMLでは

は２つですので、段落は２つです。 -------------------------- >改行を指定する
もデザインに含まれるのでしょうか？デザインというよりも、「何らかの区切りがある部分」です。その、「何らかの区切り」を、閲覧者にわかるようにするために、ブラウザは改行して表示します。「何らかの区切り」というのはでも代用できます。 http://www.w3.org/TR/html5/the-br-element.html#the-br-element 例として詩や住所の区切り、外国語などで左から右、右から左の記述が切り替わるようなときなどを出されています。詩は改行する事が詩の文法ですので、
が適切だと思いますが、短歌、長歌の上の句、下の句の区切りは

だと思います。

秋来ぬと目にはさやかに見えねども

風の音にぞおどろかれぬる

（1行で表示させる場合は

で区切らないのではなく、

で区切ったままdisplay:inlineを指定）

aky_nil · Answer

htmlは本来「文書の意味を示す」もので、「色や大きさを変える」などのデザインの概念自体がありませんでした。 html言語のバージョンが上がるにつれてhtml内でもある程度変更できるようになりましたが、「htmlは文書の意味のみ、デザインについては別にしよう」と生まれたのがCSSです。しかし視覚的に変化をもたらすもの＝全て「デザイン」ではないのです。何度も言いますが、htmlは「文書の意味」を示します。意味で考えていきましょう。
の改行は、行を区切るという意味を持っています。

の段落は、そのままですが段落を作成するという意味を持っています。

もレイアウトで使われることが多いですが、本来は表を作成するという意味があります。がんばればCSSでも見た目は全く同じにできますが、「意味」までは同じにはできません。じゃあは・・・？フォントの色を赤に変える。これは思いっきりデザインですね。とまぁ、こういう論理的な部分があるのです。まぁサイトを見る側にしちゃ見た目が同じならどうでもいいわけですが、ソースを覗かれるとわかっているかいないかがバレちゃいますね。それじゃ実際どうすりゃいいかというと、色や大きさや形、位置の変更はhtmlから全て外し、CSS内で全部記述すればいいだけです。とかとかは完全に装飾用ですし、も装飾目的なので、こういったものを外していけばOKです。

trajaa · Answer

いや逆に
「デザインの境界線は何なのでしょうか？」
　という問いかけの意味が分かりません。どういう意味？

HTMLとCSSの役割分担の違いを言っているの？
それとも実際のタグの話をしているの？
或いは境界線のデザイン(水平線垂直線)の事を言っているの？

そもそもHTMLというもの自体が、HyperText Markup Language(ザックリ、文書のレイアウトや構造を記述する言語方式)の略称なので、それ自体がデザインの一部であると思われるのだが・・・・

何のデザインも無い、素の文書であれば
ヘッダがあってボディがあってそのボディの中に何のタグもなくただ一心不乱に本文を記述したモノで良いでしょう？

そこにタイトルとか段落とか、章立てを作っていく上で必要に応じてタグを設定する。

そのタグの属性として、フォントやカラーやら配置やらといった属性が付いてくる

その属性をHTMLのタグ内部に記述しても良いし、ソレだと汎用性も失うし可読性も低下するので
外部のCSSファイルという仕組みを使って基本的な文章構造を持つファイル(HTML)とデザイン関連のファイル(CSS)に分離している。

入門編の解説サイトとか入門書を一つ一つ理解していけば、そんなにビックリするような話では無いと思うのだが？

HTMLとスタイルシートのタグの違い

htmlのfontタグやcolorタグでも見た目を変更することができます。

みなさん知識がありすぎて難解ですね

結論を先にいうと

＞この一覧表では、COLORやFONTなども含まれておりますが、このタグは「style.css」のファイルを用いなくても「index.html」のファイル内だけで使用することでWebサイト内にある文章などの色やサイズを変えられるはずです。

デザインを考えない文書構造だけのHTMLというのはCSSを一切適用しない構造を決定するTAG(H1/DIV/NAVなど)のみで情報設計されたHTML文書のことをいいます。

小学校の国語の時間で習ったもの、たとえば

htmlは本来「文書の意味を示す」もので、

いや逆に

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング