HTML+CSS

HTML+CSSのTIPS & FAQ集(INDEX)

18．
17．IMEのON・OFF(IEのみ)
16．スタイルシートの例
15．SPANタグ
14．スタイルシート
13．フォーム(テキストボックスと送信ボタン)
12．ラジオボタン
11．リンクその２
10．リストボックス
９．表
８．リンクとアンカ
７．画像表示
６．特殊文字
５．続・フォンストタイル
４．フォントスタイル
３．横罫線の装飾
２．見出しと位置
１．HTMLの基本

18．

17．IMEのON・OFF(IEのみ)

　例えばFORMの中で次のものを宣言しておきます。

オンの場合　style="ime-mode:active"
オフの場合　style="ime-mode:inactive"

16．スタイルシートの例

下がひとつの例です。スタイルシートを別ファイルとしない場合はHEADタグの中で宣言します。

h1 { font-size:medium;
margin-top:1em;
margin-bottom:.5em;
border-left:12px solid rgb(78,72,135);
border-top:1px solid rgb(78,72,135);
padding-left:4px;
color:rgb(78,72,135);
}

15．SPANタグ

　SPANタグは特定部分の属性変更のために使います。

赤いフォント
ここは青かしら
ここは青いか赤いか？

<P STYLE="font-size:12pt; Color:red">赤いフォント <BR>
<SPAN STYLE="font-size:16pt; color:blue">ここは青かしら</SPAN><BR>
ここは青いか赤いか？

14．スタイルシート

　CSS(Cascading Style Sheet)はW3Cで定義されたもので既にLevel2が出てLevel3の規格作成が進行中です。スタイルシートはHTMLの論理構造と分離して表現をより良くしようとの、つまり見栄えを良くするために利用するものです。私のサイトのように見栄えを重視しないとところでは従来のHTMLで十分ですが、商業サイトなどでは競争という観点からも積極的に取り入れられています。CSSはHTMLと別ファイルで定義する下記１の方法とHTML内に記述してしまう下記２の二つの方法があります。

1.

<link rel="stylesheet" type="text/css" href="style.css">

2.

<STYLE TYPE="text/css">
H3{color:chocolate}
</STYLE>

13．フォーム(テキストボックスと送信ボタン)

ユーザーID =

<FORM>

ユーザーID = <INPUT TYPE="TEXT" NAME="Field" SIZE="12"><BR>
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="送信">

</FORM>

12．ラジオボタン

A

B

A<INPUT TYPE="RADIO" NAME="Radio" VALUE="Radio" CHECKED><BR><BR>

B<INPUT TYPE="RADIO" NAME="Radio" VALUE="Radio">

11．リンクその２

ここをクリックすると新しいWindowでリンクします。

ここをクリックするとWebMasterにメール送信できます。

<A HREF="http://member.nifty.ne.jp/~ozawa/" target="_blank">ここ</A>をクリックすると新しいWindowでリンクします。<BR>
<A HREF="mailto:yuji.ozawa@usa.net">ここ</A>をクリックするとWebMasterにメール送信できます。<BR>

10．リストボックス

<SELECT NAME="Selection">
<OPTION SELECTED>項目 1</OPTION>
<OPTION>項目 2</OPTION>
<OPTION>項目 3</OPTION>
</SELECT>

９．表

AAA BBB CCC

111 222 333

abc イロハ XYZ

<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="33%">AAA</TD>
<TD WIDTH="33%">BBB</TD>
<TD WIDTH="34%">CCC</TD>
</TR>
<TR>
<TD WIDTH="33%">111</TD>
<TD WIDTH="33%">222</TD>
<TD WIDTH="34%">333</TD>
</TR>
<TR>
<TD WIDTH="33%">abc</TD>
<TD WIDTH="33%">イロハ</TD>
<TD WIDTH="34%">XYZ</TD>
</TR>
</TABLE>

８．リンクとアンカ

ここの左にアンカがあります。

ここをクリックするとozawaに飛びます。

ここをクリックすると上のアンカへ飛びます。

<A NAME="アンカ"></A>ここの左にアンカがあります。<BR>
<A HREF="http://member.nifty.ne.jp/~ozawa/">ここ</A>をクリックするとozawaに飛びます。<BR>
<A HREF="#アンカ">ここ</A>をクリックすると上のアンカへ飛びます<BR>

７．画像表示

これはコスモクロックです。これは枠幅=3で代替テキスト付きの画像です。

<IMG SRC="cosmo_s.gif" ALIGN="LEFT" ALT="これはコスモクロックです。" BORDER="3">

６．特殊文字

"<&>'

"<&>&apos

５．続フォントスタイル

大きめ
小さめ
強調
より強い強調

<BIG>大きめ</BIG><BR>
<SMALL>小さめ</SMALL><BR>
<EM>強調</EM><BR>
<STRONG>より強い強調</STRONG><BR>

４．フォントスタイル

太字です。
斜体です。
~~抹消線です。~~
等幅下線

<B>太字です。</B><BR>
<I>斜体です。</I><BR>
<STRIKE>抹消線です。</STRIKE><BR>
<TT>等幅</TT><BR>
<U>下線</U><BR>

３．横罫線の装飾

デフォルト
サイズ８
幅50%
影なし

デフォルト
<HR ALIGN="CENTER">
サイズ８
<HR ALIGN="CENTER" SIZE="8">
幅50%
<HR ALIGN="CENTER" WIDTH="50%">
影なし
<HR ALIGN="CENTER" NOSHADE>

２．見出しと位置

左にH2表示

中央にH1表示

右にH3表示

<H2 ALIGN="LEFT">左にH2表示</H2>
<H1 ALIGN="CENTER">中央にH1表示</H1>
<H3 ALIGN="RIGHT">右にH3表示</H3>

１．HTMLの基本

これがHTMLです。

<HTML>
<HEAD><TITLE>単純なHTML</TITLE>
</HEAD>
<BODY>
<P>これがHTMLです。</P>
</BODY>
</HTML>

前ページに戻る---> RETURN