ＨＴＭＬを使って箇条書きの入れ子にする方法は？
箇条書き・箇条書きの入れ子の行間の調整法は？

についてまとめました。


ＨＴＭＬの箇条書きについてはこちらの記事をご覧ください。
⇒　ＨＴＭＬを使って箇条書き、記号・数字を表示する方法



入れ子とはこんな感じです。

• 項目１
  • 項目１－１
  • 項目１－２
• 項目２
  • 項目２－１
  • 項目２－２

項目１を、さらに箇条書き（ここでは項目１－１と項目１－２）にしたいときに使うＨＴＭＬです。

記事を書いていて、箇条書きを箇条書きしたいというときが出てきます。

この箇条書き、入れ子のＨＴＭＬを覚えておくと便利です。

箇条書きを入れ子にするＨＴＭＬ

<ul>

<li>項目１
<ul>
<li>項目１－１</li>
<li>項目１－２</li>
</ul>
</li>

<li>項目２
<ul>
<li>項目２－１</li>
<li>項目２－２</li>
</ul>
</li>

</ul>

<li>項目１</li>の項目１と</li>の間に

<ul>
<li>項目１－１</li>
<li>項目１－２</li>
</ul>

を入れるイメージです。


また、入れ子にした箇条書きを数字で表示するには

<li>項目１</li>の項目１と</li>の間に

<ol>
<li>項目１－１</li>
<li>項目１－２</li>
</ol>

を入れればＯＫです。

箇条書きを数字の入れ子にするＨＴＭＬ

<ul>

<li>項目１
<ol>
<li>項目１－１</li>
<li>項目１－２</li>
</ol>
</li>

<li>項目２
<ol>
<li>項目２－１</li>
<li>項目２－２</li>
</ol>
</li>

</ul>

次に、箇条書きの行間を調整する方法です。

箇条書きの行間を調整するＨＴＭＬ

標準の行間はこんな感じです。
↓

• 項目１
• 項目２

ちょっと行間がつまり過ぎて見づらいときに、下のようなＨＴＭＬを<li>に追加します。

行間を調整するＨＴＭＬ

<li style="line-height:行間の数値を入れる ;">

ここでは行間の数値はｅｍを使います。
３ｅｍ分行間を広げます。

• 項目１
• 項目２

標準の行間より広くなったので、見やすくなりましたね。




最後まで読んでいただき、ありがとうございます。

ブログ記事に画像を貼り付けると、説明しやすくなって効果的になります。

ということで、ブログに貼り付けた画像に文字を回り込みさせるＨＴＭＬを覚えておくと、とても便利です。


特に無料ブログは、画像に文字を回り込みさせる機能がついていないこともありますので、役に立ちます。


ブログに画像を貼り付けると、画像のＨＴＭＬは下のようになっています。
↓

<img src="画像が保存されている場所（ＵＲＬ）">

この画像のＨＴＭＬのうしろに、画像に文字を回り込みさせるＨＴＭＬを追加します。

配置を指定するalign（アライン）を使います。
alignの意味は、一列に整列する・提携する・調節するです。.

画像のＨＴＭＬと配置を指定するalignを組合わせてみます。
↓

<img src="画像が保存されている（ＵＲＬ）" align="画像を回り込みさせる方向">

画像を回り込みさせる方向の場所に配置を指定する値を入力します。

画像の位置	入力する値	ＨＴＭＬ
右	right	<img src="画像が保存されている（ＵＲＬ）" align="right">
左	left	<img src="画像が保存されている（ＵＲＬ）" align="left">

画像が右で文字が左の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ





画像が左で文字が右の場合

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



ちゃんと、文字が画像に回りこんでいますね。
でも、なんとなく画像と文字がくっつきすぎていて見づらいですね。

画像のまわりに余白をつけるときに使うＨＴＭＬがあるんです。

marginです。

ここでは、marginを無料ブログでも簡単に使える方法を一覧にしました。

余白サイズ（値）	余白が入る場所	ＨＴＭＬ
値が１つ	上下左右	style="margin:値１;"
値が２つ	値１が上下、値２が左右	style="margin:値１ 値２;"
値が３つ	値１が上、値２が左右、値３が下	style="margin:値１ 値２ 値３;"
値が４つ	値１が上、値２が右、値３が下、値４が左	style="margin:値１ 値２ 値３ 値４;"

この中で、値を４つ入れるＨＴＭＬを覚えておけば迷いもなくなります。

時計回りに、上・右・下・左です。

<img src="画像が保存されている（ＵＲＬ）" align="画像を回り込みさせる方向" style="margin:値１ 値２ 値３ 値４；">

値は半角スペースでつないで、px（ピクセル）で入力します。


画像が左で文字が右の場合を使って、右に余白を作ってみます。

align="left" style="margin:0px 20px 0px 0px;"

ここでは、画像の右に20pxの余白をつくります。
上 右 下 左：0px 20px 0px 0px


ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ



画像と文字の間に余白ができました。

ぴったりと画像と文字がくっついているより、ちょっと余白が空いているほうが見やすいですね。



文字が画像に回り込むタイミングは、文字の行数が画像の高さ以上になったときです。

下の画像＆文字をみると、画像を小さくしたことで文字が回り込みが早くなっていますね。
↓
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ




画像に文字を回り込みさせたあとに、回り込みはここで終了というＨＴＭＬも忘れず入れましょう。

画像と文字の位置	ＨＴＭＬ
画像が左で文字が右	<br clear="left">
画像が右で文字が左	<br clear="right">
画像が左右で文字が真ん中	<br clear="all">

回り込み解除をしないと、そのあとの文章や画像の位置がぐちゃぐちゃになってしまいます。

allは、すべての回り込みを解除してくれるので<br clear="all">を覚えておくと便利です。



最後まで読んでいただき、ありがとうございます。

ブログの記事を書いていると、文字を横にズラズラ並べるより、縦に並べた方がスッキリして見やすくなることがあります。


箇条書きのが見やすいよな～と思うのがこれですね。
お馴染みのYahooのトップ画面です。
↓

出典:http://www.yahoo.co.jp/


これを横に並べてみると、

報道規制発言 幕引き狙う自民、ギリシャ議会 国民投票を承認、台湾爆発470人負傷 邦人2人も、紫式部像 パンフと実物大違い

見づらいしわかりづらいですよね。


ということで、ブログ記事の見やすさ・わかりやすさを追求してみたいと思います。


ＨＴＭＬタグで、箇条書きにする方法をまとめました。

ＨＴＭＬタグの箇条書き一覧

1. 箇条書き（番号なし）


2. 箇条書き（番号なし＋記号）


3. 箇条書き（番号あり）

箇条書き（番号なし）

<ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

表示結果

• 項目１


• 項目２


• 項目３

箇条書き（番号なし）にするには、ulタグを使います。
ulは、Ｕｎｏｒｄｅｒｅｄ　List（アンオーダード　リスト）の略です。

番号の付かないリストという意味です。

<ul>～</ul>タグの中に、項目を記入する<li>～</li>タグを入れていきます。

上の例では、項目１～項目３になっていますが、それ以上の項目になるときは<li>～</li>タグを増やしていけばOKです。

liは、List　Item（リスト　アイテム）の略です。

箇条書き（番号なし＋記号）

<ul style="list-style-type:記号の種類">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

記号の種類一覧

記号の種類	記号のスタイル
disc	黒丸
circle	白丸
square	黒四角
none	記号なし

記号のスタイルを黒丸にして箇条書きにしてみます。

<ul style="list-style-type:disc">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

表示結果

• 項目１


• 項目２


• 項目３

黒丸の箇条書きが完成です。

この黒丸は、１の箇条書き（番号なし）のときと同じ黒丸です。

ということは、黒丸の箇条書きにするときは、<ul style="list-style-type:disc">と長々とＨＴＭＬタグを入力しないで<ul>だけで良いということですね。


別の箇条書き記号でやってみます。
白丸の場合

<ul style="list-style-type:circle">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

表示結果

• 項目１


• 項目２


• 項目３

箇条書きの記号が白丸になりましたね。

箇条書き（番号あり）

<ul style="list-style-type:番号の種類">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

番号の種類一覧

番号の種類	番号のスタイル
decimal	数字
decunal-leading-zero	桁を揃えた数字
lower-alpha，lower-latin	小文字のアルファベット
upper-alpha，upper-latin	大文字のアルファベット
cjk-ideographic	漢数字
hiragana	ひらがな
katakana	カタカナ
hiragana-iroha	いろは順（ひらがな表示）
katanaka-iroha	いろは順（カタカナ表示）

番号のスタイルを数字にして箇条書きにしてみます。

<ul style="list-style-type:decimal">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>

表示結果

• 項目１


• 項目２


• 項目３

番号のスタイルを数字にするときは、<ul style="list-style-type:decimal">ではなくて、もっと簡単なＨＴＭＬタグがあります。

<ol>タグです。

olは、Oｒｄｅｒｅｄ　List（オーダード　リスト）の略です。


<ul>～</ul>ではなくて<ol>～</ol>を使います。

箇条書きを数字で表示するときは、<ol>タグを使います。

<ol>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ol>

表示結果

1. 項目１


2. 項目２


3. 項目３

このように、ＨＴＭＬタグを使っての箇条書きは、記号・数字などいろいろな表示方法があります。

はじめにもお話ししましたが、記事の箇条書きには、見やすく・わかりやすくするという効果があります。

これは、読んでくれる方のことを考えてのことです。

さらに、箇条書きにするメリットがあります。

それは、検索エンジンに対しても効果があるということです。


箇条書きのＨＴＭＬタグは、リスト構造になっているので、検索エンジンが箇条書きのＨＴＭＬタグを見つけて、「おっ、箇条書きがあるな、何か大切なキーワードが書かれているんだな」と認識してくれるのです。




伝えたいことなど要点を書くときは、箇条書きにした方が良いということですね。

そうすることで、検索エンジンも「正しいＨＴＭＬ構文を使っているな」と評価してくれます。
ちょっとした、ＳＥＯ対策にもなるということです。


だからって、必要以上に箇条書きのＨＴＭＬタグを使わないようにしましょう。

ＨＴＭＬを使って箇条書きまとめ

1. 記号を使う場合は、<ul style="list-style-type:記号の種類">を使う
※黒丸のときは<ul>～</ul>でOK


2. 番号を使う場合は、<ul style="list-style-type:番号の種類">を使う
※数字のときは<ol>～</ol>を使う

最後まで読んでいただき、ありがとうございます。

ブログで表を作るときのＨＴＭＬタグがなかなか理解することができなかったので、あらためてまとめてみました。


ブログで表を作るためには、下のようなＴａｂｌｅタグを使います。

<table>ここに表の行列になるＨＴＭＬタグを入れる</table>

この<table>～</table>の中に行列を表示するＨＴＭＬタグを入れていきます。


行を表示するには下のように、trタグを使います。

<tr>ここに文字を書く</tr>

trは、Ｔａｂｌｅ　Ｒｏｗの略で、Ｔａｂｌｅ（表）の横方向のルールを決める役割があります。


Table（表）を作る場合、<tr>～</tr>の間に文字を書いただけでは、ちょっと足りません。

trは、Ｔａｂｌｅ（表）の行（横）方向のルールを定義しているだけなので、文字を入れるセル（箱）を作ってあげる必要があります。


セル（箱）を作るには下のように、tdタグを使います。

<td>ここに文字を書く</td>

tdは、Ｔａｂｌｅ　Ｄａｔａの略で、セルの中にある文字が｢データ｣となるようなセル（箱）を作ります。


Ｔａｂｌｅ（表）の基本（１行１列）となるＨＴＭＬタグは、下の通りです。

<table>
<tr>
<td>ここに文字を書く</td>
</tr>
</table>

１行１列のＴａｂｌｅ（表）を作ってみます。

ＨＴＭＬタグは、下の通りです。

<table> <tr> <td>１行目の１列目</td> </tr> </table>

結果はこんな感じです。
↓

１行目の１列目

文字は表示されましたが、線がありません。


Tableに線を引くには、別にＨＴＭＬタグを使う必要があります。

なんだか、こんがらかってきた・・・




Tableに線を引くHTMLタグは、borderを使います。

Tableタグの後ろに、半角スペースを入れてborderと入力します。

<table border="ここに数字を入れる">

<table border>は、<table border="1">を省略しています。

border="ここに数字を入れる"のここに数字を入れるの箇所に数字を入れることで、線の太さを選ぶことができます。

数字だけの入力ですが、単位はpxを使っています。

pxは、コンピュータで画像を表示するときに、色の情報を表す最も小さい単位です。




線の太さ「1」のTableタグは下の通りです。
↓

<table border="1">
<tr>
<td>１行目の１列目</td>
</tr>
</table>

表示結果は、こんな感じです。
↓

１行目の１列目

表らしくなってきましたね。



このborder=""に入れる数字が大きくなるにつれて、表の線も太くなります。





Tableタグの仕組みを図でまとめてみました。




行は<tr>で増やして、列は<td>で増やしていきます。


５行３列のTableのＨＴＭＬタグは、下の通りです。

<table border="1">
<tr>
<td>１行目の１列目</td>
<td>１行目の２列目</td>
<td>１行目の３列目</td>
</tr>
<tr>
<td>２行目の１列目</td>
<td>２行目の２列目</td>
<td>２行目の３列目</td>
</tr>
<tr>
<td>３行目の１列目</td>
<td>３行目の２列目</td>
<td>３行目の３列目</td>
</tr>
<tr>
<td>４行目の１列目</td>
<td>４行目の２列目</td>
<td>４行目の３列目</td>
</tr>
<tr>
<td>５行目の１列目</td>
<td>５行目の２列目</td>
<td>５行目の３列目</td>
</tr>
</table>

表示結果は、こんな感じ。
↓

１行目の１列目	１行目の２列目	１行目の３列目
２行目の１列目	２行目の２列目	２行目の３列目
３行目の１列目	３行目の２列目	３行目の３列目
４行目の１列目	４行目の２列目	４行目の３列目
５行目の１列目	５行目の２列目	５行目の３列目

table（表）にするためのＨＴＭＬタグの仕組みがわかれば、表を作ることも簡単ですね。




ブログの記事を書くことに集中できます＾＾




最後まで読んでいただき、ありがとうございます。

無料ブログの文字サイズ変更は簡単にできます。

大・中・小の３種類を簡単に選択できるようになっています。

文字サイズ変更のＨＴＭＬコードは、font-sizeを使います。



ＦＣ２ブログでは、このアイコンをクリックすれば簡単に文字サイズ変更ができます。
↓




実際の文字サイズは、下の通りです。
↓
大
中
小



この３種類で間に合ってしまうのですが、ちょっと慣れてくると記事の文字サイズを所々変えてみたいと思うことがあります。

無料ブログの文字サイズ変更ＨＴＭＬをちょっと変えるだけで、簡単に文字サイズを自由に好きな大きさに変更することができるようになります。





☆文字サイズ変更するためのＨＴＭＬ

<span style="font-size:ここに文字サイズの数値を入れる">ここに文字を書く</span>

ＦＣ２ブログの場合、上のＨＴＭＬコードの『ここに文字サイズの数値を入れる』に、次のような文字サイズ指定コートを入れます。

大の場合　⇒　x-large
中の場合　⇒　large
小の場合　⇒　x-small


実際に、入れてみましょう。



大のx-large

ＨＴＭＬコード
↓
<span style="font-size:x-large">x-largeを入れるとこのサイズになります</span>

表示結果
↓
x-largeを入れるとこのサイズになります




中のlarge

ＨＴＭＬコード
↓
<span style="font-size:large">largeを入れるとこのサイズになります</span>

表示結果
↓
largeを入れるとこのサイズになります




小のx-small

ＨＴＭＬコード
↓
<span style="font-size:x-small">x-smallを入れるとこのサイズになります</span>

表示結果
↓
x-smallを入れるとこのサイズになります




ｓｉｚｅ:の後ろを変えるだけで、簡単に文字サイズを変更することができますね。



ＦＣ２ブログでは、x-large・large・x-smallを使っていますが、mediumとかsmallを入れるとまた違った文字サイズになります。




mediumを入れたときの文字サイズ

ＨＴＭＬコード
↓
<span style="font-size:medium">mediumを入れるとこのサイズになります</span>

表示結果
↓
mediumを入れるとこのサイズになります




smallを入れたときの文字サイズ

ＨＴＭＬコード
↓
<span style="font-size:small">smallを入れるとこのサイズになります</span>

表示結果
↓
smallを入れるとこのサイズになります




文字サイズの大きい順に並べると、

○　x-large
⇒　ＦＣ２ブログでは『大』

○　large
⇒　ＦＣ２ブログでは『中』

○　medium

○　small

○　x-small
⇒　ＦＣ２ブログでは『小』


になります。


下に、文字サイズ大きい順にＨＴＭＬコードを表示してみました。
ＨＴＭＬコードを、コピーして『ここに文字を書く』の箇所を変えれば、使えます。


＜x-large＞
<span style="font-size:x-large">ここに文字を書く</span>

＜large＞
<span style="font-size:large">ここに文字を書く</span>

＜medium＞
<span style="font-size:medium">ここに文字を書く</span>

＜small＞
<span style="font-size:small">ここに文字を書く</span>

＜x-small＞
<span style="font-size:x-small">ここに文字を書く</span>





コピーすれば、large、medium、smallと横文字を覚える必要もないのですが、コピーしなくても良い方法があります。


それは、文字サイズの数値に『○○％』と入力する方法です。



普通に入力する文字サイズは１００％です。


ということは、１５０％にすると、

ＨＴＭＬコード
↓
<span style="font-size:150%">１５０％の文字サイズはこれです</span>

表示結果
↓
１５０％の文字サイズはこれです


パーセント表示にすれば、文字サイズを大きくしたければ、数字を大きくすれば良いだけなので、横文字を覚える必要がありません。



文字サイズの変更は、これで自由自在にできるようになりました。


上のＨＴＭＬコードをコピーして活用してみてくださいね。




最後まで読んでいただき、ありがとうございます。