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

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

【副業で稼ぐ!】WEBマーケッターが教える『HTML講座:序章』:HTMLとは?無料で使えるツールは?

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

 

こんにちは

白兎(@shirousagi_memo)です。

 

はじめに

この記事では実際に仕事でHTMLを使ってる白兎が丁寧にHTMLの事をわかり易く解説する記事です。前からHTMLの記事を書こう書こうと思っていたのですが、表現が上手く出来るかなと迷っており、筆が止まっておりました。

 

でも僕自身も副業をする上でHTMLは凄く役に立っており、ちょうどこのブログ「まじメモ」も専門的なブログに少しちょうどいいなと思いついに始めます。HTMLとCSSを実践を元に説明していく記事なので、全部で何記事になるのだろう?と言うスケールになります。


でも、この記事を全部読んでもらって、自分で実践してもらえれば、絶対HTMLはできるようになります。でもHTMLだけでは仕事ではあまり使えません。大事なのはCSSとセットで覚える事なんです。

 

HTMLとCSSが合わさって、今のWEBサイトのデザインが出来上がってると思ってください。


今日はクリエイティブな話では無くて、HTMLとかCSSって何?と言う所のご説明となります。またHTMLを勉強するにあたってパソコンが必要なのですが、それ以外にもHTMLエディターと言われるものが必要です。無料で使えるものも含め、ご紹介していきますね。

 

  1. <h1>まじメモHTML講座</h1>
  2. <h2>WEBマーケッターが教える実践HTML。</h2>
  3. <p>HTMLを覚えたい人に向けたHTMLを丁寧に説明したブログ始めます。</p>

 

HTMLを勉強する前に準備しておくもの!

①パソコン
②HTMLエディター

 

のみとなります。

 

HTMLエディターは白兎(僕)も使ってる無料のBrackets当アプリケーションが最高です。なにもドリームウィーバーを買わなくてもこれで十分。むしろこのBracketsはadobe社のドリームウィーバーの元になったアプリケーションなので、インターフェイスも似てます。

HTMLはdreamweaverが無くても同じような機能が無料で使えるフリーソフト「Brackets」を見つけた!初心者WEBデザイナー必見。

www.shirousagi.site

 

▲ 詳しくは上の記事を読んでおいてほしいです。まずはパソコンにこのBracketsをインストールしておきましょうね!

HTML・CSSとは?

 

  1. <h1>HTML・CSSとは?</h1>

HTML

HTML(エイチティーエムエル)とは略称で、
正確には...

 

  • H ハイパー
  • T テキスト
  • M マークアップ
  • L ラングエッジ

 

と読みます。

 

ハイパーテキストマークアップラングエッジなのでHTML。HTMLはプログラム言語の1種ですが、他のプログラム言語とは違い、一番覚えやすいと僕は感じています。多分一番覚えるのが楽ですね。

 

HTMLはWEBサイトを作るために必須のプログラム言語となります。逆の言い方をすれば、HTMLが使えればWEBサイトが作れるようになります。WEBサイトを作ったり、文字にリンクを貼ったり、文字の色を変えたり、ボタンを配置したり。そんな事が出来るようになるがHTMLなんです。

 

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML(エイチティーエムエル)と呼ばれることが多い。SGMLを元に開発された。World Wide Web (WWW)において、ウェブページ(1990年代後半頃からはコンテンツという語も利用されている。

参照:HyperText Markup Language - Wikipedia

CSS

  1. <h1>HTML・CSSとは?</h1>

 

これはCSS(シーエスエス)と読みます。

 

  • C カスケーティング
  • S スタイル
  • S シート

 

カスケーティングスタイルシートなのでCSSです。CSSの主な役割はHTMLでは出来ないデザイン部分の役割を果たします。CSSを使う事で様々なデザインのWEBサイトが作成可能です。むしろHTMLとCSSを分けて覚えるよりも同じものとして覚えていったほうが楽だと思います。

 

僕も最初は別で勉強していきましたが、HTMLとCSSは絶対にセットで使うのであまり意識せずに、一緒に覚えてしまいましょう。

 

Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日: 段階スタイルシート[1])は、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。

参考:Cascading Style Sheets - Wikipedia

HTMLの学校に行くとお金はいくらかかるの?

相場で言うと10時間程度で4万から5万円程度。僕もWEBの学校に通いました。当時はデザインとHTMLとちょっとしたプログラム言語があり60万円と高額でした。今は安くなったのですが、それでも10時間5万円。正直HTMLは10時間でマスターするのは難しいです。

 

ですので、このブログを書く事にしました。

 

ブログで書いておけば何度も何度も見直せるし、参考書と違って藻く運ぶ必要がなく、インターネットがあれば確認する事が出来るので、ある意味一番便利だと思っています。出来たら、このブログと参考書を合わせてみて頂けると理解度がより早まりますよ。

 

 

 

HTMLが出来たら就ける仕事

ECサイトの運営や更新業務
HTMLコーダー
WEBマーケッター
副業でWEBサイト作成

 

などの業種となります。

 

企業によってスキル感はちがいますが、ECサイトの運営(特にショッピングモール)程度なら間違いなくつく事が出来ます。実際に僕がそうでしたらからね。そこからどんどん知識を身に着けて今があります。


また副業でも役に立ちます。コーディングの仕事は多いですし、専門スキルなのでそれなりのお金になります。その時、っ専門スキルを身に着けて良かったと思って頂けるはずです。

HTMLが身につくまでどのくらい?

これはその人がHTMLに費やした時間によります。よく新しいプログラム言語を身に着けるに必要なのは1万行のプログラムを書く事とされています。ブログでも同じ事が言われており、ブログの場合は100記事書いて初めてスタートラインとされています。

 

僕の場合は正直覚えてないのですが、HTMLは少しずつ覚えていくことで出来る事が増えていきます。ですので○○時間勉強したからOKと言う訳でなく、自分なりの合格点と言うものが必ずあります。

 

WEB制作の会社で働きたいならそれなりの時間が必要ですし、副業で稼げる程度で良いというのであれば比較的簡単でもあります。HTMLの場合、HTMLで稼ぐというより、HTMLが出来る事で楽天市場の商品ページが作れるとか、簡単なWEBサイトが作れるという武器が身に付きますので、それで稼ぐイメージです。

HTMLと一緒に覚えたいもの

それはPHOTOSHOP(フォトショップ)です。HTMLとCSSとフォトショップが出来ればもうWEBデザイナーはすぐそこです。あとはそこから派生するJavaScriptやPHP、動画編集など自分の得意分野を見つけて勝負するだけです。

 

 

 

まとめると!

次回から本格的にHTMLがわからない人がHTMLをできるようになるまでの記事を上げていきます。大事なことは焦らない事。この記事を読んでる人の中にはブログをやっていて、ワードプレスのデザインをしたいからHTMLを覚えたいという人もいると思います。

 

まずは基礎編を身に着けて、あとは勉強とともに色々試してみてください。HTMLは身に着けておいて損はないです。それは言い切れますし、副業でも間違いなく稼げるスキルなので、頑張ってHTMLを覚えちゃいましょうね!

 

(本当は有料noteで書こうか迷いました...)

次の授業:【副業で稼ぐ!】WEBマーケッターが教える『HTML講座 001』HTMLエディターを立ち上げて基礎を覚える

www.shirousagi.site