スタイルシートが全く理解できません

Question

質問させて頂きます。ＨＰを開こうと思っているのですが、私にとって都合のいいスタイルシートの例文が載っているサイトが見つからないのです。ヘッダ用の画像を作ったので、トップページはそのヘッダが画面一番上の中央に来るように（繰り返しなし）、メニュー（サイドバー？）は左側に羅列されるように、メイン画面はそのメニューの右側に来るように。２カラムっていうらしいんですが。 │￣￣￣￣￣￣￣￣￣￣￣￣│ │　　　ヘッダ画像　　　　　　│ │＿＿＿＿＿＿＿＿＿＿＿＿│ │メ　　　　　　　　　　　　　│　　←この表、崩れて　 │ニ　　　　　　　　　　　　　│　　　表示されてしまいます。 │ュ　　　メイン画面　　　　　│　　　一番右の縦線は真っ直ぐだと ││　　　　　　　　　　　　　│　　　仮定してください │　　　　　　　　　　　　　　│ │　　　　　　　　　　　　　　│ │＿＿＿＿＿＿＿＿＿＿＿＿│ こんな感じです。HTMLでもできるのでしょうか？でもHTMLはＩＥ以外のブラウザで見ると崩れると聞いたのでやはりスタイルシートかなと…。他のページはメニューの右のメインウィンドウに表示されるわけですから、単純なHTMLで充分なHPなので、そのヘッダとindex.htmlをどうにかしたいのです。あ、１Ｐだけ別窓で開かせたいページがありまして、そこはヘッダだけでヘッダの下は単純なテーブルが置いてあるだけのページです。上の図のメニューがなく、ヘッダの下が全てメイン画面なページですね。普通にHTMLでfixedにすると、画像の上に文字が来てしまうので、とりあえず
で間隔を開けてみたんですが、IEとFireFoxでは見え方がぜんぜん違ってしまって、困っています。本当に基本的な質問なんですが、index.htmlを始めとするHTMLファイルがありますよね。スタイルシートはそれとは別に、text.cssというようなファイルを別に作ってサーバに上げるんですか？それともHEAD部分に埋め込むのでしょうか。何かいい（コピペしてアレンジすればＯＫ！みたいな）都合のいいサイトをご存知でしたらどうぞ教えて下さい。宜しくお願い致します。

Softysoft · Accepted Answer

＃2です。相当の勘違いが入っているので、解説サイトを見て回っても理解できないでしょうね。基礎がなければ勘違いから脱出はできません。私の書いたサンプルはとってもアバウトです。質問の時点でアバウトだったからね。でも、そんなに難しくないでしょ？ｈｔｍｌとｃｓｓの基礎はそんなに難しくないんです。少し解説しますね。

ヘッダ画像

●ここがタイトルとして扱いました

メニュー1
メニュー2
メニュー3

メイン画面

●ここに内容を入れて。段落という意味のボックスです。私のサンプルにboxが無いとの事ですが、h1もulもpもボックスです。上のタグの間に直接内容を入れてください。「ＨＴＭＬファイル」を別々に考えられている時点でフレーム思考です。ｃｓｓやりたいなら忘れることです。 >htmlの部分はデザインを無視してどういう内容かでタグをつけます。この日本語の意味が分かりません…。すみません。 htmlの部分にデザインを入れないということです。大見出し・メニュー・本文・表という内容を表すタグだけをつけます。マークするだけです。そのマークした物に、styleの場所で色や背景、空間をつけていくのです。例えば見出しを赤にしたとします。ちょっと考えてください。赤だから見出しではなく、赤を見出しとしてデザインしたのですよね？それでｈｔｍｌでは見出しとマークをつけます。本文も赤だったら同じになっちゃいますよね。そしたら見出しの指定を黄色に変えればいいのです。ｈｔｍｌには見出しとタグをつける。 styleの場所で赤い文字とか黄色い文字とかをいじる。そういうことです。１日で段組が理解できるようになるとは思いませんが、上記のようなことを説明している30分講座を紹介します。30分では、ま、無理ですがね。 http://www.kanzaki.com/docs/html/lesson1.html そのあとスタイルシートかな？ http://www.kanzaki.com/docs/html/htminfo17.html

noname#66720 · Answer

HTMLのテンプレミスでした。【ページタイトル】

本文

こういうかんじに一文ずつ囲っていきます。

pタグの終わりで改行されます。

link内の指定が間違っていました。

noname#66720 · Answer

人に見せるサイトを立ち上げるのであれば勉強は避けられないと思うので、とりあえず最低限必要な知識を。 ■HTMLに関して現在のwebサイトは大まかにわけて、見出し・本文(コンテンツ)・メニューで構成することが多いです。で、見出しはh1～h6タグ、本文はpタグ、メニューはulタグとliタグで記述します。このとき、見出しにはh1のようなタグが用意されているので、pタグで記述したりするのは推奨できません。＃１さんの言われている内容でタグを付けるというのはこういうことでしょう。あと必要なのはaタグとimgタグとdivタグくらいでしょうか。それぞれの使い方は http://www.tohoho-web.com/html/index.htm で理解できると思います。まぁですがとりあえず希望のデザインっぽいテンプレを書いて置きます。【ページタイトル】

本文

こういうかんじに一文ずつ囲っていきます。

pタグの終わりで改行されます。

【　】の書かれている部分は、中に書かれている内容の通りに書き換えてください。 ■CSSに関して外部ファイルにするのが楽だと思います。まずhtmlのhead内にを追加します。(上のソースでは既に書いてあります) メモ帳などで新しくファイルを作成し、名前をstyle.cssとして、htmlファイルと同じ場所におきます。このstyle.cssの中にいろいろと書いていきます。とりあえず上のテンプレのを希望のデザインにするには * { margin:0; padding:0; } html { text-align:center; height:100%; } body { width:780px; /* ページの横幅をpxで指定してください。 (580px～1000px)を推奨*/ height:100%; text-align:left; } #HEADER img { display:block; } #NAV { float:left; width:200px; /* 左メニューの幅を指定してください */ height:100%; margin-top:-100px; /* ヘッダーの画像の高さをマイナスで指定します */ padding-top:100px; /* ヘッダーの画像の高さを指定します */ } #CONTENT { width:500px; /* コンテンツの幅を指定してください */ height:100%; margin-top:-100px; /* ヘッダーの画像の高さをマイナスで指定します */ padding-top:100px; /* ヘッダーの画像の高さを指定します */ margin-left:200px; } これをstyle.css内に書きます。 /* */ の中の指示に従って値を書き換えてください。 htmlのタグにid=""と書いてあると思いますが、CSSではこの指定を頼りに見栄えを指定していきます。 #NAVはid＝"NAV"が指定されたタグの見栄えを整えます。また、

内のはじめのpタグにclass="highlight"が指定されていますが、これの見栄えを整えるには .highlight { color:#f00; } とします。頭に付く文字が変わるだけです。ちなみにidとclassの使い分けですが、一つのhtmlファイル内に1度しか使わないものはid、その他の複数回使う可能性があるものはclassで指定します。ここでCSSの指定については学べると思います。 http://www.tohoho-web.com/css/index.htm

Softysoft · Answer

ｃｓｓを利用したい時のｈｔｍｌの作り方は簡単ですよ。見出しとか段落とか箇条書きとかをタグで挟むだけです。「何かいい（コピペしてアレンジすればＯＫ！みたいな）都合のいいサイトを」利用するとその見出しとか段落を無視して、見た目だけを追っかけるので、ちゃんとわかった人からはぐちゃぐちゃのサイトになってしまいます。おっしゃっているようなデザインだと

ヘッダ画像

メニュー1
メニュー2

メイン画面

こんな感じでしょうか？ htmlの部分はデザインを無視してどういう内容かでタグをつけます。あとから、メニューを上に横に一列に並べて、メイン画像をその下につけたくなればスタイルの部分をに変えればいいのです。デザインと構造の分離です。今はheadの中に入れていますが、別ファイルにして、headの中にはそのリンク先のｃｓｓを指示すれば、１つのｃｓｓファイルでサイト全体のページ全体が制御できます。「何かいい（コピペしてアレンジすればＯＫ！みたいな）都合のいいサイトを」では利点はほとんどありません。最初にデザイン（並べ方や色の部分）に目が行くと思いますが、それを忘れた本質的なデザイン（構造設計）をまず学ぶ方が、色形のデザインの制御も早道になります。ｃｓｓを学ばれるなら、体系的に初歩をまず学ばれることをお奨めします。

mochitora · Answer

まずスタイルシートを使わずに作ってみてはいかがでしょうか？
HTMLだけでも、その2カラムのデザインは簡単にできますよ。
また、数ページしかないHPでスタイルシートを使うメリットは、
あまり無いと思います。

よほど凝ったデザインにしたいとか、
ページがすごく多くて更新管理を楽にしたいとか、
Googleなどの検索で少しでも上位にくるようにしたいとか、
じゃなければHTMLで十分です。

どうしてもスタイルシートを使いたいなら、
まずHTMLの基本を身につけてからCSSを勉強しないと、
おそらく応用が利かないと思います。
(表示がおかしくなったり修正しようとしたときに、自分で直せない)

>HTMLはＩＥ以外のブラウザで見ると崩れる

そんなことはありません。
細かい見え方の違いはありますが。

>それともHEAD部分に埋め込むのでしょうか。

外部にHTMLファイルとは別に、
サーバー上に「css」ファイルを置くやりかたが一般的です。

それとは別にHTMLファイルの中にCSSを記述するやり方もあります。

もしかして混同されているのかもしれませんが、
スタイルシートを使ってデザインするにしても、
HTMLの基礎知識は必須です。
まず、HTMLを勉強して、
それを補うかたちで必要に応じて、
スタイルシートを導入していく、
というのがよいと思いますよ。

スタイルシートが全く理解できません

＃2です。

HTMLのテンプレミスでした。

人に見せるサイトを立ち上げるのであれば勉強は避けられないと思うので、とりあえず最低限必要な知識を。

ｃｓｓを利用したい時のｈｔｍｌの作り方は簡単ですよ。

まずスタイルシートを使わずに作ってみてはいかがでしょうか？

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

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

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

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