From 773b963e5762c87361e061900a2f5a8d0d1b646d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 14 May 2021 00:00:19 +0900 Subject: Learn/Getting_started_with_the_web/CSS_basics を更新 (#674) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/02/20 時点の英語版に同期 - 原語併記マクロを削除 --- .../css_basics/index.html | 228 +++++++++++---------- .../api/navigatorplugins/javaenabled/index.html | 4 +- .../web/api/navigatorplugins/mimetypes/index.html | 4 +- files/ja/web/api/window/captureevents/index.html | 4 +- files/ja/web/api/window/content/index.html | 2 +- files/ja/web/api/window/defaultstatus/index.html | 6 +- files/ja/web/api/window/directories/index.html | 4 +- files/ja/web/api/window/pkcs11/index.html | 4 +- files/ja/web/api/window/releaseevents/index.html | 4 +- files/ja/web/api/window/screenx/index.html | 4 +- files/ja/web/api/window/screeny/index.html | 4 +- files/ja/web/api/window/scrollbylines/index.html | 6 +- files/ja/web/api/window/scrollbypages/index.html | 6 +- files/ja/web/api/window/scrollmaxx/index.html | 6 +- files/ja/web/api/window/scrollmaxy/index.html | 4 +- files/ja/web/exslt/exsl/object-type/index.html | 4 +- files/ja/web/exslt/math/highest/index.html | 4 +- files/ja/web/exslt/math/lowest/index.html | 4 +- .../global_objects/number/tosource/index.html | 4 +- files/ja/web/xpath/functions/sum/index.html | 32 +-- 20 files changed, 164 insertions(+), 174 deletions(-) diff --git a/files/ja/learn/getting_started_with_the_web/css_basics/index.html b/files/ja/learn/getting_started_with_the_web/css_basics/index.html index 86fb5b8ee5..a8165db7cd 100644 --- a/files/ja/learn/getting_started_with_the_web/css_basics/index.html +++ b/files/ja/learn/getting_started_with_the_web/css_basics/index.html @@ -2,11 +2,13 @@ title: CSS の基本 slug: Learn/Getting_started_with_the_web/CSS_basics tags: + - Beginner - CSS - CodingScripting + - Learn - Styling - Web - - 'l10n:priority' + - l10n:priority - 初心者 - 学習 translation_of: Learn/Getting_started_with_the_web/CSS_basics @@ -16,201 +18,199 @@ translation_of: Learn/Getting_started_with_the_web/CSS_basics
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
-

CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「CSS の基本」では、始めるのに必要なものを紹介します。ここでは、テキストを黒または赤にするにはどうすればいいのか?そのような場所でコンテンツを画面に表示させるにはどうすればいいのか?背景画像と色を使って ウェブページをどのように飾るのか?というような疑問に答えていきます。

+

CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。「CSS の基本」では、始めるのに必要なものを紹介します。ここでは、テキストを赤くするにはどうすればいいのか?コンテンツを (ウェブページの) レイアウトの中で特定の場所に表示するにはどうすればいいのか?背景画像と色を使って ウェブページをどのように飾るのか?というような疑問に答えていきます。

-

それでは CSS とは何でしょうか?

+

CSS とは何か

HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。

-
p {
+
p {
   color: red;
 }
-

それでは試してみましょう: これらの 3 行の CSS をテキストエディタの新しいファイルに貼り付け、ファイルを style.css として styles ディレクトリに保存します。

+

それでは試してみましょう。テキストエディターを使用して、 (上記の) 3 行の CSS 新しいファイルに貼り付けてください。そのファイルを style.css として styles という名前のディレクトリーに保存してください。。

-

しかし、まだ CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。(私たちのプロジェクトに従っていない場合、ファイルを扱うHTML の基本を読み、まず何をする必要があるのかを見てください)

+

コードを働かせるには、この (上記の) CSS を HTML 文書に適用する必要があります。そうしないと、このスタイルはブラウザーの HTML 文書の表示に影響しません。 (今までのプロジェクトを実行していない場合は、ここでいったん止めてファイルの扱いHTML の基本を読み、まず何をする必要があるのかを見てください。)

    -
  1. index.html ファイルを開き、head ({{HTMLElement("head")}} タグと </head> タグの間) に以下の行を貼り付けます +
  2. index.html ファイルを開き、先頭 ({{HTMLElement("head")}} タグと </head> タグの間) に以下の行を貼り付けてください。 -
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    <link href="styles/style.css" rel="stylesheet">
  3. -
  4. index.html を保存し、ブラウザで読み込みます。このように表示されるでしょう :
  5. +
  6. index.html を保存し、ブラウザーで読み込んでください。次のように表示されるはずです。
-

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.段落テキスト(<p></p>で囲んだ文字)が赤色になりましたか?おめでとうございます!今はじめて CSS を書き、成功しました!

+

Mozilla のロゴといくつかの段落です。段落のテキストは、 CSS によって赤くスタイル付けされています。段落のテキストが赤くなっていれば、おめでとう! CSS が動作しています。

-

CSS ルールセットの構造

+

CSS 規則セットの構造

-

上記の CSS をもう少し詳しく見てみましょう:

+

赤い段落テキストの CSS コードを分解して、その仕組みを理解してみましょう。

-

CSS p declaration color red

+

CSS p declaration color red

-

全体の構造はルールセットと呼びます (しかし、しばしば "ルール" として略されます)。個々のパーツの名前にも注意してください :

+

全体の構造は規則セットと呼びます (規則セットという語はよく、単に規則とも呼ばれます)。それぞれの部分の名前にも注意してください。

-
{{原語併記("セレクタ", "selector")}}
-
ルールセットの先頭にある HTML 要素名。これはスタイルを設定する要素 (この場合は p 要素) を選択します。別の要素をスタイルするには、Selector を変更します。
-
{{原語併記("宣言", "declaration")}}
-
color: red; のような単一のルールで、要素のプロパティのうちどの要素をスタイルするかを指定します。
-
{{原語併記("プロパティ", "property")}}
-
指定された HTML 要素のスタイルを設定する方法 (この場合 color は {{htmlelement("p")}} 要素のプロパティです)。CSS ではルール内でどのプロパティを適用するかを選択します。
-
{{原語併記("プロパティ値", "property value")}}
-
プロパティの右側にはコロンの後にプロパティ値があり、与えられたプロパティの多くの外観から 1 つを選択します (赤以外にも多くの色の値があります)。
+
セレクター (Selector)
+
これは規則セットの先頭にある HTML 要素名です。これはスタイルを設定する要素 (この例の場合は {{HTMLElement("p")}} 要素) を定義します。別の要素をスタイル付けするには、セレクターを変更してください。
+
宣言 (Declaration)
+
color: red; のような単一の規則です。これは要素のプロパティのうち、スタイル付けしたいものを指定します。
+
プロパティ (Property)
+
これらは、 HTML 要素をスタイル付けするための方法です。 (この例では、 color は {{htmlelement("p")}} 要素のプロパティです。) CSS では、規則の中で影響を与えたいプロパティを選択します。
+
プロパティ値 (Property value)
+
プロパティの右側には—コロンの後に—プロパティ値があります。与えられたプロパティの多くの外観から 1 つを選択します。 (例えば、 color の値は red 以外にもたくさんあります。)
-

構文の他の重要な部分に注意してください:

+

構文の他の重要な部分に注意してください。

-

したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述するだけです:

+

一つの規則セットで複数のプロパティ値を変更するには、次のようにセミコロンで区切って書いてください。

-
p {
+
p {
   color: red;
   width: 500px;
   border: 1px solid black;
 }
-

複数の要素を選択する

+

複数の要素の選択

-

複数の要素の種類を選択することができ、すべての要素に単一のルールセットを適用することもできます。カンマで区切られた複数のセレクタを含めます。例えば:

+

複数の要素を選択して、そのすべてに一つの規則セットを適用することもできます。複数のセレクターはカンマで区切ります。たとえば、以下のようになります。

-
p,li,h1 {
+
p, li, h1 {
   color: red;
 }
-

さまざまな種類のセレクタ

+

さまざまな種類のセレクター

-

多くのさまざまな種類のセレクタがあります。上の項目では、特定のHTMLドキュメント内の特定のタイプのすべての要素を選択する要素セレクタだけを取り上げました。しかしそれ以上に細かい選択をすることができます。一般的なタイプのセレクタを次に示します:

+

セレクターにはさまざまな種類があります。上記の例では、要素セレクターを使用しており、特定の種類の要素をすべて選択しています。しかし、もっと特定の要素を選択することもできます。ここでは、より一般的なセレクターの種類を紹介します。

- - + + - + - - + + - - + + + <p class="my-class"> および <a class="my-class"> を選択 - - + + - - + +
セレクタ名何を選択するかセレクター名選択するもの
要素セレクタ (時々タグまたは型セレクタと呼ばれます)要素セレクター (タグまたは型セレクターと呼ばれることもあります) 指定された型のすべての HTML 要素 p
<p> を選択
ID セレクタページ上の指定された ID を持つ要素。 特定のHTMLページでは、1つのIDにつき1つの要素(そしてもちろん1つの要素につき1つのID)しか許されません。ID セレクター指定された ID を持つページ上の要素です。指定された HTML ページでは、各 id 値は一意でなければなりません。 #my-id
<p id="my-id"> または <a id="my-id"> を選択
クラスセレクタ指定されたクラスを持つページの要素 (複数のクラスインスタンスがページに表示されます)クラスセレクター指定されたクラスを持つページ上の要素です。同じクラスの複数のインスタンスが 1 つのページに現れることがあります。 .my-class
- <p class="my-class"> 及び <a class="my-class"> を選択
属性セレクタ指定された属性を持つページ上の要素属性セレクター指定された属性を持つページ上の要素です。 img[src]
<img src="myimage.png"> を選択するが、<img> は選択しない
擬似クラスセレクタ指定された要素が指定された状態にあるとき。例えば、マウスポインターが上に乗っている (ホバー) 状態。擬似クラスセレクター指定された要素が指定された状態にあるとき。 (例えば、マウスポインターが上に乗っている (ホバー) 状態。) a:hover
<a> を選択するが、マウスポインターがリンク上にあるときのみ。
-

セレクタの種類は多く、セレクタガイドにより詳しい一覧があります。

+

他にも様々なセレクターがあります。詳しくは、 MDN のセレクターガイドをご覧ください。

-

フォントとテキスト

+

フォントとテキスト

-

CSS の基本をいくつか勉強しましたので、style.css ファイルにいくつかのルールと情報を追加して、この例を見栄え良くしましょう。最初に、フォントとテキストの見ばえを少し良くしてみましょう。

+

CSS の基本をいくつか勉強しましたので、style.css ファイルにいくつかの規則と情報を追加して、この例を見栄え良くしましょう。

    -
  1. まず最初に、どこかの安全に保存した Google フォントの出力を見つけてください。{{htmlelement("link")}} 要素を index.html の上部 (<head> タグと </head> タグの間) のどこかに追加します。これは次のようになります: - -
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    - -

    このコードは、ウェブページとともにOpen Sansフォントファミリをダウンロードするスタイルシートにページをリンクし、独自のスタイルシートを使用してHTML要素に設定することを可能にします。

    -
  2. -
  3. 次に style.css ファイルにある既存のルールを削除します。良いテストでしたが、赤いテキストは実のところあまりよくありません。
  4. -
  5. 代わりに次の行を追加し、プレースホルダー行を Google フォントから取得した実際の font-family 行に置き換えます。(この font-family は、テキストに使用するフォントを意味します)。このルールは最初にページ全体のグローバルベースフォントとフォントサイズを設定します (<html> はページ全体の親要素です。その中のすべての要素は同じ font-sizefont-family を継承します): -
    html {
    -  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
    -  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
    + 
  6. まず、以前にウェブサイトをどんな外見にするかで保存した、 Google フォントの出力を探します。 {{htmlelement("link")}} 要素を index.html の先頭のどこか ({{HTMLElement("head")}} タグと </head> タグの間) に追加します。それは次のようなものです。 + +
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    + このコードは、ウェブページに Open Sans フォントファミリを読み込むスタイルシートにページをリンクします。
  7. +
  8. 次に style.css ファイルにある既存の規則を削除します。試験としては良いものでしたが、赤いテキストだらけにするのはもうやめましょう。
  9. +
  10. 以下の行 (下記参照) を追加し、 font-family の割り当てをウェブサイトをどんな外見にするかで選択した font-family に置き換えます。 font-family というプロパティは、テキストに使用するフォントを指します。この規則では、ページ全体の基本フォントとフォントの大きさを定義します。 {{HTMLElement("html")}} はページ全体の親要素なので、その中のすべての要素は同じ font-sizefont-family を継承します。 +
    html {
    +  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high  */
    +  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */
     }
    -

    : 「px」の意味を説明するコメントを追加しました。/**/ の間にある CSS ドキュメント内のものは CSS コメントです。ブラウザはコードをレンダリングするときにこれを無視します。これはあなたが実施していることについての役立つメモを書く場所です。

    +

    : CSS の /**/ の間にあるものは何でも CSS コメントになります。ブラウザーはコードをレンダリングするときにこれを無視します。 CSS コメントはコードや論理について役立つメモを書くための方法です。

  11. -
  12. HTML ボディ ({{htmlelement("h1")}}、{{htmlelement("li")}}、{{htmlelement("p")}}) 内のテキストを含む要素のフォントサイズを設定します)。また、読みやすくするために見出しのテキストを中央に置き、本文の内容に行の高さと文字の間隔を設定します: -
    h1 {
    -  font-size: 60px;
    -  text-align: center;
    + 
  13. 次に、 HTML 本文内にテキストを配置する要素 ({{htmlelement("h1")}}, {{htmlelement("li")}}, {{htmlelement("p")}}) のフォントの大きさを設定します。また、見出しを中央揃えにします。最後に、 2 つ目の規則セット (下記) を展開して、行の高さや文字の間隔などの設定を行い、本文のコンテンツを読みやすくしましょう。 +
    h1 {
    +  font-size: 60px;
    +  text-align: center;
     }
     
     p, li {
    -  font-size: 16px;
    -  line-height: 2;
    -  letter-spacing: 1px;
    +  font-size: 16px;
    +  line-height: 2;
    +  letter-spacing: 1px;
     }
-

これらの px 値はあなたが望むようにデザインを得るために好きなものに調整できますが、一般的にデザインは次のようになります:

+

px の値はお好みで調整してください。進行中の作品は、このようになるはずです。

-

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+

mozilla のロゴといくつかの段落。 sans-serif フォントが設定され、フォントの大きさ、行の高さ、文字の間隔が調整され、メインページの見出しが中央に配置されています。

-

ボックス、ボックス、ボックスについてのすべてのこと

+

CSS: ボックスのすべて

-

CSS を書いていて気づくことの 1 つは、ボックスのサイズ・色・位置などを設定することです。ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。

+

CSS を書いていて気づくことがあります。それは、その多くがボックスに関するものだということです。これには、サイズ、色、位置の設定が含まれます。ページ上のほとんどの HTML 要素は、他の箱の上に置かれた箱と考えることができます。

-

a big stack of boxes or crates sat on top of one another

+

大きな箱や木箱が積み重なっている状態

-

当然のことながら、CSS レイアウトは主にボックスモデルに基づいています。ページ上のスペースを占める各ブロックは、次のようなプロパティを持ちます:

+

CSS のレイアウトは、主にボックスモデルに基づいています。ページ上のスペースを占める各ボックスには、次のようなプロパティがあります。

    -
  • padding: コンテンツのまわりのスペース (例えば段落テキストの周り)
  • +
  • padding: コンテンツの周囲のスペースです。以下の例では、段落テキストの周りのスペースです。
  • border: padding のすぐ外側にある実線
  • margin: 要素の外側の周りの空間
-

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+

3 つのボックスがお互いの内側に配置されています。外側から内側に向かって、 margin, border, padding と書かれています。

-

このセクションでは次のものを使用します :

+

この節では次のものを使用します。

  • width (要素の)
  • -
  • background-color: 要素の内容と padding の背後にある色
  • +
  • background-color: 要素の内容と padding の背後にある色
  • color: 要素のコンテンツ (通常はテキスト) の色
  • -
  • text-shadow: 要素内のテキストに影を設定する
  • +
  • text-shadow: 要素内のテキストに影を設定します
  • display: 要素の表示モードを設定します (これについてはまだ心配しないでください)
-

では、ページに CSS を追加しましょう!これらの新しいルールをページの最後に追加しておき、値の変更を試すのを恐れることなく、どのように変化するかを確認してください。

+

続けて、さらに CSS を追加していきましょう。 style.css の一番下に、これらの新しい規則を追加し続けます。値を変えてどうなるか実験してみましょう。

-

ページの色を変更する

+

ページの色を変更する

-
html {
+
html {
   background-color: #00539F;
 }
-

このルールはページ全体の背景色に設定を行います。上記のカラーコードを、サイトを計画する際に選択した色に変更します。

+

この規則はページ全体の背景色に設定を行います。上記のカラーコードを、ウェブサイトをどんな外見にするかで選んだ色に変更しましょう。

-

ボディのスタイリング

+

本文のスタイル付け

-
body {
+
body {
   width: 600px;
   margin: 0 auto;
   background-color: #FF9500;
@@ -218,78 +218,82 @@ p, li {
   border: 5px solid black;
 }
-

次は {{htmlelement("body")}}  要素です。ここにはいくつかの宣言がありますので、それらをひとつひとつ見て行きましょう:

+

次は {{htmlelement("body")}}  要素です。ここにはいくつかの宣言がありますので、 1 行ずつ見て行きましょう。

  • width: 600px; — これにより body は常に 600 ピクセルの幅になります。
  • -
  • margin: 0 auto; marginpadding などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響を与えます (この場合は 0 になります )。2 番目の値は左右です (ここauto は利用可能な水平スペースを左右に均等に分割します)。margin の構文で説明するように 1 つ、3 つ、または 4 つの値を使用することもできます。
  • -
  • background-color: #FF9500; — 前と同じようにこれは要素の背景色を設定します。このプロジェクトでは bodyhtml 要素の暗い青とは対照的な赤いオレンジ色の一種を使用しました。実験してください。white や何でも好きなものを自由に使用してください。
  • -
  • padding: 0 20px 20px 20px;padding に 4 つの値を設定して、コンテンツの周りに少しのスペースを確保します。今回はボディの上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。margin と同様に、パディング構文で説明されているように、1つ、2つ、または3つの値を使用することもできます。
  • -
  • border: 5px solid black; — これは body の全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけです。
  • +
  • margin: 0 auto; marginpadding などのプロパティに 2 つの値を設定すると、最初の値は要素の上下の辺に影響します (この場合は 0 になります )。2 番目の値は左右に影響します (ここで auto は残った水平方向の余白を左右に均等に配分する特別な値です)。 margin の構文で説明しているように、 1 つ、3 つ、または 4 つの値を使用することもできます。
  • +
  • background-color: #FF9500; — これは要素の背景色を設定します。このプロジェクトでは body の背景色に明るいオレンジ色を使用して、 {{htmlelement("html")}} 要素の暗い青とは対照的にしました。 (気軽に試してみてください。)
  • +
  • padding: 0 20px 20px 20px; — これはパディングに 4 つの値を設定します。これは、コンテンツの周りに少しのスペースを確保するためです。今回は body の上にパディングを設定せず、左・下・右に 20 ピクセルを設定します。値は上・右・下・左の順に設定されます。margin と同様、 padding の構文で説明されているように、 1 つ、 2 つ、または 3 つの値を使用することもできます。
  • +
  • border: 5px solid black; — これは境界の太さ、スタイル、色の値を設定します。この場合は、 body の全側面に 5 ピクセルの太さの黒ベタの境界線を設定します。
-

メインページタイトルの配置とスタイリング

+

メインページのタイトルの配置とスタイル付け

-
h1 {
+
h1 {
   margin: 0;
   padding: 20px 0;
   color: #00539F;
   text-shadow: 3px 3px 1px black;
 }
-

body の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザが {{htmlelement("h1")}} 要素 (他の中でも) にデフォルトのスタイルを適用するためです。それは悪い考えのように聞こえるかもしれませんが、私たちは未構築のウェブページでも基本的な読みやすさを求めています。ギャップをなくすには、margin: 0; を設定してデフォルトのスタイルを上書きします。

+

body の上部にひどい隙間があることに気づいたかもしれません。これは CSS をまったく適用していなくても、ブラウザーが (他のものの中で) {{htmlelement("h1")}} 要素に既定のスタイルを適用するためです。それは悪い考えのように見えるかもしれませんが、スタイルのないページにも一定の読みやすさを求めるためのものです。隙間をなくすために、 margin: 0; を設定して既定のスタイルを上書きします。

-

次に見出しの上下のパディングを 20 ピクセルに設定し、見出しテキストを html の背景色と同じ色にしました。

+

次に見出しの上下のパディングを 20 ピクセルに設定します。

-

私たちがここで使ってきた興味深いプロパティの 1 つは、要素のテキストコンテンツにテキストシャドウを適用する text-shadow です。その 4 つの値は次のとおりです。

+

続いて、見出しテキストが HTML の背景色と同じ色になるように設定します。

+ +

最後に、 text-shadow は要素のテキストコンテンツに影を適用します。 4 つの値は次のとおりです。

    -
  • 最初のピクセル値は、テキストからのシャドウの水平オフセットを設定します。移動する距離は負の値で、左に移動する必要があります。
  • -
  • 2 番目のピクセル値は、テキストからシャドウの垂直オフセットを設定します (この例では、どれだけ下に移動するか)。負の値では上に移動します。
  • -
  • 3 番目のピクセル値は影のぼかし半径を設定します。値が大きいほど影がぼやけることを意味します。
  • -
  • 4 番目の色は影の基本色を設定します。
  • +
  • 最初はピクセル値で、影のテキストからの水平オフセット、どれだけ横に移動するかを設定します。
  • +
  • 2 番目はピクセル値で、影のテキストから垂直オフセット、どれだけ下に移動するかを設定します。
  • +
  • 3 番目のピクセル値で、影をぼかす半径を設定します。値が大きいほどぼやけた影を生成します。
  • +
  • 4 番目の値は、影の基本色を設定します。
-

繰り返しますが、さまざまな値を試してみてください。

+

いろいろな値を試して、表示方法の変化を確認してみてください。

-

画像のセンタリング

+

画像のセンタリング

-
img {
+
img {
   display: block;
   margin: 0 auto;
 }
-

最後に画像をよりよく見えるように中央に配置します。以前は body のために実施したことと同じようにもう一度 margin: 0 auto トリックを使うことができましたが、何か別のことをする必要もあります。body 要素はブロックレベルです。つまり、ページ上のスペースを占有し、マージンや他のスペーシング値を適用することができます。一方、イメージはインライン要素でありできないことを意味します。画像にマージンを適用するには、display: block; を使用して画像のブロックレベルの動作を指定する必要があります。

+

次に、画像を中央に配置して見栄えを良くします。本文のときと同じように、 margin: 0 auto のトリックを使うこともできます。しかし、 CSS を機能させるために追加の設定が必要になる違いがあります。

+ +

{{htmlelement("body")}} はブロック要素であるため、ページの中でスペースを占めます。ブロック要素は、マージンやその他の余白を開ける値を適用することができます。一方、画像はインライン要素です。インライン要素にマージンやその他の余白を開ける値を適用することはできません。画像にマージンを適用するには、display: block; を使用して画像にブロックレベルの動作を指定する必要があります。

-

: 上記の手順では、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をオーバーフローし、ページの残りの部分にはみ出します。これを修正するには、1) グラフィックスエディタを使用してイメージの幅を縮小するか、2) <img> 要素の {{cssxref("width")}} プロパティを小さな値、例えば 400 px; に設定することで、 CSS を使用してイメージのサイズを変更します。

+

: 上記の手順は、本体に設定されている幅 (600ピクセル) よりも小さい画像を使用していることを前提としています。画像が大きい場合、それは本文をあふれ、ページの残りの部分にはみ出します。これを修正するには、1) 画像編集ソフトを使用して画像の幅を縮小するか、2) CSS を使用して、 {{cssxref("width")}} プロパティでより小さな値を <img> 要素に設定し、画像の大きさを変更します。

-

: あなたがまだ display: block; とブロックレベル/インラインの区別を理解していなくても、心配しないでください。CSS をもっと深く勉強することが出来ます。使用可能なさまざまな表示値の詳細については、display のリファレンスページを参照してください。

+

: display: block; や、ブロックレベル/インラインの区別がまだ理解できなくても心配しないでください。 CSS の勉強を続けていくうちに意味が分かってくるはずです。さまざまな display の値の違いについて詳しくは、 MDN の display のリファレンスページを参照してください。

-

まとめ

+

まとめ

-

この記事のすべての手順に従っている場合は、次のようなページが表示されます (このリンクから我々が作成したバージョンを見ることもできます)。

+

この記事のすべての手順に従っている場合は、次のようなページが表示されます。

-

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+

モジラのロゴを中央に配置し、ヘッダーとパラグラフを配置しています。これで、ページ全体の背景が青くになり、中央に配置されたメインコンテンツストリップの背景がオレンジになるなど、きれいなスタイルになりました。

-

もしわからなくなった場合、Github の完成したサンプルコードと作業内容を常に比較することができます。

+

(作成した結果はこちらから見ることができます。) もしわからなくなった場合、Github の完成したサンプルコードと作業内容を常に比較することができます。

-

ここでは、CSS の表面に少し触れただけです。詳細については、CSS の学習トピックをご覧ください。

+

ここでは、CSS の表面に少し触れただけです。詳細については、CSS の学習トピックをご覧ください。

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

-

このモジュール

+

このモジュール

diff --git a/files/ja/web/api/navigatorplugins/javaenabled/index.html b/files/ja/web/api/navigatorplugins/javaenabled/index.html index a8cd69a8be..873fbf2134 100644 --- a/files/ja/web/api/navigatorplugins/javaenabled/index.html +++ b/files/ja/web/api/navigatorplugins/javaenabled/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/NavigatorPlugins/javaEnabled

概要

このメソッドは、現在のブラウザで Java が有効かどうかを示します。

{{ 英語版章題("Syntax") }}

-

構文

+

構文

result = window.navigator.javaEnabled()
 

{{ 英語版章題("Example") }}

@@ -24,7 +24,7 @@ translation_of: Web/API/NavigatorPlugins/javaEnabled }

{{ 英語版章題("Notes") }}

-

注記

+

このメソッドの戻り値は、一般的に、ブラウザが Java サポートを提供しているかどうかに関わらず、Java をコントロールする設定が有効か無効かを示します。

{{ 英語版章題("Specification") }}

仕様

diff --git a/files/ja/web/api/navigatorplugins/mimetypes/index.html b/files/ja/web/api/navigatorplugins/mimetypes/index.html index 28f623c4bc..80a9bd3d3b 100644 --- a/files/ja/web/api/navigatorplugins/mimetypes/index.html +++ b/files/ja/web/api/navigatorplugins/mimetypes/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/NavigatorPlugins/mimeTypes

概要

MimeTypeArray オブジェクトを返します。このオブジェクトは、ブラウザが認識する MIME タイプを表す MimeType オブジェクトのリストを含んでいます。

{{ 英語版章題("Syntax") }}

-

構文

+

構文

mimeTypes = navigator.mimeTypes;
 

mimeTypes は、MimeTypeArray オブジェクトです。このオブジェクトは、length プロパティを持ち、また、item(index) 及び namedItem(name) メソッドを持っています。

@@ -22,7 +22,7 @@ translation_of: Web/API/NavigatorPlugins/mimeTypes
  alert(window.navigator.mimeTypes.item(0).description); // "Mozilla Default Plug-in" などをダイアログで表示します。
 

{{ 英語版章題("Notes") }}

-

注記

+

例における mimeTypes プロパティの 0 番目の要素("Mozilla Default Plug-in" MimeType オブジェクト)の type プロパティの値は、"image/x-macpaint" のような 典型的な MIME 形式ではなく、* という値 です。

{{ 英語版章題("Specification") }}

仕様

diff --git a/files/ja/web/api/window/captureevents/index.html b/files/ja/web/api/window/captureevents/index.html index 6a38e6eb62..ba664b2fbd 100644 --- a/files/ja/web/api/window/captureevents/index.html +++ b/files/ja/web/api/window/captureevents/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Window/captureEvents

概要

{{ Obsolete_header() }} window に指定したタイプの全てのイベントをキャプチャさせるようにします。

{{ 英語版章題("Syntax") }}

-

構文

+

構文

window.captureEvents(eventType)
 

eventType は、次の値の組み合わせを取ります。: Event.ABORT, Event.BLUR, Event.CLICK, Event.CHANGE, Event.DBLCLICK, Event.DRAGDDROP, Event.ERROR, Event.FOCUS, Event.KEYDOWN, Event.KEYPRESS, Event.KEYUP, Event.LOAD, Event.MOUSEDOWN, Event.MOUSEMOVE, Event.MOUSEOUT, Event.MOUSEOVER, Event.MOUSEUP, Event.MOVE, Event.RESET, Event.RESIZE, Event.SELECT, Event.SUBMIT, Event.UNLOAD.

@@ -38,7 +38,7 @@ translation_of: Web/API/Window/captureEvents </html>

{{ 英語版章題("Notes") }}

-

注記

+

W3C DOM Events メソッドを支持するにあたり、このメソッドは Gecko 1.9 では廃止されました(addEventListener を参照してください)。このメソッドのサポートは Gecko 1.9 で 削除されました

diff --git a/files/ja/web/api/window/content/index.html b/files/ja/web/api/window/content/index.html index ab3098dd36..3cf2e482d5 100644 --- a/files/ja/web/api/window/content/index.html +++ b/files/ja/web/api/window/content/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Window/content

特権のないコンテンツ (Web ページ) では、content は通常 top と同じです。ただし、Web ページがサイドバーに読み込まれた場合を除きます。このときの content は、現在選択しているタブの Window を参照しています。

いくつかの例では、content の代わりに _content を使用しています。しかし、後者は長い間非推奨とされています。ですから、新しいコードでは content を使うべきです。

{{ 英語版章題("Syntax") }}

-

構文

+

構文

var windowObject = window.content;
 

{{ 英語版章題("Example") }}

diff --git a/files/ja/web/api/window/defaultstatus/index.html b/files/ja/web/api/window/defaultstatus/index.html index b1bf126298..38caa36389 100644 --- a/files/ja/web/api/window/defaultstatus/index.html +++ b/files/ja/web/api/window/defaultstatus/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/Window/defaultStatus

概要

与えられたウィンドウのステータスバーのテキストを取得/設定します。

{{ 英語版章題("Syntax") }}

-

構文

+

構文

sMsg = window.defaultStatus
 window.defaultStatus =sMsg
 

{{ 英語版章題("Parameters") }}

-

引数

+

引数

  • sMsg は、ステータスバーでデフォルトで表示されるテキストを含む文字列です。
@@ -31,7 +31,7 @@ window.defaultStatus =sMsg </htm>

{{ 英語版章題("Notes") }}

-

注記

+

一度開いたウィンドウのステータスバーのテキストを設定するには、window.status を使用してください。

{{ 英語版章題("Specification") }}

仕様

diff --git a/files/ja/web/api/window/directories/index.html b/files/ja/web/api/window/directories/index.html index b893d4443c..b4a5e1cc3e 100644 --- a/files/ja/web/api/window/directories/index.html +++ b/files/ja/web/api/window/directories/index.html @@ -12,11 +12,11 @@ translation_of: Web/API/Window/directories

{{ ApiRef() }} {{ 英語版章題("Summary") }}

概要

ウィンドウディレクトリのツールバーオブジェクトを返します。 {{ 英語版章題("Syntax") }}

-

構文

+

構文

dirBar = window.directories
 

{{ 英語版章題("Parameters") }}

-

引数

+

引数

dirBar diff --git a/files/ja/web/api/window/pkcs11/index.html b/files/ja/web/api/window/pkcs11/index.html index faa851a9d3..025288c852 100644 --- a/files/ja/web/api/window/pkcs11/index.html +++ b/files/ja/web/api/window/pkcs11/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Window/pkcs11

概要

pcks11 プロトコル に関連するドライバや他のソフトウェアをインストールするために用いられる pkcs11 オブジェクトを返します。

{{ 英語版章題("Syntax") }}

-

構文

+

構文

objRef = window.pkcs11
 

{{ 英語版章題("Example") }}

@@ -22,7 +22,7 @@ translation_of: Web/API/Window/pkcs11
 window.pkcs11.addModule(sMod, secPath, 0, 0);
 

{{ 英語版章題("Notes") }}

-

注記

+

pcks11 オブジェクトの扱い方についてのさらなる情報は、nsIDOMPkcs11 を参照してください。

{{ 英語版章題("Specification") }}

仕様

diff --git a/files/ja/web/api/window/releaseevents/index.html b/files/ja/web/api/window/releaseevents/index.html index 3aff175902..fbfbe071f7 100644 --- a/files/ja/web/api/window/releaseevents/index.html +++ b/files/ja/web/api/window/releaseevents/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Window/releaseEvents

概要

{{ Obsolete_header() }} 指定したタイプのイベントを補足することを解除します。

{{ 英語版章題("Syntax") }}

-

構文

+

構文

window.releaseEvents(eventType)
 

eventType は、次の値の組み合わせを取ります。: Event.ABORT, Event.BLUR, Event.CLICK, Event.CHANGE, Event.DBLCLICK, Event.DRAGDDROP, Event.ERROR, Event.FOCUS, Event.KEYDOWN, Event.KEYPRESS, Event.KEYUP, Event.LOAD, Event.MOUSEDOWN, Event.MOUSEMOVE, Event.MOUSEOUT, Event.MOUSEOVER, Event.MOUSEUP, Event.MOVE, Event.RESET, Event.RESIZE, Event.SELECT, Event.SUBMIT, Event.UNLOAD.

@@ -23,7 +23,7 @@ translation_of: Web/API/Window/releaseEvents
window.releaseEvents(Event.KEYPRESS)
 

{{ 英語版章題("Notes") }}

-

注記

+

W3C DOM Events メソッドを支持するにあたり、このメソッドは Gecko 1.9 では廃止されました(addEventListener を参照してください)。このメソッドのサポートは Gecko 1.9 で 削除されました

diff --git a/files/ja/web/api/window/screenx/index.html b/files/ja/web/api/window/screenx/index.html index 01ad72c62b..45bfb13f65 100644 --- a/files/ja/web/api/window/screenx/index.html +++ b/files/ja/web/api/window/screenx/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/screenX

概要

画面の左端からユーザのブラウザの左端までの水平距離を返します。

{{ 英語版章題("Syntax") }}

-

構文

+

構文

lLoc = window.screenX
 

{{ 英語版章題("Parameters") }}

@@ -22,7 +22,7 @@ translation_of: Web/API/Window/screenX
  • lLoc は、画面の左端からのピクセル数です。
  • {{ 英語版章題("Notes") }}

    -

    注記

    +

    window.screenY も参照してください。

    {{ 英語版章題("Specification") }}

    仕様

    diff --git a/files/ja/web/api/window/screeny/index.html b/files/ja/web/api/window/screeny/index.html index 727b447443..3b10d2b446 100644 --- a/files/ja/web/api/window/screeny/index.html +++ b/files/ja/web/api/window/screeny/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/screenY

    概要

    画面の上端からユーザのブラウザの上端までの垂直距離を返します。

    {{ 英語版章題("Syntax") }}

    -

    構文

    +

    構文

    lLoc = window.screenY
     

    {{ 英語版章題("Parameters") }}

    @@ -22,7 +22,7 @@ translation_of: Web/API/Window/screenY
  • lLoc は、画面の上からのピクセル数です。
  • {{ 英語版章題("Notes") }}

    -

    注記

    +

    window.screenX も参照してください。

    {{ 英語版章題("Specification") }}

    仕様

    diff --git a/files/ja/web/api/window/scrollbylines/index.html b/files/ja/web/api/window/scrollbylines/index.html index c510a70844..e27191fa9c 100644 --- a/files/ja/web/api/window/scrollbylines/index.html +++ b/files/ja/web/api/window/scrollbylines/index.html @@ -12,11 +12,11 @@ translation_of: Web/API/Window/scrollByLines

    {{ ApiRef() }} {{ 英語版章題("Summary") }}

    概要

    指定した行分文書をスクロールします。 {{ 英語版章題("Syntax") }}

    -

    構文

    +

    構文

    window.scrollByLines(lines)
     

    {{ 英語版章題("Parameters") }}

    -

    引数

    +

    引数

    • lines は、文書をスクロールする行数です。
    @@ -32,7 +32,7 @@ translation_of: Web/API/Window/scrollByLines <button onclick="scrollByLines(-5);">up 5 lines</button>

    {{ 英語版章題("Notes") }}

    -

    注記

    +

    {{domxref("window.scrollBy")}}、{{domxref("window.scrollByPages")}} も参照してください。 {{ 英語版章題("Specification") }}

    仕様

    {{ DOM0() }}

    diff --git a/files/ja/web/api/window/scrollbypages/index.html b/files/ja/web/api/window/scrollbypages/index.html index 3e76e6bed6..38724622b3 100644 --- a/files/ja/web/api/window/scrollbypages/index.html +++ b/files/ja/web/api/window/scrollbypages/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/Window/scrollByPages

    {{ ApiRef() }} {{ 英語版章題("Summary") }}

    概要

    指定したページ分文書をスクロールします。 {{ 英語版章題("Syntax") }}

    -

    構文

    +

    構文

    window.scrollByPages(pages)
     

    {{ 英語版章題("Parameters") }}

    -

    引数

    +

    引数

    • pages は、スクロールするページ数です。
    • pages は、正、あるいは、負の整数です。
    • @@ -31,7 +31,7 @@ window.scrollByPages(1); window.scrollByPages(-1);

    {{ 英語版章題("Notes") }}

    -

    注記

    +

    {{domxref("window.scrollBy")}}、{{domxref("window.scrollByLines")}}、{{domxref("window.scroll")}}、{{domxref("window.scrollTo")}}
    も参照してください。 {{ 英語版章題("Specification") }}

    仕様

    diff --git a/files/ja/web/api/window/scrollmaxx/index.html b/files/ja/web/api/window/scrollmaxx/index.html index 243cd07ab8..26e2d67304 100644 --- a/files/ja/web/api/window/scrollmaxx/index.html +++ b/files/ja/web/api/window/scrollmaxx/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/Window/scrollMaxX

    概要

    文書が水平スクロールされ得る最大ピクセル数を返します。

    {{ 英語版章題("Syntax") }}

    -

    構文

    +

    構文

    xpix = window.scrollMaxX
     

    {{ 英語版章題("Parameters") }}

    -

    引数

    +

    引数

    • xpix は、ピクセル数です。
    @@ -29,7 +29,7 @@ translation_of: Web/API/Window/scrollMaxX window.scrollTo(maxX, 0);

    {{ 英語版章題("Notes") }}

    -

    注記

    +

    このプロパティは、文書の幅の合計を取得するために使用してください。文書の幅の合計は、window.innerWidth + window.scrollMaxX と同等です。

    window.scrollMaxY も参照してください。

    {{ 英語版章題("Specification") }}

    diff --git a/files/ja/web/api/window/scrollmaxy/index.html b/files/ja/web/api/window/scrollmaxy/index.html index 5f8cf61308..322451c1b4 100644 --- a/files/ja/web/api/window/scrollmaxy/index.html +++ b/files/ja/web/api/window/scrollmaxy/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Window/scrollMaxY

    概要

    文書が垂直スクロールされ得る最大ピクセル数を返します。

    {{ 英語版章題("Syntax") }}

    -

    構文

    +

    構文

    ypix = window.scrollMaxY
     

    {{ 英語版章題("Parameters") }}

    @@ -30,7 +30,7 @@ translation_of: Web/API/Window/scrollMaxY window.scrollTo(0,maxY);

    {{ 英語版章題("Notes") }}

    -

    注記

    +

    このプロパティは、文書の高さの合計を取得するために使用してください。文書の高さの合計は、window.innerHeight + window.scrollMaxY と同等です。

    window.scrollMaxXwindow.scrollTo も参照してください。

    {{ 英語版章題("Specification") }}

    diff --git a/files/ja/web/exslt/exsl/object-type/index.html b/files/ja/web/exslt/exsl/object-type/index.html index 6dfff0c67a..a478fc445a 100644 --- a/files/ja/web/exslt/exsl/object-type/index.html +++ b/files/ja/web/exslt/exsl/object-type/index.html @@ -13,10 +13,10 @@ translation_of: Web/EXSLT/exsl/object-type exsl:object-type() 指定されたオブジェクトの型を示す文字列を返却する。

    {{ Note("ほとんどの XSLT オブジェクトの型は安全に他の型へ自動変換されることがある。; しかしながら、ある自動変換はエラーを発生させる。特に、非ノードセットをノードセットとして扱う場合がそうである。この関数により、名前付きテンプレートや拡張関数の作者は、引数の値に柔軟性を容易に持たせることができる。") }}

    -

    構文

    +

    構文

    exsl:object-type(object)
     
    -

    引数

    +

    引数

    object
    型が返却されるオブジェクト
    diff --git a/files/ja/web/exslt/math/highest/index.html b/files/ja/web/exslt/math/highest/index.html index 5e8a6f514f..896cb87c30 100644 --- a/files/ja/web/exslt/math/highest/index.html +++ b/files/ja/web/exslt/math/highest/index.html @@ -14,10 +14,10 @@ translation_of: Web/EXSLT/math/highest

    ノードの文字列を数値に変換した場合、一つのノードが最大値を持つ。

    {{ Note() }}

    -

    構文

    +

    構文

    math:highest(nodeSet)
     
    -

    引数

    +

    引数

    nodeSet
    最大値を持つノードが返されるノードセット
    diff --git a/files/ja/web/exslt/math/lowest/index.html b/files/ja/web/exslt/math/lowest/index.html index dfc0f8805f..347fe1d589 100644 --- a/files/ja/web/exslt/math/lowest/index.html +++ b/files/ja/web/exslt/math/lowest/index.html @@ -14,10 +14,10 @@ translation_of: Web/EXSLT/math/lowest

    ノードの文字列を数値に変換した場合、一つのノードが最小値を持つ。

    {{ Note() }}

    -

    構文

    +

    構文

    math:lowest(nodeSet)
     
    -

    引数

    +

    引数

    nodeSet
    最小値を持つノードが返されるノードセット
    diff --git a/files/ja/web/javascript/reference/global_objects/number/tosource/index.html b/files/ja/web/javascript/reference/global_objects/number/tosource/index.html index 852dd36dd3..58d6fbbda5 100644 --- a/files/ja/web/javascript/reference/global_objects/number/tosource/index.html +++ b/files/ja/web/javascript/reference/global_objects/number/tosource/index.html @@ -9,11 +9,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource

    オブジェクトのソースコードを表す文字列を返します。

    -

    構文

    +

    構文

    number.toSource()
    -

    引数

    +

    引数

    無し。

    diff --git a/files/ja/web/xpath/functions/sum/index.html b/files/ja/web/xpath/functions/sum/index.html index 00c6c2ae56..1b67dffa73 100644 --- a/files/ja/web/xpath/functions/sum/index.html +++ b/files/ja/web/xpath/functions/sum/index.html @@ -10,44 +10,30 @@ translation_of: Web/XPath/Functions/sum

    sum 関数は、与えられたノード集合内のそれぞれのノードの数値としての値を合計した数値を返します。

    -

    {{ 英語版章題("Syntax") }}

    - -

    構文

    +

    構文

    sum(node-set )
     
    -

    {{ 英語版章題("Arguments") }}

    - -

    引数

    +

    引数

    node-set
    -
    評価されるノード集合。 このノード集合内のそれぞれのノードが number() 関数に渡されたかのように評価され、その結果として得られた数値の合計が返される。
    +
    評価されるノード集合。 このノード集合内のそれぞれのノードが number() 関数に渡されたかのように評価され、その結果として得られた数値の合計が返される。
    -

    {{ 英語版章題("Returns") }}

    - -

    戻り値

    +

    返値

    数値。

    -

    {{ 英語版章題("Notes") }}

    - -

    注記

    +

    (なし)

    -

    {{ 英語版章題("Defined") }}

    - -

    定義

    - -

    XPath 1.0 4.3

    - -

    {{ 英語版章題("Gecko support") }}

    +

    定義

    -

    Gecko でのサポート

    +

    XPath 1.0 4.3

    -

    サポート済み。

    +

    Gecko での対応

    -
    {{ languages( { "en": "en/XPath/Functions/sum", "fr": "fr/XPath/Fonctions/sum", "pl": "pl/XPath/Funkcje/sum" } ) }}
    +

    対応済み。

    -- cgit v1.2.3-54-g00ecf