【 CSSカスタマイズ 】ラインの基礎から アンダーラインの使い方
サイトデザインに重要な見出しや 投稿記事でよく見かける ラインや囲み枠。
Webサイトを作成するうえで欠かせない CSSカスタマイズになります。
ここでは、基礎的な CSSコードや使い方をまとめてみました。
名称と意味を知ることで カスタマイズの応用にも 大いに役に立つことと思います。
基本形のCSS 記述例
プロパティについて軽くおさらいしておきます。
CSS のコードは
セレクタ → どの部分に
プロパティ → 何の指示を
値 → どれくらい( サイズ )のスタイルにするのか という項目を記述していきます。
CSSでよく使われる プロパティ
色を指定するプロパティ
color :文字の色の表示
background :背景
background-color :背景の色: の後に 値 色のコード が入ります。
文字のプロパティ
font-family :フォントの種類( フォントの名前が入ります。)
font-weight :フォントの太さ ( nomal 又は bold )
文字のレイアウト
line-height :行間( 行の高さ )
margin :余白
padding :パディング
width :幅
実際の ラインのコードはこのような感じで
プロパティ のあとに 線種・サイズ・カラーコードを記述します。
ラインのプロパティ border ( ボーダー)
分かりやすく 見出しを例にあげてラインのプロパティをみてみます。
border-●●●: border に続くコードで どの位置かを示すプロパティになります。
単純に border と記述すれば 囲み枠 のことになり
部分的にラインを付けたい場合はその箇所のコードを記述します。
下 → border-bottom
左 → border-left
右 → border-right
line ( ライン )の種類とコード名
次に 線種 ラインのコードです。
このラインのコードを サンプルとして CSSを作成していきます。
実線 (solid) ソリッド
二重線(double) ダブル
破線 (dotted) ドット
点線 (dashed) ダッシュ
ラインや文字に使用するサイズ
文字には px や em パーセントなどの “値" を用いたり
ラインの幅(太さ)を指定する場合には px
行間などでは サイズの表記なしで数字のみで記述する場合もあります。
ブラウザの画面を 拡大・縮小した場合などに 文字や ラインが
重なってしまうケースがありますので サイズの使い分けも大事な項目になります。
– CSS – スタイルシートの作成
先ほどの line( ライン )で使用した CSSコード を例に見ていきます。
1 2 |
.under1 {border-bottom:solid 3px#ff0000; } |
今回の ラインに使用されるプロパティは under です。
under の後に数字を書き足すことで 使用したいスタイル
( 線の種類・太さ・色 ) を 何パターンでも 書き込んでおくことができます。
これをベースに 実際のコードを見ていきます。
実線 (solid) ソリッド
二重線(double) ダブル
破線 (dotted) ドット
点線 (dashed) ダッシュ
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 テーマの場合は 定形文登録でコードを登録しておくことができますし
この機能がない場合は、パソコンの文字登録でも対応できますよ!!
詳しくはこちら↓
定型文登録をフル活用!!文字登録で効率よく記事を作成できる機能
以上、ラインの基礎から アンダーラインの使い方 でした!