ラインの種類と CSS コード作成のしかた【基礎知識】

記事を読みやすくする上で欠かせない ラインや囲み枠。

サイトのレイアウトにおいて重要なラインについて
CSSで必要な用語と使い方をまとめてみました。

名前と意味をある程度  理解しておけば
カスタマイズの応用も自分で簡単に導き出せるようになり
サイト作りに大いに役に立つことと思います。

基本形のCSS 記述例

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

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

色を指定するプロパティ
color      ( カラー ):文字の色の表示
background  ( バックグランド ):背景
background-color   :背景の色

: の後に 色のコード が入ります。

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

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

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

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

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

単純に border と記述すれば 囲み枠 のことになります。
あとは言葉どおりです。

border-top   ( ボーダートップ ) =
border-bottom    ( ボーダーボトム ) =
border-left   ( ボーダーレフト ) =
border-right      ( ボーダーライト ) =

line  ( ライン )の種類

次に ラインの種類です。

実線(solid)ソリッド

二重線(double)ダブル

破線(dotted)ドット

点線(dashed)ダッシュ

このサンプルのラインのコードをあとで見ていきます。

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

ブラウザの画面を 拡大・縮小した場合でも
文字やラインのサイズが重なってしまったりということがないように
サイズの選択も大事な項目になります。

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

カスタマイズのしかた ~実践~

先ほどの line( ライン )で使用した CSSコード を例に見ていきます。
テキストエディタ 画面でこの CSSコードを 呼び出すためのコード が under  になります。

CSS では 使用したいスタイル( 線の種類・太さ・色 )を何パターンでも
書き込んでおくことができ 必要なときに記事を書くエディタの画面から
最小限のコードを書き込むことで簡単にラインを引くことが出来ます。

パターンを作成するのは 基本のコード .under  のあとに 数字をプラスするだけです。

CSSコード

HTMLの記述

あとは 記事投稿画面のテキストエディタから必要なときに呼び出します。

HTMLで このような css を呼び出す場合に  span class というコードを使用します。

HTMLの記述をかんたんに !!

コードの記述に関しては、記事を書く際に毎回必要になるのですが
Luxeritas テーマの場合は定形文登録でコードを登録しておくことができます。
記事作成が数段 ラク になる設定ですので おすすめです!^^

定型文登録をフル活用!!文字登録で効率よく記事を作成できる機能

まとめ

今回、ラインの基礎からアンダーラインの使い方を解説させていただきました。
またラインを使った囲み枠や見出しなどのラインの使い方については
こちらにまとめていますので よろしければごらんくださいませ。^^