記事本文を飾り付けてみよう「（その３２）CSS超入門６」

　今回はCSSを利用して、行の高さを変更してみたいと思います。普段は使うことが無いかもしれませんが、前回やったようにテーブルの中で改行をしたりする時に利用できると思います。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

行の高さを変える　→　line-height:行の高さの値;

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

改行については
CSS超入門５「CSSで文字・単語の間隔をあける、改行する方法」

テーブルに関して詳しくは
Wiki超入門１３「テーブルを表示させる方法」
Wiki超入門１４「テーブルの大きさと色を変える方法」
Wiki超入門１５「テーブル中の文字の位置を変える方法」
Wiki超入門１６「テーブルのセルを結合する方法」
をご覧ください。

それでは、実際にいろいろとやってみましょう。
ちなみに、Yahoo!blogの標準の文字サイズは12pxに設定されているようです。

■行の高さ20pxにする（line-heightが20pxの場合）

文法）
||<#ccffff' style=line-height:20px;word-spacing:560px; ``おはよう こんにちは こんばんわ||

※補足　分かりやすくするために、セルの色に色を付けています。以下も同様。

結果）

おはよう こんにちは こんばんわ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■行の高さ30pxにする（line-heightが30pxの場合）

文法）
||<#ccffff' style=line-height:30px;word-spacing:560px; ``おはよう こんにちは こんばんわ||

結果）

おはよう こんにちは こんばんわ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■行の高さ40pxにする（line-heightが40pxの場合）

文法）
||<#ccffff' style=line-height:40px;word-spacing:560px; ``おはよう こんにちは こんばんわ||

結果）

おはよう こんにちは こんばんわ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか。
あまり使わないかもしれませんが、こういうやり方もあるのだと頭の片隅にでも入れておくと、後々使う時がくるかもしれません。
いろいろと工夫してみてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「京都写真日記：Wiki文法を使いこなそう」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「京都写真日記：Wiki文法を使いこなそう」さんのページにて、ボタンをお願いします。
「京都写真日記：Wiki文法を使いこなそう」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

[らぶ]

i-8joさん、こんにちは。こちらの記事も転載させて頂きました。順番を間違ったので、2〜5も再度転載し直しました。事後報告でスイマセン。

おはようございます。らぶさん。いつもご丁寧に報告ありがとうございますね。 こちらは全然問題ないので、ご自由にやって頂いて結構ですからね。ホント、有り難いです。

[eeq*2*v_2]

はじめはして。大変参考になります。使わせて頂きます。これからも、よろしくですね。

eeq12mv_2さん、はじめまして。どうぞどうぞ、どんどん使ってください。私もいろいろな方を参考にさせていただいております。こちらこそ、これからもよろしくお願いしますね。

i-8joさん,こんばんは、いつもありがとうございます。やっと記事が書けましたのでTB貼らしてもらいました。これからもヨロシクお願いします。

SUZUTAさん、こちらこそいつもありがとうございます。こちらも、地道に更新しています。今度、枠線の関係をやりたいと思っていますので、また参考にさせて頂きますね。こちらこそ、よろしくお願いしますね。

[-]

こんにちは、行間を広くするのにてこずっていたので、助かりました。これで少しは見易い記事が書けそうです。＼(＾▽＾)／

転載＆傑作させてくださいね＾＾

[toshi]

初めての、ブログスタート。やや緊張ぎみ、これから、
少しずつ引き出しを、開けていきたいと、おもっています。
末永くお願いいたします。 北九州市小倉北区在住 toshi,k

[toshi.k]

チャンマーめんって、聞いたことある？しょうゆベースで野菜あんかけ、たっぷりの中華そば！ 小倉北区・・・・

[toshi.k]

本日のデイナ―豚ひれと、しめじ、えのき、もやしをニンニク唐からしで夏バテ対策として、がっつり。 食べることと、寝ることは、 しあわせに生きる基本である。それをおろそかにすると、 人生がブレてくる。みなさん、お気をつけて、加えて適度の 運動もお忘れなく。
しあわせ注意予報より

[toshi.k]

昨日、広島原爆ドーム行った時。外国からも、たくさんの人達、手を合わせたり、いろんなかたちで、戦没者をと、その時すぐ横を流れる川をジェット スキィに、乗った三組のカップルが？たぶん、この六人の脳みそを全部合わせても三グラム程度だろう。
さて、あなたのジャッジは？ toshi.k