人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【HPの作り方】Yahoo!のように両端を空けたレイアウトのHPを作る方法が分かりやすく解説してあるHPがあったら教えてください。

●質問者: onigiritabetai
●カテゴリ:コンピュータ 学習・教育
✍キーワード:Hp Yahoo! レイアウト
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● 潮澤 昴
●15ポイント

http://www.yahoo.co.jp/

Yahoo! JAPAN

<CENTER>

<TABLE>

<TBODY>

<TR>

<TD></TD>

</TR>

</TBODY>

</TABLE>

</CENTER>


テーブル組みして CENTERタグ で囲ってるだけです。

◎質問者からの返答

ありがとうございます。ホームページビルダーなどで作る場合の方法を教えているHPも教えていただけますと大変ありがたいです。


2 ● arcana
●15ポイント

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html

table???????Ф???

> 文章を中央に表示しながら読みやすくするにはtableを利用します。


部分を利用すると良いと思います。

追加でテーブル幅を指定すると一層見栄えが良くなりますね。

あとはその他のオプションで色を付けたりなど。

その解説はこちら:http://html.eweb-design.com/0701_tbl.html

◎質問者からの返答

ありがとうございます。参考になります。


3 ● cochlea
●15ポイント

http://picks.dir.yahoo.co.jp/

Yahoo! JAPAN - ????????

全てのコンテンツをtableタグへ入れてしまいます。

tableタグの内部で,テーブルの幅をwidth=710 で調節,テーブルの枠をborder=0で無しにすれば,できます。

◎質問者からの返答

ありがとうございます。


4 ● kazuspirit
●15ポイント

http://www.stylesheet-stylebook.com/archives/cssaaa5.php

Stylesheet Stylebook:CSSサイト

ヤフーのソースを見ると分かりますが、これはスタイルシート(CSS<カスケードファイル>)とDivタグを利用して、幅(width)をピクセルで決めているようです。個人的にはユーザビリティーを重視するなら%で決めるのが良いと思います。


ヤフーのスタイルシートは人気のようで提示したHPで解説されています。

https://www.ventura24.es/integraciones/yahoo/css/es/

ちなみに、ここにヤフーのスタイルシートのファイルがあるような…

http://www.tohoho-web.com/css/index.htm

とほほのスタイルシート入門

ちなみに、私の大学ではこのトホホのwww入門がスタイルシートの勉強がし易いと推奨されました。


※スタイルシートにも著作権が存在するそうなのでヤフーとまったく同じスタイルシート(CSSファイル)を使うのは好ましくないことが起こるかもしれませんよ。

◎質問者からの返答

ありがとうございます。とても参考になります。


5 ● saiya_moebius
●15ポイント

http://www.google.com/

Google

(URLはダミーです)


質問者さんが、どのような方法でHPを製作されているのかによって答えが大幅に変わるのですが、主にHTML(と呼ばれる物)を直接書くことで製作されているとして、自身のHPなどが特に無いので、ここに書いてみました。

(そうでない場合についても、後ろで言及してあります)

http://www.google.com/

Google

(URLはダミーです)


本題ですが、通常なら<body>タグと、諸々の中身を書く部分を、


<body style=”text-align:center;”>

<div style=”width:710px;text-align:left;”>


<!-- ここに、本来ならbody内部に入る内容を入れて下さい。 -->


</div>

</body>


のようにしてみて下さい。

ブラウザのウインドウを大きくしてみると、左右に隙間が空いているはずです。


また、上の(2行目で「width:710px;」となっている部分の)「710px」で現在(12/25)のyahooと同じ幅ですが、

他の幅にする場合は、「×××px」とすることで一定の幅で、

「××%」とすることで、ウインドウの内幅に対する割合で指定できます。

http://www.google.com/

Google

(URLはダミーです)


また、HPを作成するためのソフトを使っている場合は、ソフトによって具体的な方法が違うため具体的には言い難いのですが、


・文章全体を「中央揃え」に設定

・幅を固定したボックス、ないしは表を一つ置く。

(表の場合は、列、行ともに一つだけにして、1マスしかない表にして下さい)

・↑で置いたボックス、ないしは表の中に、任意の物を入れる

(ボックス、ないしは表の中は「左揃え」などにしても構わないはずです)


という風にすることで、おそらく、類似の結果が得られると思います。

◎質問者からの返答

ありがとうございます。とても参考になります。


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ