- ベストアンサー
ＨＰ作成
たびたびすみません。 以下のようなものをつくりました。 これでいくつか質問があります。 １．「ＴＯＰ」のブロックの縦の長さを変えるにはどこをどのようにすればいいでしょうか？ ２．「ＴＯＰ」以外のブロックの縦の長さをいっぺんに変えることはできますか？ ３．（以下のソースとは関係ありませんが）ＨＰのフォントは何を使えば だいたいのＰＣで見れることができるでしょうか？ <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=""> Ｎｅｗｓ</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="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> </table> </center> </body> </html>
- mituru1986
- お礼率42% (632/1491)
- ホームページ作成ソフト
- 回答数2
- ありがとう数2
- みんなの回答 （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>の部分） それ以下の４つのセルについてはまとめてヘッド部分で（<style type="text/css">～</style>の間で）デザインを記述しているようです。 さて、ご質問ですが、 １）これを変えるには特別扱い記述部分で行います。この記述の仕方なら二箇所について数字を変更すれば良いです； PADDING-BOTTOM: 5px; およびPADDING-TOP: 5px; に注目して その5pxの「５」をほかの数字に変更します。最初の記述は文字の下部分の隙間の調節、後ろの記述は文字の上部分の隙間を調節するものです。 ２）出来ます。トップ以外のセルはいっぺんに変更出来るような記述になっています。 ヘッド部分のheight:25px;に注目。この意味はセルの高さは25ピクセルです、という事ですが、この「25」を変更して見て下さい。 数字を変えて見ながら一番良いと思われるデザインに追い込んで下さい。 ３）現在フォントは「'Sylfaen」というものが指定されていますね。浅学にしてこのフォントを知りませんが、私の理解ではどんな日本語フォントを指定されても閲覧者が困ることはありません。 もし閲覧者のPCにそのフォントがインストールされていないとしてもそれに似たフォントで表示されると思います。少なくとも見ることが出来ないという事態には陥らないと思います。とはいえフォントに凝ってぜひデザインしたとおりに見せたい時は、お勧めではないもののこの程度の文字数なら文字を画像にして貼り付けるという方法もあります。 蛇足ですが、フォントサイズを10ptに固定する記述になっていますけど文字の大きさは閲覧者側のパソコンに任せてしまって「pt]でなく「em」で指定したほうが良いと読んだ事があります。目の良さは人に依りますものね。
その他の回答 (1)
- metis
- ベストアンサー率52% (86/165)
1,2は省略、3についてです。 Sylfaenといえば、アルメニア語やグルジア語をサポートするフォントでしたっけ。 XPには標準搭載されていますが、仮にそのフォントが存在しなければ、デフォルトのフォントで表示されるので、心配は有りません。 ただし、そのフォントに存在しない文字を扱うと、化ける可能性は有るかもしれません。 で、Sylfaenは、セリフ体というフォントファミリーに属していますので、セリフ体のフォントを追加で指定しておけば、どの環境でも似たようなフォント表示が期待できるかと思います。 （ちなみに、セリフ体とは、明朝系のフォントの事です） 例：font-family:Sylfaen, "ＭＳ Ｐ明朝", serif; ↑の例の場合、Sylfaenが有るならそれで、なければＭＳ Ｐ明朝、それもなければserifで表示するようになります。 尤も、こだわりがなければ、素直に"ＭＳ Ｐ明朝"を指定した方が良いようには思いますが…。（或いは、そもそも指定をしない）
お礼
回答ありがとうございます。 かわいい文字にしたいのですが、それをすると見るパソコンによって文字化けするかなあと思ったので このような質問をさせてもらいました。 やっぱり、王道なフォントがいいみたいですね。。。
お礼
回答ありがとうございます。 できました！！すごくわかりやすい回答ですごく感謝しています（＾＾ ただ、２なのですがこれをするとブロックの中の文字が上ぎみになってしまうのですが これを真ん中にもってくることはできますでしょうか？ 何度も質問して申し訳ありません。。 よければお答えしてもらえるとうれしいです。
補足
すみません。何とか自己解決できました♪ また、質問させていただくと思いますが、そのときはよろしくお願いいたします。