HTML タグ 関連解説

ここでは、 HTML タグ 関連解説 に関するカテゴリー情報を紹介しています。
振り仮名(ルビ)を表示したい文字を<ruby>タグで囲むことで、ルビを表示できます。

表示例 ⇒ 漢字かんじ
  記述例 ⇒ <ruby><rb>漢字<rt>かんじ</rt></rb></ruby> (※IE専用)
   ※ <rt>表示したい振り仮名(ルビ)</rt>

ただし、これだと「IE」以外のプラウザで表示した場合には、
漢字かんじ」というような表示となってしまい、不自然な感じとなります。

そこで、「IE」以外のブラウザで閲覧しても不自然にならないように、以下のように記述します。

表示例 ⇒ 漢字(かんじ)
  記述例 ⇒ <ruby><rb>漢字</rb><rp>(</rp><rt>かんじ<rt/><rp>)<rp/></ruby>

このようにすれば、「IE」以外のプラウザで表示した場合には、
漢字(かんじ)」というように振り仮名が( )でかこまれるので、不自然な感じにもなりません。
なお、「IE」では、<rp>〜</rp>の部分は無視されます。


記事の内容にご満足戴けましたならクリックをお願いします ↓
JRANKブログランキング FC2ブログランキング 人気blogランキング!
◎ 画像の周囲に文章を回りこませて表示する方法

 このように、写真やバナーなどの画像を挿入し、そのまま文章を記述すると文章が画像の下に表示されてしまいます。この場合、<img>タグに「align 属性」を追加することで、文章を画像の右や左に回りこませて表示することができるようになります。

文章を画像の右に回りこませて表示 (表示例を兼ねる)

文章を画像の右に回りこませて表示画像の左右に文字を回りこませるには、画像を表す<img>タグに、
画像と文字の位置関係を表す「align 属性」を設定します。
ここでは、「align 属性」に「left」を指定しているので、
文章は画像の右側に回りこんで表示されます。
「left」を「right」にすれば、文章は画像の左側に回りこみます。


●記述例
<img src="画像へのパス(URL)"
alt="" border="0" align="left" style="padding-right:10px;">文章

 ※ align="left" ⇒ 画像を左側に指定する
 ※ style="padding-right:10px;" ⇒ 文章と画像の間隔を開ける

記事の内容にご満足戴けましたならクリックをお願いします ↓
JRANKブログランキング FC2ブログランキング 人気blogランキング!

できるホームページスタイルシート入門―Windows対応
速習Webテクニック スタイルシート 上級レイアウト

タグ : HTML,

時折、自分が書いた文章を、そのままコピーして利用しているブログやWebサイトを見受けます。
苦労して書き上げた文章を、記事引用の表示なく無断で利用されると、あまり気分の良いものではありません。

そこで、コピーされたくない文章を、マウスで選択(ドラッグ)できなくします。(IEのみ有効)

ページ全体の文章を、マウスで選択できなくする方法

<body onselectstart="return false">

部分的に文章を、マウスで選択できなくする方法

<p onselectstart="return false">P 、DIV などブロック要素に適用<p>

実際の適用例

  ドラッグしてみてチョ! ⇒ 無料ブログ テンプレート カスタマイズ方法

 ※ 注意 ; この方法は、IE でのみ有効です。

記事の内容にご満足戴けましたならクリックをお願いします ↓
JRANKブログランキング FC2ブログランキング 人気blogランキング!

リスト要素 dl
dl は Definition List(定義リスト)の略です。
<dl>〜</dl> の間に、<dt>で定義する用語を、<dd>で用語の説明を行います
◎HTMLソース

<dl>
<dt>リスト要素 dl</dt>
<dd>dl は Definition List(定義リスト)の略</dd>
<dt>リスト要素 dt dd</dt>
<dd>dt;定義する用語を表示</dd>
<dd>dd;用語の説明を表示</dd>
</dl>

◎ブラウザ表示例
リスト要素 dl
dl は Definition List(定義リスト)の略
リスト要素 dt dd
dt;定義する用語を表示
dd;用語の説明を表示

固有属性 compact
compact 属性を指定すると、項目名が短い場合、説明が自動的に項目名と同じ行に表示されるようになります。

固有属性 compact
リストを極力コンパクトな形式で表示
dl
固有属性 compact を指定すると、このように表示されます

◎HTMLソース

<dl compact>
<dt>固有属性 compact</dt>
<dd>リストを極力コンパクトな形式で表示</dd>
<dt>dl</dt>
<dd>固有属性 compact を指定すると、このように表示されます</dd>
</dl>

スタイルシートとの組み合わせ
項目名を目立たせたい場合は、スタイルシートを用いると便利です。
例えば、<head>〜</head> の間に次のように指定することにより、項目名を太字で、前の行と 指定したスペースを空けて表示することができます。
<style type="text/css">
<!--
DT { margin-top: 10px; font-weight: bold; }
-->
</style>

◎ブラウザ表示例

font-weight: bold;
項目名を太字で表示
margin-top: 10px;
前の行と 指定したスペースを空けて表示

リスト要素 ul
ul は Unordered List(順序の無いリスト)の略。リストの各項目は li で記述します

※属性
  type;項目番号のタイプを指定
  disc:黒丸
  circle:白丸
  square:四角

◎HTMLソース

<ul>
<li>リスト要素 ul(順序の無いリスト)
<li>リストの各項目は li で記述
<li>デフォルトでは disc:黒丸 で表示
</ul>

<ul type="disc">
<li>リスト要素 ul(順序の無いリスト)
<li>type属性に「 type="disc"」を指定
</ul>

<ul type="circle">
<li>リスト要素 ul(順序の無いリスト)
<li>type属性に「 type="circle"」を指定
</ul>

<ul type="square">
<li>リスト要素 ul(順序の無いリスト)
<li>type属性に「 type="square"」を指定
</ul>

◎ブラウザ表示例
  • リスト要素 ul(順序の無いリスト)
  • リストの各項目は li で記述
  • デフォルトでは disc:黒丸 で表示
  • リスト要素 ul(順序の無いリスト)
  • type属性に「 type="disc"」を指定
  • リスト要素 ul(順序の無いリスト)
  • type属性に「 type="circle"」を指定
  • リスト要素 ul(順序の無いリスト)
  • type属性に「 type="square"」を指定
リスト要素 ol
ol は Ordered List(順序のあるリスト)の略。リストの各項目は li で記述します

※属性
  start;項目番号の開始番号を指定
  type;項目番号のタイプを指定
    1 - 1, 2, 3, 4, 5, ..
    a - a, b, c, d, e, ..
    A - A, B, C, D, E, ...
    i - i, ii, iii, iv, v, ...
    I - I, II, III, IV, V, ...

◎HTMLソース

<ol>
<li>リスト要素 ol(順序のあるリスト)
<li>リストの各項目は li で記述
<li>デフォルトでは英数字で表示
</ol>

<ol type="a">
<li>リスト要素 ol(順序のあるリスト)
<li>type属性に「type="a"」を指定
</ol>

<ol type="A">
<li>リスト要素 ol(順序のあるリスト)
<li>type属性に「type="A"」を指定
</ol>

<ol type="i">
<li>リスト要素 ol(順序のあるリスト)
<li>type属性に「type="i"」を指定
</ol>

<ol type="I" start="3">
<li>リスト要素 ol(順序のあるリスト)
<li>type属性に「type="I"」を指定し、start属性に「start="3"」を指定
</ol>

◎ブラウザ表示例
  1. リスト要素 ol(順序のあるリスト)
  2. リストの各項目は li で記述
  3. デフォルトでは英数字で表示
  1. リスト要素 ol(順序のあるリスト)
  2. type属性に「type="a"」を指定
  1. リスト要素 ol(順序のあるリスト)
  2. type属性に「type="A"」を指定
  1. リスト要素 ol(順序のあるリスト)
  2. type属性に「type="i"」を指定
  1. リスト要素 ol(順序のあるリスト)
  2. type属性に「type="I"」を指定し、start属性に「start="3"」を指定