- ベストアンサー
スタイルシートが全く理解できません
質問させて頂きます。 ＨＰを開こうと思っているのですが、私にとって都合のいいスタイルシートの例文が載っているサイトが見つからないのです。 ヘッダ用の画像を作ったので、 トップページはそのヘッダが画面一番上の中央に来るように（繰り返しなし）、 メニュー（サイドバー？）は左側に羅列されるように、 メイン画面はそのメニューの右側に来るように。 ２カラムっていうらしいんですが。 │￣￣￣￣￣￣￣￣￣￣￣￣│ │ ヘッダ画像 │ │＿＿＿＿＿＿＿＿＿＿＿＿│ │メ │ ←この表、崩れて │ニ │ 表示されてしまいます。 │ュ メイン画面 │ 一番右の縦線は真っ直ぐだと ││ │ 仮定してください │ │ │ │ │＿＿＿＿＿＿＿＿＿＿＿＿│ こんな感じです。HTMLでもできるのでしょうか？でもHTMLはＩＥ以外のブラウザで見ると崩れると聞いたのでやはりスタイルシートかなと…。 他のページはメニューの右のメインウィンドウに表示されるわけですから、単純なHTMLで充分なHPなので、そのヘッダとindex.htmlをどうにかしたいのです。 あ、１Ｐだけ別窓で開かせたいページがありまして、そこはヘッダだけでヘッダの下は単純なテーブルが置いてあるだけのページです。 上の図のメニューがなく、ヘッダの下が全てメイン画面なページですね。 普通にHTMLでfixedにすると、画像の上に文字が来てしまうので、とりあえず<br>で間隔を開けてみたんですが、IEとFireFoxでは見え方がぜんぜん違ってしまって、困っています。 本当に基本的な質問なんですが、index.htmlを始めとするHTMLファイルがありますよね。スタイルシートはそれとは別に、text.cssというようなファイルを別に作ってサーバに上げるんですか？それともHEAD部分に埋め込むのでしょうか。 何かいい（コピペしてアレンジすればＯＫ！みたいな）都合のいいサイトをご存知でしたらどうぞ教えて下さい。宜しくお願い致します。
- han-ichi
- お礼率100% (7/7)
- HTML
- 回答数5
- ありがとう数8
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＃2です。 相当の勘違いが入っているので、解説サイトを見て回っても理解できないでしょうね。基礎がなければ勘違いから脱出はできません。 私の書いたサンプルはとってもアバウトです。質問の時点でアバウトだったからね。でも、そんなに難しくないでしょ？ｈｔｍｌとｃｓｓの基礎はそんなに難しくないんです。少し解説しますね。 <h1>ヘッダ画像</h1>●ここがタイトルとして扱いました <ul>●箇条書きのかたまりつまり「ボックス」です。 <li>メニュー1</li>●このメニュー1を好きな言葉に代えてください。 <li>メニュー2</li>●別ファイルでなくここに直接入力します <li>メニュー3</li>●増やす時は<li></li>で挟んでください </ul> <p>メイン画面</p>●ここに内容を入れて。段落という意味のボックスです。 私のサンプルに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
その他の回答 (4)
HTMLのテンプレミスでした。 <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta content="【検索キーワード1】,【検索キーワード2】,【検索キーワード3】,【etc...(5~10個くらいに)】" name="keywords"> <meta content="【ページの説明】" name="description"> <link rel="stylesheet" href="style.css" media="all" type="text/css"> <title>【ページタイトル】</title> </head> <body> <h1 id="HEADER"><img src="【header画像へのパス】" alt="【header画像に書かれている文字】"></h1> <ul id="NAV"> <li><a href="【メニュー1のリンク先パス】">メニュー1</a></li> <li><a href="【メニュー2のリンク先パス】">メニュー2</a></li> <li><a href="【メニュー3のリンク先パス】">メニュー3</a></li> </ul> <div id="CONTENT"> <p class="highlight">本文</p> <p>こういうかんじに一文ずつ囲っていきます。</p> <p>pタグの終わりで改行されます。</p> </div> </body> </html> link内の指定が間違っていました。
お礼
また改めてご丁寧に…ありがとうございます。 正直、頭の中がぐちゃぐちゃなのですが、教えて頂いたことを実践していってみると、「ああなるほど」にたどり着ける…といいのですが。 本当にありがとうございます。
人に見せるサイトを立ち上げるのであれば勉強は避けられないと思うので、とりあえず最低限必要な知識を。 ■HTMLに関して 現在のwebサイトは大まかにわけて、見出し・本文(コンテンツ)・メニューで構成することが多いです。 で、見出しはh1～h6タグ、本文はpタグ、メニューはulタグとliタグで記述します。 このとき、見出しにはh1のようなタグが用意されているので、pタグで記述したりするのは推奨できません。 ＃１さんの言われている内容でタグを付けるというのはこういうことでしょう。 あと必要なのはaタグとimgタグとdivタグくらいでしょうか。 それぞれの使い方は http://www.tohoho-web.com/html/index.htm で理解できると思います。 まぁですがとりあえず希望のデザインっぽいテンプレを書いて置きます。 <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta content="【検索キーワード1】,【検索キーワード2】,【検索キーワード3】,【etc...(5~10個くらいに)】" name="keywords"> <meta content="【ページの説明】" name="description"> <link rel="stylesheet" href="css/style.css" media="all" type="text/css"> <title>【ページタイトル】</title> </head> <body> <h1 id="HEADER"><img src="【header画像へのパス】" alt="【header画像に書かれている文字】"></h1> <ul id="NAV"> <li><a href="【メニュー1のリンク先パス】">メニュー1</a></li> <li><a href="【メニュー2のリンク先パス】">メニュー2</a></li> <li><a href="【メニュー3のリンク先パス】">メニュー3</a></li> </ul> <div id="CONTENT"> <p class="highlight">本文</p> <p>こういうかんじに一文ずつ囲っていきます。</p> <p>pタグの終わりで改行されます。</p> </div> </body> </html> 【 】の書かれている部分は、中に書かれている内容の通りに書き換えてください。 ■CSSに関して 外部ファイルにするのが楽だと思います。 まずhtmlのhead内に <link rel="stylesheet" href="style.css" type="text/css" media="all"> を追加します。(上のソースでは既に書いてあります) メモ帳などで新しくファイルを作成し、名前を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"が指定されたタグの見栄えを整えます。 また、<div id="CONTENT">内のはじめのpタグにclass="highlight"が指定されていますが、これの見栄えを整えるには .highlight { color:#f00; } とします。頭に付く文字が変わるだけです。 ちなみにidとclassの使い分けですが、一つのhtmlファイル内に1度しか使わないものはid、その他の複数回使う可能性があるものはclassで指定します。 ここでCSSの指定については学べると思います。 http://www.tohoho-web.com/css/index.htm
お礼
アドバイスありがとうございます！！ こんなに丁寧に…本当にありがとうございます！！ リンクして頂いた先のサイトも熟読して、やっぱり基礎の基礎は勉強しなくてはいけませんね。 私は自分でＨＴＭＬを打っていたころも<p>タグなどは使用せず、<br>タグも面倒だったので全て<pre>で打っていました。 やっぱりソースはきちんと打たなければいけないんですね…（何を今更、って感じなのですが） ご協力、感謝してやみません。参照して頂いたサイトを参考にしつつ、基礎の基礎の基礎を勉強しようと思います。 本当にありがとうございました！！
- Softysoft
- ベストアンサー率56% (29/51)
ｃｓｓを利用したい時のｈｔｍｌの作り方は簡単ですよ。 見出しとか段落とか箇条書きとかをタグで挟むだけです。 「何かいい（コピペしてアレンジすればＯＫ！みたいな）都合のいいサイトを」利用するとその見出しとか段落を無視して、見た目だけを追っかけるので、ちゃんとわかった人からはぐちゃぐちゃのサイトになってしまいます。 おっしゃっているようなデザインだと <html><head> <style> body *{background:#eeeeee;margin:20px;} ul,p{float:left;}</style> </head> <body> <h1>ヘッダ画像</h1> <ul> <li>メニュー1</li> <li>メニュー2</li> </ul> <p>メイン画面</p> </body> </html> こんな感じでしょうか？ htmlの部分はデザインを無視してどういう内容かでタグをつけます。 あとから、メニューを上に横に一列に並べて、メイン画像をその下につけたくなれば スタイルの部分を <style> body *{background:#eeeeee;margin:50px;} li{float:left;} p{clear:left;} </style> に変えればいいのです。デザインと構造の分離です。今はheadの中に入れていますが、別ファイルにして、headの中にはそのリンク先のｃｓｓを指示すれば、１つのｃｓｓファイルでサイト全体のページ全体が制御できます。 「何かいい（コピペしてアレンジすればＯＫ！みたいな）都合のいいサイトを」では利点はほとんどありません。最初にデザイン（並べ方や色の部分）に目が行くと思いますが、それを忘れた本質的なデザイン（構造設計）をまず学ぶ方が、色形のデザインの制御も早道になります。ｃｓｓを学ばれるなら、体系的に初歩をまず学ばれることをお奨めします。
お礼
アドバイスありがとうございます！！ すごいです、書いて頂いたstyleを貼り付けて、理解できるところだけアレンジしたらちゃんと思うとおりにヘッダがつきました！！ で、ヘッダはついたのですが、メニュー画面やメイン画面のＨＴＭＬファイルはどうすればいいのでしょうか？メニュー画面だけスクロールさせずにメイン画面だけスクロールさせるには…？メニュー画面だけのbgcolorを変えるには…？リンクのtargetはどこに指定すれば…？ ごめんなさい、「自分で調べろよ」と言われるだろうとスタイルシートのサイトを熟読して回ったのですが、説明の日本語がもう理解できません…。例えばcssファイルをあらかじめ作っておいて<h1>と書くだけでどのページでも<h1>で挟んだ文字色とかスタイルとかが適用される…。 それは理解できますが、そんなにページ数もないＨＰなので、そんな大層なものはいらないかな、と。 で、ページをデザインするにはどうしたらいいのですか！？と。 読んだところ、boxというのを使うのでしょうが、つまりはmenuのboxとmainのboxを用意して並べるの…でしょうが、Softysoftさまの書いて下さったタグはそうではないですよね？ あと、 >htmlの部分はデザインを無視してどういう内容かでタグをつけます。 この日本語の意味が分かりません…。すみません。 申し訳ありません、きちんと勉強しろよ、と言いたくなるでしょうが、事情があって一両日中にＨＰを立ち上げなくてはならないので・・・。 さらにアドバイスを頂戴できると本当に嬉しいです。
- mochitora
- ベストアンサー率28% (78/272)
まずスタイルシートを使わずに作ってみてはいかがでしょうか？ HTMLだけでも、その2カラムのデザインは簡単にできますよ。 また、数ページしかないHPでスタイルシートを使うメリットは、 あまり無いと思います。 よほど凝ったデザインにしたいとか、 ページがすごく多くて更新管理を楽にしたいとか、 Googleなどの検索で少しでも上位にくるようにしたいとか、 じゃなければHTMLで十分です。 どうしてもスタイルシートを使いたいなら、 まずHTMLの基本を身につけてからCSSを勉強しないと、 おそらく応用が利かないと思います。 (表示がおかしくなったり修正しようとしたときに、自分で直せない) >HTMLはＩＥ以外のブラウザで見ると崩れる そんなことはありません。 細かい見え方の違いはありますが。 >それともHEAD部分に埋め込むのでしょうか。 外部にHTMLファイルとは別に、 サーバー上に「css」ファイルを置くやりかたが一般的です。 それとは別にHTMLファイルの中にCSSを記述するやり方もあります。 もしかして混同されているのかもしれませんが、 スタイルシートを使ってデザインするにしても、 HTMLの基礎知識は必須です。 まず、HTMLを勉強して、 それを補うかたちで必要に応じて、 スタイルシートを導入していく、 というのがよいと思いますよ。
お礼
アドバイスありがとうございます。そうですか、HTMLでも大丈夫ですか。 多分フレームで分けて表示したらいいんじゃないでしょうか、というアドバイスだととらえてしまったのですが、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <Html Lang="ja"> <Head> <Title>ページのタイトル</Title> </Head> <Frameset rows="30,*" Frameborder="no" Scrolling="auto" Border="0"> <Frame name="ue" src="1.html" noresize> <Frameset cols="150,*" Frameborder="no" Scrolling="auto" Border="0"> <Frame name="hidari" src="3.html" noresize> <Frame name="migi" src="2.html"> </Frameset> </Frameset> <Noframes> <Center> 申し訳ございません。<Br> あなたのブラウザではこのページをご覧頂けません。<Br> 最新版のブラウザをお使い下さい。 </Center> </Noframes> </Html> と、このようにフレームで分けてみたところ、一番上には画像だけが表示されて欲しいのにスクロールバーが表示されるわ、Frameborder="no"にしているにもかかわらずスクロールバーが表示されるわ、思うようにいきません。ＨＴＭＬ解説のページを色々検索してみたのですが大体書いてあることは同じで…。 一番上に貼り付けたい画像（ヘッダ）をue.htmlにして<img src...>で貼り付けてそのページを表示させるようにしているのがそもそも違う気がするのですが、どのページにも私が作りたいページのソースがありません。 アドバイスは大変役に立って感謝なのですが、この問題を解決するソースが載っているサイトをご存知でしたら教えて頂けないでしょうか…？
関連するQ&A
- スタイルシート両サイドメニューについて
スタイルシートでメニューをdivでヘッダー、とメインと両サイドにふたつメニューをhttp://www.famima.com/ このように作りたいのですが2つならフロートで右と左に分ければいいのですが3つの場合はどうしたらいいのでしょう？教えて下さい。
- ベストアンサー
- インターネットビジネス
- スタイルシートについて
ホームページビルダー11を使って、ホームページ作成途中なのですが、メニューについて悩んでいます。 http://home.isle.ne.jp/index.html 上記HPでは一番上のメニュー、ロゴ等がどのページからアクセスしても常に固定されています。 これと同じ事をしたいのですが、スタイルシートを利用すれば解決できるのでしょうか？ ＊フレームの使用考えていません。 商用としてホームページを作成するため、固定部分に営業日カレンダー等を挿入したいのです。 そうすると少なくとも1ヶ月に1回は固定部分を更新しなくてはなりません。ページ数は100以上あるので1個1個更新することは避けたいです。 この問題をスタイルシートを用いれば一括編集可能でしょうか？ それともスタイルシートはあくまでスタイルを一括編集出来るだけであって、文字（テキスト）までは一括編集できないのでしょうか？
- 締切済み
- ホームページ作成ソフト
- スタイルシートについて
実は今、はじめてＨＴＭＬでホームページを作成しているんですが、スタイルシートってありますよね。ＨＴＭＬの本とか読んでると、スタイルシートでいろいろ設定した方が良いようなので、そうしたいと思っているのですが、ＨＴＭＬで本読みながら設定しても、ＩＥで確認するとそれが反映されていないんですよ。ちなみにネットスケープでは反映されるんです。ＩＥのバージョンは５．５なのですが・・・ いったい何がいけないんでしょうか？原因として考えられるとしたら、どのような事が考えられますか？
- 締切済み
- HTML
- スタイルシートが、突然使えなくなった。
ホームページ作りの初心者です。 Win98、IE6を使っています。 HTML、スタイルシートを使ってホームページを作っています。 過去に1個完成させました。 2個目に挑戦し始めたのですが、どうしたわけかスタイルシートの記述が、全くIEに反映しません。 スタイルシートの機能が、壊れてしまったのでしょうか？ 1個目のホームページのスタイルシートの部分は、正常に機能しています。 どなたかお分かりの方、教えて下さい。
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートとは？
質問内容ですが、HPで画面（デスクトップ？）に出てくるページの容量はどういう風に、考えたらいいのでしょうか？ というのは、タグのテキストファイル＋画像＝全体の容量なのか、タグのファイルは容量に入りますか？ということです。 あと、タイトルにもなっているスタイルシートを使えば、 デザインを変えないで、容量を減らせたり出来ますか？ （スタイルシートは、別ファイルをタグに組み込むと、表示されるみたいなことができると聞いたので） というのが、質問です。分かる方、ぜひ教えてください。よろしくお願いしますｍ（＿ ＿）ｍ
- ベストアンサー
- その他（プログラミング・開発）
- IEでのスタイルシート（縦メニュー）のずれ
IEでのスタイルシート（縦メニュー）のずれ 初めまして。 わたしはmacでウェブを作成しています。 現在作成しているサイトがあるのですが、どうしてもメニュー画面がwindowsのIEでずれてしまいます。 下記にずれているサンプルページをアップしました。 http://music333.oops.jp/sample/index.html macのsafari,firefox.operaでは問題なく綺麗に表示されていますが windowsのIEではCONTENTSバーの下からメニュー一式がずれて CONTENTSの横に並んでしまうようです。（画像添付しました） 色々サイトなどを参照しながら試行錯誤したのですがハマってしまっています・・・ お気づきの点やここがまずいよ、など指摘箇所があれば教えて頂けないでしょうか？ よろしくお願い致します。
- 締切済み
- HTML
- 印刷用スタイルシートがXPで反映されない
某Webサイトを作っておりまして、いままではスタイルシートなんて派だったのですが、そうも言ってられなくなり、今回本格的に全面CSSで設定してみました。 で、一応サイトは出来たのですが、印刷するときに改ページ部分で行が欠けたり、ヘッダの画像と次のテキストまでが1ページ空いてしまったりします。 行間やテーブルのpaddingを設定したのが問題かと思って印刷用のスタイルシートを設定してみたのですが、Windows2000＋IE６ではまったく問題ないのですが、XP SP2＋IE6ではまったく反映されません。 これはバグでしょうか？ 何か対処法がありましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- CSS
- スタイルシートで枠を作る方法
今まではHTMLのテーブルタグでページをレイアウトしていたのですが それと同じデザインをスタイルシートでやりたいのです。 ページのデザインは、ページの真ん中に大きな枠を作って その中に本文を書き、枠の外は背景画像という感じです。 これをスタイルシートで表す時、スタイルシートファイルには どう記入すればよいのでしょうか。 文が分かり辛くてすみませんが、教えてください。
- ベストアンサー
- CSS
- 別ファイル化されたスタイルシートを見たい
スタイルシートを勉強中です。 通常のHTMLだと右クリックでソースを見ることができて、人様のソースを手本に勉強できるのですが、スタイルシートが別ファイル化されていると簡単に見ることができません。 何か方法があれば見ることができるのでしょうか？ 以上よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- HTMLとスタイルシート
HTMLとスタイルシート HTMLとスタイルシートで添付したようなバックグラウンドを作りたいのですが、 （ペイントで作ったので少し汚いですが） 一番簡単なコードを教えてもらえますか。 縦と横に黒い線のようなバックグラウンドです。 画像を使わなくては無理でしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
またご丁寧に…感謝の言葉もないです。 私は相当な勘違いをしていたのですね。ＨＴＭＬ脳から抜け出さなければならないのですね。 それは私にとっては天地がひっくり返るくらい頭の中を改変しなければならなくて、とても一両日中にはできそうにありません。でも、初歩の初歩を勉強すれば、cssのｃくらいでも「ああなるほど」にたどり着ければ、少しはまともなＨＰができるのではないかと思います。 一つ一つに解説を加えて下さって、相当お手間もかかったでしょう。本当にありがとうございます。 今度は相当簡単な言葉を選んで書いて下さったのでしょう、私にも理解できました。すぐに実践してみたいと思います。 でも何かデザインが崩れたりトラブルが起こったときに自分でソースをいじれるように、やっぱり勉強は必要ですね。 出来の悪い生徒によくここまで教えて下さいました。感謝の言葉もありません。 ”皆様に”というお礼スペースがないのでここに書かせて頂きますが、とんちんかんな質問にここまで真摯に答えて下さり、本当に感謝しております。 皆様から教えて頂いたことを実践してみたりリンク先のサイト様を拝見したりして、とにかく私には勉強が必要なのだということが分かりました。 本当は皆様に「良回答」を差し上げたいのですが、ままならないですね。でもどなたにも差し上げないというわけにも行かないので、どうぞこういう結果でお許し下さい。 正直まだ全然分かっていません。書いて下さったソースも、「これは何語？」というような状態で（Softysoftさまのソースは多分、おそらく、なんとなく理解できましたが）、頭の中がぐちゃぐちゃです。 でもこれを機会に勉強して、将来私のような質問をされる方が訪れた場合、助言できるようにまで…なるには数ヶ月かかるでしょうが、そうなれたらなぁと思っています。 回答を書き込む時間を割いて下さり、皆様には本当に感謝しております。 誠にありがとうございました。