CSS カスケードスタイルシートの外部化と書き方、使い方

スタイルシートはホームページのデザインのためのマークアップ言語です。CSSを使用することでhtmlソースの単純化などホームページ作成効率を上げたり、サーバーの転送量を下げることができます。

CSS外部化

CSSを使った文字装飾

CSSを使って文字装飾を行う場合、
位置情報： text-align:left;
書体色彩： font-family:"Arial"; font-size:30px; color:#EEDDCC; font-weight:bold;
間隔設定： margin:0; padding:10px;
文字装飾： border-top:1px solid #333; border-bottom:1px solid #333;
背景設定： background:#666666;

このような記述をすることで簡単に装飾を行えます。
はじめての方には判り難いと思いますので、以下にすぐ使える記述例を挙げます。

---

コピペで使える文字装飾

以下の文字色はhtmlを使った文字装飾です。
SEOやソースコードの簡略化のためCSSの外部化を行うことが望ましい。
記述自体にそれほど大きな差はありません。

文字装飾例
シンプルな文字装飾
 <span style="font-weight:bold;"> 装飾文字 </span> 
 <span style="color:#AA9988; font-weight:bold;"> 装飾文字 </span> 

 <span style="color:#773333; font-weight:bold;"> 装飾文字 </span> 
 <span style="color:#337733; font-weight:bold;"> 装飾文字 </span> 
 <span style="color:#333377; font-weight:bold;"> 装飾文字 </span> 

 <span style="color:#661111;"> 装飾文字 </span> 
 <span style="color:#116611;"> 装飾文字 </span> 
 <span style="color:#111166;"> 装飾文字 </span> 

 <span style="color:#B01111; font-weight:bold;"> 装飾文字 </span> 
 <span style="color:#11B011; font-weight:bold;"> 装飾文字 </span> 
 <span style="color:#1111B0; font-weight:bold;"> 装飾文字 </span> 

 <span style="font-family:メイリオ; color:#330000; border-bottom:1px dotted #333;"> 装飾文字 </span> 
 <span style="font-family:メイリオ; color:#003300; border-bottom:1px dotted #333;"> 装飾文字 </span> 
 <span style="font-family:メイリオ; color:#000033; border-bottom:1px dotted #333;"> 装飾文字 </span> 

 <span style="font-family:メイリオ; font-weight:bold;"> 装飾文字 </span> 
 <span style="font-family:メイリオ; color:#663333; font-weight:bold;"> 装飾文字 </span> 
 <span style="font-family:メイリオ; color:#336633; font-weight:bold;"> 装飾文字 </span> 
 <span style="font-family:メイリオ; color:#333366; font-weight:bold;"> 装飾文字 </span> 

背景が暗い場合は明るい文字装飾、背景が明るいなら文字装飾を暗くしてバランスをとりましょう。
文字色については red など英単語でも指定できますが細かく設定できる #******; を使用したほうがデザインの幅が広がります。

また、CSSの外部化を行うと CSSファイルを更新するだけで全てのページのデザインを一新できます。
個々のページというようにはいきませんが、ホームページを作成する労力が激減するのもメリットの1つです。

CSSは一度外部化を行ってしまえば、htmlタグ単体で文字装飾を実現することができるので、
このように長々と記述する必要もありません。

外部CSS記述例
b{color:#007700; font-weight:700; font-style:normal;}
これだけ、たった一行です。

<b> 文字装飾 </b>： 外部化するとこのようにbタグで囲んだだけで上記のような文字装飾を行うことが出来ます。

---

文字装飾の応用

ここではコピペで簡単に使える文字装飾を挙げましたが、
背景色や枠線を使った文字装飾を応用することで、ボタン式のアンカーリンクを作成する事も可能です。

当サイトのアンカーテキストは、マウスカソールを合わせると背景色や文字色が変化しますが、
これもCSSの文字装飾機能を使っています。

CSS外部化 TOP：トップページに戻る。

---

CSSについて

散財のすすめ : スタイルシートは簡単に作成できます。
使い方も簡単で初心者向けとなっているため、特に書籍の購入などをする必要はありません。

初めてという方でも1日あれば十分に使いこなすことが可能です。

CSSとは

CSS スタイルシートとは、ホームページの見栄えのための言語で、htmlでフォントの色やテーブルの背景色などなど……
1つ1つ個々に指定すると労力が馬鹿になりません。

こういった手間をかけずに、一括でデザインをすることが出来る補助言語となります。