【 CSSカスタマイズ 】ラインの基礎から アンダーラインの使い方

サイトデザインに重要な見出しや 投稿記事でよく見かける ラインや囲み枠。
Webサイトを作成するうえで欠かせない CSSカスタマイズになります。

ここでは、基礎的な CSSコードや使い方をまとめてみました。
名称と意味を知ることで カスタマイズの応用にも 大いに役に立つことと思います。

基本形のCSS 記述例

プロパティについて軽くおさらいしておきます。

CSS のコードは
セレクタ → どの部分に
プロパティ → 何の指示を
値 → どれくらい（ サイズ ）のスタイルにするのか という項目を記述していきます。

実際の ラインのコードはこのような感じで
プロパティ のあとに 線種・サイズ・カラーコードを記述します。

ラインのプロパティ  border ( ボーダー)

分かりやすく 見出しを例にあげてラインのプロパティをみてみます。
border-●●●:  border に続くコードで どの位置かを示すプロパティになります。

単純に border と記述すれば 囲み枠 のことになり
部分的にラインを付けたい場合はその箇所のコードを記述します。

line  （ ライン ）の種類とコード名

次に 線種 ラインのコードです。
このラインのコードを サンプルとして CSSを作成していきます。

ラインや文字に使用するサイズ

文字には px や em  パーセントなどの “値" を用いたり
ラインの幅（太さ）を指定する場合には px
行間などでは サイズの表記なしで数字のみで記述する場合もあります。

ブラウザの画面を 拡大・縮小した場合などに 文字や ラインが
重なってしまうケースがありますので サイズの使い分けも大事な項目になります。

– CSS – スタイルシートの作成

先ほどの line（ ライン ）で使用した CSSコード を例に見ていきます。

今回の ラインに使用されるプロパティは under  です。
under の後に数字を書き足すことで 使用したいスタイル
( 線の種類・太さ・色  ) を 何パターンでも 書き込んでおくことができます。

– HTML – 作成したラインを 呼び出す

作成したラインを 投稿記事の 作成画面で呼び出すために必要なコードはこちら。

HTMLで このような css を呼び出す場合には  span class というコードを使用し
<span> ~ </span> で囲むことで ココからココまでラインを引く。という指定をします。

このコードを覚えるのは大変なので 定型文登録を利用してください！
Luxeritas テーマの場合は 定形文登録でコードを登録しておくことができますし
この機能がない場合は、パソコンの文字登録でも対応できますよ！！

詳しくはこちら↓
HTMLコードの入力を短縮！ルクセリタス【定型文】の登録と使いかた｜WordPress

以上、ラインの基礎から アンダーラインの使い方 でした！