ページのデザインと文書を別々に作る方法

[統計] HTMLからXHTMLへの移行を進めていますか？

0   名前： RyuT ： 2006/07/19（水） 19:09  ID:71mhE3.E
ページのデザインの統一と、編集を簡単にする目的で、デザインの部分と文章の部分を別々に作りたいのですが、デザインの部分であるhtmlにその文書の部分のtxtを読み込んで表示させる方法について質問があります。

<object date="○○.txt" type="text/txt" width="200px"　height="200px"></object>

というようなタグを試しに使ってみたところ、画像が表示出来ない時のような×マークが表示され、txtデータが表示されませんでした。

サイト内検索で「txt」と検索しても、それらしい答えは見つからず、結局ココに書き込む事にしました。

txtデータをhtmlに読み込む方法以外にも、
デザインの部分と文章のファイルを別々にする方法があれば教えてください。
宜しくお願いします。
1   名前： カヅサツ ◆ThCi95HEzw ： 2006/07/19（水） 19:09  ［URL］  ID:f0UXxXRM
「ページのデザインの統一と、編集を簡単にする目的で、デザインの部分と文章の部分を別々に作」る目的で、何故 Object要素で txtファイルを読み込まなければならないのかよくわかりませんが text/txt ではなく text/plain です。

> デザインの部分と文章のファイルを別々にする方法があれば教えてください。

まず文章を書き、次にそれをマークアップすることで HTML ファイルを作ります。
最後に、デザインに関する指定をスタイルシートで行い、それを CSS ファイルに書きます。
あとは HTML文書に link要素で CSS ファイルを呼び出せば、良いです。
2   名前： RyuT ： 2006/07/19（水） 19:09  ID:71mhE3.E
カズサツさん、お返事どうもありがとう御座います。

知識不足でobjectのtype属性のtext/の後には拡張子を書けばいいのかと思っていました。plainなんですね。

CSSの仕方は知っていましたが、今までなかなか手を出しませんでした。今度使いたいと思います。

とりあえず解決しました。
3   名前： かふぇおれ ： 2006/07/19（水） 19:09  ID:Ji0blfRq
…あら、解決されてしまったのですか。
では、思いっきり蛇足となる事を承知で…
装飾のされていないtxtをそのまま表示する事はできても、
デザインする事は出来ないので、ちょっと妥協して
<html>
<head>
<title>表示test</title>
<script language="JavaScript" src="txt.js"></script>
<script type="text/javascript">
<!--
function txt(){
if(document.all){
myText.innerHTML = msg;myFoot.innerHTML = copy;
}else if(document.layers){
document.myText.document.write(msg);
document.myFoot.document.write(copy);
}
}
// -->
</script>
<style type="text/css">
<!--
.footer {  font-size: 10px; color: #666666; text-align: center; width: 400px; line-height: 1.2em; border-top-color: #999999; border-top-style: double; border-top-width: 1px}
.contents {  font-size: 12px; line-height: 1.5em; color: #0033FF; border: #FFCC33; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 400px}
-->
</style>
</head>
<body onload="txt()">
<DIV style="position:absolute;top:20;left:50;">
<p class="contents" id="myText"></p>
</DIV>
<DIV style="position:absolute;top:200;" align="center">
<p class="footer" id="myFoot"></p>
</DIV>
</body>
</html>


で、外部ファイル（txt.js）に
var msg="今日はトイレットペーパーが安かった♪<br>いつもこうだったら良いのにな。<br><br>まるで蛇足としか思えないこのような文章も<br>似たような事で悩んだ事のある私には<br>とても大切な事の様に思えてしまうのです。<br>解っていて黙っている方もいらっしゃると思いますが、<br>勘弁してくださいね。";

var copy="こういった区切りを作っておけば、<br>著作権やサイト表示などの使い道がありますね♪<br>しかしhtmlとcssで作ることに違いはないですよ。";


こんなんでどうですか？
また、SSI (Server Side Include) とかを検索すると幸せになれるかもしれません。
4   名前： Pid ： 2006/07/19（水） 19:09  ID:TDh0RvEz
蛇足ながら，

>>0
width/height 属性は「整数値」か「パーセント値」です。px 単位は使えません。

>>3
CSS の top, left プロパティは，0 以外では単位が必須なのでお忘れなく（Firefox の超厳密モードでは，エラーのため無視されてしまいます……確か）。


----

ついでの雑談ですが，ブラウザ分岐に関して，

document.all と document.layers での分岐はもう捨てた方が良いでしょう。現状，ほとんどのメジャーブラウザは document.getElementById（in DOM1 HTML，DOM2 Core）を持っています。

もし IE4/NN4 対応する必要があるにしても，原則として「そのスクリプトで使用する予定のメソッド・プロパティの有無」で判断した方が良いです。もはや，最近では「document.all ならば IE」とは単純にはいきませんので（確か，O'Reilly の『JavaScript クックブック』にそんなことが書かれており，私もこれに賛成です）。


----

おまけで，JavaScript 2.0 であれば，

・use javascript(2.0);

で，JavaScript 2.0 実装のみの動作を保証できます。また，DOM 実装の場合，たとえば

・document.implementation.hasFeature ('CSS2', '2.0');

が true を返すなら，実装が DOM Level 2 CSS の CSS2 拡張モジュールをサポートしていることが保証されます。

いわゆる「クロスブラウザ」とは方向性が違いますが，最初から「クロスブラウザ」で書くよりは，まず標準モジュールでプロトタイプを書いて，その後にブラウザ間の違いを吸収するライブラリを書いた方が，後々のためには良いような気がします。それに，HTML 文書にきちんと代替内容があるならば，本来クライアント側スクリプトは動作せずとも構わないはずなので。
5   名前： かふぇおれ ： 2006/07/19（水） 19:09  ID:Ji0blfRq
あうあうあう…
昔、自分が試していたものをそのまま張り付けてしまいました。
こんな分岐、今更必要ないですよね。
document.all も innerHTML も止めた方が良いと教えて頂いたばかりなのに…。

RyuT さん、ごめんなさい。
蛇足どころか、余計なレスを付けてしまいました。（お恥ずかしい。）
6   名前： RyuT ： 2006/07/19（水） 19:09  ID:71mhE3.E
皆さん返信ありがとう御座います。
ちょっと感動。

でもこれらの内容、僕には少しレベルが高すぎた様です。
Pidさんやかふぇおれさんの通りに一度は試してみたいと思います。

僕の質問の目的も元々、楽をしようっていうような物だったんで、どうしても僕が分からなかった場合は横着せずにカチカチやっていきます。

どうも有難う御座いました。
また分からない事があれば質問しますね。
一覧へ戻る