11月, 2011

字下げを指定するtext-indentプロパティ

2011年11月30日 staff 未分類, 0

今回はCSSでテキストの字下げを指定する方法について。

字下げを指定するには、 text-indentプロパティを使います。

例：

div.test1 {
 text-indent:1em;
}
div.test2 {
  text-indent: 5px;
}

デフォルト：

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、…

1em：

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、…

5px：

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、…

テキストの表示位置を変更するtext-alignプロパティ

2011年11月29日 staff 未分類, 0

今回はCSSでテキストの表示位置を変更する方法について。

テキストの表示位置を変更するには、 text-alignプロパティを使います。

左寄せにする場合は、 left
右寄せにする場合は、 right
中央寄せにしたい場合は、 center

を指定します。

例：

div.test1 {
  text-align:right;
}
div.test2 {
  text-align: center;
}

デフォルト（左寄せ）

右寄せ

中央寄せ

文字を装飾するtext-decorationプロパティ

2011年11月28日 staff 未分類, 1

今回はCSSで文字を装飾する方法について。

文字を装飾するには、 text-decorationプロパティを使います。

テキストに下線を引くには　underline
テキストに上線を引くには　overline
テキストに取り消し線を引くには　line-through
テキストを点滅させるには　blink
装飾なしには　none

を指定します。

例：

div.test1 {
   text-decoration:underline;
}
div.test2 {
   text-decoration: overline;
}
div.test3 {
   text-decoration: line-through;
}
div.test4 {
   text-decoration: blink;
}
div.test5 {
   text-decoration: overline　underline;
}

デフォルト

underlineを指定

overlineを指定

line-throughを指定

blinkを指定

underlineとoverlineを指定

行間を変更するline-heightプロパティ

2011年11月25日 staff 未分類, 0

今回はCSSで行間を変更する方法について。

行間を変更するには、 line-heightプロパティを使います。

デフォルトで設定されているnormalのほか、数値＋単位（15px , 5em など）で指定する方法、
数値のみで指定する方法、パーセンテージで指定する方法があります。
数値のみで　1.5　と指定した場合、1.5emや150％と指定した時と同じ行間になります。

例：

div.test1 {
   line-height:150%;
}
div.test2 {
   line-height: 3em;
}
div.test3 {
   line-height: 2.0;
}

フォントを変更するfont-familyプロパティ

2011年11月24日 staff 未分類, 0

今回はCSSでフォントを変更する方法について。

フォントを変更するには、 font-familyプロパティを使います。

フォントの指定は、ＭＳ ＰゴシックやArialなどの具体的な名前で指定する方法と、
sans-serifやserifなど、種類で指定する方法があります。
また、フォント名を指定しても、利用者のPCにそのフォントが入っていない場合は代替フォントで表示されるため、注意が必要です。

例：

p.test1 {
   font-family: serif;
}
p.test2 {
   font-family: sans-serif;
}

デフォルト
serifを指定
san-serifを指定

文字のスタイルを変更するfont-styleプロパティ

2011年11月22日 staff 未分類, 0

今回はCSSで文字のスタイルを変更する方法について。

文字のスタイルを変更するには、 font-styleプロパティを使います。

標準のものにするには、normalを。
イタリック体にするには、italicを。
斜体にするには、obliqueを指定します。

例：

p.test1 {
   font-style:italic;
}
p.test2 {
   font-style:oblique;
}

pデフォルト
italicを指定
obliqueを指定

文字の太さを変更するfont-weightプロパティ

2011年11月21日 staff 未分類, 0

今回はCSSで文字の太さを変更する方法について。

文字の太さを変更するには、 font-weightプロパティを使います。

太さは、normal，bold　で指定します。
他にも、100，200，300，400，500，600，700，800，900の9段階で指定する方法や、
bolder、lighterといった、相対的に指定する方法があります。

しかし、9段階の太さが用意されているフォントは少なく、実際にはnormalとboldの二段階で表示されることが多いです。

例：

p {
   font-weight:bold;
}
strong {
   font-weight:normal;
}

pデフォルト
boldを指定したｐ

strong デフォルト
normalを指定したstrong

文字サイズを変更するfont-sizeプロパティ

2011年11月18日 staff 未分類, 0

今回はCSSで文字のサイズを変更する方法について。

文字の色を変更するには、 font-sizeプロパティを使います。

サイズは、16px 15em 12pt などといった数値＋単位で指定する方法、
85％　200%などのパーセンテージで指定する方法、
small　largeといった絶対指定のキーワード、
smaller largerといった相対指定でのキーワードで指定する方法などがあります。

例：

p {
   font-size: 21px;
}
.large{
   font-size: large;
}
.smaller {
   font-size: smaller;
}
.test {
  font-size:3em;
}
#box .test {
   font-size: 120%;
}

デフォルト

フォントサイズ120％

21pxのP要素

文字色を変更するcolorプロパティ

2011年11月17日 staff 未分類, 0

今回はCSSで文字の色を変更する方法について。

文字の色を変更するには、 colorプロパティを使います。

色名は、カラーコードと呼ばれる#で始まる6桁の数字や、red blue green などの色の名前、他にはRGBで指定する方法もあります。

RGBでの指定は、0~255までの数値で赤・緑・青の各色の強さを指定します。
数字が大きくなるほど色が強くなります。

例：

/* p要素の文字色を黒（#000000）にする*/
p {
   color: #000000;
}

/* class="test"内の文字色を青にする*/
.test {
   color: blue;
}

/* id="box"内のh2要素の文字色を(赤:0 緑：0 青：0）　つまり白にする*/
#box h2 {
   color: rgb(0,0,0);
}

HTML,CSSにコメントを入れるには

2011年11月16日 staff 未分類, 0

今回は、HTML,CSSにコメントを入れる方法について。

HTMLやCSSのソース内に、後から見てもわかりやすいように覚書・コメントを入れたい場合、

HTMLなら、　<!– ここにコメント–>　を。
CSSなら、 /* ここにコメント */ 　を使用します。

コメント内のテキストは、ブラウザ上では表示されなくなり、
ソースを表示することで見ることが可能です。

HTML例：

<!-- ここから内容 -->
<h2>見出しが入ります。</h2>
<p>テキストが入ります。</p>
<!-- 内容ここまで -->

<!--
<h2>一時的に消したい見出し</h2>
<p>一時的に消したいテキスト<br>
複数行にも使えます。</p>
-->

CSS例：

/* content */
div.content span.point{
   color:red; /*テキストの色を赤にする*/
}

/*
一時的にオフにしたいCSS
CSSも複数行に使えます。
div.content
   color:red;
}
*/