Designerページの見出しデザイン　-傍線編集-

Designerで見栄えを変えてみたい,未分類

概要

Designerページの見出しをデザインする方法を紹介しています。

本記事は横線、下線を引いてデザインする方法の紹介です。

完成イメージ

CSS適用前
CSS適用後

手順

1.アウトラインからCSSを開き、上記クラスをセレクタに指定します。
下線を引くCSSを記述します。

.pd-page-title .ibx-label-text {
  border-bottom: 3px solid #006eb0;
}

2.実行します

ポイント①

直線ではなく点線にしたい場合はこちら

.pd-page-title .ibx-label-text {
  borderh-bottom: 3px dotted #006eb0;
}

破線にしたい場合はこちら

.pd-page-title .ibx-label-text {
  border-bottom: 3px dashed #006eb0;
}

二重線にする場合はこちら

.pd-page-title .ibx-label-text {
  border-bottom: 6px double #006eb0;
}

ポイント②

横に線を出したい場合はこちら

.pd-page-title .ibx-label-text {
  padding: 1rem 1rem;
  border-left: 3px dotted #006eb0;
}

横の線を破線にしたい場合はこちら

.pd-page-title .ibx-label-text {
  padding: 1rem 1rem;
  border-left: 3px dashed #006eb0;
}

横の線を二重線にしたい場合はこちら

.pd-page-title .ibx-label-text {
  padding: 1rem 1rem;
  border-left: 6px double #006eb0;
}

CSS解説

border-bottomプロパティ

.pd-page-title .ibx-label-text {
border-bottom: 3px solid #006eb0;
}

border-bottom プロパティの一般的な構文は以下の通りです：

  • border-width はボーダーの太さを指定します。値は長さの単位（例：px、emなど）で指定するか、thin、medium、thick といったキーワードを使用できます。
  • border-style はボーダーのスタイルを指定します。例えば solid、dashed、dotted、double、groove、ridge、inset、outset などがあります。
  • border-color はボーダーの色を指定します。色はキーワード（例：red）、HEXコード（例：#ff0000）、RGB（例：rgb(255, 0, 0)）、RGBA（例：rgba(255, 0, 0, 0.5)）、HSL（例：hsl(0, 100%, 50%)）、HSLA（例：hsla(0, 100%, 50%, 0.5)）などの形式で指定できます。

border-leftプロパティ

.pd-page-title .ibx-label-text {
  padding: 1rem 1rem;
  border-left: 3px solid #006eb0;
}

border-left プロパティの一般的な構文は以下の通りです：

  • border-width はボーダーの太さを指定します。値は長さの単位（例：px、emなど）で指定するか、thin、medium、thick といったキーワードを使用できます。
  • border-style はボーダーのスタイルを指定します。例えば solid、dashed、dotted、double、groove、ridge、inset、outset などがあります。
  • border-color はボーダーの色を指定します。色はキーワード（例：red）、HEXコード（例：#ff0000）、RGB（例：rgb(255, 0, 0)）、RGBA（例：rgba(255, 0, 0, 0.5)）、HSL（例：hsl(0, 100%, 50%)）、HSLA（例：hsla(0, 100%, 50%, 0.5)）などの形式で指定できます。

Designerで見栄えを変えてみたい,未分類