本文の開始

無料ホームページ作成 HTML入門 y-labo - レイアウトを設定するHTML

無料ホームページ作成HTML情報。無料でWeb/HP製作。ホームページ入門から、
HTML・CSS・SEO対策・フリーソフトから無料テンプレートまで。

格安ホームページ制作激安HPWeb製作のy-labo.net(わいらぼ、ワイラボ)

  • ホームページ制作費を安く・格安・激安!
  • ホームページ制作を早く!
  • でもかっこいいホームページにカスタマイズ
  • SEO対策でアクセスアップ
  • ホームページ制作後も安心サポート
  • 自分でもホームページを修正したい

2-4)レイアウトを設定するHTML HTML入門

無料ホームページ作成情報 トップ > HTML入門 > 2-4)レイアウトを設定するHTML

 

ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。

レイアウトを設定するHTMLについて

HTMLで文字のレイアウトを設定します。
画像のレイアウトは「2-5)画像を設定するHTML」を参照してください。

このページで最終的に作成するページの見本はこちらです。

段落タグ <p>タグ / 改行タグ <br>タグ

文字を改行するためには2つの方法があります。
<p>タグは段落タグで、改行してその後行間を広く取ります。
<br>タグは改行のタグで、単純に改行をします。行間は取りません。
ワープロソフトなどを使用している方は、<br>タグのほうが使いやすいかもしれませんが、「SEO対策」で、ロボット型検索エンジンが読みやすくするために、この<p>タグと次の項目の<h>タグを使用して説明したほうが効果的になります。

見本画像

段落タグ<p>タグ

文字を段落で表示します。
段落と段落の間には広い行間が表示されます。
行間を調整するにはは「CSS(スタイルシート)」で設定する必要があります。
HTML上で改行しても、ホームページでは改行されなません。

例)
<p>段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明
段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明
段落の説明段落の説明段落の説明。</p>


段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明 段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明 段落の説明段落の説明段落の説明。

改行<br>タグ

文字を改行します。
<br>タグで改行した場合は行間は広がりません。

例)
<p>段落の説明段落の説明段落の説明段落の説明!<br>
段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明
段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明
段落の説明段落の説明段落の説明段落の説明。<br>
段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明
段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明
段落の説明。</p>


段落の説明段落の説明段落の説明段落の説明!
段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明 段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明 段落の説明段落の説明段落の説明段落の説明。
段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明段落の説明 段落の説明段落の説明段落の説明段落の説明段落の説明 段落の説明。

ブラウザでプレビュー

ブラウザでプレビューすると以下のように表示されます。(赤い字「<br>タグ」は表示されません。)

見本画像

このページのTOPへ

見出しタグ <h>タグ

<h>タグは見出しを設定するタグです。

見本画像

見出しは、見出し1〜見出し6まで設定でき、それぞれ「<h1></h1>」〜「<h6></h6>」となります。
見出しとは、アウトライン表示とも呼び、レベル付けして表示する機能です。「SEO対策」で、見出しはキーワードのような役割をしますので、検索エンジンに引っ掛けたいキーワードを見出しにすると良いでしょう。
段落と同様に、行間を調整するにはは「CSS(スタイルシート)」で設定する必要があります。
下の例では、「国」→「都道府県」→「市町村」というレベルを、見出し2〜見出し4で表しています。
注意が必要なのは「見出し1 」です。見出し1はそのページのタイトルのようなもので、ページの中に1つしか指定してはいけません。

例)
<h1>レイアウトタグの説明</h1>
<h2>見出し2(日本)</h2>
<h3>見出し3(東京都)</h3>
<h4>見出し4(新宿区)</h4>
<h4>見出し4(三鷹市)</h4>
<h3>見出し3(千葉県)</h3>
<h3>見出し3(神奈川県)</h3>

ブラウザでプレビュー

ブラウザでプレビューすると以下のように表示されます。

見本画像

このページのTOPへ

中央揃え・右揃え・左揃えを設定 align属性

文字を中央や右・左に配置する機能です。配置を変更するにはいくつか方法があります。

見本画像

<center>タグを使用して中央揃え

<center>タグを使用して中央揃えすることができます。
しかし、将来的に使用されなくなる予定ですので、使用しないほうが良いでしょう。

例)
<center>中央揃え</center>


中央揃え

<div align="">で配置を設定

<div>タグを使用して配置を設定します。

例)
<div align="left">左揃え</div>
<div align="center">中央揃え</div>
<div align="right">右揃え</div>


左揃え
中央揃え
右揃え

<p align="">・<h* align="">で配置を設定

<p>タグや<h*>タグを使用している場合は、直接「align」で設定することが可能です。

例)
<p align="left">左揃え</p>
<p align="center">中央揃え</p>
<p align="right">右揃え</p>
<h3 align="center">見出し3(埼玉県)</h3>


左揃え

中央揃え

右揃え

見出し3(埼玉県)

ブラウザでプレビュー

ブラウザでプレビューすると以下のように表示されます。

見本画像

このページのTOPへ

箇条書きと段落番号を設定 <ul>タグ <ol>タグ <li>タグ 他

箇条書きや段落番号を設定します。
単純に列挙したい場合などに便利です。
見出しのように「SEO対策」にも効果があります。

見本画像

<ul>タグ・<li>タグで記号付き箇条書き

<ul>タグ・<li>タグで記号付き箇条書きを設定します。
<ul>〜</ul>タグで箇条書き全体を囲みます。箇条書きを構成する各項目は<li>〜</li>タグで囲みます。
<li>〜</li>タグには。「type=""」でスタイルを指定することができます。
・何も指定せずに省略すると「●」
・「disc」を指定しても「●」
・「circle」で「○」
・「square」で「■」
と設定できます。

例)
<ul>
<li>東京都</li>
<li>神奈川県</li>
<li>千葉県</li>
<li>埼玉県</li>
<li type="disc">群馬県</li>
<li type="circle">栃木</li>
<li type="square">茨城</li>
</ul>


  • 東京都
  • 神奈川県
  • 千葉県
  • 埼玉県
  • 群馬県
  • 栃木
  • 茨城

<ol>タグ・<li>タグで番号付き箇条書き

<ol>タグ・<li>タグで番号付き箇条書きを設定します。
<ol>〜</ol>タグで箇条書き全体を囲みます。箇条書きを構成する各項目は<li>〜</li>タグで囲みます。
<li>〜</li>タグには。「type=""」でスタイルを指定することができます。
何も指定せずに省略すると「1,2,3・・・」
・「1,2,3・・・」を指定しても「1,2,3・・・」
・「a」で「a,b,c・・・」
・「A」で「A,B,C・・・」
・「i」で小文字のローマ数字「@,A,Bi・・・」
・「I」で大文字のローマ数字「T,U,V・・・」
と設定できます。

例)
<ol>
<li>東京都</li>
<li>神奈川県</li>
<li type="1">千葉県</li>
<li type="a">埼玉県</li>
<li type="A">群馬県</li>
<li type="i">栃木</li>
<li type="I">茨城</li>
</ol>


  1. 東京都
  2. 神奈川県
  3. 千葉県
  4. 埼玉県
  5. 群馬県
  6. 栃木
  7. 茨城

<dl>タグ・<dt>タグ・<dd>タグで説明付き箇条書き

<dl>タグ・<dt>タグ・<dd>タグで説明付き箇条書きを設定します。
<dl>〜</dl>タグで箇条書き全体を囲みます。箇条書きを構成する各項目は<dt>〜</dt>タグで囲みます。また、各項目の説明文は<dd>〜</dd>タグで囲みます。

例)
<dl>
<dt>東京都</dt>
<dd>東京都の説明東京都の説明東京都の説明東京都の説明東京都の説明。</dd>
<dt>神奈川県</dt>
<dd>神奈川県の説明神奈川県の説明神奈川県の説明神奈川県の説明。</dd>
<dt>千葉県</dt>
<dd>千葉県の説明千葉県の説明千葉県の説明千葉県の説明千葉県の説明。</dd>
<dt>埼玉県</dt>
<dd>埼玉県の説明埼玉県の説明埼玉県の説明埼玉県の説明埼玉県の説明。</dd>
<dt>群馬県</dt>
<dd>群馬県の説明群馬県の説明群馬県の説明群馬県の説明群馬県の説明。</dd>
<dt>栃木県</dt>
<dd>栃木県の説明栃木県の説明栃木県の説明栃木県の説明栃木県の説明。</dd>
<dt>茨城県</dt>
<dd>茨城県の説明茨城県の説明茨城県の説明茨城県の説明茨城県の説明。</dd>
</dl>


東京都
東京都の説明東京都の説明東京都の説明東京都の説明東京都の説明。
神奈川県
神奈川県の説明神奈川県の説明神奈川県の説明神奈川県の説明。
千葉県
千葉県の説明千葉県の説明千葉県の説明千葉県の説明千葉県の説明。
埼玉県
埼玉県の説明埼玉県の説明埼玉県の説明埼玉県の説明埼玉県の説明。
群馬県
群馬県の説明群馬県の説明群馬県の説明群馬県の説明群馬県の説明。
栃木県
栃木県の説明栃木県の説明栃木県の説明栃木県の説明栃木県の説明。
茨城県
茨城県の説明茨城県の説明茨城県の説明茨城県の説明茨城県の説明。

ブラウザでプレビュー

ブラウザでプレビューすると以下のように表示されます。

見本画像

このページのTOPへ

このページのTOPへ

格安です!ホームページ制作をご依頼ください!!

ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ(SEO対策)などわかりにくいことがあればお気軽にお問い合わせください。

このページのTOPへ

格安ホームページ制作依頼

メールでご相談

メールでのお問い合わせは365日24時間受付中です。

お電話でのご相談

090-3401-6229(直通)

【対応時間】

平日のみ(土日祝日はお休み)
午前11時〜午後7時頃

※留守番電話にメッセージを残して頂ければ、対応時間内にこちらより折り返します。

ページの終了