- ベストアンサー
改行ほどは行かないけど、若干行間を開けたい。
改行ほどは行かないけど、 若干行間を開けたいです。 あああ。 いいい。 ううう。 と言う文章を表示させる際に 行と行の間を少しだけ開けたいのですが そのような微調節をする方法はありますか？ <br>だとあきすぎなのです。
- tzennlfagx
- お礼率100% (68/68)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1さんのおっしゃるようにスタイルシートを少し勉強してみれば、デザインの幅がぐっと広がります。ご提示の要素がよくわからないので、とりあえず<p>で説明しますが、スタイルシートはpがdivになっても、同じように扱えます。htmlが文章構造担当で、スタイルシートが見た目担当です。 line-heightは行間の意味です。その後ろの数字をtzennlfagx さんの好きな数値にしてみてください。 １．タグ的にインラインに入れ込むなら------------ <p style="line-height:1.8em">秋の田の かりほの庵の 苫をあらみ<br> わが衣手（ころもで）は 露にぬれつつ</p> <p style="line-height:1.1em;">「かりほ」は、「仮庵」と「刈り穂」の意味を持つ掛詞<br> 「仮庵の庵」で重ね詞 。<br> 農民の歌であるとか恋の歌であるなどの解釈がある。</p> ------------------------------------------ ２．<p style="line-height:1.1em;">head内に入れて何回も繰り返す事も可。別ファイルにして、サイト全体を制御するのが一般的。ここでは簡単にできる<head>内に入れる方法を。</head>のすぐ上にでも入れてみてください。 ------------------------------------------- <style type="text/css"> .tanka{line-height:1.8em;} .kaisetu{line-height:1.1em;} </style> </head> body内は----------------------------------- <p class="tanka">秋の田の かりほの庵の 苫をあらみ<br> わが衣手（ころもで）は 露にぬれつつ<br> </p> <p class="kaisetu">「かりほ」は、「仮庵」と「刈り穂」の意味を持つ掛詞<br> 「仮庵の庵」で重ね詞 </p> <p class="tanka">大江山いくのの道の遠ければ<br> まだふみも見ず天の橋立</p> <p class="kaisetu">まだふみも見ず天の橋立<br> ふみは「文」と「踏み」の掛詞</p> ------------------------------------------- ３．いろいろできる。 上の例ではclassごとの見た目を指定していますので、行間だけでなく、文字を大きくしたい、背景色を変えたいなどの要求が出てきたら、body内はそのままで、デザインの要素をどんどん増やせます。 head内ーーーーーーーーーーーーーーー 上記.tanka{line-height:1.8em;}を .tanka{line-height:1.8em;font-size:2em;background:#cccccc;}に変えてみてください。 ーーーーーーーーーーーーーーーーーー 今はわからなくても、スタイルシートに興味を持ってもらえれば、幸いです。
その他の回答 (3)
- weakweak
- ベストアンサー率34% (350/1003)
No.1の方が仰るとおりです。文章構造を指定するのがhtmlで、その見栄えを調整するのがCSSです。 brやhrはhtmlの中でも見栄えを指定する例外的なタグです。
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
根本的に発想が間違っています。 <p><br><h1>～<h6><ol>なども要素間に間隔をとります。<br>は強制改行ですから「行高さ」分ほど隙間が開きます!!。 しかし、それは、これらの要素(タグ)による物ではなく!!!、使用しているブラウザが持つスタイルシートによる物です。 HTMLとは、文書をそれを構成する要素に分解し、ひとつひとつの要素をタグでマークアップ--目印をつける言語です。 ★決して、改行させたいとか、間隔をあけたいとか、大きな文字で表示したいとかの目的ではありません。 あくまで、文書にとってここはどのような要素であるかを示す物に過ぎません。 ここは、ウェブ開発の根幹の最も重要な基本です。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ <br>は通常の文書には登場しない要素です。「ひとつの段落でありながら改行が必要なところ(HTML4.01)」や「<BR>自体が、そのコンテンツの要素であるとき(HTML5)」に使用します。例えば、住所の段落で大住所と小住所の区切りや詩の中で使用されます。 ではどうするの？？ それはスタイルシートで行います。文書構造はHTMLで、プレゼンテーションはスタイルシートで行います。 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 実際のサンプルを示したほうがよくわかるでしょう。HTMLはひたすら文書構造をマークアップして、それをどのように表現するかはスタイルシートで行います。 スタイルシートで自由自在に行間や段落間のサイズが変更できますよ。 [サンプル] ★タブは＿に置換してあるので戻す。文字コードはUTF-8です。 ★HTML4.01strict+CSS2.1のウェブ標準です。 Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェック <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body{background-color:rgb(220,220,220);} p{text-indent:1em;} div.section{background-color:white;} div.poem{/* 詩poemのブロックについてのスタイル */ ＿border:solid 1px gray;/* 枠線 */ ＿width:20em;/* 幅 */ ＿padding:1em;/* 内側の余白 */ ＿margin:20px auto;/* 周囲との間隔 */ ＿border-radius:1em;/* 枠線の丸め */ ＿box-shadow:5px 5px 5px rgba(0,0,0,0.5);/* 影 */ ＿font-size:1.2em; } div.poem h2,/* 詩ブロック中のh2と段落 */ div.poem p{ ＿margin:0;/* ★段落間のマージン */ ＿line-height:1.8em;/* ★の高さ(BRのとき) */ ＿color:green; } p.poet{/* 作詞家 */ ＿text-align:right;/* 右寄せ */ } div[lang="de"] p.poem{/* ドイツ語ブロックの詩の段落 */ ＿text-indent:0;/* 字下げなし */ ＿margin-bottom:0.5em;/* 段落間を広げ */ ＿line-height:1.3em; } div[lang="de"] p.poem:first-letter{ ＿font-size:1.6em; ＿font-weight:bold; ＿float:left; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<p>ブラウザのデフォルトのスタイルシート</p> ＿＿<h2>やまのあなた</h2> ＿＿<p>Karl Busse<span class="translator">(上田 敏約)</span></p> ＿＿<p> ＿＿＿山のあなたの空遠く<br> ＿＿＿幸い住むと人の言う ＿＿</p> ＿＿<p> ＿＿＿嗚呼、我人と尋め行きて<br> ＿＿＿涙さしぐみ帰り来ぬ ＿＿</p> ＿＿<p> ＿＿＿山のあなたの尚遠く<br> ＿＿＿幸い住むと人の言う ＿＿</p> ＿</div> ＿<div class="section poem"> ＿＿<p>色々と細かい指定をしてみた</p> ＿＿<h2>やまのあなた</h2> ＿＿<p class="poet">Karl Busse<span class="translator">(上田 敏約)</span></p> ＿＿<p class="poem"> ＿＿＿山のあなたの空遠く<br> ＿＿＿幸い住むと人の言う ＿＿</p> ＿＿<p class="poem"> ＿＿＿嗚呼、我人と尋め行きて<br> ＿＿＿涙さしぐみ帰り来ぬ ＿＿</p> ＿＿<p class="poem"> ＿＿＿山のあなたの尚遠く<br> ＿＿＿幸い住むと人の言う ＿＿</p> ＿</div> ＿<div class="section poem" lang="de"> ＿＿<h2>Über den Bergen</h2> ＿＿<p class="poet">Karl Busse</p> ＿＿<p class="poem"> ＿＿＿Über den Bergen, weit zu wandern,<br> ＿＿＿Sagen die Leute, wohnt das Glück. ＿＿</p> ＿＿<p class="poem"> ＿＿＿Ach, und ich ging im Schwarme der andern,<br> ＿＿＿kam mit verweinten Augen zurück. ＿＿</p> ＿＿<p class="poem"> ＿＿＿Über den Bergen, weit, weit drüben, <br> ＿＿＿Sagen die Leute, wohnt das Glück. ＿＿</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
ありがとうございました。
- _kappe_
- ベストアンサー率68% (1581/2304)
そういう見栄えの調整はCSSでやるものです。line-heightで指定すればいいです。
お礼
ありがとうございました。
お礼
ありがとうございました。