フォントの色を変更するHTML5タグを覚えて、HTML4.01から卒業しましょう。

著者:Yuichi Okita

フォントの色を変更するHTML5タグを覚えて、HTML4.01から卒業しましょう。

最終更新日:2018-07-08
公開日:2018-07-08
Thumbnail Image:Pixabay

お客様のサイト内でフォントカラーを変更する部分があったため、
HTML5に則した記述でフォントカラーの変更方法を書いておきます。

使用するHTML5タグは、spanタグ

フォントカラーの指定や変更するには、HTML5タグのspanスパンタグです。

<span>この挟まれている範囲が、装飾される。</span>

 

spanは、挟んでいる範囲を指定します。
そして、範囲を指定してから、

  • カラー:#0000ff ←リンクの色」と入力して検索すれば、検索結果に表示されます。
  • 装飾:underline

 

次に、spanタグの属性を書きます。

<span style="color: #0000ff; text-decoration: underline;">こちら</span>

 

覚えるしか仕方がないですが、

  1. spanは、範囲を指定する。
  2. 次にstyleと記述する。
  3. “”(ダブルクォーテーション)の中身は、
    装飾の指定 コロン 装飾の結果 セミコロン
    という順序です。

 

なぜ、この話題を記事にしているのか?

理由1:HTML4.01時代は、別のタグを記述していた

私は21年前にHTML4.01を覚えた人間なので、HTMLの知識が古いのです。
そのため、積極的にHTML5を機会あるごとに勉強しています。

参考記事:HTML4.0とHTML5は何が変わったのか?なぜ変更したのか?その違いと理由について。

HTMLこぼれ話

私の専門はWebデザイナーでもなく、システムエンジニア(SE)でもないので、コーディングに関しては至らない点があります。
専門の業者さんにお任せすれば良いのですが、「1行だけ記述を変更する」というような事態に遭遇すると、たった1行のためだけに外注さんを呼んで、私のお客様にお金を払っていただくというのも、なんとも忍びない気がするので、私が調べて独力でWeb制作している部分は少なくはありません。

本格的に大掛かりなWeb制作では、協力関係のWeb制作専門会社さん(大阪市内)に依頼しております。

 

HTML4.01の頃の書き方

HTML4.01時代は、

<U><font color="#ffffff" size="3">HTML4.01時代はこのような記述だったが、これからはしてはいけない。</font></U>

Uタグやfontタグでフォントの装飾をしていましたが、

「CSSの登場でデザイン(装飾)と意味(HTML)の役割を切り分けていきましょう」

という指針となり、HTML5ではもっと加速度を持って推進されています。

そのため、古いHTMLは早々に新しいHTMLへ切り替えていかないと、いつまで経っても古いままのWebの海となり、
汚れが落ちず浄化されません。

 

理由2:HTML5への切り替えが急務

現在のワードプレスでも、古いHTMLを記述すると自動的にソースが弾かれてしまいます。
ワードプレスに限らず、Mozillaが運営しているオンラインエディタ「Thimble by Mozilla」でも、現代のHTMLでないと間違いとみなされ、自動的に弾かれてしまいます。
W3C(ダブリュースリーシー)だけに限らず、AppleもMozillaもGoogleもHTML5の急速な普及を強力に推し進めていますので、Webに携わっている人はプロアマ問わず、HTML5を積極的に活用していくべきだと、私は考えています。

 

私が一番おぼつかないかもしれませんが、上述の理由から、HTML5を勉強しております。

 

HTMLがぎっしりまとめられているDocs

最後に、情報源のしっかりとしたHTML百科事典のようなサイトをご紹介いたします。
Mozillaが運営するサイト「Mozilla Developer Network」では、世界中の開発者の方が貢献されています。
ドキュメントが膨大なサイトなのですが、下記リンクからスタートすると、HTMLを順序だてて学べると思います。

HTMLを教えている方もこちらのサイトを基軸に指導されると、より正確に伝えることが出来るのではないでしょうか。
ボリュームの厚みに圧倒されますけど Σ( ̄[] ̄;)!

 

貴重なご意見ありがとうございます。

お客様から頂いたページへのご意見・ご感想を参考に、より一層品質の高いコンテンツを目指してまいります。
お客様のご協力に厚く感謝申し上げます。
暗号化されて届きます。


今後とも当サイトをよろしくお願い致します。

Related Posts 左へスライドして記事をお選びください。


最後までお読み頂きありがとうございます。

著者について

Yuichi Okita administrator

好物は焼き鳥と吉本新喜劇界隈のたこ焼きです。コンサルティング科目:SEO、コピーライティング、ブランディングアップ以外に、PCハード面、ソフト面、マーケティング、E-mail marketing、英語、他。/ 好きな書籍「孫子の兵法」 / 法人のお客様は、お問合せフォームをご活用くださいませ。/ 個人のお客様は、SEOコンサルティングのみお受けしております。Twitterからのお問合せもお受けしております。