Gizport
1 回答
0
Share (facebook)
60
view
全般

スタイルシートで、行間(字間?)等を設定する方法を教えて下さい。 ...

スタイルシートで、行間(字間?)等を設定する方法を教えて下さい。

HTMLでHPを作成中です(大分慣れてきましたが初心者です)スタイルシートでは、文字の大きさを変える事をしましたが、 その際(文字を小さくしたので)行間が狭く読みづらいので、幅を広げる方法を教えて下さい。
(横書きで、上と下にゆとりをもたせたいのです)

あと、文を中央に指定する方法もあれば教えて下さい。

タイトル部をこのように
<CENTER><H2><IMG src="image/leaf.gif"> At first<FONT style="font-size:12pt;">~はじめに~</FONT><IMG src="image/leaf.gif"></H2></CENTER>
したのですが、何故か中央にいってません。左に寄ってます。
スタイルシートで、そのように指示できるなら教えて頂きたいです。

他にも、便利なスタイルシートがあれば、教えて頂けたら幸いです。
(スタイルシートはまだほとんど使えてなくて、色々知らないので・・)

よろしくお願いします!
Yahoo!知恵袋 5918日前
コメントする
お気に入り
1
質問者が選んだベストソリューション

>行間が狭く読みづらいので、幅を広げる方法を教えて下さい。

line-heightプロパティを使用し、行間を調整しましょう。

スタイルシート[CSS]/テキスト・フォント/行間を指定する - TAG index
http://www.tagindex.com/stylesheet/text_font/line_height.html


>あと、文を中央に指定する方法もあれば教えて下さい。

text-alignプロパティで、centerを指定しましょう。

スタイルシート[CSS]/テキスト・フォント/文字の表示位置を指定する - TAG index
http://www.tagindex.com/stylesheet/text_font/text_align.html


>タイトル部をこのように
><CENTER><H2><IMG src="image/leaf.gif"> At first<FONT style="font-size:12pt;">~はじめに~</FONT><IMG src="image/leaf.gif"></H2></CENTER>
>したのですが、何故か中央にいってません。左に寄ってます。

手元で試したところ、この現象は確認できませんでした。中央に来ます。
IE6、Firefox2.0.0.16、Opera9.50の3つで試しましたが、同様です。

ソースを挙げていただくか、実際のURLを見せていただけると、
検証することができるかもしれません。

※1
<center>要素や<font>要素は非推奨とされている要素ですので、
スタイルシートで置き換えるようにしましょう。

※2
<img>要素には、「画像が表示されないときに代わりに表示する文字列」を指定する、
alt属性が必須とされています。alt属性を忘れずに入れましょう。


以上を踏まえて、例となるソースを書いてみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>タイトルのテスト</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
h1 { font-size: 1.5em;
text-align: center; }

h1 span { font-size: 0.7em; }
p { line-height: 150%; }
-->
</style>
</head>
<body>
<h1>
<img src="image/leaf.gif" alt="葉っぱのアイコン">
At first<span>~はじめに~</span>
<img src="image/leaf.gif" alt="葉っぱのアイコン">
</h1>

<p>
行間のテスト行間のテスト行間のテスト行間のテスト行間のテスト
行間のテスト行間のテスト行間のテスト行間のテスト行間のテスト
行間のテスト行間のテスト行間のテスト行間のテスト行間のテスト
行間のテスト行間のテスト行間のテスト行間のテスト行間のテスト
行間のテスト行間のテスト行間のテスト行間のテスト行間のテスト
</p>

</body>
</html>



<font>要素を<span>要素に置き換えています。
<span>要素は文章の構造上特定の意味を持ちません。

「At first」と「~はじめに~」は同じ位置づけにある文言ですので、
同じ<h1>の中で「~はじめに~」の部分だけ見た目を変えるため、
<span>要素で囲って、スタイルシートでfont-sizeを使用しています。


単位にもいろいろ指定の方法があります。
私は、相対単位や%の使用をお勧めします。

CSSの単位
http://w3g.jp/css/guide/units



>他にも、便利なスタイルシートがあれば、教えて頂けたら幸いです。
>(スタイルシートはまだほとんど使えてなくて、色々知らないので・・)

CSSの各プロパティを解説しているサイトを見てみましょう。

それぞれどのような効果があるプロパティかを頭に置いておいて、
「○○をしたい」→「○○のプロパティを使えばいいんだ!」というように、
スタイルシートでできることを少しずつ増やして行きましょう。

スタイルシート CSS[スタイルシートのカテゴリー一覧] - TAG index
http://www.tagindex.com/stylesheet/index.html

CSSガイド
http://w3g.jp/css/


■補足拝見しました。
>h1{font-size~・・で指定した部分の文字が、固定されてない事に気づきました;

文字が固定されていない、というのはどういうことでしょうか?
位置…は、画面の中央なのでこれはこれで「固定」ですよね…。

もしかして、「文字の大きさを固定したい」ということでしょうか?
だとしたら、文字の大きさを「完全に」固定することはできません。

Internet Explorer(IE)の場合、単位にpxを指定すると大きさが固定されますが、
これは逆にIEの問題点です。firefoxなど、他のブラウザでは固定されません。

目の悪い方などが見ることも考慮すると、完全に固定してしまうことはお勧めできません。
emなどの相対単位を使い、IEでも文字の大きさは変更できるようにしましょう。
「文字の大きさはなるべく指定しない。するなら相対単位で」というのが私の意見です。

また、閲覧者によっては、スタイルシートでフォントサイズを指定しても、
それを無視して、自分で決めたサイズで表示するように設定することができます。

フォントサイズによってデザインが崩れてしまうようなコーディングは、
「なるべく」ですが、避けたほうが良いように思います。
Yahoo!知恵袋 5916日前
シェア
 
コメントする
 

参考になったと評価
  このQ&Aは参考になりましたか?

Share (facebook)
その他の解決方法を知っていますか?
回答する
全般
41
Views
質問者が納得プリンタドライバ(PCL XLドライバ)の問題だと思われます。 解決策または回避策はプリンタメーカーにより異なります。 まずは最新のドライバをインストールして、それでダメならプリンタの削除をしてからプリンタの再インストール位しか手段はないかと思います。 上記を試しても解決しない場合は、メーカーサポートに問い合わせですね。
3744日前view41
全般
29
Views
質問者が納得/* ----------------メニュー用 背景・文字色設定 */ /* 通常・訪問済みリンクカラー */ #submenu a:link, #submenu a:visited { color: #ffffff; /* 文字色 */ □□□□□□□□background-color: #555555; font-size: 12px; } /* マウスを上に重ねた時リンクカラー */ #submenu a:hover { color: #333333; background-color...
4083日前view29
全般
46
Views
質問者が納得今見てみるとurlでアクセスできますし、 googleへキャッシュもインデックスもされています。 サーバ側でメンテしていてクローラがその時アクセス 出来なかったのでしょう。 googleウェブマスターのメッセージは確認したら削除できますので 削除して下さい。 その後はメッセージ来ないと思います。
4355日前view46
全般
34
Views
質問者が納得<補足への回答> 参考URLにもあると思いますが―― On Error Goto ER 以降の処理がエラーならエラー処理ルーティンに行きなさい、という意味です。 "ER"の部分は参考URLの先では "GoTo ErrorHandler" と記述されていますが、自分なりにわかりやすい文字列でOKです。 ER: On Error Goto 0 先に生じたエラーを解消します。 ファイルがないことを明示したい場合は Private Sub CommandButton...
4417日前view34
全般
44
Views
質問者が納得<STYLE type="text/css"><!--body{cursor:url(http://hana.poche.jp/angel66l/kagi.ico);}a{cursor:url(http://hana.poche.jp/angel66l/kagi.ico);}--><styletype="text/css">.entry .contents{text-align:center;}</style><s...
4549日前view44

関連製品のQ&A