TOPページ > スタイルシート(CSS)の記述
スタイルシート(CSS)の記述

スタイルシート(CSS)の記述

ブログでは、ページ全体の構成は自動生成なので、サイトのカスタマイズは主にスタイルシートを変更することになります。

デフォルトのCSSでも、見慣れないうちはその長さに面食らいますが 記述内容は余白の指定などがほとんどで難しいものではありません。

修正したり加筆したりして、お好みのブログに仕上げましょう。

スタイルシート(CSS)の記述 項目一覧

ホームページやブログなどで表を表示させるには、TABLEタグやTR、 TDタグなどを使用しますが、そのままでは見づらいのでALIGN属性やPADDINGを 指定...

アンカータグ(<a>タグ)を使って ホームページやブログなどのウェブサイトに リンクを貼る際に、スタイルシートを利用して、押すと凹むように見える ボ...

ホームページやブログなどのウェブサイトで、同一のスタイルを 何度も指定したいときに便利な スタイルシート(CSS)ですが、各コンテンツで 文字色や文字の大きさな...

ブログでは、ページ全体の構成は自動生成なので、サイトのカスタマイズは主にスタイルシートを変更することになります。 デフォルトのCSSでも、見慣れないうちはその長...

ホームページやブログなどのウェブサイトで 見出しタグ(H1~H6)で囲まれた文字は、文章中の重要な部分として扱われますから、ページタイトルや記事タイトル、その他...

ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合 a { スタイル } という記述になりま...

ホームページやブログなどのウェブサイトに、他ページへのジャンプするためのアンカータグを挿入する場合、リンク文字のスタイル指定することができます。一括で指定する場...

タグに直接スタイル指定することができます。 タグ名 { スタイル } という記述になります。複数の指定をする場合は、;(セミコロン)で区切って記述します。見や...

<link>タグを使って、外部からスタイルシートファイルを読み込んで、ページのスタイルを指定することができます。 <link rel=&qu...

ホームページやブログなどのウェブサイトで、ページ内で一回だけスタイルを使用する場合は、スタイルシートで IDを指定する方法があります。 #名前 { スタイル }...

ホームページやブログなどのウェブサイトで、何度も同一のスタイル(文字の大きさや色など)を指定したい場合は、スタイルに名前をつけて、タグにスタイル指定すると便利で...

ホームページやブログなどのウェブサイトで文章などを表示する際に、 一時的にスタイルシートを利用して 文字や段落の色や大きさなどを変えることができます。タグ内に ...

2006年05月23日

ホームページやブログなどで表を表示させるには、TABLEタグやTR、 TDタグなどを使用しますが、そのままでは見づらいのでALIGN属性やPADDINGを 指定して見映えを良くする必要があることもしばしばです。

しかし、セルの一つ一つにこれらの属性やスタイルを記述するのには 手間がかかりますし、変更したいときも大変です。

そんなときは、スタイルシート(CSS)でまとめて設定するのがおすすめです。
例えば、こんなテーブルは文字と枠がくっついてしまって少し見づらく感じます。

番号名称主な働き
1フェニルアラニン精神を安定させてストレスを緩和
2スレオニン成長の促進、組織の修復など
3ヒスチジン食欲を抑制し、エネルギーの代謝を活発に

そこで、スタイルシートを使用して少し体裁を整えてみます。

番号名称主な働き
1フェニルアラニン精神を安定させてストレスを緩和
2スレオニン成長の促進、組織の修復など
3ヒスチジン食欲を抑制し、エネルギーの代謝を活発に

このサンプルのソースは、次のようになっています。

続きを読む "テーブルの余白などのスタイルを指定する" »

2006年04月14日

アンカータグ(<a>タグ)を使って ホームページやブログなどのウェブサイトに リンクを貼る際に、スタイルシートを利用して、押すと凹むように見える ボタン風リンク文字を表示することができます。

サンプルです。

リンク文字をクリックしてみてください。押すと凹んだように見えると思います。このソースは、次のようになっています。

続きを読む "スタイルシートでボタン風リンク文字を表示する" »

2006年03月21日

ホームページやブログなどのウェブサイトで、同一のスタイルを 何度も指定したいときに便利な スタイルシート(CSS)ですが、各コンテンツで 文字色や文字の大きさなど、さまざまな設定をしていると、スタイルシートも長く煩雑なものになりがちです。

こんなとき、スタイルを指定する際に、共通する部分は半角カンマで区切ってまとめて記述することができます。

<style type="text/css">
<!--
.sampleclass_A,
.sampleclass_B
{ color:red; padding:2px 5px; width:200px; }
.sampleclass_A { background-color:#FF33FF; }
.sampleclass_B { background-color:white; }
-->
</style>

<div class="sampleclass_A">サンプルクラスA</div>
<div class="sampleclass_B">サンプルクラスB</div>

このサンプルでは、共通部分(段落の幅と、文字の色および余白)をまとめて記述しています。このソースを表示させると、次のようになります。

続きを読む "スタイルの共通部分をまとめて記述する" »

ブログでは、ページ全体の構成は自動生成なので、サイトのカスタマイズは主にスタイルシートを変更することになります。

デフォルトのCSSでも、見慣れないうちはその長さに面食らいますが、さらにさまざまな場面で文字の大きさや色、表示位置などを好みに合わせようとすると、IDやCLASSの指定も思いがけなく増えて、名前も長くなりがちです。

そんなときには、IDやクラスに親子関係を持たせて管理するのが便利です。
親子関係に当たるCLASSのスタイルシートの記述は 次のようになります。

.親のクラス名 .子のクラス名 { スタイル }
(注)親も子も、.(ドット)の部分は、IDであれば#(半角シャープ)です。

親のクラス(またはID)と子のクラス(またはID)の間には、半角スペースを入れてください。
使用例です。

続きを読む "タグを入れ子にして同じクラス/ID名を使い分ける" »

2006年02月14日

ホームページやブログなどのウェブサイトで 見出しタグ(H1~H6)で囲まれた文字は、文章中の重要な部分として扱われますから、ページタイトルや記事タイトル、その他重要な語句はレベルの高い見出しタグを使用したいところですが、デフォルトのままでは異様に文字が大きかったり、不必要に上下に余白がとられてしまったりしてページのデザインを崩してしまいがちです。

そんな場合は、見出しタグにスタイルを指定して使いましょう。見出しはH1~H6までありますので、ある程度用途を決めておくとよいかもしれません。見出しタグはブロックタグですので、<p>タグや<div>タグとほとんど同じようにスタイル指定できます。

H1 ページタイトルなど

H2 ページ説明など

H3 記事のタイトルなど

普通の行。本文、記事内容など。

H4 本文中で、重要な語句など

普通の行。本文、記事内容など。

上記サンプルのソースは、次のようになります。

続きを読む "見出しタグ(H1~H6)のスタイルを指定する" »

ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合

a { スタイル }

という記述になりますが、未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルをそれぞれ指定することができます。

a : link { スタイル } 未訪問リンク文字に対して
a : visited { スタイル }訪問済みリンク文字に対して
a : hover { スタイル }リンク文字にマウスが重なったとき
a : active { スタイル }リンク中文字に対して

という記述になります。
例えば、

続きを読む "未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する" »

ホームページやブログなどのウェブサイトに、他ページへのジャンプするためのアンカータグを挿入する場合、リンク文字のスタイル指定することができます。一括で指定する場合は、

a { スタイル }

という記述になります。一般の文字の色や文字修飾を指定していても、リンク文字のスタイル指定がないと リンク文字だけはブラウザ依存のスタイル(多くの場合、太い青文字で下線付き)で表示されてしまうので、ページの雰囲気を統一したい場合は、リンク文字のスタイル指定をしたほうが良いでしょう。

例えば、

続きを読む "リンク文字のスタイルを指定する" »

タグに直接スタイル指定することができます。

タグ名 { スタイル }

という記述になります。複数の指定をする場合は、;(セミコロン)で区切って記述します。見やすいように改行してもOKです。この方法で指定した場合、id や class の指定をしなくてもページで使用されるそのタグすべてが 指定したスタイルになります。

例えば、

<style type="text/css">
<!--
p {
font-size:12px;
color:blue;
}
table {
border:2px solid gray;
}
-->
</style>

というふうに指定すると、そのページの<p>タグを使用した段落すべてが 文字の大きさ 12ピクセル、文字色が青になり、そのページのすべてのテーブルの枠線が太さ 2ピクセル、グレーの実線となります。

2006年02月11日

<link>タグを使って、外部からスタイルシートファイルを読み込んで、ページのスタイルを指定することができます。

<link rel="StyleSheet" href="パスまたはファイル名">

という形式で、外部ファイルを読み込みます。読み込まれるスタイルシートファイルの拡張子は、『 .css 』になります。メモ帳などのテキストエディタに定義内容を入力し、拡張子を『 .css 』として保存してください。

外部ファイルを読み込む場合、スタイルシートファイルに
  <style type="text/css">
  <!--
などの宣言は不要です。定義内容だけを列挙してください。

こちらのサンプルページは、 背景画像や色、余白、文字の大きさなどすべて外部のスタイルシートファイルを読み込んで指定しています。

上記ページのスタイルシートファイルはこちらです。(そのままのリンクでは見づらいので、同一の内容をテキストファイルとして保存したものです。

ブログでは、あらかじめ使用するテンプレートにあわせたスタイルシートが用意されており、その外部ファイルを参照しています。

それとは別にスタイルシートを用意して記事欄で読み込むこともできますが、同一の id や class を使用して衝突することにもなりかねませんので、テンプレートが読み込んでいるスタイルシートに追記したほうが良いでしょう。スタイルシートは、ブログの管理画面から編集できます。

ホームページやブログなどのウェブサイトで、ページ内で一回だけスタイルを使用する場合は、スタイルシートで IDを指定する方法があります。

#名前 { スタイル }

という形式で、スタイルに名前を付けます。複数の指定をする場合は、;(セミコロン)で区切って記述します。見やすいように改行してもOKです。タグの記述は、

<タグ名 id=" 名前 ">

というように、どのスタイルを適用するのか id="名前" で指定します。

同一のスタイルを何度も使用する場合はこちら →複数のタグで同一のスタイルを指定する
使用例です。

続きを読む "ページ内で一回だけスタイルを使用する" »

ホームページやブログなどのウェブサイトで、何度も同一のスタイル(文字の大きさや色など)を指定したい場合は、スタイルに名前をつけて、タグにスタイル指定すると便利です。

 .名前 { スタイル }

という形式になります。複数の指定をする場合は、;(セミコロン)で区切って記述します。見やすいように改行してもOKです。タグの記述は、

<タグ名 class=" 名前 ">

というように、どのスタイルを適用するのか class="名前" で指定します。
使用例です。

続きを読む "複数のタグで同一のスタイルを指定する" »

ホームページやブログなどのウェブサイトで文章などを表示する際に、 一時的にスタイルシートを利用して 文字や段落の色や大きさなどを変えることができます。タグ内に style属性で適用するスタイルを記述します。
複数の指定をしたい場合は、;(セミコロン)で区切ります。

<タグ名 style=" スタイルの指定">スタイルを適用する文章</タグ名>
  • タグ名:<p>、<div>や<span>を始めほとんどのインラインタグやブロックタグが使えます。
  • スタイルの指定:文字の色や大きさなど、さまざまなスタイルを指定することができます。各種スタイル指定の種類について 詳細はこちらをご覧ください

サンプルソースです。

続きを読む "一時的にスタイルシートを利用" »

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス