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

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

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

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

基本形のCSS 記述例

プロパティについて軽くおさらいしておきます。

CSSの記述には
セレクタ → どの部分に
プロパティ → 何の指示を
値 → どれくらい（ サイズ ）のスタイルにするのか
という項目を記述していきます。

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

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

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

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

line  （ ライン ）の種類

次に ラインの種類です。

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

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

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

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

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

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

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

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

CSSコード

HTMLの記述

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

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

まとめ

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