TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのinput要素に入力した文字を太字にする方法を現役エンジニアが解説【初心者向け】
icon
icon
HTML

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

初心者向けにHTMLのinput要素に入力した文字を太字にする方法について解説しています。最初にinput要素の基本の使い方と、画面上の見え方を確認します。次にCSSを使った太文字表示の方法を見ていきましょう。

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

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で縦線を引く方法を現役エンジニアが解説【初心者向け】

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

Herokuを使ってHTMLのwebサイトを公開する方法を現役エンジニアが解説【初心者向け】

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

HTMLでフォームに送信ボタンを作る方法を現役デザイナーが解説【初心者向け】

ここでは、HTMLの入力フォームに必要な送信ボタンの設置方法について解説していきます。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方...
HTML

HTML内のiタグの使い方を現役エンジニアが解説【初心者向け】

HTML内のiタグの使い方について解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさら...
HTML

HTMLエラーチェッカーの使い方を現役デザイナーが解説【初心者向け】

HTMLエラーチェッカーの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

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

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

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

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

HTMLで文字を太字・イタリック表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 今回紹介する手法は、HTMLで文字の一部を強調したい場合などにとても便利な方法なので是非参考にしてみてください。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 文字を太字・イタリック表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 太字にする方法 イタリックにする方法 文字を太字・イタリック表示してみよう   太字にする方法 まずは、HTMLで文字を太字にする方法について紹介します。文字を太字にする場合は<b>タグを使用します。具体的には<b>文字</b>というように使用します。タグで囲んだ部分の文字が太字になります。 文章内の大事な単語などを太字にすると良いでしょう。   [PR] Webデザインで副業する学習方法を動画で公開中イタリックにする方法 次に、HTMLで文字をイタリックにする方法について紹介します。文字をイタリックにする場合は<i>タグを使用します。こちらも、太字の場合と同様に<i>文字</i>と、イタリックにしたい文字をタグで囲みます。 タグは複数組み合わせて使用することもできるため、この2つのタグを組み合わせて、<b><i>文字</i></b>とすれば、指定の文字を太字でイタリックにすることもできます。   文字を太字・イタリック表示してみよう 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>
HTML

【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

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

HTMLで文字の太さを細字にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 文字の太さを細字にする方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLで文字の太さを細字にする方法 サイト作成では必ず登場する、HTMLで文字の太さを細字にする方法について解説してみます。 サイト内で、コンテンツ情報の重要性を伝えるには、強弱を持たせると良いでしょう。紙媒体の書籍でも重要なことは太字にしたり、大きくしたり、文字色を変えたりしています。これと同じです。 全体的には、標準・細字とし、強調したいところを太くするのがベターです。   文字の強弱を変更する方法・その１（HTML上での方法） プログラミングやアプリ開発を学べるオンラインスクール　<strong>TechAcademy（テックアカデミー）</strong>です。現役のプロのパーソナルメンターが学習をサポートするオンラインブートキャンプを開催。 プログラミングやアプリ開発を学べるオンラインスクール　<b>TechAcademy（テックアカデミー）</b>です。現役のプロのパーソナルメンターが学習をサポートするオンラインブートキャンプを開催。 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タグというものがあります。 使い方としては以下のように記述します。 <p>この文章の<strong>大事なところはココ</strong>です。</p> <p>この文章の<b>大事なところはココ</b>です。</p> strongタグはテキストの内容の強調したい部分を明確にするために使用し、bタグはただ単に文字を太くしたい時に使用するのが一般的です。 どちらを使用しても結果は同じであるため、好きな方を使いましょう。   strongタグの使い方と注意点 strongタグだけでなく、文字を斜めにしたりタグ<em>タグなどのいわゆる装飾タグについてはあまり使わないほうがとSEOの観点からいわれています。 仮に文字を強調させたいときは、出来る限り該当のテキストをspanタグで囲み、CSSでfont-weight:bold;を使用したほうがいいでしょう。 例 HTML <p>この文章の<span class="font_bold">大事なところはココ</span>です。</p> 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でラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力フォームの選択ボタン 入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。 ラジオボタン、チェックボックスは以下のタグで表示することが可能です。 ・ラジオボタン  <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン （※同一name属性内で、一項目しか選択できない） ・チェックボックス  <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン （※同一name属性はひとまとまりのデータとして扱われる） ・value属性 選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。 ・name属性 要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。   大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？ 田島悠介 他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！ 大石ゆかり へぇ〜じゃあアンケートページとかでよく使われてそうですね！   それでは具体的な実装方法をみていきましょう。   ラジオボタン ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。 ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。   <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性   これでどちらか一方を選択できるボタンができました。   上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介   今度は、”gender”と”trigger”の2つの選択ツールができました。 このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。 複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。   [PR] Webデザインで副業する学習方法を動画で公開中disabled属性 disabled属性は、フォーム部品を無効化することができます。 この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。 用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <!-- 性別選択 --> <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性
HTML

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

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

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのinput要素に入力した文字を太字にする方法を現役エンジニアが解説【初心者向け】