最強のスマホ・パソコンライフ: スタイルシートの基礎「文字を囲む枠線を使用する」「枠線と文字の間、枠線の外側に余白を設ける」記述方法‐HTML・CSSを学ぶ

スタイルシートをホームページやブログに適用するためにはデザインを考えてページに組み込むことが必要です。

文字サイズや文字の背景色、ページ全体の背景色・画像などページ全体にスタイルを適用するものと部分的に適用するものとで使用するタグ要素が異なります。

そのタグや要素の記述方法について基本をしっかり習得しておくことが大事だと思います。種類がたくさんありますので覚えるのが大変ですが、基本的な数種類を覚えておくだけでもサイトを構築するために役立ちますし効率化が図れます。

慣れてくれば徐々に身に付いてくると思うので心配はいりません。完璧性を求めていてはサイト構築は程遠く先の先になってしまいます。マニュアルを見ながらでも先に進めていくことをお勧めします。

スタイルシートの基礎編　メニュー

説明でプロパティと値については次のページで説明しています。

文字を囲む枠線を使用する

構成文の文字を囲むことで範囲を示すことができます。プロパティと値の部分になります。

border: solid 1px #7aa9e2;

各値は半角スペースで区切ります。

borderは枠線を表します。　solidは枠線を1本で表します。　1pxは枠線の太さを表します。　#7aa9e2;は枠線の色を表します。ここはサイトのイメージに合った色を指定します。

主なボーダー枠線の値です。

solid：１本線で表示します。

double：２本線で表示します。

dotted：点線で表示します。

dashed：破線で表示します。

その他の枠線のスタイルを表す値がありますが、ここでは省略します。

ブロガーBloggerでは構成文の文字を囲むためのツールが用意されていません。スタイルシーで適用します。

色の見本についてはこちらが参考にできると思います。

枠線と文字の間、枠線の外側に余白を設けると見栄えが良くなり見やすくなると思います。この辺のちょっとした気遣いでサイトのイメージが変わったりしますのでお勧めです。

プロパティと値の部分になります。

padding: 1px;　、padding: 1em;　など

1px;は実際の余白を表しています。１pxが何ミリ位なのかはWindowsのモニタ解像度により変わってくるようで見え方は様々です。実際に適用してみて収まり具合で判断された方が良いと思います。

1em;は文字の高さを基準に連動して余白が変わります。

枠を表示する領域をボックスと言います。ボックスの中で枠線とその外側の余白をマージンと言います。

margin: 5px;　、margin: 1em;　など

margin: 5px;は実際の余白を表しています。。1em;は文字の高さを基準に連動して余白が変わります。

枠を表示するボックス領域のイメージはこんな感じです。

ブロガーBloggerでは構成文の文字を囲むためのツールが用意されていません。スタイルシーで適用します。