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

著者:おきた ゆういち

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

Windows 10最新バージョンは、2004 (May 2020) です。
こちらの記事でアップデート方法をまとめております。(2020-05-30更新)


最終更新日:2019-11-23
公開日:2018-07-08
Header 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は何が変わったのか?なぜ変更したのか?その違いと理由について。[1]

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百科事典
HTMLを始めよう – ウェブ開発を学ぶ | MDN

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

ご不明な点がございましたら、コメントをお待ちしております。
内容に不備な点や間違いがございましたら、下のコメント欄よりご指摘頂けると、ありがたく思います。

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

人気記事ランキング(24時間)

この記事に関連のあるトピックです

新着記事 New arrival

メルマガ登録

ただいま準備中です。

このサイト内を検索できます。

(Visited 94 times, 4 visits today)

脚注   [ + ]

1.リンク切れのため、リンク解除。2019-11-11

著者について

おきた ゆういち administrator

2020/04/15 更新 – ブログや通販サイトなど、Webサイトを運営されているお客様に、「検索からアクセスアップする文章の書き方」をオンラインでアドバイスさせて頂いております。at Osaka, Japan.

    Privacy Preference Center

    Your Privacy

    When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalised web experience.

    Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

    gravatar.com

    Strictly Necessary Cookies

    These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site may not work then.

    jsdelivr.com,wordpress.com

    Performance Cookies

    These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies, we will not know when you have visited our site.

    accaii.com

    Targeting Cookies

    These cookies are set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant ads on other sites. They work by uniquely identifying your browser and device. If you do not allow these cookies, you will not experience our targeted advertising across different websites.

    amazon.co.jp,rakuten.co.jp

    3rd-parties

    We uses cookies to help us identify and track visitors, their usage of this website, and their website access preferences.

    facebook.com,twitter.com,google.com,linkedin.com.com
    https://www.facebook.com/policies/cookies/
    https://policies.google.com/technologies/types
    https://support.google.com/analytics/answer/181881?hl=ja
    https://www.linkedin.com/legal/cookie-policy

    Major browser help page

    How to set cookies in browser.

    Google Chrome: https://support.google.com/chrome/answer/95647?hl=en Internet Explorer https://support.microsoft.com/en-us/help/260971/description-of-cookies Mozilla Firefox https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer Safari (デスクトップ) https://support.apple.com/kb/PH5042?locale=en_US Safari (モバイル) https://support.apple.com/en-us/HT201265 Androidブラウザー https://support.google.com/nexus/answer/54068?visit_id=1-636621905069450730-928182436&hl=en&rd=1 Opera https://www.opera.com/help Operaモバイル https://www.opera.com/help/mobile/android#privacy