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のチェックボックスでtrueとfalseを取得する方法を現役デザイナーが解説【初心者向け】

HTMLのチェックボックスでtrueとfalseを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
HTML

HTMLの特殊文字で摂氏温度記号を表示する方法を現役エンジニアが解説【初心者向け】

HTMLの特殊文字で摂氏温度記号を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】

HTMLでテーブル内に日付を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む...
HTML

HTMLでFile APIを使ってローカルファイルを読み込む方法を現役エンジニアが解説【初心者向け】

HTMLでFile APIを使ってローカルファイルを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...
HTML

HTMLで文字エンコードを指定する方法を現役デザイナーが解説【初心者向け】

HTMLで文字エンコードを指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
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

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

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次input要素に入力した文字入力した文字を太字にする方法input要素に入力した文字を太字にしてみようまとめ監修してくれたメンター そもそも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<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「 太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; 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

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

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

Pythonの標準入力の基本を現役エンジニアが解説【初心者向け】

Pythonの標準入力の基本について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonの標準入力の基本について詳しく説明していくね！ 大石ゆかり お願いします！   input関数とは input関数とは、Pyhonで標準入力を受け取るための関数です。標準入力とは、プログラムと実行環境との間に用意されているデーターの受け渡し口のことです。 プログラムとはPythonのソースコードのことを指します。実行環境とはプログラムを実行するPython.exe(Windowsの場合)を指します。標準入力はプログラムの実行中にキーボードから入力した値を受け取りたい時などに利用します。 input関数で標準入力を受け取ると、受け取った値はPythonでは文字列として扱われます。input関数の書き方は以下のとおりです。 変数 = input() input関数に、標準入力を受け取る際に表示するメッセージを引数で指定することができます。 変数 = input("メッセージ") input関数はPythonの組み込み関数の1つです。組み込み関数とはPython言語で最初から使えるようになっている関数のことで、input関数以外にもいくつか種類があります。 詳しくは以下を参考にしてください。 Pythonの組み込み関数(input)   文字列を入力して出力 標準入力を受け取る方法として、まずは文字列を入力する例を確認していきましょう。input関数で標準入力を受け取ると、受け取った値はPythonでは文字列として扱われます。 例えば以下はinput関数で受け取った値を変数「mei」に格納する例です。 mei = input() それでは、文字列を入力して出力する例を確認してみましょう。 以下の例では、入力した文字列の前後の空白をstrip関数で除去した後、 +演算子を使って文字列を結合してsimei変数に格納しています。 si = input("名字を入力してください") mei = input("名前を入力してください") si = si.strip() mei = mei.strip() simei = si + "　" + mei print("こんにちは" + simei + "さん！") 実行結果は以下のようになります。 最初は「煌木」と入力し、次は「太郎」と入力しています。 名字を入力してください　煌木　　 名前を入力してください太郎　　 こんにちは 煌木　太郎 さん！   [PR] Webデザインで副業する方法とは整数を入力して出力 次は整数を入力する場合です。 inputで受け取った値は文字列として扱われるので、数値に変換する必要があります。数値に変換するには、整数の場合はint()を、浮動小数点の場合はfloat()を使います。 以下の例では入力した値を整数に変換して、計算した結果を出力しています。 val = input("円の半径を入力してください") radius = int(val) area = radius * radius * 3.14 print("半径" + val + "の円の面積は", area, "です" ) 実行結果は以下のようになります。 円の半径を入力してください10 半径10の円の面積は 314.0 です   複数の文字列を入力して出力 複数の文字列を入力する場合はinputを繰り返します。 以下はwhile句と組み合わせた例です。このようにすると、回数を決めずに複数の文字列を入力できますが、whileが無限ループにならないよう、終了条件はきちんと決めておきましょう mylist = [] while True: val = input("値を入力してください(Enterのみで終了)")
Python

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

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