HTML WEB関係

【HTML】文字の修飾(色や大きさ等)を変更する方法

投稿日:2020年12月11日 更新日:

ECサイト等をいじっているときに時々あるのは、「※HTMLのみ使用可能」。
文字を大きくしたい・色を変えたい…今回はそんなHTMLのみで文字を修飾する方法を紹介していきます。

HTMLだけで文字の修飾(色や大きさ等)を変更するには?

HTMLしか使えない状態で文字を色々修飾したい…そんな時は「CSS」を直接HTMLに書き込みます。

  • ①修飾したい文字をタグで囲む
  • ②開始タグにstyle属性を追記

という感じです。
詳しくみていきましょう。

style属性とは?

style属性とは、CSSのプロパティを直接HTMLに書き込むことが出来る属性です。
グローバル属性とよばれ全ての要素に指定出来る属性です。

style以外にもClassとかidなどもグローバル属性です。

文字の修飾(色や大きさ等)を変更する方法

それでは、文字を修飾していきます。

修飾したい箇所をタグで囲む

下記の文章をサンプルにしていきます.



本当にあった筆者の話。
最近、作ったばかりのキャッシュカードなくしてとても悲しいよ… (´·ω·`)
口座作ってから一度もお金引き落としできなくて、給料に手が出せないよ。


みずほ銀行のキャッシュカードなくした本当の話。
これにタグを囲んでみましょう。とても悲しいことを強調しましょう。

最近、作ったばかりのキャッシュカードなくして<span>とても悲しいよ… (´·ω·`)</span>

で変更したい箇所を囲います。
※spanタグは、一つの塊を定義するものです。span自体に意味はないですが、ここからここの文章だよ!って意味です。divタグも同じように意味がなく塊を定義するものですが、「改行」が入るので見出しなどに使います。

どのように修飾したいか記入していきます。

Pixabay at Pexels


そして、spanタグの開始の方に style= を追加します。


<span style=”プロパティ:値;”>とても悲しいよ… (´·ω·`)</span>

このように「style属性」を使用すると直接CSSを書き込めます。
今回は文字を青くしていきたいと思います。

文字を青くする時は、<span style=”color:blue;“>と記入をします。spanのエリアの色は青にするよ。ってイメージ。これを実際にブラウザで見てみると…

 

最近、作ったばかりのキャッシュカードなくしてとても悲しいよ… (´·ω·`)

文字が青くなり無事に悲しさを伝えられましたね。しかし悲しさをもっと伝えたい…文字色を青のまま文字を大きくできないか?という時は先程のstyle属性に更に”プロパティ:値;を追加します。

追加方法は以下。
<span style=”color:blue; font-size: サイズ;”>
今回はプロパティはfont-size→文字の大きさです。値は今のサイズの200%でやってみましょう。

とても悲しいよ… (´·ω·`)


さらに文字を太くするには。
値:font-weight:
プロパティ:どのくらい太くするか(今回は700)
を追記。

<span style=”color:blue; font-size: 200%; font-weight:700;”>


とても悲しいよ… (´·ω·`)


…という感じに要素に複数プロパティを指定する時は「;」で区切り追記すればOKです。

まとめ

HTMLのみで文字を装飾する方法でした。
ECサイトのYahooとか楽天とか、CSS使う時は有料になっちゃうからなあああ…
HTMLのみで頑張ってみましょ…

あと本気でみずほのキャッシュカードどこいった…?

スポンサーリンク




スポンサーリンク




-HTML, WEB関係
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

wp_error

WPログイン画面でエラー(Cookieがブロック)が出る時の対策<SSLの設定にご注意を>

ある時、ログイン画面で下記のようなエラーがでてしまった。 「エラー: Cookie がブロックされているか、お使いのブラウザーで未対応のようです。WordPress を使うには Cookie を有効化 …

Illustrator_1

【イラストレーター(Illustrator)】イラレでアートボードの背景が白くなった時の対処法<備忘録>

イラレでラインスタンプ作ってたら、アートボードの背景が真っ白になって境界線が消えた。 ↑こーゆーこと。 普段、アートボードの背景は黒とかグレーなんだけど急に真っ白になっちまった。 一体何のショートカッ …

ads-txt_6

【グーグルアドセンス】ads.txtファイルとは?WordPressでの設置方法

サイトを作成してしばらくしてGoogle AdSenseを確認したところ、「要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。」と表示されていまし …

screenshot_2

ブラウザ(クローム)でのウェブサイトフルキャプチャ(スクショ)のやり方・撮り方

デザインを参考にしたいサイトがあったのでキャプチャしようとしたら結構面倒くさかったので備忘録。 Contents1 ブラウザ(クローム)でのウェブサイトフルキャプチャ(スクショ)のやり方・撮り方2 サ …

【Illustrator・イラレ】名刺入稿データの作り方<トンボ・塗り足し>

筆者がイラストレーター(イラレ)で名刺作成するの入稿データの作成方法をさくっとまとめました。※印刷する会社により若干ルールが異なるのでそこはご注意を Contents1 イラストレーター(イラレ)で名 …

背景画像

プロフィール画像

あさの まき

WEB関連の仕事をしている旅行と酒を愛してやまない女。 いい大人の雑記。

ツイッター

SPONSORED LINK