ãªã¹ã

åææ¡ä»¶:	åºæ¬çãª HTML ã®æ§æã«è¼ã£ã¦ãããåºæ¬çãª HTML ã«ç²¾éãã¦ãããã¨ã
å¦ç¿ææ:	é åºãªããªã¹ããé åºä»ããªã¹ããèª¬æãªã¹ãã® 3 ç¨®é¡ã® HTML æ§é ã åãªã¹ãã®æ£ããä½¿ç¨æ¹æ³ã ãªã¹ãã®ããå¹åºãç¨éãä¾ãã°ããã²ã¼ã·ã§ã³ã¡ãã¥ã¼ãªã©ã

é åºãªã

milk
eggs
bread
hummus

html

<ul>
  milk
  eggs
  bread
  hummus
</ul>

æå¾ã«ãªã¹ãã®é ç®ããããã <li> (list item)ã§å²ã¿ã¾ãã

html

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

ã¢ã¯ãã£ãã©ã¼ãã³ã°: é åºãªããªã¹ãã®ãã¼ã¯ã¢ãã

<h2>ã©ã¤ãåºå</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>ç·¨éå¯è½ãªã³ã¼ã</h2>
<p class="a11y-label">
  Esc ãæ¼ãã¨ã³ã¼ãé åãããã©ã¼ã«ã¹ãç§»åããããã¨ãã§ãã¾ãï¼Tab ã¯ã¿ãæåãæ¿å¥ãã¾ãï¼ã
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
milk
eggs
bread
hummus
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="ãªã»ãã" />
  <input id="solution" type="button" value="çããè¡¨ç¤º" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "çããè¡¨ç¤º";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "çããè¡¨ç¤º") {
    textarea.value = solutionEntry;
    solution.value = "çããé ã";
  } else {
    textarea.value = userEntry;
    solution.value = "çããè¡¨ç¤º";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "çããè¡¨ç¤º") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

é åºã¤ã

Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road

html

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

ã¢ã¯ãã£ãã©ã¼ãã³ã°: é åºã¤ããªã¹ãããã¼ã¯ã¢ãããã

<h2>ã©ã¤ãåºå</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>ç·¨éå¯è½ãªã³ã¼ã</h2>
<p class="a11y-label">
  Esc ãæ¼ãã¨ã³ã¼ãé åãããã©ã¼ã«ã¹ãç§»åããããã¨ãã§ãã¾ãï¼Tab ã¯ã¿ãæåãæ¿å¥ãã¾ãï¼ã
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Drive to the end of the road
Turn right
Go straight across the first two roundabouts
Turn left at the third roundabout
The school is on your right, 300 meters up the road
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="ãªã»ãã" />
  <input id="solution" type="button" value="çããè¡¨ç¤º" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "çããè¡¨ç¤º";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "çããè¡¨ç¤º") {
    textarea.value = solutionEntry;
    solution.value = "çããé ã";
  } else {
    textarea.value = userEntry;
    solution.value = "çããè¡¨ç¤º";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "çããè¡¨ç¤º") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

ã¢ã¯ãã£ãã©ã¼ãã³ã°: ã¬ã·ããã¼ã¸ã®ãã¼ã¯ã¢ãã

<h2>ã©ã¤ãåºå</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>ç·¨éå¯è½ãªã³ã¼ã</h2>
<p class="a11y-label">
  Esc ãæ¼ãã¨ã³ã¼ãé åãããã©ã¼ã«ã¹ãç§»åããããã¨ãã§ãã¾ãï¼Tab ã¯ã¿ãæåãæ¿å¥ãã¾ãï¼ã
</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">
Quick hummus recipe

  This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.

  Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.

  Ingredients

  1 can (400g) of chick peas (garbanzo beans)
  175g of tahini
  6 sundried tomatoes
  Half a red pepper
  A pinch of cayenne pepper
  1 clove of garlic
  A dash of olive oil

  Instructions

  Remove the skin from the garlic, and chop coarsely
  Remove all the seeds and stalk from the pepper, and chop coarsely
  Add all the ingredients into a food processor
  Process all the ingredients into a paste
  If you want a coarse "chunky" hummus, process it for a short time
  If you want a smooth hummus, process it for a longer time

  For a different flavor, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.

  Storage

  Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.

  Hummus is suitable for freezing; you should thaw it and use it within a couple of months.
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="ãªã»ãã" />
  <input id="solution" type="button" value="çããè¡¨ç¤º" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<h1>Quick hummus recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavor, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "çããè¡¨ç¤º";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "çããè¡¨ç¤º") {
    textarea.value = solutionEntry;
    solution.value = "çããé ã";
  } else {
    textarea.value = userEntry;
    solution.value = "çããè¡¨ç¤º";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "çããè¡¨ç¤º") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

ç«ã¡å¾çããå ´åã¯ããã¤ã§ã [çããè¡¨ç¤º] ãã¿ã³ãæ¼ãããGitHub ãªãã¸ããªã¼ã® text-complete.html ã®ä¾ãè¦ããã¨ãã§ãã¾ãã

å¥ãåã®ãªã¹ã

html

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>Process all the ingredients into a paste.</li>
  <li>If you want a coarse "chunky" hummus, process it for a short time.</li>
  <li>If you want a smooth hummus, process it for a longer time.</li>
</ol>

html

<ol>
  <li>Remove the skin from the garlic, and chop coarsely.</li>
  <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
  <li>Add all the ingredients into a food processor.</li>
  <li>
    Process all the ingredients into a paste.
    <ul>
      <li>
        If you want a coarse "chunky" hummus, process it for a short time.
      </li>
      <li>If you want a smooth hummus, process it for a longer time.</li>
    </ul>
  </li>
</ol>

èª¬æãªã¹ã

ç¬ãè¨ (soliloquy)
ãã©ãã§ãç»å ´äººç©ãèªåèªèº«ã«ããã¹ããããåãªãèããææãããããªã£ãéç¨ãï¼ä»ã®ç»å ´äººç©ã§ã¯ãªãï¼è¦³å®¢ã«å¯¾ãã¦è¡¨ç¾ãããã®ã§ãã
ç¬ç½ (monologue)
ãã©ãã§ãç»å ´äººç©ãèªåã®èããè¦³å®¢ãä»ã®ç»å ´äººç©ã«ä¼ããããã«åããã®ã§ãã
åç½ (aside)
ãã©ãã§ãç»å ´äººç©ãè¦³å®¢ã®ã¿ã«å¯¾ããã¦ã¼ã¢ã¢ããã©ãããã¯ãªå¹æãçã£ã¦ã³ã¡ã³ãããã¾ããããã¯éå¸¸ã¯ææããèãããè¿½å ã®èæ¯æå ±ã§ãã

èª¬æãªã¹ãã¯ä»ã®ç¨®é¡ã®ãªã¹ãã¨ç°ãªãã©ããã¼ â <dl> ãä½¿ãã¾ããããããã®ç¨èªã <dt> ï¼description termãèª¬æç¨èªï¼è¦ç´ ã§å²ã¿ãããããã®èª¬æã¯ <dd> ï¼description definitionãèª¬æå®ç¾©ï¼è¦ç´ ã§å²ã¿ã¾ãã

èª¬æãªã¹ãã®ä¾

ä¾ããã¼ã¯ã¢ãããã¾ãããã

html

<dl>
  <dt>ç¬ãè¨ (soliloquy)</dt>
  <dd>
    ãã©ãã§ãç»å ´äººç©ãèªåèªèº«ã«ããã¹ããããåãªãèããææãããããªã£ãéç¨ãï¼ä»ã®ç»å ´äººç©ã§ã¯ãªãï¼è¦³å®¢ã«å¯¾ãã¦è¡¨ç¾ãããã®ã§ãã
  </dd>
  <dt>ç¬ç½ (monologue)</dt>
  <dd>
    ãã©ãã§ãç»å ´äººç©ãèªåã®èããè¦³å®¢ãä»ã®ç»å ´äººç©ã«ä¼ããããã«åããã®ã§ãã
  </dd>
  <dt>åç½ (aside)</dt>
  <dd>
    ãã©ãã§ãç»å ´äººç©ãè¦³å®¢ã®ã¿ã«å¯¾ããã¦ã¼ã¢ã¢ããã©ãããã¯ãªå¹æãçã£ã¦ã³ã¡ã³ãããã¾ããããã¯éå¸¸ã¯ææããèãããè¿½å ã®èæ¯æå ±ã§ãã
  </dd>
</dl>

1 ã¤ã®ç¨èªã«è¤æ°ã®èª¬æ

ãªããä¾ãã°ãåä¸ã®ç¨èªã«è¤æ°ã®èª¬æãæããããã¨ãå¯è½ã§ãã

html

<dl>
  <dt>åç½ (aside)</dt>
  <dd>
    ãã©ãã§ã¯ãç»å ´äººç©ãè¦³å®¢ã®ã¿ã«å¯¾ããã¦ã¼ã¢ã¢ããã©ãããã¯ãªå¹æãçã£ã¦ã³ã¡ã³ãããã¾ããããã¯éå¸¸ã¯ææããèãããè¿½å ã®èæ¯æå ±ã§ãã
  </dd>
  <dd>
    æç« ã§ã¯ãç¾å¨ã®ãããã¯ã«é¢é£ããã³ã³ãã³ãã®ä¸é¨ã§ãããæ¬æã®æµãã«ç´æ¥åããªããããè¿ãã«è¡¨ç¤ºããã¾ãï¼å¤ãã®å ´åãæ¨ªã«ä¸¦ãã§ããæ ã®ä¸ã«å¥ãã¾ãï¼ã
  </dd>
</dl>

<h2>ã©ã¤ãåºå</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>ç·¨éå¯è½ãªã³ã¼ã</h2>
<p class="a11y-label">
  Esc ãæ¼ãã¨ã³ã¼ãé åãããã©ã¼ã«ã¹ãç§»åããããã¨ãã§ãã¾ãï¼Tab ã¯ã¿ãæåãæ¿å¥ãã¾ãï¼ã
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
Bacon
The glue that binds the world together.
Eggs
The glue that binds the cake together.
Coffee
The drink that gets the world running in the morning.
A light brown color.
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="ãªã»ãã" />
  <input id="solution" type="button" value="çããè¡¨ç¤º" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<dl>\n <dt>Bacon</dt>\n <dd>The glue that binds the world together.</dd>\n <dt>Eggs</dt>\n <dd>The glue that binds the cake together.</dd>\n <dt>Coffee</dt>\n <dd>The drink that gets the world running in the morning.</dd>\n <dd>A light brown color.</dd>\n</dl>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "çããè¡¨ç¤º";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "çããè¡¨ç¤º") {
    textarea.value = solutionEntry;
    solution.value = "çããé ã";
  } else {
    textarea.value = userEntry;
    solution.value = "çããè¡¨ç¤º";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "çããè¡¨ç¤º") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

ã¹ãã«ãã¹ã

ã¾ã¨ã

Help improve MDN

Learn how to contribute

View this page on GitHub â¢ Report a problem with this content

ãªã¹ã

ã¢ã¯ãã£ãã©ã¼ãã³ã°: é åºãªããªã¹ãã®ãã¼ã¯ã¢ãã

ã¢ã¯ãã£ãã©ã¼ãã³ã°: é åºã¤ããªã¹ãããã¼ã¯ã¢ãããã

Help improve MDN

ã¢ã¯ãã£ãã©ã¼ãã³ã°: é åºãªããªã¹ãã®ãã¼ã¯ã¢ãã

ã¢ã¯ãã£ãã©ã¼ãã³ã°: é åºã¤ããªã¹ãããã¼ã¯ã¢ãããã