まじメモ|白兎Blog -副業×会社員×お金-

「副業×会社員×お金」をテーマにしたサイトです。働きながら給料以外に収入を得たい人に読んで欲しい副業ノウハウを経験談を交えてご紹介してます。

【副業で稼ぐ!】WEBマーケッターが教える『HTML講座 002』リンクの貼り方や文字の大きさや色の変え方!

f:id:shiro-usagi:20200820225159j:plain

 

こんにちは
白兎(@shirousagi_memo)です。

 

はじめに!

このHTMLの記事は、これからHTMLを覚えてWEB業界に転職したいなとか、HTMLを覚えて副業で稼ぎたいなと言う人に向けて、WEBマーケッターでありECコンサルタントでうある白兎が実践の知識を持ってHTMLを教えます!と言う記事です。

 

なぜ実践なのか?と言うと、白兎も30歳の時にWEBデザイナーの学校に通ってWEB業界に転職してきました。正直言うと、学校で習った事はほぼ実践では役に立たず、かなり苦労したのを覚えてます。

 

役に立たなかった訳では無いのですが、60万かけて通った甲斐は正直ありませんでした。ですので、HTMLの学校に行くお金が無いという人に読んでもらえると凄く嬉しいです。

 

第一回HTML -HTMLの最初の基本編-

www.shirousagi.site

 

はじめに無料HTMLエディターのBracketsを立ち上げよう!

詳しくは上のリンクから前回の記事を読んでくださいね。HTMLを組む事をコーディングすると言います。コーディングする時はまずHTMLエディターを立ち上げておく。その癖をつけましょうね。

STEP-5:HTMLでリンクの貼り方!

HTMLのリンクの貼り方をここで覚えてしまいましょう。方法はとても簡単です。リンクと言うはこういう事を言います⇒

 

(例)「まじメモ」のブログはこちら

まじメモの文字が青くなっているのがわかると思います。WEBブラウザはリンクが張られている文字は青くなります。今後に勉強をするCSSと言う技術を使えばその色も変更する事が可能なのですが、まずはこのリンクをHTMLでどうやってやるのかを説明しますね。

 

(例)「まじメモ」のブログはこちら

  1. 「<a href="https://www.shirousagi.site/">まじメモ</a>」のブログはこちらから

(▲上の行は実際にユーザーから見える形で、下の行はそれをHTMLで表したもの) 

 

HTMLでリンクを貼る場合は<a>を使います。これはコーディングする人は「エータグ」と呼びます。リンクを貼りたい文字の部分を<a></a>で囲うんです。そうする事によってその文字がリンクされます。

 

URLは見た通り。<a>タグの前タグに「href」と言う言葉を入れます。そして「=””」の所にリンク先のURLをそのまま入力すればOK。ですのでリンクは以下のHTMLの形で覚えてしまいましょう。

 

HTMLでのリンクの貼り方はこの形で覚える! 

  1. <a href="リンク先URL">リンクを貼りたい文字</a>

 

画像にリンクを貼りたい時のHTMLはコレ!

  1. <a href="リンク先URL"><img src="画像のURL"></a>

 

 画像はあとで勉強しますが、<img src="画像URL">で表現します。前回の記事のSTEP-4でHTMLタグは2つで一つと説明していますが、画像タグはレアケースの1つのみ。なので覚えやすいです。ブログなどで画像を差し込みたい場合は、はてなブログで言うとHTML編集を開いて、画像のタグを差し込むだけ。

 

f:id:shiro-usagi:20200826230531p:plain

HTMLでのリンク張り方まとめ

・リンクは<a href="リンク先URL">リンクしたい文字</a>

・画像にリンクを貼る時は<a href="リンク先URL"><img src="画像URL"></a>

 

読み方は...

  • <a href="">は「エーエイチレフ」
  • <img src="">は「イメージサーチ」

 

リンクは簡単なので読み方も覚えてしまいましょうね。特に仕事ではここにリンク張って~!見たいな会話で仕事が進んでいくので、エーエイチレフなどと言いません。でも読み方は覚えておいた方が絶対に良いです。いつ使うかわかりませんからね。

 STEP-6:HTMLで文字の大きさや色を変える方法

次はHTMLを使って文字サイズや文字の色を変える方法です。ここではまず基礎中の基礎を教えますね。しっかり読み込んでくださいね!

HTMLだけで文字の色を変える方法

(例)副業で稼ぐ!

  1. (例)<font color ="#B22222">副業</font>で稼ぐ

 

まず基本の形がコレとなります。ですが、先に行っておくとこのフォントの形式は実践ではほぼ使いません。理由は古い形式である事と、今はほぼCSSを使ってフォントサイズを指定するので必要が無くなったという事になります。

 

逆にこの形式を未だに使う場所はどこなのかと言うと、メルマガなどです。メルマガなどはCSSが使えず規制されてる場合が多いです。そう言った場合はこういったCSSを使わないHTMLだけの文字カラー変更のコーディングをする場合があります。

HTMLで色の表現は#と数字6個

  • 白 #FFFFFF
  • 黒 #000000
  • 赤 #FF0000

 

ざっとこんな感じで表現していきます。こちらはWEBサイトに色々なカラーコードのサイトがありますので参考にして下さい。僕はこのカラーコードのサイトをよく参考にしています。

 

www.colordic.org

HTMLだけで文字の大きさを変える方法

次は文字の大きさですね。ではまた例文でHTMLの組み方を見ていきましょう!

 

  (例1) 副業で稼ぐ
  (例2) 副業で稼ぐ
  (例3) 副業で稼ぐ

 

  1. (例1)<font size ="1">副業</font>で稼ぐ<br />
  2. (例2)<font size ="2">副業</font>で稼ぐ<br />
  3. (例3)<font size ="3">副業</font>で稼ぐ<br />

 

 HTMLで文字サイズを変える場合の基本構文はこちらです。フォントの大きさを数字で表現します。この数字が大きくなればなるほど文字が大きくなる仕組みですね。こちらも今実践ではまず使わず、CSSが規制されてるメルマガのコーディングの時くらいとなります。

文字を太くしてみる

副業で稼ぐ

  1. <b>副業</b>で稼ぐ

 

このタグも実践ではほぼ使いません。ですがSEOとしてはちょっと意味がある太文字タグ。太文字になっている部分は普通の文字よりも重要性が高いと認識されます。見方を変えると意味がない文字を太文字にしてしまうとSEO的にもよくありません。

 

こちらも今はCSSで書いてしまう事がほとんどなのですが、まずは基本の構文として覚えておかなければいけません。HTMLはHTMLで覚えて、そのあとにCSSを覚えていくのが一番スムーズになります。

まとめ

今日はHTMLだけで文字の大きさや色を変える方法を書きました。まずはHTMLの基礎中の基礎となりますのでしっかり覚えてしまいたいですね。ここまででリンクの貼り方や文字の装飾の仕方をやりました。

 

これだけでも本当に簡単なWEBページは作れるはずです。試しに作ってみてはどうですか?はてなブログで自分のブログの文字などを装飾するのもありですね!