【 CSSカスタマイズ 】ラインの基礎から アンダーラインの使い方
サイトデザインに重要な見出しや 投稿記事でよく見かける ラインや囲み枠。
Webサイトを作成するうえで欠かせない CSSカスタマイズになります。
ここでは、基礎的な CSSコードや使い方をまとめてみました。
名称と意味を知ることで カスタマイズの応用にも 大いに役に立つことと思います。
基本形のCSS 記述例
プロパティについて軽くおさらいしておきます。
CSS のコードは
セレクタ → どの部分に
プロパティ → 何の指示を
値 → どれくらい( サイズ )のスタイルにするのか という項目を記述していきます。
実際の ラインのコードはこのような感じで
プロパティ のあとに 線種・サイズ・カラーコードを記述します。
ラインのプロパティ border ( ボーダー)
分かりやすく 見出しを例にあげてラインのプロパティをみてみます。
border-●●●: border に続くコードで どの位置かを示すプロパティになります。
単純に border と記述すれば 囲み枠 のことになり
部分的にラインを付けたい場合はその箇所のコードを記述します。
下 → border-bottom
左 → border-left
右 → border-right
line ( ライン )の種類とコード名
次に 線種 ラインのコードです。
このラインのコードを サンプルとして CSSを作成していきます。
ラインや文字に使用するサイズ
文字には px や em パーセントなどの “値" を用いたり
ラインの幅(太さ)を指定する場合には px
行間などでは サイズの表記なしで数字のみで記述する場合もあります。
ブラウザの画面を 拡大・縮小した場合などに 文字や ラインが
重なってしまうケースがありますので サイズの使い分けも大事な項目になります。
– CSS – スタイルシートの作成
先ほどの line( ライン )で使用した CSSコード を例に見ていきます。
今回の ラインに使用されるプロパティは under です。
under
の後に数字を書き足すことで 使用したいスタイル
( 線の種類・太さ・色 ) を 何パターンでも 書き込んでおくことができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*ライン1-実線*/
.under1{
border-bottom:solid
3px #ff0000;
}
/*ライン2-二重線*/
.under2{
border-bottom:double
5px
#ffcc99;
}
/*ライン3-破線*/
.under3{
border-bottom:dotted
4px
#003366;
}
/*ライン4-点線*/
.under4{
border-bottom:dashed
5px
#5c9ea5;
} |
– HTML – 作成したラインを 呼び出す
作成したラインを 投稿記事の 作成画面で呼び出すために必要なコードはこちら。
1 2 3 |
/*-HTMLコード- ラインのカスタマイズ-*/ <span class="under1">
ラインを引きたい文章
</span> |
HTMLで このような css を呼び出す場合には span class というコードを使用し
<span> ~ </span> で囲むことで ココからココまでラインを引く。という指定をします。
このコードを覚えるのは大変なので 定型文登録を利用してください!
Luxeritas テーマの場合は 定形文登録でコードを登録しておくことができますし
この機能がない場合は、パソコンの文字登録でも対応できますよ!!
詳しくはこちら↓
HTMLコードの入力を短縮!ルクセリタス【定型文】の登録と使いかた|WordPress
以上、ラインの基礎から アンダーラインの使い方 でした!