Webデザインで重要な要素の一つがタイポグラフィです。Bulmaでは、見出しや段落、リストなどのテキストを簡単にスタイリングできる豊富なクラスを提供しています。本記事では、これらの基本的なスタイリング方法、カスタムクラスを使用した文字スタイルの調整方法、さらに色や太さ、サイズの応用について具体例を交えて解説します。

## **見出し、段落、リストのスタイリング**

### **見出しのスタイリング**

Bulmaでは、HTMLの`<h1>`から`<h6>`までのタグに対応したデフォルトのスタイリングが用意されています。さらに、`title`クラスと`subtitle`クラスを使用することで、見出しのデザインを簡単に調整できます。

#### 基本例

```html
<h1 class="title">タイトル1</h1>
<h2 class="subtitle">サブタイトル2</h2>
<h3 class="title is-3">タイトル3</h3>

```

#### クラスの説明

* `title`: メインの見出しを表現。フォントサイズは大きく太字。
* `subtitle`: サブタイトル用で、`title`よりやや小さいフォントサイズ。
* `is-{number}`: 数字部分に1〜6を指定してフォントサイズを調整。

#### 見出しの応用例

以下は、カスタムクラスを使用してフォントスタイルをさらに細かく調整する例です。

```html
<h1 class="title has-text-centered has-text-primary">中央揃えの青いタイトル</h1>
<h2 class="subtitle has-text-weight-light">軽いウェイトのサブタイトル</h2>

```

### **段落のスタイリング**

Bulmaでは、段落はデフォルトで適切な余白と行間が設定されています。これにより、文章が読みやすくなります。

#### 基本例

```html
<p>Bulmaを使うと、段落はデフォルトで適切な行間と余白が設定されます。</p>

```

#### 段落の応用

以下は、段落にカスタムスタイルを適用した例です。

```html
<p class="has-text-grey-darker">濃い灰色のテキストスタイル</p>
<p class="has-text-justified">この段落は、両端揃えで表示されています。</p>

```

* `has-text-grey-darker`: 色を濃い灰色に設定。
* `has-text-justified`: テキストを両端揃えに設定。

### **リストのスタイリング**

リストはBulmaを使用するときに簡単にスタイリングできます。`<ul>`、`<ol>`、`<dl>`に対応するデザインが提供されています。

#### 基本例

```html
<ul>
  <li>リストアイテム1</li>
  <li>リストアイテム2</li>
  <li>リストアイテム3</li>
</ul>

```

#### リストの応用

以下は、カスタムクラスを使用してリストをスタイリングした例です。

```html
<ul class="has-text-info">
  <li class="has-text-weight-bold">太字のリストアイテム</li>
  <li class="is-size-5">フォントサイズ5のアイテム</li>
</ul>

```

* `has-text-info`: リスト全体の色を青色に変更。
* `has-text-weight-bold`: 個々のリストアイテムを太字に設定。
* `is-size-5`: フォントサイズを中程度に変更。

## **Bulmaのカスタムクラスで文字スタイルを調整**

### **文字スタイル調整の基本クラス**

Bulmaでは、文字のスタイルを調整するためのカスタムクラスが多数用意されています。以下は、よく使われるクラスです。

* `has-text-centered`: テキストを中央揃え。
* `has-text-right`: テキストを右揃え。
* `has-text-weight-light`: フォントを細く設定。
* `has-text-weight-bold`: フォントを太く設定。

#### 実例

```html
<p class="has-text-weight-bold has-text-centered">中央揃えで太字のテキスト</p>
<p class="has-text-weight-light has-text-right">右揃えで軽いフォントのテキスト</p>

```

## **色、太さ、サイズの応用**

### **文字色の変更**

Bulmaは、文字の色を変更するための`has-text-{color}`クラスを提供しています。

#### 色変更の例

```html
<p class="has-text-danger">赤い文字</p>
<p class="has-text-success">緑色の文字</p>
<p class="has-text-link">リンクのような青色の文字</p>

```

### **フォント太さの調整**

フォントの太さは`has-text-weight-{value}`で指定できます。

* `has-text-weight-light`: 細字。
* `has-text-weight-normal`: 通常。
* `has-text-weight-bold`: 太字。

#### 太さ調整の例

```html
<p class="has-text-weight-light">軽いフォント</p>
<p class="has-text-weight-bold">太いフォント</p>

```

### **フォントサイズの調整**

Bulmaの`is-size-{number}`クラスを使用して、フォントサイズを調整します。`number`は1〜7で指定し、`1`が最も大きく、`7`が最も小さいサイズです。

#### サイズ変更の例

```html
<p class="is-size-1">非常に大きな文字サイズ</p>
<p class="is-size-5">中程度の文字サイズ</p>
<p class="is-size-7">非常に小さい文字サイズ</p>

```

## **まとめ**

Bulmaのタイポグラフィと基本スタイルを活用することで、Webサイトのテキストデザインを簡単に構築できます。

* **見出し、段落、リスト**: デフォルトのスタイリングに加え、カスタムクラスで細かい調整が可能。
* **文字スタイルの調整**: 中央揃え、太さ変更、色変更などが直感的に設定できる。
* **色、太さ、サイズの応用**: 色鮮やかで視認性の高いテキストデザインを実現。

次回の記事では、Bulmaの「カラーと背景スタイルの設定」について詳しく解説します。タイポグラフィと色を組み合わせることで、さらに魅力的なデザインが可能になります！


タイポグラフィと基本スタイル

Bulmaでのタイポグラフィと基本スタイルを徹底解説！見出しや段落、リストのスタイリング方法から、カスタムクラスを使った文字スタイルの調整、色やフォントサイズ、太さの応用まで、具体例を交えて初心者向けにわかりやすく紹介します。

Bulmaでのタイポグラフィと基本スタイルの完全ガイド

動画チュートリアルのこだわりと、なぜ私の講座が有益なものを提供できるか。その理由を書きました。

最新のNuxt.js講座をリリースしました！初心者から経験者まで、現場で即活用できる実践ノウハウを動画で学べます。

Vue.jsの動画チュートリアルを公開しました！Vue.js の基礎だけでなく、実践的な使い方を学びたい方は、是非チェックしてみてください。