<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>現役パソコン講師によるネットビジネス講座 &#187; CSS</title>
	<atom:link href="http://wp.megfeel.com/category/muzu/css/feed" rel="self" type="application/rss+xml" />
	<link>http://wp.megfeel.com</link>
	<description>現役パソコン講師が、ネットビジネスを始めたい方に向けて、ご案内します。</description>
	<lastBuildDate>Thu, 19 May 2011 07:32:24 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>行間と文字間隔</title>
		<link>http://wp.megfeel.com/muzu/305.html</link>
		<comments>http://wp.megfeel.com/muzu/305.html#comments</comments>
		<pubDate>Mon, 05 Oct 2009 04:39:58 +0000</pubDate>
		<dc:creator>那賀＠管理人</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[ちょっと難しいこと]]></category>
		<category><![CDATA[ブログ]]></category>

		<guid isPermaLink="false">http://wp.megfeel.com/%e6%9c%aa%e5%88%86%e9%a1%9e/305.html</guid>
		<description><![CDATA[ブログでもサイトでもそうだけど、 見た感じでどうしても気になるのが、 行間と文字間隔。 &#160; もちろん、デザインも気になるけど、 ブログのデザインまで自作しちゃうと、大変なので、 そこはテンプレートで。 &#160; それをゴチャゴチャいじくるだけでも、どんどんオリジナルになっていきますよ！ &#160; で、本題。 行間っていうのは&#8595; 文字間隔は、&#8595; こういうことね。 テンプレートを使うと、日本語はいいんですが アルファベットが混ざった時に 妙に文字間隔が狭くなって見にくくなることがあるので、 気になったら調整してみましょう。 &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212; 行間について 段落（空白の行）を空けたい時は、 CSSじゃなくて、自分で改行して間を空けてね。 ※改行（＜ｂｒ＞タグ）を連続でたくさん書くとブラウザに無視されることがあるようなので、 数行の間を空けたい時は＜ｐ＞タグを使うほうがオススメ。 &#160; ここでは、全角でタグを記述してますが、 タグは必ず半角でね！ 閉じる＜／ｐ＞も忘れないように。 &#160; CSSで調整するのは、一つの段落の中での行間です。 すぐ次の行との間ね。（分かりにくい？） &#160; 行間 line-height: **px; &#160; これで、行間を設定します。 **に好きな数字を入れるんですね。 大きい数字を入れれば広く、小さい数字を入れれば狭くなります。 単位が px になってますが、% とか cm とか mm とか色々使えます。 （ですが、センチやミリを使うことは、オススメしません） で、この line-height: **px; を、 ブログ（サイト）のスタイルシートに書くんですが、 これはやり方がブログサービスによって違うんですよね。 最近のブログはCSSを触れるんじゃないかと思うので、 [...]]]></description>
			<content:encoded><![CDATA[<p>ブログでもサイトでもそうだけど、 <br />
	見た感じでどうしても気になるのが、 <strong><span style="color: rgb(255, 0, 0);">行間と文字間隔</span></strong>。</p>
<p>&nbsp;</p>
<p>もちろん、デザインも気になるけど、 <br />
	ブログのデザインまで自作しちゃうと、大変なので、 そこはテンプレートで。</p>
<p>&nbsp;</p>
<p>それをゴチャゴチャいじくるだけでも、どんどんオリジナルになっていきますよ！</p>
<p>&nbsp;</p>
<p>で、本題。 行間っていうのは&darr; <br />
	<img alt="行間" height="119" src="http://wp.megfeel.com/wp-content/uploads/image/gyou.jpg" width="605" /></p>
<p>文字間隔は、&darr;<br />
	<img alt="文字間隔" height="93" src="http://wp.megfeel.com/wp-content/uploads/image/moji.jpg" width="599" /></p>
<p>こういうことね。</p>
<p>テンプレートを使うと、日本語はいいんですが </p>
<p>	アルファベットが混ざった時に 妙に文字間隔が狭くなって見にくくなることがあるので、<br />
	気になったら調整してみましょう。</p>
<p><span id="more-305"></span>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</p>
<p class="sub_kate">行間について</p>
<p>段落（空白の行）を空けたい時は、<br />
	CSSじゃなくて、自分で改行して間を空けてね。</p>
<p>
	※改行（＜ｂｒ＞タグ）を連続でたくさん書くとブラウザに無視されることがあるようなので、 <br />
	数行の間を空けたい時は＜ｐ＞タグを使うほうがオススメ。</p>
<p>&nbsp;</p>
<p>ここでは、全角でタグを記述してますが、<br />
	<span class="big_red">タグは必ず半角でね！</span></p>
<p>閉じる＜／ｐ＞も忘れないように。</p>
<p>&nbsp;</p>
<p>CSSで調整するのは、一つの段落の中での行間です。 <br />
	すぐ次の行との間ね。（分かりにくい？）</p>
<p>&nbsp;</p>
<p><strong><span style="font-size: large;">行間 line-height: **px;</span></strong></p>
<p>&nbsp;</p>
<p>これで、行間を設定します。</p>
<p>**に好きな数字を入れるんですね。</p>
<p>大きい数字を入れれば広く、小さい数字を入れれば狭くなります。</p>
<p>単位が px になってますが、% とか cm とか mm とか色々使えます。<br />
	（ですが、センチやミリを使うことは、オススメしません）</p>
<p>
	で、この <strong>line-height: **px;</strong> を、<br />
	ブログ（サイト）のスタイルシートに書くんですが、</p>
<p>これはやり方がブログサービスによって違うんですよね。</p>
<p>
	最近のブログはCSSを触れるんじゃないかと思うので、<br />
	<strong>CSSとかスタイルシートっていうのを探してください</strong>。</p>
<p>&nbsp;</p>
<p>サイトなら、拡張子<strong>.cssのファイル</strong>です。</p>
<p>&nbsp;</p>
<p>シーサーブログなら、<br />
	上のメニューの 「デザイン」&rarr;「デザイン一覧」&rarr;下の方に現在使っているデザイン名が出てるはずなので、<br />
	使ってるヤツをクリックすると出てきます。 <br />
	（分かんない時は、メールくださいね）</p>
<p>&nbsp;</p>
<p><span style="color: rgb(255, 0, 0);">ここで注意。 スタイルシートをいじくると、デザインが崩れることがあります。</span></p>
<p><span style="color: rgb(255, 0, 0);">元の状態に戻す機能が付いていればいいですが、</span><span style="color: rgb(255, 0, 0);"><br />
	そうでなければ 必ず、コピーを取っておくとか、おかしくなったときにすぐに戻せるようにしておいてください。</span></p>
<p><span style="color: rgb(255, 0, 0);"><strong>元に戻せなくなった、などの責任は取れませんよ？</strong> </span></p>
<p><span style="color: rgb(255, 0, 0);">表示されたスタイルシートの全部をコピーして、Win付属のメモ帳とかに貼り付けておくといいです。</span></p>
<p>&nbsp;</p>
<p>準備はOKですか？</p>
<p>&nbsp;</p>
<p>では、ここに行間を指定する「line-height:」を書くんですが、<br />
	「どこに？」って話ですよね。</p>
<p>&nbsp;</p>
<p>英語ばっかりで難しそうです‥‥。 <br />
	でも、関係ないとこは無視しとけばいいです。 今必要なのは行間だけ。</p>
<p>&nbsp;</p>
<p>さて、お使いのCSSに、「line-height:」と書かれた場所がありますか？<br />
	‥‥英語ばっかりで分からないですね。</p>
<p>&nbsp;</p>
<p>そういう時のスキルアップ！</p>
<p>検索機能を利用してください。 <br />
	Windows使用の方は、「<strong>Ctrl+F</strong>」 <br />
	Macintosh使用の方は、「<strong>Cmd+F</strong>」（のハズ；）です。</p>
<p>どこに出るかは、ブラウザによるのでハッキリ言うことができませんが、 </p>
<p>	検索って書かれたものが出たはずなので、（Firefoxをお使いの方は、画面下部です） <br />
	そこに「line-height:」をコピペして検索してください。</p>
<p>&nbsp;</p>
<p class="fu">・　見つかりました？</p>
<p>見つかった人は、そこで行間を設定してあるみたいです。<br />
	数字をいじくってみましょう。 </p>
<p>	もしかしたら、<span class="red">一か所だけじゃないかもしれないので、注意</span>。</p>
<p>&nbsp;</p>
<p class="fu">・　ありませんでした？</p>
<p>私も最初はありませんでした。</p>
<p>では、書いてしまいましょう。</p>
<p>&nbsp;</p>
<p>どこにか、って話ですが、 bodyって書いてるところを見つけてください。</p>
<p>&nbsp;</p>
<p><span style="color: rgb(255, 0, 0);">body｛ ・ ・ （なんか色々書いてる） ・ ・ ｝</span></p>
<p>ってなってるハズですので、 <br />
	この<strong><span style="color: rgb(255, 0, 0);">｛から｝の間に、『line-height: **px;』を書き加えて</span></strong>ください。<br />
	<strong>最後の『；』を忘れないように！</strong></p>
<p>&nbsp;</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<br />
	**に数字を入れるっていっても、 <br />
	具体的にどのくらいの数値でどうなるのか、分かんないですよね。</p>
<p>&nbsp;</p>
<p>私も分かんないですよ。 <br />
	文字サイズにもよりますし。</p>
<p>&nbsp;</p>
<p>ので、考えるよりも動け！です。 </p>
<p>	適当に入力してみて、プレビューなどで確認しながら調整してください。<br />
	実験です。</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</p>
<p class="sub_kate">文字間隔 letter-spacing: **em;</p>
<p>使い方は、行間と同じです。<br />
	これも**に数字を入れて使ってね。<br />
	&nbsp;</p>
<p>単位が em になってますが、これもいろいろ使えます。 行間と一緒です。</p>
<p>&nbsp;</p>
<p>ちなみに、この「em」という単位は、 <strong>1em＝1文字分</strong>　だと解釈してください。 </p>
<p>	文字間隔を1文字分（＝1em）にしちゃうと、<br />
	見にくいので、注意してね。 間隔を開けすぎです。</p>
<p>&nbsp;</p>
<p>ちなみに、このブログは0.1emです。今のところ。</p>
<p>&nbsp;</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</p>
<p>私の生徒さんに教えるなら、 この説明では難しいだろうなあ‥‥。</p>
<p>
	もし、これを見ても分かんなかったら、 この部分が分からないとか、 <br />
	ここまでやってみたけど分かんないとか、メールしてね。</p>
<p>&nbsp;</p>
<p>どこのブログサービスを使ってるのかも忘れちゃダメですよ。</p>
<p>&nbsp;</p>
<p>状況を伝えてくれれば、分かる限りでお答えします。</p>
]]></content:encoded>
			<wfw:commentRss>http://wp.megfeel.com/muzu/305.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

