TOP > Expression Web & FrontPage Users Forum
[リストへもどる]
一括表示
タイトルホームページ作成時の表示幅について
記事No611
投稿日: 2013/03/07(Thu) 09:40
投稿者やすきち
すいません、お世話になります。
ホームページ大変参考にしております。
また、標準ガイドブック購入させていただきました。
(手元にあるとやっぱり安心なので・・・。)

社内向けホームページがあり、自分の担当部署の周知・研修案内などのページを年齢は50歳を超えていますが、作成することになりました。
そんなに大げさなものを作る必要なないので、ハイパーリンクや画像のサムネイル化など
Expression Web4で操作ができるようになりました。

現在勉強中で、基本的なことがわかっていないのでお恥ずかしい質問ですが、ホームページ作成時の表示幅について「固定」して作成したいのですが、うまくいきません。

ブラウザのウインドの大きさにかかわらず、ホームページの幅を固定にしたいのです。
他の人の作ったhtmlソースコードを見てみましたが、よくわかりません。
自分が作成するとブラウザの画面の大きさに比例して、ディスプレイの最大表示にすると
最大表示になり、文字の部分が左端になってしまい、右側には大きな余白ができてしまいます。(背景色も同様です)

どのようにすればよいのかご教授願います。
(貴殿の著書「標準ガイドブック」の何ページ可でも結構です。)

それと、別件の質問ですが、著書「標準ガイドブック」はExpression Web2 を主体に書かれているものでしょうか?
Web4で本を見ながらやっていると少し違うところが出てきます。(90%は網羅していると思いますが・・・。)

よろしくお願いします。

タイトルRe: ホームページ作成時の表示幅について
記事No612
投稿日: 2013/03/07(Thu) 09:48
投稿者wanichan
拙著を手に取っていただき、ありがとうございます。
Expression Web標準ガイドブックは、Expression Web 1を対象にしています。
「ひと目でわかるMicrosoft Expression Web 2」がExpression Web 2の参考書です。
https://www.amazon.co.jp/exec/obidos/ASIN/4891006064/wanichanowebw-22

ページ全体の横幅を固定する方法は、以下の記事をご覧ください。

ページ全体の横幅を固定するには http://www.wanichan.com/web/expression/web4/03/03.html

タイトルRe^2: ホームページ作成時の表示幅について
記事No613
投稿日: 2013/03/07(Thu) 18:05
投稿者やすきち
> 拙著を手に取っていただき、ありがとうございます。
> Expression Web標準ガイドブックは、Expression Web 1を対象にしています。
> 「ひと目でわかるMicrosoft Expression Web 2」がExpression Web 2の参考書です。
> https://www.amazon.co.jp/exec/obidos/ASIN/4891006064/wanichanowebw-22
>
> ページ全体の横幅を固定する方法は、以下の記事をご覧ください。
>
> ページ全体の横幅を固定するには http://www.wanichan.com/web/expression/web4/03/03.html

wanichan さま
早速の回答有り難うございます。
貴殿のホームページについてはすべて目を通したつもりだったんですが、「抜け」があったようです。このページが有るとは知りませんでした。
それから、
> Expression Web標準ガイドブックは、Expression Web 1を対象にしています。
そうなんですか?
Web4 には対応していないと思ったんですが、Web2用かと思いました。
でも概ねの操作方法は同じなので、手元において参考にします。
貴殿のホームページと合わせて2倍以上の知識を頂いてます。
> ページ全体の横幅を固定するには
あとでゆっくりと読んで習熟したいと思います。
また質問させていただくかもしれませんがよろしくお願いします。

「ひと目でわかるMicrosoft Expression Web 2」を購入できなくてすいません、あわてものなので、買い急いだようです。この本も購入して、2冊は必要でしょうか?

ありがとうございました。
取り急ぎ、ご連絡まで。

タイトルRe^3: ホームページ作成時の表示幅について
記事No614
投稿日: 2013/03/07(Thu) 18:10
投稿者wanichan
「ひと目〜」の方もあわせてご購入いただければ個人的にはありがたいですが、絶対に買わなきゃいけないということではありません。便利といえば便利ですよ(私本人も自分の書いたWeb 2本から情報を調べることありますし)。

タイトルRe^4: ホームページ作成時の表示幅について
記事No615
投稿日: 2013/03/07(Thu) 21:17
投稿者やすきち
> 「ひと目〜」の方もあわせてご購入いただければ個人的にはありがたいですが、絶対に買わなきゃいけないということではありません。便利といえば便利ですよ(私本人も自分の書いたWeb 2本から情報を調べることありますし)。

「ひと目〜」もあったほうが便利ですね!
大きな書店で一度内容を確認して購入するか検討したいと思います。

教えていただいた、「ページ全体の横幅を固定するには」と「ページ全体を中央に配置するには」を参考にしてソースコードを入力しなしたが、思っているようなページになりません。
IE10で表示させるとコードの関係か文字化けしていますし・・・。
(作成、確認はIE8でやっています。)
なぜそうなるのかわかりません。

ソースコードを見て表示していただいたほうがわかりやすいので、最後にソースコードを記載させてもらいます。(上記ページのソースと一部記載が違いますが、ExWEB4 で触っていたら追加されました。)
申し訳ありません。
自分はこれをホームページのひな形にしたいと考えています。
やりたいことは以下の3点です。
1.緑色の枠がブラウザのウインドウサイズに関係なく同じ大きさにしたい。
(現状のソースコードではウインドサイズによって大きさが可変しています。)
2.桃色の枠と同じ大きさにしたい。(緑色の枠をページ枠に、桃色の枠をタイトルなどに使いたいと考えてます。)
3.緑色の枠内だけに背景色を設定したい。(2日間いろいろと操作しましたが、画面全体が背景色になってしまい、どうしても緑色の枠内だけ色を付けることができません。)

こんな簡単なことが出来ないのかと少し凹んでしまっています。自信喪失状態です。

ちょっとの記述がおかしいだけと思っていますがどうでしょうか?

お手数をお掛けしてすいませんが、よろしくご教授ください。

以下、ソースコードです。
-----------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>ページ全体の横幅の固定と中央への配置</title>
<style type="text/css">
#container {
border-style: solid;
border-width: 1px;
margin: 0px auto 0px auto;
width: 800px;
text-align: center;
background-color: #FFCCFF;
}
body {
border: 1px solid #008000;
text-align: center;
}
.auto-style1 {
text-align: right;
background-color:aqua;
}
.auto-style2 {
text-align: left;
}
.auto-style3 {
background-color: #FFFFCC;
}

</style>
</head>

<body bgcolor="#FFFFFF" style="height: 343px">
<div id="container" class="auto-style1">
<div id="masthead">
大阪市</div>
<div id="left col" class="auto-style2">
左配置</div>
<div id="page content">
コンテンツ</div>
<div id="footer">
フッター</div>
</div>


</body>

</html>

タイトルRe^5: ホームページ作成時の表示幅について
記事No616
投稿日: 2013/03/13(Wed) 13:58
投稿者wanichan
まず、肝心なスタイルセットの記述が抜けています。
#masthead、#container、#left_col、#page_content #footer

あと、left col ではなく、left_col と続けなければ、#left と #col の二つのIDスタイルの適用を指定するという意味になります。
記述ミスに気を付けてください。アンダーバーを間に続けなければだめですよ。
別にIDスタイルはleftでもcontentでもよいです。名前はご自身の管理しやすい名前に置き換えてもOKです。

よろしくお願いいたします。