HTML

HTMLで文字を太字・イタリック表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLで文字を太字・イタリック表示する方法について解説しています。文字を太字にする場合はbタグ、イタリックにする場合はiタグを使用します。それぞれの書き方と画面上での見え方を確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLで文字を太字・イタリック表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

今回紹介する手法は、HTMLで文字の一部を強調したい場合などにとても便利な方法なので是非参考にしてみてください。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

文字を太字・イタリック表示する方法について詳しく説明していくね！

お願いします！

太字にする方法

まずは、HTMLで文字を太字にする方法について紹介します。文字を太字にする場合はタグを使用します。具体的には文字というように使用します。タグで囲んだ部分の文字が太字になります。

文章内の大事な単語などを太字にすると良いでしょう。

[PR] Webデザインで副業する方法とは

イタリックにする方法

次に、HTMLで文字をイタリックにする方法について紹介します。文字をイタリックにする場合はタグを使用します。こちらも、太字の場合と同様に文字と、イタリックにしたい文字をタグで囲みます。

タグは複数組み合わせて使用することもできるため、この2つのタグを組み合わせて、文字とすれば、指定の文字を太字でイタリックにすることもできます。

文字を太字・イタリック表示してみよう

HTMLで文字を太字・イタリック表示する方法についてサンプルコードを参考に実際にコードを書いてみましょう。

サンプルコード

<html>

  <head>
    HTMLで文字を太字・イタリック表示する方法
  </head>

  <body>

    ますは通常の文字を表示します。<br>
    サンプルテキストSampleText
    <br>

    文字を<b>太字</b>にしてみましょう。<br>
    <b>サンプルテキストSampleText</b><br>
    <br>

    それでは文字を<i>イタリック表示</i>にしてみましょう。<br>
    <i>サンプルテキストSampleText</i><br>
    <br>

    それでは文字を<b>太字</b>で<i>イタリック表示</i>にしてみましょう。<br>
    <b><i>サンプルテキストSampleText</i></b>

  </body>
</html>

実行結果

HTMLで文字を太字・イタリック表示する方法 ますは通常の文字を表示します。
サンプルテキストSampleText

文字を太字にしてみましょう。
サンプルテキストSampleText

それでは文字をイタリック表示にしてみましょう。
サンプルテキストSampleText

それでは文字を太字でイタリック表示にしてみましょう。
サンプルテキストSampleText

解説

コード14行目では、タグを使用して文字を太字にしています。

コード18行目では、タグを使用して文字をイタリック表示にしています。

コード22行目では、タグとタグを組み合わせて文字を太字でイタリック表示にしています。

作成したhtmlファイルを開くと実行結果のようにそれぞれ文字の表示が変わっていることが確認できます。

監修してくれたメンター

菅繕久

現在はフリーランスのエンジニアをしていてプログラミング歴は8年目になります。

普段は Python、FileMaker等を使って様々な業務で活用できるIoTプロダクトRPAツールを作成しています。開発実績としては、業務自動化ツール(在庫管理・発注・ファイル操作 etc)、電子カルテシステム、ロボット用プログラムなどがあります。

TechAcademy ではPythonコースを担当しております。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTMLでrole属性を使ってアクセシビリティを高める方法をを現役デザイナーが解説【初心者向け】

HTMLでrole属性を使ってアクセシビリティを高める方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

HTML

HTMLのcheckboxをdisabledにする方法を現役エンジニアが解説【初心者向け】

HTMLのcheckboxをdisabledにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

HTML

HTMLでのselectedによる初期値の設定方法を現役エンジニアが解説【初心者向け】

HTMLでのselectedによる初期値の設定方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLの仕様に関連するW3Cについて現役デザイナーが解説【初心者向け】

HTMLの仕様に関連するW3Cについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HT...

HTML

HTMLで文章の途中で改行する方法を現役デザイナーが解説【初心者向け】

HTMLで文章の途中で改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、...

HTML

HTMLで略語を表現する方法 - abbr【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLの略語・名前の特記・住所表現について解説します...

HTML

あわせてよく読まれている記事

HTMLのinput要素に入力した文字を太字にする方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素に入力した文字を太字にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 input要素に入力した文字を太字にする方法について詳しく説明していくね！大石ゆかりお願いします！ input要素に入力した文字例えば、一般的なテキストボックスは以下のようなHTMLコードで実装することができます。 HTML <input type="text"> 画面イメージ入力した文字を太字にする方法テキストボックス内に入力した文字でも、CSSを使うことで表示を太字に変更することができます。 [PR] Webデザインで副業する方法とはinput要素に入力した文字を太字にしてみようテキストボックス内に表示された文字列を太字にするためには、HTMLコード以外に、以下のようなCSSコードを用意します。 CSSの書式 font-weight : bold ; このCSSコードをinputタグに適用することで、画面表示の設定値がテキストボックスに反映され、文字列が太字で表示できるようになります。 HTMLにCSSを適用するには、style属性を追加します。 HTML <input type="text" style="font-weight : bold ;"> 画面イメージ「こんにちは」が太字で表示できるようになりました。まとめ input要素に入力した文字列を太字にしたい場合は、CSSのfont-weight:boldを使いましょう。監修してくれたメンター寺谷文宏 WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAchademyではフロントエンド、Javaコースを担当。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。目次太字にする方法イタリックにする方法文字を太字・イタリック表示してみよう監修してくれたメンターそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。田島悠介どうして文字を探したいのかな？何かの文字で区切っているから？それとも文字の位置を探したい？大石ゆかりええと、文字を探す方法がそんなにいろいろあるんですか？田島悠介そうなんだ。PHPではいろんな文字列の検索方法があるよ。まずは、区切り文字で検索する方法から見てみよう！区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。区切る文字列を境にして文字列を取得したいときに使えます。構文検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。第2引数は検索する文字列です。検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。 strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。ソースコードフルネーム「山田太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田太郎'; echo "対象文字列：$target "; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName "; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。検索対象の文字列

PHP

【Windows編】Word(ワード)のショートカットキー20選

皆さんは、ショートカットキーについてご存知でしょうか？いちいちマウスを操作しなくても、キーボードを使って様々な動作ができるショートカットキーは、ぜひ覚えておきたい知識のひとつですよね。今回はWord(ワード)に関連する、厳選したショートカットキーをまとめて紹介します。初めてショートカットキーを使う初心者の方から、確認のために使いたいPC上級者の方まで、Word操作の効率アップにぜひお役立てください。目次新規文書作成ファイルを開く文書を上書き保存する文書を閉じるすべて選択する直前の動作を元に戻す直前の動作を繰り返す選択範囲をコピーする選択範囲を貼り付ける選択範囲を切り取る書式をコピーする書式を貼り付ける文字列を太字にする文字列を斜体にするフォントサイズを大きくする・小さくする文書を印刷する（ダイアログボックス表示）フォントサイズを大きくする・小さくする印刷プレビューを表示する改ページする次のページへ移動前のページへ移動覚えておきたいWordショートカットキーまとめ新規文書作成　「Ctrl」+「N」新しく文書を作成したい時、このショートカットキーを使えばいち早く新規文書を作成することができます。他の文書を開いたままでも、「Ctrl」を押しながら「N」を押すことで白紙の文書が作成されます。 [PR] Webデザインで副業する方法とはファイルを開く「Ctrl」+「O」前に作成したファイルを開きたい、そんな時にオススメのショートカットキーです。「Ctrl」を押しながら「O」を押すことで、「ファイルを開く」のダイアログボックスを表示することができます。文書を上書き保存する「Ctrl」+「S」せっかく文書を書き終えたのに、保存ができておらずデータが消えてしまった！なんて経験をしたことがある人は多いのではないでしょうか。「Ctrl」を押しながら「S」を押す動作を指に覚えさせることで、マウスを操作しなくても簡単に文書を保存することができます。保存忘れなどのミスも防げるようになるので、優先的に覚えておきたいショートカットキーです。文書を閉じる「Ctrl」+「W」開いているファイルを閉じたい時に便利なのが、このショートカットキー。「Ctrl」を押しながら「W」を押すことで、開いているファイルを閉じることができます。 ※この時ファイルは閉じられますが、Wordは起動したままになっています。 Word自体も閉じたい時には、「Alt」＋「Ctrl」を押すことで終了させることができます。すべて選択する「Ctrl」+「A」すべての文書を選択したいときに、マウスを操作してドラッグする、なんて面倒な操作とはもうおさらば！「Ctrl」を押しながら「A」を押すことで、挿入している図形や表、画像まですべて選択することができます。直前の動作を元に戻す「Ctrl」+「Z」作業中、うっかり文字列を消してしまった、なんてことありませんか？そんな時には、落ち着いて「Ctrl」を押しながら「Z」を押してみましょう。ひとつ前の動作に戻ることができます。「Z」を押した回数だけ、動作を戻すことができるので大変便利です。直前の動作を繰り返す「Ctrl」+「Y」同じ動作を他の文字列にも適応したい時ってありますよね。例えば、太字にする動作をもう一度繰り返し使いたい時には、「Ctrl」を押しながら「Y」を押すことで簡単に同じ動作を繰り返すことができます。選択範囲をコピーする「Ctrl」+「C」選択した文字列や表、図などをコピーしたい時、わざわざ右クリックでメニューを呼び出してコピーを探すと、少々手間がかかりますよね。「Ctrl」を押しながら「C」を押すだけで、簡単に選択した範囲をコピーすることができます。下記で紹介する「切り取り」と「貼り付け」のショートカットキーと合わせて覚えることで、作業効率が格段にアップします。選択範囲を貼り付ける「Ctrl」+「V」先ほど紹介した「コピー」と合わせて使いたいショートカットキーです。「Ctrl」を押しながら「V」を押すことで、コピーした文書や表、図などを簡単に貼り付けることができます。選択範囲を切り取る「Ctrl」+「X」上述の「コピー」「切り取り」と一緒に覚えたいショートカットキーです。「Ctrl」を押しながら「X」を押すことで、選択した範囲を切り取ることができます。「コピー」、「貼り付け」、「切り取り」の3つの動作は、他のアプリケーションでも同様のショートカットキーであることが多いので、確実に覚えて活用しましょう！書式をコピーする「Ctrl」+「Shift」+「C」同じ書式を別の文字列にも適応させたい！そんな時に便利なのがこのショートカットキー。「Ctrl」を押しながら「Shift」と「C」を押すことで、選択範囲の書式をコピーすることができます。書式のコピーの場合は、文字列のコピーとは違い、「Shift」同時に押すことをお忘れなく！書式を貼り付ける「Ctrl」+「Shift」+「V」書式のコピーと合わせて覚えたいショートカットキーです。書式をコピーした後、「Ctrl」を押しながら「Shift」と「V」を押すことで、コピーした書式を何度でも、複数箇所の文字列に適応させることができます。文字列を太字にする「Ctrl」+「B」文字列を強調したい時に、太字にする機能を使うことってよくありますよね。そんな時には、「Ctrl」を押しながら「B」を押すことで簡単に太字にすることができ、さらにもう一度ショートカットキーを押すことで解除もでき、とても便利です。文字列を斜体にする「Ctrl」+「I」上述の太字にする機能と合わせてよく使う、文字列を斜体にする機能ですが、「Ctrl」を押しながら「I」を押すことで簡単に行うことができます。太字と同様に、ショートカットキーをもう一度押すことで解除ができるので、合わせて覚えましょう！フォントサイズを大きくする・小さくする「Ctrl」+「]」・「Ctrl」+「[」頻繁に行うフォントサイズを変える動作、ショートカットキーを覚えて作業をスムーズにしたいですよね。「Ctrl」を押しながら「]」を押すごとに1ポイントずつ大きく、「Ctrl」を押しながら「[」を押すごとに1ポイントずつ小さくすることができます。文書を印刷する（ダイアログボックス表示）「Ctrl」+「P」文書を印刷したい時に使いたいショートカットキー。「Ctrl」を押しながら「P」を押すことで、「文書を印刷する」のダイアログボックスを表示させることができます。下記の「印刷プレビューを表示する」と一緒に覚えたいですね。印刷プレビューを表示する「Ctrl」+「F2」印刷したらどういうレイアウトになるのか、プレビューが見たい！そんな時には、「Ctrl」を押しながら「F2」を押すことですぐにプレビュー画面を開くことができます。改ページする「 Ctrl」+「Enter」この段落からページを変えたい！そんな時に便利なのがこのショートカットキーです。改ページをしたい位置にカーソルを合わせて、「Ctrl」を押しながら「Enter」を押すことで簡単に改ページをすることができます。次のページへ移動「Ctrl」+「PageDown」たくさんページがある文書を作成している時に、いちいちマウスでスクロールしながらページを移動していくと時間がかかってしまいますよね。カーソルの位置を基準として、「Ctrl」を押しながら「PageDown」を押すと次のページへと移動することができます。前のページへ移動「Ctrl」+「PageUp」前述の「次のページへ移動」と一緒に覚えておきたいショートカットキーです。同様にカーソルの位置を基準として、「Ctrl」を押しながら「PageUp」を押すことで前のページへと移動することができます。覚えておきたいWordショートカットキーまとめキー機能「Ctrl」+「N」新規文書作成「Ctrl」+「O」ファイルを開く「Ctrl」+「S」文書を上書き保存する「Ctrl」+「W」文書を閉じる「Ctrl」+「A」すべて選択する「Ctrl」+「Z」直前の動作を元に戻す「Ctrl」+「Y」直前の動作を繰り返す「Ctrl」+「C」選択範囲をコピーする「Ctrl」+「V」選択範囲を貼り付ける「Ctrl」+「X」選択範囲を切り取る「Ctrl」+「Shift」+「C」書式をコピーする「Ctrl」+「Shift」+「V」書式を貼り付ける「Ctrl」+「B」文字列を太字にする「Ctrl」+「I」文字列を斜体にする「Ctrl」+「]」・「Ctrl」+「[」フォントサイズを大きくする・小さくする「Ctrl」+「P」文書を印刷する（ダイアログボックス表示）「Ctrl」+「F2」印刷プレビューを表示する「 Ctrl」+「Enter」改ページする「Ctrl」+「PageDown」次のページへ移動「Ctrl」+「PageUp」前のページへ移動いかがでしたでしょうか。初心者の方にとっては、ショートカットキーを覚えながらの作業となるため、はじめは戸惑うこともあるとは思いますが、慣れてくるとPC操作の速さが格段に上がります。指が慣れるまで根気強く取り組んで、スピーディなWord操作を目指しましょう！

Word

bタグとstrongタグの書き方！HTMLで文字を太字にする方法【初心者向け】現役Webデザイナーが解説

HTMLで強調したい部分に使われるタグとして太字やイタリックなど様々あります。その中でも今回は太字について紹介します。 bタグとstrongタグを使って書き方を解説しているので、実際に書きながら覚えていきましょう。目次「見かけ上」と「意味」の違い bタグ strongタグ実際に書いてみようまとめ「見かけ上」と「意味」の違い見た目は同じように見える太字ですが、タグの種類によって強調する内容が異なります。 1つ目の内容は、単純に文字を太く表示するという「見かけ上」強調するという内容です。 2つ目の内容は、サイト上で文字が持つ「意味」を強調するという内容です。例）SEO（検索エンジン最適化）でのサイト上の文章の影響力なぜタグを使い分ける必要があるのでしょうか？それは、1つのページに「意味」として強調する言葉を増やしすぎると、SEOのペナルティを受け、検索が下がってしまう場合があるからです。そのため、人の目で見た時の「見かけ上」強調したいのか、サイトにとって重要な「意味」を持つ言葉なのかを、タグで使い分けることが必要です。 [PR] Webデザインで副業する方法とはbタグ bタグとは「boldタグ」の略で、文字を太字にで表示します。bタグは「見かけ上」文字を強調することができますが、「意味」としての強調はされません。 bタグの書き方はbタグで強調したい文字をはさみます。 太くしたいところ strongタグ strongタグもbタグ同様に文字を太く表示するタグですが、strongタグは「見かけ上」と「意味」の両方強調します。上述の通り、SEO対策などで使うことで検索エンジンに引っかかりやすくなりますが、使いすぎるとペナルティを受ける場合があります。 strongタグの書き方もbタグ同様に、strongタグで文字をはさみます。 強調したいところ 実際に書いてみようそれでは実際に書いてみましょう。bタグとstrongタグを両方使ってみます。bold.htmlを作成し、以下のように記述します。 bold.html ——————————————————- <html> <head> <meta charaset="utf-8" /> </head> <body> bタグとstrongタグの違いは、bタグは「見かけ上」だけ太字にしているのに対して、 strongタグは「見かけ上」と「意味」の両方を強調しているところである。 そのため、きちんと使い分ける必要がある。 </body> </html> ——————————————————– ブラウザで開いてみます。まとめ bタグとstrongタグの使い分けは、SEOの一つの対策につながります。ぜひ活用してより良いサイトを作りましょう。他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。執筆してくれたメンターメンターSSさん文系・未経験でIT企業に就職して、9年目。環境構築から開発・設計・テストまで何でも屋さんをやっていました。テックアカデミーではJavaコースを担当しています。 HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML

HTMLで文字の太さを細字にする方法を現役エンジニアが解説【初心者向け】

HTMLで文字の太さを細字にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介文字の太さを細字にする方法について詳しく説明していくね！大石ゆかりお願いします！ HTMLで文字の太さを細字にする方法サイト作成では必ず登場する、HTMLで文字の太さを細字にする方法について解説してみます。サイト内で、コンテンツ情報の重要性を伝えるには、強弱を持たせると良いでしょう。紙媒体の書籍でも重要なことは太字にしたり、大きくしたり、文字色を変えたりしています。これと同じです。全体的には、標準・細字とし、強調したいところを太くするのがベターです。文字の強弱を変更する方法・その１（HTML上での方法）プログラミングやアプリ開発を学べるオンラインスクール　TechAcademy（テックアカデミー）です。現役のプロのパーソナルメンターが学習をサポートするオンラインブートキャンプを開催。プログラミングやアプリ開発を学べるオンラインスクール　TechAcademy（テックアカデミー）です。現役のプロのパーソナルメンターが学習をサポートするオンラインブートキャンプを開催。 strongタグ、bタグで囲うことで、文字は太くなり、それ以外の箇所は標準テキストで表示されます。 fontタグでも強弱をつけることができますが、HTML5では、文書構造はhtml、修飾要素はcssと分けるようにしているので、fontは廃止される予定です。fontタグを使わないようにしましょう。 [PR] Webデザインで副業する方法とは文字の強弱を変更する方法・その2（CSS上での方法） p{ font-weight:bold; } 強弱をつけるには、「font-weightプロパティ」を用います。weight＝重さ、太さという意味です。font-weightプロパティの後のセレクタによって、文字の太字・細字の設定ができます。太字のフォント情報があるのであれば、一回り太い太字として表示しますが、細字のフォント情報がない場合は、標準フォントに置き換えられます。キーワードで指定するfont-weight キーワードで指定した場合の種類はnormal(通常)／bold(太く/700と同じ値)／lighter(相対的に一段階細く)／bolder(相対的に一段階太く)と、4段階あります。normalは通常の太さで、初期値はこれに設定されています。値にboldと設定すると太字になります。 codepenでプロパティに各キーワードを入れてみました。実際の表示を確認してみましょう。 p{ font-weight:bold; } See the Pen フォントの強弱をつける2 by Yuka Sato (@yuka-sato) on CodePen. 数値で指定するfont-weight 数値で指定した場合の種類は100/200/300/400/500/600/700/800/900と、9段階あります。特に単位は入れずに数字のみを記述します。実際にはブラウザで2種類のみで設定されていることが多く、画面上でも一番下の800のみが太字で表示されています。(値700以上でboldと同様の表示になります) codepenでプロパティに各数字を入れてみました。実際の表示を確認してみましょう。 p{ font-weight:100; } See the Pen フォントの強弱をつける by Yuka Sato (@yuka-sato) on CodePen. 文字の強弱を変更する方法・まとめ強調したいところにはHTML上または、CSSで設定する。太字のフォント情報があるのであれば、一回り太い太字として表示しますが、細字のフォント情報がない場合は、標準フォントに置き換えられます。CSSでの指定は、キーワードと数字があります。一般的にはキーワードが便利です。今回は、文字の強弱をつける方法を解説してみました。使い方を覚え、ページを作成してみましょう！！監修してくれたメンターゆかちん先生フリーランスのクリエイティブディレクター。制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

HTMLでstrongタグが効かない原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで太字で強調するstrongタグが効かない原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介太字で強調するstrongタグが効かない原因と対処法について詳しく説明していくね！大石ゆかりお願いします！太字で強調するための2種類のタグ HTMLタグで文字を太字にして強調したい場合に用いるのに、strongタグとbタグというものがあります。使い方としては以下のように記述します。 この文章の大事なところはココです。 この文章の大事なところはココです。 strongタグはテキストの内容の強調したい部分を明確にするために使用し、bタグはただ単に文字を太くしたい時に使用するのが一般的です。どちらを使用しても結果は同じであるため、好きな方を使いましょう。 strongタグの使い方と注意点 strongタグだけでなく、文字を斜めにしたりタグタグなどのいわゆる装飾タグについてはあまり使わないほうがとSEOの観点からいわれています。仮に文字を強調させたいときは、出来る限り該当のテキストをspanタグで囲み、CSSでfont-weight:bold;を使用したほうがいいでしょう。例 HTML この文章の大事なところはココです。 CSS .font_bold{ font-weight:bold;/*または600などで設定*/ } strongタグは3回以上使うとGoogleからペナルティを受ける可能性が高まるという話もあるので注意しましょう。 [PR] Webデザインで副業する方法とはstrongタグが効かない原因と対処法 strongタグが効かない場合は下記の原因を見直してみましょう。 HTMLのstrongのスペルにミスがある strongタグの閉じタグが書かれていない。 cssのどこかに太字になる効果を打ち消すcssが記載されている 2をまずチェックしてみて双方に問題がない場合は、記述されているcssの中に strong{ font-weight:nomal;/*400、とかで記載されている場合もあります。*/ } もしくは body{ font-weight:nomal;/*400、とかで記載されている場合もあります。*/ } などの記載がないかどうか確かめてみましょう。 reset.cssなどを使用している場合によく見かけるものであり、そのあたりを中心的に探してみるといいでしょう。また、reset.cssはいじりたくないけどstrongタグを使用したい場合は、 strong{ font-weight:bold;/*または600などで設定*/ } とすれば、strongタグで囲んだ部分が太字になるため、修正するようにしましょう。執筆してくれたメンターメンター増田直子 40歳直前までHTMLの存在すら知らなかったのですが、現在はWordPressを中心としたwebデザイン/コーディングをしているフリーランサーです。趣味はスキューバーダイビング・年間3度は海のある国内外へ旅行してます。大石ゆかり HTMLで太字で強調するstrongタグが効かない原因と対処法がよく分かったので良かったです！田島悠介ゆかりちゃん、これからも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLで文字を太字・イタリック表示する方法を現役エンジニアが解説【初心者向け】

目次

太字にする方法

イタリックにする方法