
たびたびすみません。
以下のようなものをつくりました。
これでいくつか質問があります。
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>

No.1ベストアンサー
- 回答日時:
こんばんは。
この記述ではトップセルだけ特別扱にしてセルのスタイル記述で行っており(<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」で指定したほうが良いと読んだ事があります。目の良さは人に依りますものね。
回答ありがとうございます。
できました!!すごくわかりやすい回答ですごく感謝しています(^^
ただ、2なのですがこれをするとブロックの中の文字が上ぎみになってしまうのですが
これを真ん中にもってくることはできますでしょうか?
何度も質問して申し訳ありません。。
よければお答えしてもらえるとうれしいです。
No.2
- 回答日時:
1,2は省略、3についてです。
Sylfaenといえば、アルメニア語やグルジア語をサポートするフォントでしたっけ。
XPには標準搭載されていますが、仮にそのフォントが存在しなければ、デフォルトのフォントで表示されるので、心配は有りません。
ただし、そのフォントに存在しない文字を扱うと、化ける可能性は有るかもしれません。
で、Sylfaenは、セリフ体というフォントファミリーに属していますので、セリフ体のフォントを追加で指定しておけば、どの環境でも似たようなフォント表示が期待できるかと思います。
(ちなみに、セリフ体とは、明朝系のフォントの事です)
例:font-family:Sylfaen, "MS P明朝", serif;
↑の例の場合、Sylfaenが有るならそれで、なければMS P明朝、それもなければserifで表示するようになります。
尤も、こだわりがなければ、素直に"MS P明朝"を指定した方が良いようには思いますが…。(或いは、そもそも指定をしない)
回答ありがとうございます。
かわいい文字にしたいのですが、それをすると見るパソコンによって文字化けするかなあと思ったので
このような質問をさせてもらいました。
やっぱり、王道なフォントがいいみたいですね。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HP作成
-
パディングを使ったボックス
-
イラストレータCS4で編集後の画...
-
レスポンシブWEBデザイン p要...
-
HP作成について
-
画像を携帯の待ち受けにするに...
-
px^2+qx+rを(x+2)^2で割って4x+...
-
htmlの文字が縦書きになる
-
webデザイン 疑問点
-
回り込みfloatの連続?
-
.レスポンシブウェブデザインに...
-
CSSで画像の下のスペースをなく...
-
HTMLについて
-
IE10でホームページがもの凄く...
-
DIVを選択すると一部のDIVを僅...
-
clearfixの記述の仕方
-
スクロールバーの色 ぷっくりと
-
リストの入れ子について
-
HTML CSS に詳しい方教えてくだ...
-
ウェブサイトの作成方法について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Macで画像の切り抜きできないの?
-
サムネイル自動生成プラグインn...
-
最近よくWEBで見かけるストライ...
-
<hn>タグについて質問させて下...
-
ポインタが全く分かりません。
-
枠について
-
PNG画像の余白をカットする方法...
-
Pythonでエクセルファイルの列...
-
十進BASICでのプログラム
-
ラグランジェの未定係数を使っ...
-
img要素のwidth属性 height属性
-
エクセル2010のvbaについて
-
JAVAのプログラムとCSSの組み合...
-
Mac Bookで画像サイズの変更
-
横幅が狭いホームページ
-
ベイシックのプログラミングに...
-
480px×854pxって?
-
HTMLソースの中で、画像を表示...
-
スタイルシートの"_width"って...
-
FEDORA15のアイコンを小さくしたい
おすすめ情報