WEBST8のコードブログ

2024/8/18

【HTML ul・ol・liタグ】箇条書きリストタグの使い方

今回はHTMLのul・ol・liタグを使用して箇条書きリストを作成する方法およびよく使われる活用例を紹介していきます。 ■順番なしの箇条書き(ul・li)

<ul>
  <li>1行目のテキストが入ります</li>
  <li>2行目のテキストが入ります</li>
  <li>3行目のテキストが入ります</li>
</ul>

1

2

3

4

5

<ul>

<li>1行目のテキストが入ります</li>

<li>2行目のテキストが入ります</li>

<li>3行目のテキストが入ります</li>

</ul>

■順番ありの箇条書き(ol・li)

<ol>
  <li>1行目のテキストが入ります</li>
  <li>2行目のテキストが入ります</li>
  <li>3行目のテキストが入ります</li>
</ol>

1

2

3

4

5

<ol>

<li>1行目のテキストが入ります</li>

<li>2行目のテキストが入ります</li>

<li>3行目のテキストが入ります</li>

</ol>

ul・ol・liタグを使用した箇条書きリストの作り方ブログやホームページでHTMLで箇条書き(リスト)を作りたい場合はul・liタグ(順番なし ...

2024/8/1

【CSS line-heightの使い方】行の高さ・行間の指定方法

今回はline-heightでて、行の高さの指定・行間の指定方法を紹介します。テキストの行間などを調整したい場合にline-heightはよく利用されるので、覚えておくと便利です。※厳密には行間ではなく行の高さを指定するプロパティです。

p{
  line-height: 40px;
}

1

2

3

p{

line-height: 40px;

}

line-heightは行間・行の高さ調整のCSS line-heightプロパティは行の高さを指定するのに使用されるCSSプロパティです。冒頭で行間を調整したい場合に使用す ...

2024/8/1

【CSS text-alignの使い方】文字の行揃え・寄せ指定をする方法

今回はtext-alignプロパティの使って文字(テキスト)を左揃え・中央揃え・右寄せ揃えにしたりする方法を解説していきます。 CSSを勉強し始めたばかりの頃だと「text-alignプロパティが上手く効かない…。」といった方も多いので、本記事を参考にしてみてください。 text-alignは行揃えのスタイルCSS text-align(テキストアライン)プロパティは、指定した要素の中にあるテキストや画像などの水平方向の配置を指定することができるプロパティです。 text-al ...