質問させて頂きます。
HPを開こうと思っているのですが、私にとって都合のいいスタイルシートの例文が載っているサイトが見つからないのです。
ヘッダ用の画像を作ったので、
トップページはそのヘッダが画面一番上の中央に来るように(繰り返しなし)、
メニュー(サイドバー?)は左側に羅列されるように、
メイン画面はそのメニューの右側に来るように。
2カラムっていうらしいんですが。
│ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄│
│ ヘッダ画像 │
│____________│
│メ │ ←この表、崩れて
│ニ │ 表示されてしまいます。
│ュ メイン画面 │ 一番右の縦線は真っ直ぐだと
││ │ 仮定してください
│ │
│ │
│____________│
こんな感じです。HTMLでもできるのでしょうか?でもHTMLはIE以外のブラウザで見ると崩れると聞いたのでやはりスタイルシートかなと…。
他のページはメニューの右のメインウィンドウに表示されるわけですから、単純なHTMLで充分なHPなので、そのヘッダとindex.htmlをどうにかしたいのです。
あ、1Pだけ別窓で開かせたいページがありまして、そこはヘッダだけでヘッダの下は単純なテーブルが置いてあるだけのページです。
上の図のメニューがなく、ヘッダの下が全てメイン画面なページですね。
普通にHTMLでfixedにすると、画像の上に文字が来てしまうので、とりあえず<br>で間隔を開けてみたんですが、IEとFireFoxでは見え方がぜんぜん違ってしまって、困っています。
本当に基本的な質問なんですが、index.htmlを始めとするHTMLファイルがありますよね。スタイルシートはそれとは別に、text.cssというようなファイルを別に作ってサーバに上げるんですか?それともHEAD部分に埋め込むのでしょうか。
何かいい(コピペしてアレンジすればOK!みたいな)都合のいいサイトをご存知でしたらどうぞ教えて下さい。宜しくお願い致します。
No.5ベストアンサー
- 回答日時:
#2です。
相当の勘違いが入っているので、解説サイトを見て回っても理解できないでしょうね。基礎がなければ勘違いから脱出はできません。
私の書いたサンプルはとってもアバウトです。質問の時点でアバウトだったからね。でも、そんなに難しくないでしょ?htmlとcssの基礎はそんなに難しくないんです。少し解説しますね。
<h1>ヘッダ画像</h1>●ここがタイトルとして扱いました
<ul>●箇条書きのかたまりつまり「ボックス」です。
<li>メニュー1</li>●このメニュー1を好きな言葉に代えてください。
<li>メニュー2</li>●別ファイルでなくここに直接入力します
<li>メニュー3</li>●増やす時は<li></li>で挟んでください
</ul>
<p>メイン画面</p>●ここに内容を入れて。段落という意味のボックスです。
私のサンプルにboxが無いとの事ですが、h1もulもpもボックスです。
上のタグの間に直接内容を入れてください。「HTMLファイル」を別々に考えられている時点でフレーム思考です。cssやりたいなら忘れることです。
>htmlの部分はデザインを無視してどういう内容かでタグをつけます。
この日本語の意味が分かりません…。すみません。
htmlの部分にデザインを入れないということです。大見出し・メニュー・本文・表という内容を表すタグだけをつけます。マークするだけです。そのマークした物に、styleの場所で色や背景、空間をつけていくのです。
例えば見出しを赤にしたとします。ちょっと考えてください。赤だから見出しではなく、赤を見出しとしてデザインしたのですよね?それでhtmlでは見出しとマークをつけます。本文も赤だったら同じになっちゃいますよね。そしたら見出しの指定を黄色に変えればいいのです。htmlには見出しとタグをつける。
styleの場所で赤い文字とか黄色い文字とかをいじる。そういうことです。
1日で段組が理解できるようになるとは思いませんが、上記のようなことを説明している30分講座を紹介します。30分では、ま、無理ですがね。
http://www.kanzaki.com/docs/html/lesson1.html
そのあとスタイルシートかな?
http://www.kanzaki.com/docs/html/htminfo17.html
またご丁寧に…感謝の言葉もないです。
私は相当な勘違いをしていたのですね。HTML脳から抜け出さなければならないのですね。
それは私にとっては天地がひっくり返るくらい頭の中を改変しなければならなくて、とても一両日中にはできそうにありません。でも、初歩の初歩を勉強すれば、cssのcくらいでも「ああなるほど」にたどり着ければ、少しはまともなHPができるのではないかと思います。
一つ一つに解説を加えて下さって、相当お手間もかかったでしょう。本当にありがとうございます。
今度は相当簡単な言葉を選んで書いて下さったのでしょう、私にも理解できました。すぐに実践してみたいと思います。
でも何かデザインが崩れたりトラブルが起こったときに自分でソースをいじれるように、やっぱり勉強は必要ですね。
出来の悪い生徒によくここまで教えて下さいました。感謝の言葉もありません。
”皆様に”というお礼スペースがないのでここに書かせて頂きますが、とんちんかんな質問にここまで真摯に答えて下さり、本当に感謝しております。
皆様から教えて頂いたことを実践してみたりリンク先のサイト様を拝見したりして、とにかく私には勉強が必要なのだということが分かりました。
本当は皆様に「良回答」を差し上げたいのですが、ままならないですね。でもどなたにも差し上げないというわけにも行かないので、どうぞこういう結果でお許し下さい。
正直まだ全然分かっていません。書いて下さったソースも、「これは何語?」というような状態で(Softysoftさまのソースは多分、おそらく、なんとなく理解できましたが)、頭の中がぐちゃぐちゃです。
でもこれを機会に勉強して、将来私のような質問をされる方が訪れた場合、助言できるようにまで…なるには数ヶ月かかるでしょうが、そうなれたらなぁと思っています。
回答を書き込む時間を割いて下さり、皆様には本当に感謝しております。
誠にありがとうございました。
No.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内の指定が間違っていました。
また改めてご丁寧に…ありがとうございます。
正直、頭の中がぐちゃぐちゃなのですが、教えて頂いたことを実践していってみると、「ああなるほど」にたどり着ける…といいのですが。
本当にありがとうございます。
No.3
- 回答日時:
人に見せるサイトを立ち上げるのであれば勉強は避けられないと思うので、とりあえず最低限必要な知識を。
■HTMLに関して
現在のwebサイトは大まかにわけて、見出し・本文(コンテンツ)・メニューで構成することが多いです。
で、見出しはh1~h6タグ、本文はpタグ、メニューはulタグとliタグで記述します。
このとき、見出しにはh1のようなタグが用意されているので、pタグで記述したりするのは推奨できません。
#1さんの言われている内容でタグを付けるというのはこういうことでしょう。
あと必要なのは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
アドバイスありがとうございます!!
こんなに丁寧に…本当にありがとうございます!!
リンクして頂いた先のサイトも熟読して、やっぱり基礎の基礎は勉強しなくてはいけませんね。
私は自分でHTMLを打っていたころも<p>タグなどは使用せず、<br>タグも面倒だったので全て<pre>で打っていました。
やっぱりソースはきちんと打たなければいけないんですね…(何を今更、って感じなのですが)
ご協力、感謝してやみません。参照して頂いたサイトを参考にしつつ、基礎の基礎の基礎を勉強しようと思います。
本当にありがとうございました!!
No.2
- 回答日時:
cssを利用したい時のhtmlの作り方は簡単ですよ。
見出しとか段落とか箇条書きとかをタグで挟むだけです。
「何かいい(コピペしてアレンジすればOK!みたいな)都合のいいサイトを」利用するとその見出しとか段落を無視して、見た目だけを追っかけるので、ちゃんとわかった人からはぐちゃぐちゃのサイトになってしまいます。
おっしゃっているようなデザインだと
<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の中にはそのリンク先のcssを指示すれば、1つのcssファイルでサイト全体のページ全体が制御できます。
「何かいい(コピペしてアレンジすればOK!みたいな)都合のいいサイトを」では利点はほとんどありません。最初にデザイン(並べ方や色の部分)に目が行くと思いますが、それを忘れた本質的なデザイン(構造設計)をまず学ぶ方が、色形のデザインの制御も早道になります。cssを学ばれるなら、体系的に初歩をまず学ばれることをお奨めします。
アドバイスありがとうございます!!
すごいです、書いて頂いたstyleを貼り付けて、理解できるところだけアレンジしたらちゃんと思うとおりにヘッダがつきました!!
で、ヘッダはついたのですが、メニュー画面やメイン画面のHTMLファイルはどうすればいいのでしょうか?メニュー画面だけスクロールさせずにメイン画面だけスクロールさせるには…?メニュー画面だけのbgcolorを変えるには…?リンクのtargetはどこに指定すれば…?
ごめんなさい、「自分で調べろよ」と言われるだろうとスタイルシートのサイトを熟読して回ったのですが、説明の日本語がもう理解できません…。例えばcssファイルをあらかじめ作っておいて<h1>と書くだけでどのページでも<h1>で挟んだ文字色とかスタイルとかが適用される…。
それは理解できますが、そんなにページ数もないHPなので、そんな大層なものはいらないかな、と。
で、ページをデザインするにはどうしたらいいのですか!?と。
読んだところ、boxというのを使うのでしょうが、つまりはmenuのboxとmainのboxを用意して並べるの…でしょうが、Softysoftさまの書いて下さったタグはそうではないですよね?
あと、
>htmlの部分はデザインを無視してどういう内容かでタグをつけます。
この日本語の意味が分かりません…。すみません。
申し訳ありません、きちんと勉強しろよ、と言いたくなるでしょうが、事情があって一両日中にHPを立ち上げなくてはならないので・・・。
さらにアドバイスを頂戴できると本当に嬉しいです。
No.1
- 回答日時:
まずスタイルシートを使わずに作ってみてはいかがでしょうか?
HTMLだけでも、その2カラムのデザインは簡単にできますよ。
また、数ページしかないHPでスタイルシートを使うメリットは、
あまり無いと思います。
よほど凝ったデザインにしたいとか、
ページがすごく多くて更新管理を楽にしたいとか、
Googleなどの検索で少しでも上位にくるようにしたいとか、
じゃなければHTMLで十分です。
どうしてもスタイルシートを使いたいなら、
まずHTMLの基本を身につけてからCSSを勉強しないと、
おそらく応用が利かないと思います。
(表示がおかしくなったり修正しようとしたときに、自分で直せない)
>HTMLはIE以外のブラウザで見ると崩れる
そんなことはありません。
細かい見え方の違いはありますが。
>それとも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"にしているにもかかわらずスクロールバーが表示されるわ、思うようにいきません。HTML解説のページを色々検索してみたのですが大体書いてあることは同じで…。
一番上に貼り付けたい画像(ヘッダ)をue.htmlにして<img src...>で貼り付けてそのページを表示させるようにしているのがそもそも違う気がするのですが、どのページにも私が作りたいページのソースがありません。
アドバイスは大変役に立って感謝なのですが、この問題を解決するソースが載っているサイトをご存知でしたら教えて頂けないでしょうか…?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 掲示板のセキュリティについてアドバイスお願い致します 1 2023/08/11 20:44
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
cssの display: flex;で横並び...
-
「CSS」リストの2段組どのよう...
-
リストの数字のフォントサイズ...
-
li 長さ指定
-
[CSS3] last-childについて
-
メニューの折り畳み階層化について
-
リストの回り込みについて(マ...
-
header と nav の隙間を埋めたい。
-
<ul>と<li>リストマークを消す...
-
画像はDIVタグとPタグの両方で...
-
list-style-type部分だけ大きく...
-
ドロップダウンメニューが隠れ...
-
<ul>~</ul>が二つ続くと間に改...
-
<table>の高さ固定。情報増加時...
-
<ol><li> 左側にスペースがで...
-
ulタグやliタグの中でbrタグ...
-
ページを開いているときのリン...
-
liタグを改列させたい。
-
リンク文字同士の間隔を開ける...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報