<>

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

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

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

基本形のCSS 記述例

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

CSSでよく使われる プロパティ

色を指定するプロパティ
color            :文字の色の表示
background        :背景
background-color   :背景の色: の後に  色のコード が入ります。

文字のプロパティ
font-family             :フォントの種類( フォントの名前が入ります。)
font-weight            :フォントの太さ ( nomal  又は  bold

文字のレイアウト
line-height              :行間( 行の高さ )
margin                   :余白
padding                 :パディング
width                     :幅

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

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

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

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

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

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

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

 実線   (solid)    ソリッド

 二重線(double)   ダブル 

 破線  (dotted)    ドット 

 点線  (dashed) ダッシュ

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

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

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

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

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

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

これをベースに 実際のコードを見ていきます。

 実線   (solid)    ソリッド

 二重線(double)   ダブル 

 破線  (dotted)    ドット 

 点線  (dashed) ダッシュ

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

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

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

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

詳しくはこちら↓
定型文登録をフル活用!!文字登録で効率よく記事を作成できる機能


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