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

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のみで頑張ってみましょ…

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