Skip to content

Reference – Basic HTML, Tag, List, etc.

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タグです。

<h6>This is the H6 tag. / これはH6タグです。</h6>
  ブラウザ上の表示/Displayed in the browser as   
This is the H6 tag. / これはH6タグです。
<a href="#" class="btn2">btn2</a>
  ブラウザ上の表示/Displayed in the browser as   


水平線（区切り線）を引くには/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

テーブルの書き方/Creating Lists

全体は<table></table>で囲み、行のカタマリは<tr></tr>で、表の見出し文字は<th></th>で、各セルは<td></td>ではさみます。 
<table>
  <tr>
    <th>Fruit</th><th>Color</th>
  </tr>
  <tr>
    <td>Banana</td><td>Yellow</td>
  </tr>
  <tr>
    <td>Apple</td><td>Red</td>
  </tr>
</table>
  ブラウザ上の表示/Displayed in the browser as   
FruitColor
BananaYellow
AppleRed
以下は見出し文字が縦の場合。 
<table>

<tr>
<th>Fruit</th><td>Banana</td><td>Apple</td>
</tr>
<table>
<tr>
<th>Color</th><td>Yellow</td><td>Red</td>
</tr>
</table>
  ブラウザ上の表示/Displayed in the browser as   
FruitBananaApple
ColorYellowRed
<table>にclass=”table2″を加えると、枠線のない以下のようなテーブルになります。 
<table class="table2">
  <tr>
    <th>Fruit</th><th>Color</th>
  </tr>
  <tr>
    <td>Banana</td><td>Yellow</td>
  </tr>
  <tr>
    <td>Apple</td><td>Red</td>
  </tr>
</table>
  ブラウザ上の表示/Displayed in the browser as   
FruitColor
BananaYellow
AppleRed


リンク/Creating Link

<a href="#" class="btn">Learn More about Japan Foundation New York</a>
  ブラウザ上の表示/Displayed in the browser as   
Learn More about Japan Foundation New York 
<a href="#">Learn More about Japan Foundation New York <i class="fas fa-angle-right"></i></a>
  ブラウザ上の表示/Displayed in the browser as   
Learn More about Japan Foundation New York