重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

たびたびすみません。
以下のようなものをつくりました。
これでいくつか質問があります。
1.「TOP」のブロックの縦の長さを変えるにはどこをどのようにすればいいでしょうか?
2.「TOP」以外のブロックの縦の長さをいっぺんに変えることはできますか?
3.(以下のソースとは関係ありませんが)HPのフォントは何を使えば
だいたいのPCで見れることができるでしょうか?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title></title>
<style type="text/css">
<!--
BODY
TD{
FONT-SIZE: 10pt
}

A.menu:link,A.menu:visited{
BORDER-RIGHT: #666666 1px solid;
PADDING-RIGHT: 15px;
BORDER-TOP: #666666 1px solid;
DISPLAY: block;
PADDING-LEFT: 15px;
PADDING-BOTTOM: 5px;
BORDER-LEFT: #666666 1px solid;
COLOR: #ffffff;
PADDING-TOP: 5px;
BORDER-BOTTOM: #666666 1px solid;
HEIGHT: 25px;
BACKGROUND-COLOR: #ff99cc;
TEXT-DECORATION: none
}

A.menu:hover,A.menu:active{
BORDER-RIGHT: #ffffff 1px ridge;
PADDING-RIGHT: 15px;
BORDER-TOP: #ffffff 1px ridge;
DISPLAY: block;
PADDING-LEFT: 15px;
PADDING-BOTTOM: 5px;
BORDER-LEFT: #ffffff 1px ridge;
COLOR: #666666;
PADDING-TOP: 5px;
BORDER-BOTTOM: #ffffff 1px ridge;
HEIGHT: 25px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}

-->
</style>
</head>
<body>
<center>
<table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 206px; FONT-FAMILY: 'Sylfaen'; HEIGHT: 94px" cellspacing="3" cellpadding="0" width="206">
<tr>
<td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font></td>
</tr>
<tr>
<td><a class="menu" href="">
News</font></a></td>
</tr>
<tr>
<td><a class="menu" href="">作品集</a></td>
</tr>
<tr>
<td><a class="menu" href="">お教室情報</font></a></td>
</tr>
<tr>
<td><a class="menu" href="">Shopping</a></td>
</tr>

</table>
</center>
</body>
</html>

A 回答 (2件)

こんばんは。



この記述ではトップセルだけ特別扱にしてセルのスタイル記述で行っており(<td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font>の部分)
それ以下の4つのセルについてはまとめてヘッド部分で(<style type="text/css">~</style>の間で)デザインを記述しているようです。

さて、ご質問ですが、
1)これを変えるには特別扱い記述部分で行います。この記述の仕方なら二箇所について数字を変更すれば良いです;

PADDING-BOTTOM: 5px; およびPADDING-TOP: 5px; に注目して
その5pxの「5」をほかの数字に変更します。最初の記述は文字の下部分の隙間の調節、後ろの記述は文字の上部分の隙間を調節するものです。

2)出来ます。トップ以外のセルはいっぺんに変更出来るような記述になっています。
ヘッド部分のheight:25px;に注目。この意味はセルの高さは25ピクセルです、という事ですが、この「25」を変更して見て下さい。

数字を変えて見ながら一番良いと思われるデザインに追い込んで下さい。

3)現在フォントは「'Sylfaen」というものが指定されていますね。浅学にしてこのフォントを知りませんが、私の理解ではどんな日本語フォントを指定されても閲覧者が困ることはありません。
もし閲覧者のPCにそのフォントがインストールされていないとしてもそれに似たフォントで表示されると思います。少なくとも見ることが出来ないという事態には陥らないと思います。とはいえフォントに凝ってぜひデザインしたとおりに見せたい時は、お勧めではないもののこの程度の文字数なら文字を画像にして貼り付けるという方法もあります。

蛇足ですが、フォントサイズを10ptに固定する記述になっていますけど文字の大きさは閲覧者側のパソコンに任せてしまって「pt]でなく「em」で指定したほうが良いと読んだ事があります。目の良さは人に依りますものね。

この回答への補足

すみません。何とか自己解決できました♪
また、質問させていただくと思いますが、そのときはよろしくお願いいたします。

補足日時:2007/03/30 09:36
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
できました!!すごくわかりやすい回答ですごく感謝しています(^^
ただ、2なのですがこれをするとブロックの中の文字が上ぎみになってしまうのですが
これを真ん中にもってくることはできますでしょうか?
何度も質問して申し訳ありません。。
よければお答えしてもらえるとうれしいです。

お礼日時:2007/03/30 08:51

1,2は省略、3についてです。


Sylfaenといえば、アルメニア語やグルジア語をサポートするフォントでしたっけ。
XPには標準搭載されていますが、仮にそのフォントが存在しなければ、デフォルトのフォントで表示されるので、心配は有りません。
ただし、そのフォントに存在しない文字を扱うと、化ける可能性は有るかもしれません。

で、Sylfaenは、セリフ体というフォントファミリーに属していますので、セリフ体のフォントを追加で指定しておけば、どの環境でも似たようなフォント表示が期待できるかと思います。
(ちなみに、セリフ体とは、明朝系のフォントの事です)
例:font-family:Sylfaen, "MS P明朝", serif;
↑の例の場合、Sylfaenが有るならそれで、なければMS P明朝、それもなければserifで表示するようになります。

尤も、こだわりがなければ、素直に"MS P明朝"を指定した方が良いようには思いますが…。(或いは、そもそも指定をしない)
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
かわいい文字にしたいのですが、それをすると見るパソコンによって文字化けするかなあと思ったので
このような質問をさせてもらいました。
やっぱり、王道なフォントがいいみたいですね。。。

お礼日時:2007/03/30 08:53

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!