コンテンツへスキップ

Reference

HTMLタグの基本的な書き方/Writing basic HTML tags

<開始タグ>～</終了タグ>で内容を囲めば、 タグで囲んだ内容のデザインを指定できます。
<start tag>text</end tag> is the basic format of most HTML tags. Contents are placed into the text section.

最も頻繁に使われるのは、通常の文章のまとまり（paragraph）を表示するための<p>タグと文章を改行（break)するための<br>タグです。
The most frequently used tags when editing text are <p> and <br>.

<p>通常の文章は、このようにして囲みます。ひとつの段落となります。/ This is a paragraph.</p>

  ブラウザ上の表示/Displayed in the browser as   

通常の文章は、このようにして囲みます。ひとつの段落となります。/ This is a paragraph. 

<p>このようにすると、<br>改行されます。</p>

<p>The <br> tag defines a break</p>

  ブラウザ上の表示/Displayed in the browser as   

このようにすると、
改行されます。
The
tag defines a break.

文章入力に基本的に必要なタグは、この２つだけです。
These two are the most fundamental tags for editing passages.
文章の段落（パラフラフ）の最初と最後を<p></p>で囲み、改行したい箇所に<br>を入れます。
Define full paragraphs with <p></p> and use <br> when there is a break.

見出しなど、文章に変化をつけたいときは/Titles

<h>タグは、主に見出しで使うタグです。<h1>や<h2>といったように数字とあわせて使います。
<h> tags are used to define titles. Different title styles are marked with numbers, such as <h1> and <h2>
このサイトでは<h>タグを以下のようにデザインしています。用途に応じて使い分けてください。
On this website, title styles are set up as follows. They can be used in different situations.

<h1>This is H1 tag. / これはH1タグです。</h1>

  ブラウザ上の表示/Displayed in the browser as   

This is the H1 tag. / これはH1タグです。

<h2>This is the H2 tag. / これはH2タグです。</h2>

  ブラウザ上の表示/Displayed in the browser as   

This is the H2 tag. / これはH2タグです。

<h3>This is the H3 tag. / これはH3タグです。</h3>

  ブラウザ上の表示/Displayed in the browser as   

This is the H3 tag. / これはH3タグです。

<h4>This is the H4 tag. / これはH4タグです。</h4>

  ブラウザ上の表示/Displayed in the browser as   

This is the H4 tag. / これはH4タグです。

<h5>This is the H5 tag. / これはH5タグです。</h5>

  ブラウザ上の表示/Displayed in the browser as   

This is the H5 tag. / これはH5タグです。
<h6>This is the H6 tag. / これはH6タグです。</h6>

  ブラウザ上の表示/Displayed in the browser as   

This is the H6 tag. / これはH6タグです。
<h7>This is the H7 tag. / これはH7タグです。</h6>

  ブラウザ上の表示/Displayed in the browser as   

This is the H7 tag. / これはH7タグです。 

<h8>This is the H8 tag. It is suitable for image captions. / これはH8タグです。写真などのキャプションに良いスタイルです。</h8>

  ブラウザ上の表示/Displayed in the browser as   

This is the H8 tag. It is suitable for image captions. / これはH8タグです。写真などのキャプションに良いスタイルです。

 

ボタンの書き方

以下のスクリプトで、ボタン表示ができます。通常はリンク／ジャンプ先のURLを含みます。
A button can be set up with the following code. Usually, an URL to which the button links should be included.

<a href="http://www.mysite.com" class="btn1">btn1</a>

  ブラウザ上の表示/Displayed in the browser as   

btn1 (This button will link to http://www.mysite.com)

<a href="#" class="btn2">btn2</a>

  ブラウザ上の表示/Displayed in the browser as   

btn2 (This button does not include a link.)

 

水平線（区切り線）を引くには/Creating Horizontal Lines

たとえば段落のあとに水平線をひくには、<hr>を加えます。<hr>は閉じる必要がありません。
<hr> creates a horizontal line. There is no need for an end tag.

<hr>

  ブラウザ上の表示 /Displayed in the browser as  

リストの書き方/Creating Lists

リストは、<ul>と<li>を利用します。リストは<ul>で始めて、</ul>で閉じます。
Lists are created by <ul> and <li>. Firstly, define a full (empty) list with <ul></ul>.

各リスト項目は<li>で始めて、</li>で閉じます。
Then, define each list item with </li>.

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
</ul>

  ブラウザ上の表示/Displayed in the browser as   

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5