HTMLに手を出し始めると、ウェブページにもっと機能を追加したいと思うようになるかもしれません。

ここでは、Webページで基本的なスタイルを変更する方法を紹介する、簡単なCSSの例をいくつか挙げています。

1 シンプルな段落書式のための基本的なcssコード

CSSでスタイルを設定することで、要素を作成するたびにスタイルを指定する必要がなくなります。すべての段落は、この特定のスタイルにする」と言えば、準備は完了です。

例えば、各段落（HTMLタグの一つ）を通常より少し大きく表示させたいとします。そして、黒ではなく濃いグレーの文字。この場合のCSSコードは次のようになります。

p { font-size: 120%; color: dimgray;}

簡単ですね！これで、ブラウザが段落をレンダリングするたびに、テキストのサイズ（通常の値の120％）と色（「dimgray」）が継承されるようになりました。

プレーンテキストの色を知りたい場合は、MozillaのCSSカラー一覧をご覧ください。

2 文字の大文字小文字を変更する

スモールキャピタルで大文字にすべきパラグラフの名前を作りたいですか？ CSSの例は次の通りです。

p.**allcaps { font-variant: **all-caps;}

段落全体を小見出しで構成するには、少し異なるHTMLマークアップを使用します。

<p class="**allcaps">Your paragraph here.</p>

要素にポイントを付け、クラス名を付けると、そのクラスで定義された要素のサブタイプが指定されます。テキスト、画像、リンクなど、あらゆるものでこのようなことが可能です。

文字列群の大文字・小文字を特定の文字に変更するには、次のCSSの例を使用します。

text-transform: uppercase;text-transform: lowercase;text-transform: capitalize;

最後に各文章の最初の文字を大文字にする。

iii. リンクの色を変更する

スタイルの変更は、段落に限ったことではありません。リンクには、標準色、訪問色、ホバー色、アクティブ色（クリック時に表示）の4種類の色を割り当てることができます。これらに対応するCSSコードは以下の通りです。

a:link {color: gray;}a:visited {color: green;}a:hover {color: purple;}a:active {color: teal;}

リンクの場合、各 "a "の後にはドットではなくコロンを付けます。

これらの宣言はそれぞれ、リンク先のクラスを変更して色を変更させることなく、特定のコンテキストでリンクの色を変更します。

4リンクの下線を消す

下線を引いたテキストは明らかにリンクを示していますが、下線を外した方がより適切に見える場合もあります。これは、"text-decoration "プロパティを通じて行われる。このCSSの例は、リンクからアンダーラインを取り除く方法を示しています。

a {text-decoration: none;}

リンク（「a」）が付いているコンテンツは、下線が引かれていない状態になります。ユーザーがマウスを乗せたときに下線を引く必要があるのでしょうか？加えるだけです。

a:hover {text-decoration: underline;}

また、このテキスト装飾をアクティブリンクに追加することで、リンクをクリックしてもアンダーラインが消えないようにすることができます。

5 cssコード付き**リンクボタン

あなたのリンクにもっと注目を集めたいですか？リンクボタンはその代表的なものです。この記事では、より多くの行を必要としますが、別々に検討します：。

a:link, a:visited, a:hover, a:active {background-color: green;color: white;padding: 10px 25px;text-align: center;text-decoration: none;display: inline-block;}

4つのリンク状態をすべて含めることで、ユーザーがボタンをホーバーまたはクリックしたときに、ボタンが消えないようにすることができます。また、ボタンやテキストの色を変えるなど、ホバーリンクとアクティブリンクに異なるパラメーターを設定することも可能です。

背景色を設定するには background color を、文字色を設定するには color を使用します。padding はボックスの大きさを定義し、テキストは縦方向に 10px、横方向に 25px パディングされます。

テキストアライメントは、テキストが横にずれて表示されるのではなく、ボタンの中央に表示されるようにします。前の例で見たように、文字装飾はアンダーラインを削除します。

CSSのコード「display:inline block」は、もう少し複雑です。つまり、オブジェクトの高さと幅を設定することができるのです。また、新しい行は **new line で開始されるようにします。

6 テキストボックスの作成

単純な段落では、あまり盛り上がらない。ページ上の要素を強調したい場合、ボーダーを追加する必要がある場合があります。ここでは、CSSのコードを用いて、この方法を説明します。

p.important {border-style: solid;border-width: 5px;border-color: purple;}

こちらはとてもシンプルです。重要なクラスの段落の周りに、幅5ピクセルの紫色のボーダー（無地）を作成します。段落にこれらのプロパティを継承させるには、次のように宣言するだけです。

<p class="important">Your important paragraph here.</p>

これは、通路の大きさに関係なく有効です。

ボーダーには様々なスタイルがあり、「ソリッド」ではなく「ドット」や「ダブル」などを試してみてください。また、幅は「細」「中」「太」があり、CSSコードでは以下のように各ボーダーの太さを個別に定義することも可能です。

border-width: 5px 8px 3px 9px;

その結果、上辺5ピクセル、右辺8ピクセル、下辺3ピクセル、左辺9ピクセルのボーダーができあがります。

7 要素の中央揃え

非常に一般的なタスクの場合、CSSコードによる要素の中央揃えは非常に直感的ではありません。何度かやっていると、だいぶ楽になってきます。注意を集中させる方法はいくつかあります。

ブロック要素（通常は画像）には、margin属性を使用します。

.center {display: block;margin: auto;}

これにより、要素がブロックとして表示され、各辺の余白が自動的に設定されるようになります。あるページですべての画像を中央に配置したい場合は、imgタグに「margin:auto」を追加することもできます。

img {margin: auto;}

なぜそのような仕組みになっているのかを理解するには、W3Cのcs**oxモデルの解説をご覧ください。

しかし、CSSを使って文字を中央揃えにしたい場合はどうするか。以下のCSSの例で説明する。

.centertext {text-align: center;}

centertext "クラスを使用して、段落内のテキストを中央揃えにするには、このクラスをタグに追加するだけです。

<p class="centertext">This text will be centered.</p>

8 パディングを調整するためのcssの例

要素のパディングは、各辺にどれだけのスペースを確保するかを指定します。例えば、画像の下に25ピクセルのパディングを追加した場合、以下のテキストは25ピクセル下に押されます。画像だけでなく、多くの要素がパディングを持つことができます。

各画像の左右に20ピクセル、上下に40ピクセルのパディングが必要だと仮定すると、最も基本的な実装は以下のようになります。

img {padding-top: 40px;padding-right: 25px;padding-bottom: 40px;padding-left: 25px;}

これらの情報を、省略可能なCSSコードを使って一行で表示することができるのです。

img {padding: 40px 25px 40px 25px;}

これにより、上、右、下、左のパディングが正しい数値に設定されます。40と25の2つの値しか使っていないので、もっと短くすることができます。

img {padding: 40px 25px}

2つの値のみを使用する場合、1つ目は "top "と "bottom"、2つ目は "left "と "right "が設定されます。

9 テーブルの行をハイライトする

CSSコードにより、デフォルトのグリッドよりもテーブルの見栄えが格段に良くなります。色の追加、ボーダーの調整、画面の移動に対応したテーブルの作成も簡単です。ここでは、テーブルの行にマウスを乗せるとハイライトされるという、クールな効果を1つだけ紹介します。

必要なコードはこちらです。

tr:hover {background-color: #ddd;}

これで、表のセルにマウスを乗せると、その行の色が変わるようになりました。このほかにも、W3CによるCSSのテーブルに関するページがあります。

10 画像の透明・不透明の切り替え

CSSのコードは、画像を使ってクールなことをするのにも役立ちます。ここでは、完全に不透明でない画像を表示するために、わずかに「白」に見えるCSSの例を紹介します。画像にマウスオーバーすると、完全に不透明になります。

img {opacity: 0.5;filter: alpha(opacity=50);}

filter」プロパティは「opacity」と同じ効果を持ちますが、internetexplorer 8以前はopacityメトリックを認識しません。古いブラウザの場合は、これを入れておくとよいでしょう。

これで画像が少し透明になったので、マウス上で完全に不透明にします：。

img:hover {opacity: 1.0;filter: alpha(opacity=100);}

10個のCSSサンプル（ソースコード付き

これらのCSSのコード例を見れば、CSSの仕組みがより理解できるはずです。CSSのテンプレートは便利ですが、オリジナルの要素を理解することが重要です。

CSSコードの簡単な例10個を調べてみました。

1. 簡単な段落の書式設定
2. 文字ケースの変更
3. リンクの色を変更する
4. リンクの下線を消す
5. **リンクブートン
6. テキストボックスの作成
7. 中央揃えの要素
8. アジャストメントパッド
9. テーブルの行をハイライトする
10. 画像を不透明にする

改めて見直してみると、今後のコードに応用できるいくつかのパターンがあることに気づくだろう。CSSの達人になり始めたんですね。しかし、これは難しいことだと覚えておいてください。このページをブックマークしておくと、今後の参考になります。また、CSSの検査、クリーンアップ、最適化の方法も学ぶ必要があります。

ここで学んだことをすぐに思い出すために、CSS3プロパティメモシートをぜひご覧ください。