Homepage managerでcssテンプレートは使えますか。

質問

Homepage managerでcssテンプレートは使えますか。
レイアウト用にcssのテンプレートを使ってみようと思い、他のサイトからダウロードしたのですが、Homepage　managerでとりこんで使うことができるのでしょうか。スタイルシートファイルエディタを使うのかと思ったのですが、やり方がまったくわかりません。
また、css自体よくわかっていないのですが、このレイアウトの中に細かい表などを作成していくことも可能なのでしょうか。
ご教授よろしくお願い致します。

回答No.3

dark_kappa · ベストアンサー

>他サイトのcssレイアウトテンプレートにはあまりそういう記載がなかったので
>心配になったのですが、そういうことはちゃんとできているものなんでしょうか。

必ずしもそうなっているとは言えません。
スタイルを作る時の設計思想によりマチマチですから。

ブラウザの表示サイズを変更したり、文章の量が増減したりしても、それに合わせて上手く変動して表示してくれるスタイルを「リキッドスタイル」と言います。

テンプレートでそのようなリキッドスタイルを実現しているものはありますよ。
国内のテンプレ配布サイトでも、普通にそういうものを配布しておられるサイトは数多くあります。

>デザインつきのものでは、画像を並べるといったようなデザインのものがなかったので
>レイアウトだけにしてあとは自分でやるしかないのかと思っているのですが。

画像を並べるのはリキッドスタイルでも可能ではあるものの、サイズを固定したDIVをリキッドスタイルの中で扱う事になるので、当然文字のようにうまく可変はしてくれません。
（画像のサイズは無視できないので）

間違ってもtableタグの中に画像と文字を入れるような事はしないようにしましょう。
リキッドスタイルで扱えなくなりますから。

>あと、英語のサイトと日本語のサイトではCSSが多少食い違う事があるのとのことですが
>英語や多言語でサイトを作る予定なのですが、何か注意しなければならないのでしょうか。

英語（１バイト文字）では、日本語（２バイト文字）では使えない事がほとんどというスタイルを指定することが出来ます。
Font-variantやText-transformなんていうスタイルがそれ。
英語でサイトを作られるならば指定しなければならないシーンもあるでしょう。
日本語のサイトを作る場合はこれらのスタイルは使いませんけれどね。
スタイルの意味（機能）はご自分で検索なさって下さい。

これまでのやり取りを見ると、恐らくそのダウンロードしたCSSを適用させたくても、HTMLの記載でつまずくだろうな、というのが見えます。

「スタイルを反映させるためにDIVをどう分けるか」
…と言われて、ピンと来るならば問題ないですが、なんのこっちゃ？という状態であれば、サイト作り以前にHTML＋CSSの基礎を勉強しなければなりません。

ホームページは、昔はただダラダラと上から下へとスクロールさせて読ませる事が主体でした。
スタイルとコンテンツがゴチャ混ぜになって書かれている、初心者が必ずやる作り方ですね。

次に、もっとスタイリッシュにしたいと、tableタグを使って、表計算ソフトのセルのような表に画像や文字を当てはめていくスタイルが流行りました。
これを「テーブルスタイル」と言います。脱初心者が次に行き着く部分だったりします。

続けて、テーブルスタイルのメニュー部分だけを別ページにしてしまう、フレームスタイルが流行りました。

ここまで来て、テーブルスタイルは【本来のテーブルの使い方と違うよね】という話になり、テーブルスタイルで作られたサイトは、検索エンジンから嫌われるようになっていきます。
また、フレームスタイルも【１ページを見せたいのに２ページ使ってて無駄だよね】という事で、やはり検索エンジンから嫌われるようになりました。

検索エンジンから嫌われるということは、検索しても上位に表示されないということ。
でも、ホームページは検索エンジン上位に来なければビューが稼げない（誰にも見てもらえない）。
そのジレンマを解消するために、SEO対策なるものが出来てきた訳です。

SEO対策というのは「正解のない問題」ですが、検索エンジンの仕様にマッチしたホームページ作りをしよう、という事で周知されてきたのが「DIVスタイル」です。
DIVスタイルになったおかげでリキッドスタイルも実現できるようになった、という因果関係があります。

ダウンロードされたCSSは、このDIVスタイルのためのスタイルです。
つまりは、あなたご自身がDIVスタイルって何だ!?という点を理解していなければ、CSSの適用すらできない、という訳です。

今は、HTML+CSSの解説本、XTTML+CSSの解説本のほとんどが、DIVスタイルで書かれています。
CSSをHTML内に記載するか、別ファイルに記載するかの違いはありますけれどね。
そのようなスタイル解説本を読む事で「DIV分けって何？どうやるの？おいしいの？」という事を理解してしまうと、CSSって簡単で奥が深くて面白い、という事がお解りになるだろう、と思います。

スタイル本を書店で読んでみて、解りやすそうなのを買って研究なさってみる事を強くお勧めします。
大変勉強になりますよ。

お礼

とてもわかりやすくいろいろと体系的に教えていただけたので、だんだんとつかめてきました。
つまずきながらも楽しみながら作っていきたいなあと思えるようになりました。
ありがとうございました。

回答No.2

dark_kappa

リンク先を見て来ました。
私が30分～１時間くらいでお遊びで作ってしまう程度のCSSのようなので、わざわざ英語のサイトからダウンロードする事もなく国内のサイトでもいいものがあるはずなのですが…。

http://pondt.com/
http://nikukyu-punch.com/
英語のサイトと日本語のサイトではCSSが多少食い違う事があるので、似たようなものを上記のようなサイトから探してみるという方法もありますよ、という前置きはしておきますね。

CSSが反映されないのは、下記いずれか、という感じがします。
・HTML内のDIV組をCSSに合わせて正しく行なっていない
・CSSファイルをHTMLファイルと同じ階層に置いていない
　（別階層に置くならばそれに合わせてリンクを変更しなきゃダメです）
・補足内にあるようにHTMLのbodyタグ内に何も書かれていないなんて事はありませんよ…ね？

CSSを適用しただけじゃスタイルが反映されなくて当然ですから、このテンプレのサイトにある【The nested div structure】という項目にある２枚目の画像のように、HTMLをDIV分けしないとダメですよ。

>あと、このメインの部分に画像を並べて挿入したいのですが、その場合は表をつかって
>細かいレイアウトをしていけばよいのでしょうか。
>それともcssで細かい表のレイアウトまでできたりするのですか。

今は、表（tableタグ）を使ってレイアウトをする事を避けるために、DIV分けとCSSを使う、という事になっています。
tableタグを使ってレイアウトをするのは「テーブルレイアウト」と言い、何年か前までに流行った方法ですが、本来のtableタグの使い方とは違うので、SEO対策上よろしくないとされ、今はプロはまず採用しない方法です。
CSSで表（tableタグ）の細かな指定も出来ますが、その表は「表」として使われるべきであり、画像や文字の位置を固定するためのものではありません…が、可能か不可能かと言われれば「可能」ではあります（時代遅れな方法であることには変わりありませんが）。

>画像は表がなくてもきれいに並べて挿入していくことができたりしますか。

可能です。
DIVタグは
・絶対値の座標を入れる事で位置を固定することができる
　（ただし、ブラウザによっては表示が滅茶苦茶に崩れる事がある）
・相対的に表示をさせることである程度自在な段組みレイアウトができる
…ので、普通は後者の方法を使って位置を決め、段組みレイアウトで２×３とか４×４とか、様々な画像表示をすることも可能です。

段組みレイアウトについては、Dreamweaver等の教本を読めば普通にそのスタイル例が書いてありますし、スタイルブックとして数種類の実例をHTML＋CSSで細かく解説している本も出ています。
floatを使ってDIVを左右に移動させ、空いた隙間に下のDIVを滑り込ませるような作り方が「段組み」の方法です。
floatで要素を移動させたら、移動させたくない要素はclearで元に戻す必要がありますが、その仕組みを理解できれば面白いように様々なスタイルを作る事が可能ですよ。

CSSは自在に使えるようになると、非常に楽しいです。
数年前まではJavaScriptじゃないと実現できないなんて言われていたような事もCSSだけでできてしまったりします（メニューにカーソルを合わせると、メニューの背景画像が数パターンの変化を見せる…など）。

また、CSSはWebを作る上で避けて通れないSEO対策を行なう上でも必須事項です。
一番勉強になるのは、HTMLではなくXHTMLでWebを作ってみる事でしょう。
XHTMLはHTMLとほとんど同じなのですが、曖昧さがなく、かつ記述はマークアップのみで、スタイルは別に書かなければならないという厳格な決まりがあるので、理解できるとCSSの偉大さが良く解りますよ。

もし余裕があるのであれば、HTMLだけでなく、XHTML＋CSSという方法も学んでみてください。

補足

ありがとうございます。
お恥ずかしいですが、そのまさかのbodyタグ内に何も書いてませんでした・・・。
もうちょっと勉強します・・・。

こちらの英語サイトからのレイアウトにしようと思ったのは、cssハックなしだとか、
カラムの内容量が違っても、高さは同じになるとか書いてあったのでいいかなあと思い、
他サイトのcssレイアウトテンプレートにはあまりそういう記載がなかったので
心配になったのですが、そういうことはちゃんとできているものなんでしょうか。
デザインつきのものでは、画像を並べるといったようなデザインのものがなかったので
レイアウトだけにしてあとは自分でやるしかないのかと思っているのですが。

あと、英語のサイトと日本語のサイトではCSSが多少食い違う事があるのとのことですが、
英語や多言語でサイトを作る予定なのですが、何か注意しなければならないのでしょうか。

お手数をおかけして申し訳ありませんが、アドバイスよろしくお願い致します。

回答No.1

dark_kappa

Homepage manegerというのは使ったことがないので、一般論で回答します。

ソフト名から言って、Webオーサリングソフト（ホームページ制作ソフト）であろうと思いますので、必ず「ソースの編集」が出来るはずです。
ここからいじるのが普通ですが、ソース編集をどうすればいいのか解らないのであれば、メモ帳で開いても出来てしまいます。

ダウンロードしたCSSテンプレートというのは、どのような中身でしょうか？
それによって対応が異なります。

■　style.css 等と、拡張子が.cssである場合
この場合は、CSSが別ファイル化されているだけなので、読み込ませたいhtmlファイルの<head>～</head>内にリンクを張ればOKです。
ちょうど、<title>～</title>のすぐ上か、すぐ下でいいでしょう。
index.html等のHTMLファイルとstyle.cssが同じフォルダ内にあるのであれば、下記の一行を追加すればOKです。

<link href="style.css" rel="stylesheet" type="text/css" media="all">

CSSファイルのファイル名が違う場合は適宜変更して下さい。

■　既にHTMLタグ内にスタイルが書かれている場合
<head>～</head>内に、<style>～</style>で囲んで入れます。
下記に簡単な例を記載しておきますので、どのように指定するのかを参考にして下さい。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>スタイル内包型の例</title>

<style type="text/css">
body {
font-size: 1em;
color: #666;
}

h1 {
font-size: 1em;
color: #F00;
}

#id_name {
background: #0FF;
width: 400px;
height: 50px;
margin: 20px;
padding: 10px;
}

.class_name {
background: #FF9;
margin: 20px;
padding: 10px;
border: 1px solid #F90;
}
</style>

</head>

<body>

<h1>スタイルを内包している場合の書き方</h1>
<p>それぞれのタグやIDやクラスに対して、スタイル指定をする時の例</p>

<div id="id_name">
<p>IDを付けたDIV</p>
</div>

<div class="class_name">
<p>クラス名を付けたDIV</p>
</div>

</body>
</html>

スタイルの指定というのは、上記２種類の方法のどちらかで行なうのが普通なのですが、Web制作初心者の方は「HTMLタグにスタイル指定タグも含めて書く」事をしないと理解できない場合が多いようです。
スタイル指定タグも含めて書くようになっているオーサリングソフトも少なくありません（というか、ほとんどのオーサリングソフトが普通にスタイル指定をするとタグに入り込んでしまいます）。
今ではこれは「悪しき例」となっていますので、使わないのが普通です。

// HTMLタグ内にスタイル指定タグを含めてしまう例

<p>それぞれの<b>タグ</b>や<em>ID</em>や<strong>クラス</strong>に対して、<font color="#990000">スタイル指定</font>をする時の例</p>

ダウンロードしたテンプレートというのがどのようなファイルなのかが解らないのですが、CSSのテンプレートとなれば、
・CSSファイルとして別ファイル化されている
・<style>～</style>タグ内にコピーするよう指示されている
…のどちらかであろう、という推測での回答です。

CSSの理解は最初は難しいですが、一度「ああ、なるほど」と思ってしまうと、サクサクいじれるようになるので楽しいですよ。
「より検索されやすくなる」「後からページのメンテナンスがやりやすい」などの非常に大きなメリットもありますから、頑張って習得してください。

補足

ありがとうございます。
まったくの初心者なのでとても分かりやすく説明していただき大変うれしく思っています。

おかけさまで他のダウンロードしたものは、うまく表示できたのですが
下記のページのものを使用したく、ソースからコピーして外部ファイルをつくって
使用したほうが良いとサイトにも書いてあるので、
<style media="screen" type="text/css">～</style>内をコピーしてstyle.cssの
ファイルを作り、同じフォルダ内に下記のindex.htmlをつくったのですが、
画面は真っ白のままで、レイアウトできていないようなのですが、何か間違っていますか。

http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
</body>
</html>

あと、このメインの部分に画像を並べて挿入したいのですが、その場合は表をつかって
細かいレイアウトをしていけばよいのでしょうか。
それともcssで細かい表のレイアウトまでできたりするのですか。
画像は表がなくてもきれいに並べて挿入していくことができたりしますか。
初歩的な質問で恐縮ですが、ご教授よろしくお願い致します。