CodeGym /Javaコース /Frontend SELF JA /HTMLでのテキストのフォーマット

HTMLでのテキストのフォーマット

Frontend SELF JA
レベル 5 , レッスン 5
使用可能

10.1 フォーマットの始まり

<b>, <strong>, <i>, <em>, <u>, <small> タグを使ったテキストのフォーマットは、ウェブ開発者が読みやすさを向上し、テキストの特定部分に目を引くために役立つよ。各タグには特定の使い方があるからね:

  • <b>: 追加の意味なしで太字
  • <strong>: 重要性を強調して太字
  • <i>: スタイリッシュな強調のためのイタリック
  • <em>: 論理的または意味的な強調のためのイタリック
  • <u>: 視覚的な強調のための下線
  • <small>: 副次的な情報のための小さいテキスト

これらのタグを適切に理解し利用することで、よりわかりやすく視覚的に魅力的なウェブページを作ることができるよ。

テキストフォーマットの基本タグ

<b> と <strong> タグ

<b> タグはセマンティックな意味がなく、テキストを太字にするために使われる。 <strong> タグもテキストを太字にするけど、追加のセマンティックな意味を持たせて、テキストの重要性や意味を示すんだ。

HTML
    
      <p>このテキストは <b>太字</b> で、こちらのテキストは <strong>非常に重要で太字</strong>。</p>
    
  

<i> と <em> タグ

<i> タグはセマンティックな意味がなく、テキストをイタリックにするために使われる。 <em> タグはイタリックにしつつ、テキストのアクセントや重要性を示すよ。

HTML
    
      <p>このテキストは <i>イタリック</i> で、こちらのテキストは <em>非常に重要でイタリック</em>。</p>
    
  

<u> と <ins> タグ

<u> タグはテキストに下線を引くために使われる。 <ins> タグもテキストに下線を引くけど、挿入されたテキストを示すために使われるよ。これは変更を追跡する時に意味があるんだ。

HTML
    
      <p>このテキストは <u>下線付き</u> で、こちらのテキストは <ins>挿入されて下線付き</ins>。</p>
    
  

<s> と <del> タグ

<s> タグはテキストを取り消し線にするために使われる。 <del> タグも取り消し線にするけど、削除されたテキストを示すために使われる。変更を追跡する時に意味があるよ。

HTML
    
      <p>このテキストは <s>取り消し線付き</s> で、こちらのテキストは <del>削除されて取り消し線付き</del>。</p>
    
  

<mark> タグ

<mark> タグは、現在のコンテキストで特別な意味や重要性を持つテキストを強調するために使われる。 <mark> の中にあるテキストは黄色の背景で表示されるんだ。

HTML
    
      <p>このテキストは <mark>強調されて</mark>、注目を集めているよ。</p>
    
  

<small> タグ

<small> タグは、通常のテキストと比べて小さいサイズのテキストを表示するために使われる。

HTML
    
      <p>これは通常のテキストで、これは <small>小さいテキスト</small>。</p>
    
  

<sub> と <sup> タグ

<sub><sup> タグは、下付き文字と上付き文字をそれぞれ作成するために使われる。

HTML
    
      <p>これは下付き文字のテキスト H<sub>2</sub>O と上付き文字のテキスト x<sup>2</sup>。</p>
    
  

10.2 改行

<br> タグ

<br> タグは、新しい段落を作成せずに、テキストを新しい行に移すために使われる。

HTML
    
      <p>これは改行のあるテキスト<br>1つの段落内にあるよ。</p>
    
  

<hr> タグ

<hr> タグは、ウェブページの内容を視覚的に区切る水平線を挿入するために使われる。

HTML
    
      <p>線の上のテキスト。</p>
      <hr>
      <p>線の下のテキスト。</p>
    
  
1
Опрос
テーブル,  5 уровень,  5 лекция
недоступен
テーブル
テーブル
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION