ラインの種類と CSS コード作成のしかた【基礎知識】
記事を読みやすくする上で欠かせない ラインや囲み枠。
サイトのレイアウトにおいて重要なラインについて
CSSで必要な用語と使い方をまとめてみました。
名前と意味をある程度 理解しておけば
カスタマイズの応用も自分で簡単に導き出せるようになり
サイト作りに大いに役に立つことと思います。
基本形のCSS 記述例
プロパティについて軽くおさらいしておきます。
CSSの記述には
セレクタ → どの部分に
プロパティ → 何の指示を
値 → どれくらい( サイズ )のスタイルにするのか
という項目を記述していきます。
色を指定するプロパティ
color ( カラー ):文字の色の表示
background ( バックグランド ):背景
background-color :背景の色
: の後に 色のコード が入ります。
文字のプロパティ
font-family : フォントの種類( フォントの名前が入ります。)
font-weight: フォントの太さ ( nomal 又は bold )
文字のレイアウト
line-height: 行間( 行の高さ )
padding: パディング
width: 幅
margin: 余白
実際のラインのコードはこのような感じで
プロパティ のあとに 線種・サイズ・カラーコードを記述します。
ラインのプロパティ border ( ボーダー)
分かりやすく 見出しを例にあげてラインのプロパティをみてみます。
border-●●●:
border に続くコードで どの位置かを示すプロパティになります。
単純に border と記述すれば 囲み枠 のことになります。
あとは言葉どおりです。
border-bottom ( ボーダーボトム ) = 下
border-left ( ボーダーレフト ) = 左
border-right ( ボーダーライト ) = 右
line ( ライン )の種類
次に ラインの種類です。
実線(solid)ソリッド
二重線(double)ダブル
破線(dotted)ドット
点線(dashed)ダッシュ
このサンプルのラインのコードをあとで見ていきます。
ラインや文字に使用するサイズ
ブラウザの画面を 拡大・縮小した場合でも
文字やラインのサイズが重なってしまったりということがないように
サイズの選択も大事な項目になります。
文字には px や em パーセントなどの “値" を用いたり
ラインの幅(太さ)を指定する場合には px
行間などでは サイズの表記なしで数字のみで記述する場合もあります。
カスタマイズのしかた ~実践~
先ほどの line( ライン )で使用した CSSコード を例に見ていきます。
テキストエディタ 画面でこの CSSコードを 呼び出すためのコード が under になります。
CSS では 使用したいスタイル( 線の種類・太さ・色 )を何パターンでも
書き込んでおくことができ 必要なときに記事を書くエディタの画面から
最小限のコードを書き込むことで簡単にラインを引くことが出来ます。
パターンを作成するのは 基本のコード .under のあとに 数字をプラスするだけです。
CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*ライン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 というコードを使用します。
コードの記述に関しては、記事を書く際に毎回必要になるのですが
Luxeritas テーマの場合は定形文登録でコードを登録しておくことができます。
記事作成が数段 ラク になる設定ですので おすすめです!^^
まとめ
今回、ラインの基礎からアンダーラインの使い方を解説させていただきました。
またラインを使った囲み枠や見出しなどのラインの使い方については
こちらにまとめていますので よろしければごらんくださいませ。^^