ECサイト等をいじっているときに時々あるのは、「※HTMLのみ使用可能」。
文字を大きくしたい・色を変えたい…今回はそんなHTMLのみで文字を修飾する方法を紹介していきます。
Contents
HTMLだけで文字の修飾（色や大きさ等）を変更するには？
HTMLしか使えない状態で文字を色々修飾したい…そんな時は「CSS」を直接HTMLに書き込みます。
- ①修飾したい文字をタグで囲む
- ②開始タグにstyle属性を追記
という感じです。
詳しくみていきましょう。
style属性とは？
style属性とは、CSSのプロパティを直接HTMLに書き込むことが出来る属性です。
グローバル属性とよばれ全ての要素に指定出来る属性です。
style以外にもClassとかidなどもグローバル属性です。
文字の修飾（色や大きさ等）を変更する方法
それでは、文字を修飾していきます。
修飾したい箇所をタグで囲む
下記の文章をサンプルにしていきます.
↓
↓
本当にあった筆者の話。
最近、作ったばかりのキャッシュカードなくしてとても悲しいよ… (´·ω·`)
口座作ってから一度もお金引き落としできなくて、給料に手が出せないよ。
↑
↑
みずほ銀行のキャッシュカードなくした本当の話。
これにタグを囲んでみましょう。とても悲しいことを強調しましょう。
で変更したい箇所を囲います。
※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のみで頑張ってみましょ…
あと本気でみずほのキャッシュカードどこいった…？