HTMLの書き始め、基本

sample

<p>brを使うと改<br>行ができます。</p>

<p>brを使うと改<br />行ができます。</p>

preview

brを使うと改
行ができます。

brを使うと改
行ができます。

explain

改行をするには<br>を使います。
(xhtmlでは<br />と記述します。)

sample

<p><img src="画像URL" align="left" />普通の改<br></p>
<br clear="left" />
<p><img src="画像URL" align="left" />普通の改 <br clear="none">行(上と同じ効果)</p>

preview

普通の改


普通の改
行(上と同じ効果)

explain

<img・・・align="left" />と画像に文字の回りこみの指定をしている場合の改行パターンその1。(align="left"は画像を左に寄せて、文字を右側にという指定)

<br><br clear="none">を使うと画像の横の部分で改行されていきます。

sample

<p><img src="画像URL" align="left" />1.左側の画像・テーブルに対する
<br clear="left">

回りこみ解除</p>

<p><img src="画像URL" align="right" />2.右側の画像・テーブルに対する
<br clear="right">

回りこみ解除</p>

 

<p><img src="画像URL" align="left" />3.どちらの画像・テーブルに対する
<br clear="all">

回りこみ解除</p>

preview

1.左側の画像・テーブルに対する
回りこみ解除

2.右側の画像・テーブルに対する
回りこみ解除

3.右、もしくは左の画像・テーブルに対する
回りこみ解除

explain

<br clear="left">・・・align="left"で左寄せしている画像に対する回りこみ解除

<br clear="right">・・・align="right"で右寄せしている画像に対する回りこみ解除

<br clear="left">・・・align="right"でもalign="left"でもどっちでも解除可

改行させない

sample

<nobr>横幅の指定があると、通常はその制限を越えると自動改行されます。【nobr】タグで囲うとそれが無視されて改行されません。</nobr>

preview

explin

という感じでがつんとずれます。汗

本来このページはCSSで横幅をきっちりしている為、普通は自動改行されます。

<nobr>を使うことによって改行されなくなるため、私のページですとレイアウトが崩れてしまいます。

意図的に「絶対改行させたくない!」という場合に使用します。

入力通りに表示

sample

<p>1.通常は連続したスペースや

改行などは

無視されて表示されます。</p>

<pre>
<p>2.preタグを使うと通常は連続したスペースや

改行などが

無視されなくなります。</p>
<pre>

preview

1.通常は連続したスペースや 改行などは 無視されて表示されます。

2.preタグを使うと通常は連続したスペースや 改行などが 無視されなくなります。

explain

通常はソースに入力した連続したスペースや 改行などは 無視されて表示されます。

<pre>で囲った部分はそれがきちんと反映されるようになります。

通常は「等幅フォント」で表示されます。

上付き文字

sample

2<sup>2</sup>=4

preview

22=4

explain

<sup>で囲った部分は、通常よりも小さく、ちょっとに表示されます。

下付き文字

sample

H<sub>2</sub>O

preview

H2O

explain

<sub>で囲った部分は、通常よりも小さく、ちょっとに表示されます。

取り消し線

sample

<del>文字の上に横棒がひかれます。</del>

preview

文字の上に横棒がひかれます。

explain

だいたいどのブラウザでも文字上に横棒がひかれるようです。

※この要素は場合によってブロックレベル要素にもインライン要素にもなります。

中身にブロックレベル要素を含む場合はブロックレベル要素

含まない場合はインライン要素になります。

テキストスクロール

sample

<marquee>1.HTML│CSSタグ辞書 スクロール動作確認</marquee>

preview

1.HTML│CSSタグ辞書 スクロール動作確認

sample

<marquee behavior="alternate" bgcolor="pink" direction="left" height="100" width="300" vspace="0" hspace="0" loop="5" scrollamount="8">2.HTML│CSSタグ辞書 スクロール動作確認</marquee>

preview

sample

<marquee behavior="slide" bgcolor="pink" direction="right" height="150" width="300" vspace="0" hspace="0" loop="0" scrollamount="6" scrolldelay="80">3.HTML│CSSタグ辞書 スクロール動作確認</marquee>

preview

sample

<marquee behavior="scroll" bgcolor="pink" direction="up" height="300" width="200" vspace="10" hspace="20" loop="2" scrollamount="1" scrolldelay="20" truespeed>4.HTML│CSSタグ辞書 スクロール動作確認</marquee>

preview

sample

<marquee behavior="scroll" bgcolor="pink" direction="down" height="500" width="350" vspace="100" hspace="50" loop="10" scrollamount="50" scrolldelay="800">5.HTML│CSSタグ辞書 スクロール動作確認</marquee>

preview

explain

<marquee></marquee>で囲った部分が右から左へスクロールを繰り返します。

属性を色々つけることで変化をつけることが出来ます。

IEが独自に拡張したものなので、ネットスケープは非対応。他のブラウザでは一部動作しない場合があります。

behavior=" "
scroll(デフォルト)
 
alternate(端にくると逆方向に動きます。)
 
slide(端にくると停止。)
bgcolorr=" "
背景色指定
direction=" "
left(デフォルト)
 
right(右へスクロール)
 
up(上へスクロール)
 
down(下へスクロール)
height=" "
スクロールする範囲の高さ
width=" "
スクロールする範囲の幅
vspace=" "
範囲の上下の余白
hspace=" "
範囲の左右の余白
loop=" "
スクロールするする回数の数字を入力
scrollamount=" "

1コマ毎の移動距離を数字で入力(デフォルトは6)。
数字が大きいと早く、数字が小さいと遅くなり、動きがなめらかです。
scrolldelay=" "

1コマ毎の移動距離を1/1000秒単位の数字で入力(デフォルトは85)。
数字が小さいと早く(考え方例:1秒で1コマすすむ)、数字が大きいと遅くなります(考え方例:10秒かけて1コマすすむ)。
truespeed

scrolldelayで60より小さい値を指定した場合、この属性を指定しないと59、30と指定しても「60」で処理されてしまいます。