ＨＰのレイアウト（？）の編集

質問

レイアウトというか何というか分からないのですが、※この様な感じのページにしたいと思っています。

例※http://www.joshi-shogi.com/

一番上に『タイトル』があって、それから下は左側と、右側が８：２の割合になってますよね。こういった感じに仕上げたいです。どうしたらできますか？

無料作成ソフトの【fpxpress】で作業しています。
あるいは専用タグを教えて下さい<m(__)m>

回答No.4

三郷北 M君（@mkun55555）

簡単な専用タグはないんですが、単純な例で説明します。
http://www7a.biglobe.ne.jp/~mkun/css1/css11.htmは
<div id="header">などを使って、ページを５つの部分に分けています。
headerの中にlogoとhrightがあって
pagebodyの中にnavigationとcontentがあって
最後にfooterがあります。

http://www7a.biglobe.ne.jp/~mkun/css1/base.css
というCSSファイルでそれぞれの<div>を定義しています。
これでも、解析するのは難しいかもしれません。

参考URLでCSSファイルを使ったHPの見本をダウンロードできます。
これを使って、高校の情報の授業を行っています。
高校生の半分ぐらいは、自分なりに変更できるようです。

参考URL：

http://www7a.biglobe.ne.jp/~mkun/css/css.htm

お礼

ありがとうございました<m(__)m>

回答No.3

三郷北 M君（@mkun55555）

例のページのソースを見ると<link rel="stylesheet" href="http://joshi-shogi.com/styles-site.css" type="text/css" />と書いてあります。
そこから先をたどっていくと
http://www.joshi-shogi.com/cgi/mt/mt-static/themes/base-weblog.cssというCSSファイルがあって、次のような部分があります。
#container {
position: relative;
margin: 0 auto; /* center on everything else */
width: 720px;
text-align: left;
}
これによって、HTMLファイルの<div id="container">の位置を決めています。
ただ、この例のページを全て解析ずるのは大変です。

お礼

ありがとうございます<m(__)m>

回答No.2

luckystar7

こんにちわ。

もっとホームページに詳しいかたの回答があるかもしませんけれど、私なりにこうすればというのを書いてみますね。

ブログ風のトップページにするためには、テーブルタグを使ってみるのはいかがでしょうか。

上タイトルのマス、左ページのマス、右メニューのマス、この３つのマスのサイズを指定して、プログラムにテーブルのタグを用意します。
全体で横に800px、右が横に600px、横に200px、上のタイトルの縦の幅が128pxという感じになっていると思いますので、まず基本の下のようなテーブルを用意します。

<TABLE width="800" border=1>
<TBODY>
<TR>
<TD height="128" colspan="2"></TD>
</TR>
<TR>
<TD width="600"><BR>
<BR>
</TD>
<TD width="200"><BR>
<BR>
</TD>
</TR>
</TBODY>
</TABLE>

それから、マスの枠を表示するタグ、マス同士の隙間を０にするタグ、枠の色を設定するタグを、<TABLE>タグの中に追加してみる。

<TABLE width="800" border=1 cellspacing=0 cellpadding=0 bordercolor="gray">

お手本のページは、テーブルが上に詰まっているので、場所の指定をする必要があるので、そのタグを追加。

<TITLE></TITLE>タグの下くらいに、

<STYLE type="text/css">
<!--
body{
margin:0;
padding:0;
}}
</style>

を入れるといいと思います。

メニューのリンク先をクリックする度に変わるページを１枚、１枚作る場合は、このページを何枚も用意すればいいと思いますし、右のページをくり抜いて、左のページをメニューにして、メニューからのリンク先にするのもいいかと思います。

お礼

ありがろうございまし<m(__)m>

回答No.1

k-josui

以下のような所からテンプレートを借りてきて作成するのが手っ取り早いと思います。
http://www.webdaisuki.com/temp/index.html
もっと自由に操作したいのであればHTMLを基本から勉強してください。
http://www.tohoho-web.com/www.htm

お礼

ありがとうございました<m(__)m>