仙台ホームページ制作

• p：文章を記述する。
• h1,h2,h3,h4,h5,h6：見出しを記述する。
• address：著作権情報を記述する。
• blockquote：引用したコンテンツを表示する。
• div：コンテンツのグループを示す。
• color：文字の色を指定する。
• font-size：文字の大きさを指定する。
• font-family：フォントの種類を指定する。
• font-size-adjust：文字サイズを調整する。
• font-weight：文字の太さを指定する。
• font-style：文字を斜体で表示する。
• font-variant：スモールキャピタルで表示する。
• font：文字をまとめて指定する。
• text-decoration：文字の装飾を指定する。
• text-shadow：文字に影をつけて表示する。
• text-transform：大文字／小文字で表示する。
• text-align：行揃えを指定する。
• text-justify：均等割付の形式を指定する。
• text-indent：１行目の開始位置（インデント）を指定する。
• line-height：行の間隔を指定する。
• letter-spacing：文字の間隔を指定する。
• word-spacing：単語の間隔を指定する。
• br：テキストを改行する。
• pre：改行・スペース・タブをそのまま表示する。
• white-space：改行・スペース・タブの処理を指定する。

p

文章を記述するときは、文章の区切りや段落ごとに<p>でマークアップします。

下記サンプルでは、2つの文章をｐタグで囲んでいます。

<p>これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文
章です。</p>
<p>これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文
章です。</p>
            

<h1>から<ｈ6>は、文章の見出し部分であることを示すためのタグです。

大きな見出しから順に、 <h1>から<ｈ6>までの６段階でマークアップすることができます。

<address>でマークアップすると、著作情報であることを示すことができます。

Webページの制作者の名前や連絡先、コピーライトなどの情報を記述します。

			<address>著作情報を記述する</address>

            

<blockquote>でマークアップすると、引用したコンテンツであることを示すことができます。

<blockquote>引用したコンテンツ。引用したコンテンツ。引用したコンテンツ。
引用したコンテンツ。引用したコンテンツ。</blockquote>
            

<div>を使用すると、コンテンツのグループを示すことが来ます。

<color>を使用すると、コンテンツの文字の色を指定することができます。

<p class="tag_red">カラーサンプル</p>
<p class="tag_gree">カラーサンプル</p>    

.tag_red{
	color:#ff0000;
}
.tag_gree{
	color:#00ff00;
}

<font-size>を使用すると、文字の大きさを指定することができます。

font-familyプロパティは、フォントの種類を指定する際に使用します。

フォントの種類はカンマ（ , ）で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。

指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示されます。

欧文のテキストでは、同じ文字サイズでもフォントの種類によって大きさが違って見えます。

そのため、、第一候補のフォントで表示されなかったとき、第二候補のフォントで表示されるとレイアウトバランスが崩れるといった問題が発生します。

そこで、font-size-adjustを使用し、文字の見た目の大きさを第一候補の文字に揃えるようにします。

font-weightプロパティは、フォントの太さを指定する際に使用します。

9段階の太さを指定することができますが、一般的なフォントでは9種類の太さが用意されていることはあまりなく、 フォントの太さとして実際に指定する値は｢bold｣のみで事足りることが多いようです。

font-styleプロパティは、フォントのスタイルを指定する際に使用します。

指定できる値は、標準（normal）、イタリック体（italic）、斜体（oblique）です。

イタリック体(italic)と斜体（oblique）の違いについてですが、 イタリック体（italic）は斜めに傾けて筆記体調などにデザインされたものが多く、 斜体（oblique）はシンプルに斜めに傾けてデザインされたものが多いようです。

指定したフォントにイタリック体（italic）や斜体（oblique）がない場合には、 ブラウザが判断して、そのフォントの標準のものを斜めに傾けて表示します。

日本語フォントの場合、イタリック体（italic）や斜体（oblique）が用意されていることはほとんどなく、 標準のものを斜めに傾けて表示しているため、多くの場合イタリック体（italic）と斜体（oblique）のブラウザ上の表示は同じになります。

font-variantプロパティは、フォントをスモールキャップにする際に使用します。 指定できる値は、標準（normal）、スモールキャップ（small-caps）です。

スモールキャップとは、小文字の表示形式が小文字サイズの大文字になっているものを指します。

指定したフォントにスモールキャップがない場合には、大文字を縮小したものを小文字として表示します。

fontを使用すると、文字関連の設定を１つにまとめて指定する事ができます。

text-decorationプロパティは、テキストに下線・上線・打ち消し線を付けたり、点滅させる際に使用します。

同時に複数の値を指定する場合には、値を任意の順序でスペースで区切って記述します。

Macintoshネイティブのブラウザ、Safariのみ対応しています。

要素に影を付けます。影効果がボックスの大きさを変える事はありませんが、効果がボックスの領域外に及ぶ事はあります。

text-transformプロパティは、英語などのテキストの大文字表示・小文字表示を指定する際に使用します。

単語の先頭文字だけを大文字で表示することもできます。

text-alignプロパティは、行揃えの位置や、均等割付を指定する際に使用します。

均等割付については、text-alignプロパティの値にjustifyを指定した上で、 text-justifyプロパティで均等割付の形式を指定しないと実際に均等割付になりません。

text-justifyプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したもので、Internet Explorerの5.0以降にしか対応していないので注意が必要です。

text-justifyプロパティは、W3Cで審議中の仕様をInternet Explorerが独自に採用したものです。

text-alignプロパティの値がjustifyのとき、テキストの均等割付の形式を指定する際に使用します。

text-indentプロパティは、文章の段落などの一行目のインデント幅を指定する際に使用します。

インデントには負の値を指定することもできます。

line-heightプロパティは、行の高さを指定する際に使用します。

行の高さには負の値を指定することはできません。

行の高さとフォントサイズの関係ですが、 例えばline-heightが20pxでfont-sizeが16pxの場合、 20px（行の高さ）から16px（フォントサイズ）を引いた残りの4pxが、行間として上下均等に2pxずつ割り振られます。

また、例えばline-heightが10pxでfont-sizeが14pxなど、行の高さがフォントサイズより小さな値の場合には、 行が重なって表示されます。

letter-spacingプロパティは、文字の間隔を指定する際に使用します。文字の間隔にはマイナスの値を指定することもできます。

word-spacingプロパティは、単語の間隔を指定する際に使用します。

単語の間隔にはマイナスの値を指定することもできます。

<BR>とはBreak（改行）の略で、テキストや画像等をブラウザ上で改行させたいときに使用します。

HTMLソース中の改行はInternet ExplorerやNetｓcape Navigator等の一般的なブラウザでは半角スペースとして表示され、改行されません。

HTMLソース中の改行を、ブラウザ上でそのまま表示させるには<PRE>タグを用います。

<pre>タグはPreformatted Text（整形済みテキスト） の略で、<pre>〜</pre>で囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。

Box

Border

List

Text