Ultrabem サイトで使っている html について

UB3/informatics/html/html_this_site

このページの最終更新日: 2023/02/14


このページでは、ウェブサイト作成のための言語である html について、このサイトを作るために使っているタグ、ルールなどを中心にまとめています。

ココナラ を通じて募集した記事、寄稿記事などを作って頂くときのガイドラインとしてご利用下さい。また、複雑な効果のさいウェブサイトをとりあえず作ってみるときにも役に立つと思います。

もし html やウェブサイト作成に興味をもった場合は、本サイトに html の基礎 などの解説ページがあるので、そちらを参照してください。


  1. 概要: 「html 形式」とは?
    • 基本ルール
  2. このサイトで使っている html タグ
    • 基本的なタグ
    • オプションとして使えるタグ
  3. 実際に html ソースを見る
  4. 自分用メモ

広告

概要: 「html 形式」とは?

私たちが普段みているウェブサイトでは、見た目と実際のファイルの中身が違っています。たとえば次の文章です。

中央揃えの文章です。


ファイルの中身には、表示されている文章のほかに「段落を作る」と「中央揃えにする」という情報 (命令と言ってもいいかもしれません) が書き込まれています。これらの命令を含めたファイルの中身は、次のようになっています。

<div align="center"><p>中央揃えの文章です。</p></div>

ここでは <div align="center"> という文字列が中央揃えを、<p> という文字列が段落を表しています。</div> と </p> はそれぞれの命令に対して適用範囲を指定する文字列です。

このような < と > の間に入る命令を html タグ といいます。

html タグの種類は非常にたくさんありますが、私は素人なので、このサイトで使っている html タグは限られています。以下、このサイトで使っている html タグの基本的な使い方について解説します。


基本ルール

これから解説する html タグには、共通したルールがあります。まず、それらのルールについてまとめておきます。


  1. html タグは全て半角の英字で書く。日本語の全角フォントは使えない。
  2. < と > で囲まれた部分が html タグとして認識される。そのため、本文に < と > を使うとエラーになってしまう。同様に、( ) [ ] などのかっこも使わない方がよい。→ 記号を使いたい場合は html 記号・特殊文字のコード表 のページに従って、&#41; のように記号で書く。
  3. 原則として、命令の開始タグと終了タグが必要である。開始タグは <p> のように < と > の間に特定の文字を入れる。終了タグは、</p> のように同じ文字の前に / を入れる。
  4. html タグには 属性 を追加できる。上の例では、<div align="center"> のうち <div> の部分が実際の html タグであり、align="center" が属性。タグと属性の間には半角スペースが入る。
    • align="center" は単なる属性なので、終了タグは </div> のみで良い。
    • たとえば align="right" とすると、上の文章は右揃えになる。
  5. 順番も重要。上の例にはまず <div> タグがあり、次に <p> タグがある。この場合は、最初に <p> タグを </p> で閉じてから </div> で <div align="center"> を閉じるという順番になる。

あとは、実例をみていくのが早いと思います。このサイトで使っている html タグを表にします。

このサイトで使っている html タグ


基本的なタグ

段落タグ
<p></p>

通常の段落タグ

全ての文章が、段落ごとに <p> と </p> の間に入っています。<p> と </p> の間にある文章が一段落として扱われます。段落の間には、一定のスペースが自動的にできるようになっています。

日本語と英単語の間には、見やすいように半角スペースをいれています。これは執筆者の好みによって異なるかもしれません。


スペースの狭い段落タグ

段落の下にスペースを入れたくない場合は、クラスを使って <p> </p> のかわりに <p class=npd> </p> とします。npd は no padding の略です。

実例

ページの一番上の部分は、以下のように記述されています。

<p>このページでは、ウェブサイト作成のための言語である html について、このサイトを作るために使っているタグ、ルールなどを中心にまとめています。</p>
<p><a href="https://px.a8.net/svt/ejp?a8mat=2TOYFQ+3NKVSA+2PEO+5YJRM" target="_blank" rel="nofollow">ココナラ </a> を通じて募集した記事、寄稿記事などを作って頂くときのガイドラインとしてご利用下さい。</p>

リンク
<a></a>

上の例にある <a href="https://px.a8.net/svt/ejp?a8mat=2TOYFQ+3NKVSA+2PEO+5YJRM" target="_blank" rel="nofollow">ココナラ </p> という部分が、ウェブサイトに欠かせないリンクです。

タグは a であり、href="" の " と " の間に、リンク先の URL を入れます。rel="nofollow" はちょっと細かいオプションなので、詳細は リンクの張り方 のページを参照して下さい。

見出しタグ
<h2> </h2>
<h3> </h3>

このサイトでは大小 2 種類の見出しを使っています。Reference も提出してもらうことになっているので、Reference セクションは少なくとも大きな見出しを使って区切ってもらう必要があります。

そのほか、内容に応じて見出しを使い、見やすい記事を作ってください。

実例: 下に二つ見出しがあります。


大きな見出し

小さな見出し


これらの見出しは、実際には次のように記述されています。

<h2>大きな見出し</h2>
<h3>小さな見出し</h3>

見出しのあとは自動的に改行され、一定のスペースが空きます。

改行タグ
<br />

詳細は こちら

段落タグと見出しタグの後には、自動的に改行が入ります。しかし、文章が詰まりすぎていると読みにくいので、それ以外にも改行を入れたい場合があります。



そんなときには <br /> を使います。これは特殊な html タグで、開始と終了がありません。<br /> と書くとその部分で強制改行になります。

実例: 上の段落の間が広く開いていますが、次のように 2 つの <br /> が間に挟まっています。

<p>段落タグと見出しタグの後には、自動的に改行が入ります。しかし、文章が詰まりすぎていると読みにくいので、それ以外にも改行を入れたい場合があります。</p><br /><br />
<p>そんなときには <br /> を使います。これは特殊な html タグで、開始と終了がありません。<br /> と書くとその部分で強制改行になります。</p>


オプションとして使えるタグ

記号

本文中に < という記号が出てくると、続く部分は html タグとして認識されてしまい、本文がちゃんと表示されなくなります。

上の段落は、html では次のように記述されています。

<p>本文中に &lt; という記号が出てくると、続く部分は html タグとして認識されてしまい、本文がちゃんと表示されなくなります。</p>

つまり < を表示したいときには &lt; という文字列を打つということです。もちろん全て半角です。> は &gt; で表示されます。

その他の記号は html 記号・特殊文字のコード表 にあります。とくにかっこ ( と ) はそれぞれ &#40; と &#41; で表されるので、これらを使って頂けると助かります。

かっこの記号が本文中にあっても < のように直ちにエラーにはなりませんが、あまり好ましくないとされています。

文字の強調

html 記号・特殊文字のコード表 に説明があります。

段落タグの中で、<strong>太字にする</strong> と書くと このように太字になります。よく使うのは以下です。

  1. <i>斜体にする</i> → 斜体にする
  2. <u>アンダーライン</u> → アンダーライン
  3. <sup>上付きにする</sup> → 上付きにする
  4. <sub>下付きにする</sub> → 下付きにする
  5. <red>赤で強調</red> → 赤で強調
  6. <ats>緑で少し強調</ats> → 緑で少し強調

red と ats は私が設定したオリジナルタグなので、このサイト以外では使えません。

箇条書き

番号付きの箇条書きと、点の箇条書きがあります。

番号付きの場合、<ol></ol> の中に <li></li> で項目を作るという形になります。上の欄の番号付き箇条書きの 1 - 3 番は、次のように記述されています。

<ol>
<li>&lt;i&gt;斜体にする&lt;i&gt; &rarr; <i>斜体にする</i></li>
<li>&lt;u&アンダーライン&lt;u&gt; &rarr; <u>アンダーライン</u>
<li>&lt;sup&上付きにする&lt;sup&gt; &rarr; <sup>上付きにする</sup>
</ol>


</i> の 終了タグ </li> は省略可能です。参考のため「斜体にする」の項目だけ </li> を入れてあります。番号は自動的につきます。

html タグとしての < と、本文中の記号としての < の違いにも注意してください。&rarr; は右向き矢印を表すコードです。

点で箇条書きにするときは、<ol></ol> のかわりに <ul></ul> を使います。

<ol class="pd"></ol> または <ul class="pd"></ul> とすると、箇条書きの後に少しスペースが入ります。段落が続くときによく使っています。

table タグ のページを参照して下さい。

画像

更新予定。<img src=""></img> として、" と " の間に画像ファイルのパスを入れます。


広告

実際に html ソースを見る

Safari, Google Chrome などのブラウザでは、メニューのどこかに「ソースを表示」のような項目があります。これで閲覧中のページの html ソースを見ることができます。


広告

References

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。