(3)HTMLはメモ帳とブラウザだけで簡単表示!!―文字列を装飾する編

2021年3月9日 

前回まではHTMLとCSSの仕組みなどを素人目線の駆け足でざざっと書いてしまいましたが、今回はブログなどで必須の「文字の装飾」を指定できる方法をまとめました。例えば部分的に太字にしたり大文字にしたりするアレです。

例文

日頃のご愛顧に感謝をこめて

大感謝祭セール

Wordなどのワープロソフトを使用すればすぐにできることもHTMLでいじくる場合は指定されたタグの挿入が必要になります。それを利用していろいろ加工してみましょう。

以下では省いていますが、ブラウザで表示する場合には下記の通り前後にHTMLであることを指示するタグを忘れずに。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>日頃のご愛顧に感謝をこめて</p>
<p>大感謝祭セール</p>
</body>
<html>

指定した文字列を「太字」にする

それでは「大感謝祭セール」を強調するために太字にしてみましょう。

<p>日頃のご愛顧に感謝をこめて</p>
<p><b>大感謝祭セール</b></p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

簡単なのでつい多用しがち。教科書にラインを引きすぎて何が重要なのかわからなくなる現象に陥りやすいのでメリハリは大事ですね。
※b→bold

<p>日頃のご愛顧に感謝をこめて</p>
<p><strong>大感謝祭セール</strong></p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

上記のように<strong>というタグでも同様の表示が可能です。使い分けとしては<strong>の方が文章中の単語を強調するという意図が強くなるようですが、正直私はよくわかっていないので気にしていません。

指定した文字列を「斜体」にする

スマホなど小さい画面だと読みづらくなる気がするのであまり使用しませんが、URLなどアルファベットを装飾するのには便利です。
※i→italic

<p>日頃のご愛顧に感謝をこめて</p>
<p><i>大感謝祭セール</i></p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

指定した文字列に「下線」を付ける

CSSで下線の装飾もできるのでそちらの方がちょっと手が込んでる感じが出せますが、これも便利。
※u→underline

<p>日頃のご愛顧に感謝をこめて</p>
<p><u>大感謝祭セール</u></p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

指定した文字列に「マーカー線」を付ける

こちらもCSSを使用した方が綺麗に装飾できますが、こっちの方が簡単です。べったりと文字列全体が真っ黄色になるので使いすぎると不穏な感じになります。

<p>日頃のご愛顧に感謝をこめて</p>
<p><mark>大感謝祭セール</mark></p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

指定した文字列に「打ち消し線」を付ける

以前書いた文章を削除したいけれど痕跡は残したいぞという時には便利です。
※s→strike

<p>日頃のご愛顧に感謝をこめて</p>
<p><s>大感謝祭セール</s></p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

指定した文字列の「色を変更」する

ここから少し変化球が加わります。段落「p」のスタイル「style」は「=」という感じに指示が増えますがその分応用できることも増えます。それが以下。

<p>日頃のご愛顧に感謝をこめて</p>
<p style="color: red;">大感謝祭セール</p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

指定した文字列の「サイズを変更」する

色の変更ができればサイズの変更も簡単です。単位はいろいろありますが面倒がないのは相対的にサイズを指定できるパーセントです。例えば他の文字より1.5倍に拡大したかったら150%とします。

<p>日頃のご愛顧に感謝をこめて</p>
<p style="font-size: 150%;">大感謝祭セール</p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

指定した文字列の「フォント形式を変更」する

このサイトではゴシック体(sans-serif)を標準に指定していますが明朝体(serif)になるようにしてみましょう。

<p>日頃のご愛顧に感謝をこめて</p>
<p style="font-family: serif;">大感謝祭セール</p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

指定した文字列を「中央寄せ」にする

これはCSSで指定した方がいいらしいのですが、できないこともないので参考までに。

<p>日頃のご愛顧に感謝をこめて</p>
<p style="text-align: center;">大感謝祭セール</p>

日頃のご愛顧に感謝をこめて

大感謝祭セール

応用して遊んでみる

日頃のご愛顧に、感謝をこめて


感謝祭セール

DAY:1
We're having a sale.

他にもいろいろいじれば某新世紀エヴァンゲリオンみたいにもできます。これは指示が多くなるので別途CSSも使用して記述しています。

* * *

タグの使い方に関してはいろいろルール(ブラウザでの表示対応、推奨や非推奨など)みたいなところもあるようなので、業務で使用する場合はそこの環境(チームやプロジェクト)と擦り合わせる必要があります。趣味や一個人の責任の範囲でしたらそれを表示するユーザーに迷惑がかからなければ好きなように組んで問題ない??とは思うのでいろいろトライしてみましょう

\気になったらSHARE!!/

次の記事:コレを聴いておけば若者に『うっせぇわ』されないかもしれない曲(2021/3現在)

『龍が如く0(Yakuza0)』真島さんと学ぶ非日常英会話―インチキ宗教の罠編(Disciple of the New Order):後編:前の記事

ほちょこと申します。
気になるを追究した雑記です。

好きな事をとことん&パニック症の減薬中!!超マイペースに生きている人間もいるからダイジョーブと誰かに伝わったら嬉しい手作りウェブサイトです。基本エンタメ全般ですが稀に真面目モードにも。
よろしければABOUTもご覧ください。

mail:contact e-hocho.com 


最近の記事

喫煙は健康を損なう危険性を高めるのにタバコを吸う男性がカッコ良く見える理由は

映画『愛がなんだ』を観て―作品に騙され渋谷や下北沢で青春できると思ってはならぬ

コロナ禍も悪いことばかりじゃないと思って生きてみる

【iMovie】iPhoneで動画編集するなら意外と使えるデフォルトアプリで!!

正統続編TVアニメ『ひぐらしのなく頃に業』で思い返す「女子同士」の友情

【ネタバレあり〼】庵野監督のエヴァ完結編『シン・エヴァンゲリオン劇場版:||』を観た感想など

記事一覧はコチラ

読まれている記事

\ スマホはこちらから /