path: root/files/ja/web/guide/css/getting_started/layout/index.html

---
title: Layout
slug: Web/Guide/CSS/Getting_started/Layout
tags:
  - CSS
  - 'CSS:Getting_Started'
translation_of: Learn/CSS/CSS_layout
translation_of_original: Web/Guide/CSS/Getting_started/Layout
---
<div>
 {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}</div>
<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。</p>
<h2 class="clearLeft" id="レイアウトについて">レイアウトについて</h2>
<p>CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。</p>
<p>多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。</p>
<p>このページでは、あなたが試せるような簡単な技法をいくつか述べます。</p>
<h3 id="Document_structure" name="Document_structure">文書の構造</h3>
<p>文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。</p>
<p>お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例</div>
 <p>サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。</p>
 <p>セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。</p>
 <p>この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、<code>id</code> 属性で見分けられます。</p>
 <pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
&lt;div id="numbered"&gt;
  &lt;p&gt;Lorem ipsum&lt;/p&gt;
  &lt;p&gt;Dolor sit&lt;/p&gt;
  &lt;p&gt;Amet consectetuer&lt;/p&gt;
  &lt;p&gt;Magna aliquam&lt;/p&gt;
  &lt;p&gt;Autem veleum&lt;/p&gt;
&lt;/div&gt;
</pre>
 <p>これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。</p>
 <pre class="brush:css">ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
}
</pre>
 <p>結果は次のようになります:</p>
 <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
  <tbody>
   <tr>
    <td>
     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
     <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
      <ul style="">
       <li>Arctic</li>
       <li>Atlantic</li>
       <li>Pacific</li>
       <li>Indian</li>
       <li>Southern</li>
      </ul>
     </div>
     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
     <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
      <p><strong>1: </strong>Lorem ipsum</p>
      <p><strong>2: </strong>Dolor sit</p>
      <p><strong>3: </strong>Amet consectetuer</p>
      <p><strong>4: </strong>Magna aliquam</p>
      <p><strong>5: </strong>Autem veleum</p>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<h3 id="Size_units" name="Size_units">サイズの単位（Size units）</h3>
<p>このチュートリアルではこれまで、サイズを pixels (<code>px</code>) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。</p>
<p>多くの用途で、サイズをパーセンテージか ems (<code>em</code>) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例</div>
 <p>次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。</p>
 <p>右辺のボーダーは ems 単位のサイズで定義されています。</p>
 <p>ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:</p>
 <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
  <tbody>
   <tr>
    <td>
     <div style="">
      僕の大きさを変えてお願い</div>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<div class="tuto_details">
 <div class="tuto_type">
  さらに詳しく</div>
 <p>その他のデバイスには、これ以外の長さの単位が適しています。</p>
 <p>これについては、このチュートリアルの後半のページにもっと情報があります。</p>
 <p>すべての利用可能な値と単位の詳細は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> をご覧ください。</p>
</div>
<h3 id="Text_layout" name="Text_layout">テキストのレイアウト</h3>
<p>2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。</p>
<dl>
 <dt>
  {{cssxref("text-align")}}</dt>
 <dd>
  文字寄せを行います。次のうちいずれかの値を使います: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd>
 <dt>
  {{cssxref("text-indent")}}</dt>
 <dd>
  指定した幅でインデントを行います。</dd>
</dl>
<p>これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例: 見出しを中央寄せする</div>
 <pre class="brush:css">h3 {
  border-top: 1px solid gray;
  text-align: center;
}
</pre>
 <p>表示結果:</p>
 <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
  <tbody>
   <tr>
    <td>
     <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p>
    </td>
   </tr>
  </tbody>
 </table>
 <p>HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。</p>
</div>
<h3 id="Floats" name="Floats">フロート（Floats、浮動体）</h3>
<p>{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。</p>
<p>文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例</div>
 <p>サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。</p>
 <p>見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。</p>
 <pre class="brush:css">ul,
#numbered { float: left; }
h3 { clear: left; }
</pre>
</div>
<p>結果は次のようになります:</p>
<table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
 <tbody>
  <tr>
   <td>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
     <ul style="">
      <li>Arctic</li>
      <li>Atlantic</li>
      <li>Pacific</li>
      <li>Indian</li>
      <li>Southern</li>
     </ul>
    </div>
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
     <p><strong>1: </strong>Lorem ipsum</p>
     <p><strong>2: </strong>Dolor sit</p>
     <p><strong>3: </strong>Amet consectetuer</p>
     <p><strong>4: </strong>Magna aliquam</p>
     <p><strong>5: </strong>Autem veleum</p>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<p>（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）</p>
<h3 id="Positioning" name="Positioning">位置取り</h3>
<p>{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。</p>
<p>これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。</p>
<dl>
 <dt>
  <code>relative</code></dt>
 <dd>
  相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。</dd>
 <dt>
  <code>fixed</code></dt>
 <dd>
  固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。</dd>
 <dt>
  <code>absolute</code></dt>
 <dd>
  絶対的。要素は祖先要素の内、直近のポジショニング要素 (<code>position</code> プロパティの値が <code>relative</code>、<code>fixed</code> 、<code>absolute</code> の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には <code>position:relative</code> を用いる事により親要素自身への影響を回避できます。</dd>
 <dt>
  <code>static</code></dt>
 <dd>
  静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。</dd>
</dl>
<p><code>position</code> プロパティ（<code>static</code> を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 、 <code>left</code> 、 <code>width</code> 、 <code>height</code> これにより、要素の現れる場所やおそらくはそのサイズも指定します。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例: 複数の要素を重ねる</div>
 <p>2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:</p>
 <pre class="brush:html">&lt;div id="parent-div"&gt;
  &lt;p id="forward"&gt;/&lt;/p&gt;
  &lt;p id="back"&gt;\&lt;/p&gt;
&lt;/div&gt;
</pre>
 <p>スタイルシートで、親要素の <code>position</code> を <code>relative</code> にします。移動量を指定する必要はありません。子要素の <code>position</code> を <code>absolute</code> にします。</p>
 <pre class="brush:css">#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin: 0; /* 要素の周囲のマージンを 0 に */
  top: 0; /* 上部からの距離 */
  left: 0; /*  左部からの距離 */
}

#forward {
  color: blue;
}

#back {
  color: red;
}
</pre>
 <p>結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。</p>
 <div style="position: relative; left: .33em; font: bold 300% sans-serif;">
  <p style="position: absolute; margin: 0; top: 0; left: 0; color: blue;">/</p>
  <p style="position: absolute; margin: 0; top: 0; left: 0; color: red;">\</p>
 </div>
 <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;">
  <tbody>
   <tr>
    <td> </td>
   </tr>
  </tbody>
 </table>
</div>
<div class="tuto_details">
 <div class="tuto_type">
  さらに詳しく</div>
 <p>位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: <a href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> と <a href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a> にあります。</p>
 <p>多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。</p>
</div>
<h2 id="Action.3A_Specifying_layout" name="Action.3A_Specifying_layout">実習: レイアウトの定義</h2>
<ol>
 <li>サンプル文書 <code>doc2.html</code> と スタイルシート <code>style2.css</code> を、上の『<a href="#Document_structure" title="#Document structure"><strong>文書の構造</strong></a>』と『<a href="#Floats" title="#Floats"><strong>フロート</strong></a>』の各章にある例を使って変更してください。</li>
 <li><a href="#Floats" title="#Floats"><strong>フロート</strong></a> の例にパディングを追加し、右のボーダーからテキストを <code>0.5em</code> 離してください。</li>
</ol>
<div class="tuto_example">
 <div class="tuto_type">
  チャレンジ</div>
 <p>サンプル文書 <code>doc2.html</code> を変更して、文書の末尾近く、<code>&lt;/body&gt; の直前に次のタグを追加します。</code></p>
 <pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
</pre>
 <p>もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。</p>
 <p><img height="25" src="/@api/deki/files/490/=Yellow-pin.png" style="border: 3px solid #ccc;" width="20"></p>
 <p>画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。</p>
 <p>スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。</p>
 <p>ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。</p>
 <div style="position: relative; width: 29.5em; height: 18em;">
  <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
   <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
   <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
    <ul style="">
     <li>Arctic</li>
     <li>Atlantic</li>
     <li>Pacific</li>
     <li>Indian</li>
     <li>Southern</li>
    </ul>
   </div>
   <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
   <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
    <p><strong>1: </strong>Lorem ipsum</p>
    <p><strong>2: </strong>Dolor sit</p>
    <p><strong>3: </strong>Amet consectetuer</p>
    <p><strong>4: </strong>Magna aliquam</p>
    <p><strong>5: </strong>Autem veleum</p>
   </div>
   <p style=""> </p>
   <div style="position: absolute; top: 2px; right: 0px;">
    <img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div>
  </div>
 </div>
</div>
<p><a class="button liveSample" href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Layout" title="CSS/Getting_Started/Challenge_solutions#Layout">このチャレンジの解答を見る</a></p>
<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
<p>{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、<a href="/ja/docs/CSS/Getting_Started/Tables" title="CSS/Getting_Started/Tables">テーブル</a> のスタイルづけに特有のやり方をいくつか述べます。</p>