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

informatics/html/html_this_site

2018/5/30 更新


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

基本的には ココナラ を通じた記事の募集でこのページを訪れる人が多いと思います。このページでは、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 タグは限られています。以下、このサイトで使っている html タグの基本的な使い方について解説します。


広告

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

基本的な使い方

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


  1. html タグは全て半角の英字で書く。日本語の全角フォントは使えない。
  2. < と > で囲まれた部分が html タグとして認識される。そのため、本文に < と > を使うとエラーになってしまう。
  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 タグを表にします。


必ず加えてほしいタグ

以下の表に示したタグは、ボーナスを受け取るために必須の要素です。

段落タグ
<p></p>

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

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

<p>このページでは、ウェブサイト作成のための言語である html について、このサイトを作るために使っているタグ、ルールなどを中心にまとめています。</p>
<p>基本的にはココナラを通じた記事の募集でこのページを訪れる人が多いと思います。このページでは、html 形式で記事を提出し、ボーナスをもらうために必要最低限の情報のみを記載していますので、その目的で活用してください。 </p>

見出しタグ
<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>


以上の 3 つが必須のタグです。改行タグは不要な場合もあるかもしれませんが、html 形式で提出する場合は、段落と見出しをつけるようにお願い致します。


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

以下のようなタグを知っておくと、見やすい記事が簡単に書けるようになります。

記号

本文中に < という記号が出てくると、続く部分は 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> を使います。


もう少し高度なタグ

あなたが html に慣れていなければ、あまり複雑なページを作らず、内容を充実させることに時間を使って頂きたいと思っています。その他の html タグについては、リンクのみを張っておきます。

  • 表を作りたい → table タグ
  • 画像を入れたい → img タグ。まだ対応するページなし。管理人にコンタクトしてください。
  • リンクを張りたい → リンクの張り方。自分のブログへのリンクなども歓迎。

広告

実際に html ソースを見る

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


自分用メモ

css での設定などを忘れないようにメモ。主に自分で設定した class について。

  • ul および ol の 箇条書き は、次の段落との間にスペースがない。約 1 行分の padding-bottom がある class = "pd" がある。原則として目次などは class なし、文章中では pd を使う。
  • ul および ol には、項目の間隔が広い class = "long" がある。箇条書きの各項目が数行にわたるときは、これを使った方が見やすい。
  • 段落タグ p の下には約 1 行分の padding があるが、これがない class = "npd" がある。主に 原著論文 の紹介などで、1 行の簡単な紹介後に項目を列挙するときはこれを使う。
  • pitem というタグを自作していたが、これは class = "npd" へ切り替えていく。red と ats をどうするかは考え中。

コメント欄

一言コメントをどうぞ! (基本500字まで - 100字のページもあるかも)


References