<>

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

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

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

基本形のCSS 記述例

プロパティについて軽くおさらいしておきます。
基本的なcssのラインのコードの解説画像
CSS のコードは
セレクタ → どの部分に
プロパティ → 何の指示を
→ どれくらい( サイズ )のスタイルにするのか という項目を記述していきます。

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

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

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

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

上 → border-top
下 → border-bottom       
左 → border-left
右 → border-right

line  ( ライン )の種類とコード名

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

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

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

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

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

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

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

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

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

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

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

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


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