ホームページ制作をHTMLでやっているのですが２カラムのテンプレートが

締切済

質問者：yumemiya7
質問日時：2010/07/27 20:24
回答数：2件

ホームページ制作をHTMLでやっているのですが２カラムのテンプレートが表示されず困っています
色々調べてみたのですが(テンプレートの使い方、初心者のためのHPづくりのようなサイト様で)どうにも自力でがんばってみたのですが3日かかっても解決できません

ファイルを作ってその中にCSS、HTMLを入れてHTMLは<link rel="stylesheet" href="ファイルの中のテンプレートのソースをCSSで保存したもの.css" type="text/css">を<head>～</head>の間に入れているのですが…ついでにこの調子で背景もバックグランドに設定しているのに変わりません
ソフトは『Hetecre.exe』と『ezhtml.exe』を使っています(使い方が分からず持て余してますが『Hpman.exe』のソフトも入っています)それともみなさんはHPを作るときはなにか別の簡単に作れるなにか(?)をお持ちなんでしょうか

自分では初のHP作りで最善は尽くしきったのでもうお手上げです
どなたかわかるよという方、教えてもらえると本当にありがたいです

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： szk9998
回答日時：2010/07/27 22:39

これだけでは、わからないですよね・・・

普通のＨＴＭＬであれば、
コードをみれば、だいたいわかるとは思いますが。
せめて、<head>の内容と、cssファイルの中身がわかれば・・・
たぶん、
ＨＴＭＬファイルは例文などをみて、チェックされたことと思いますので、
ＣＳＳファイルそのものが問題ありなのでは？
例えば、カッコが閉じていないとか・・・

ＨＴＭＬファイルの<HEAD>セクション内に、
<style type="text/css">～</style>のタグ内に、
ＣＳＳファイルの中身をすべてコピーして貼ってみるととか・・・

これでもダメでしたら、ＣＳＳの記述に問題アリです。

他にも考えられることは、たくさんあります・・・

ソフトは、簡単なＨＴＭＬでしたら、なんでも大丈夫ですね。
何かテンプレートのようなものがあり、それを直すだけでしたら、
普通にテキストエディタだけで、十分です。

それ以上になると、専門のホームページ作成ソフト
（ホームページビルダーなどなど）を使う
ことになりますが、
いずれにせよ、ＨＴＭＬを知っていると知らないとでは、
大きな違いです。

頑張ってください。

- 0
- 件

通報する

No.2

回答者： dark_kappa
回答日時：2010/07/27 23:50

↓　HTMLとCSSで作成した、カンタンな２段組みカラムのサンプル　↓

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>２段カラムレイアウトサンプル</title>
<style type="text/css">

* {
margin: 0px;
padding: 0px;
}

#container {
background: #CCC;
margin: 0px auto;
width: 800px;
}

#header {
background: #666;
height: 120px;
}

#navi {
font-size: 1em;
line-height: 40px;
margin-bottom: 10px;
}

#foot {
line-height: 40px;
background: #666;
clear: both;
}

#flash {
background: #999;
float: left;
height: 300px;
width: 400px;
margin-bottom: 20px;
}

#contents {
background: #FFF;
width: 378px;
margin-bottom: 20px;
float: right;
padding: 10px;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
}

</style>
</head>

<body>
<div id="container">
<div id="header">
<p>ヘッダー部分</p>
</div>
<div id="navi">
<p>メニュー部分</p>
</div>
<div id="wrapper">
<div id="flash">
<p>フラッシュ挿入部分</p>
</div>
<div id="contents">
<p>テキストデータはここに。</p>
<p>テキストデータはここに。</p>
</div>
</div>
<div id="foot">
<p>フッター部分</p>
</div>
</div>
</body>
</html>

CSS部分を外部ファイル化する場合
（１）<style type="text/css">～</style>の【中身だけ】を切り取り（styleタグは含めず）
（２）何も入っていないテキストを開く（メモ帳ではなく、テキストエディタで）
（３）HTMLと合わせるために、（２）の１行目に　@charset "utf-8";　と記述
（４）（３）の２行目以降に、（１）をペースト（貼りつけ）
（５）HTMLと同じフォルダに、style.cssというファイル名で保存（この時文字コードをShift_JISで保存）
（６）HTMLから　<style type="text/css">　と　</style>　を削除
（７）HTMLの<head>～</head>に　<link href="style.css" rel="stylesheet" type="text/css">　を記述
（８）HTMLをstyle.cssと同じフォルダに、index.html　と名前を付けて保存（文字コードUTF-8で保存）
これでOKです。

HTMLとCSSのフォルダを分けた場合はパスに注意（HTMLから見た相対パスで記述）。

要は「HTMLとCSSの文字コード」を統一する（このサンプルではUTF-8にしています）ことと、パスの正しい記述。それと、当然HTMLにもCSSにも「ミス（バグ）」の無い事。

ez-HTMLは私も落としていますが、MKEditerも持っており、そちらを使う事の方が多いです。
…でも、Webページ作りは、基本的にDreamweaver CS5で行なってしまうので、テキストエディタはPHPとかCMS用のPHPやCSSのちょっとした書き換えに使うくらい…かな？

今回のサンプルではstyle.cssをShift_JISで保存していますが、style.cssの最初に　@charset "utf-8";　と入っている事で、HTMLからはUTF-8で読み込まれ実行される、という訳です。