【初心者】独学でWEBサイトを作るならHTMLとCSSを覚えよう!

WEBサイト
スポンサーリンク
スポンサーリンク

HTML、CSSを学ぶ

HTMLを学ぶ

HTMLはマークアップ言語と呼ばれ、ホームページをネット上で表示することができる言語になります。タグと呼ばれるものを使い囲むことで表示することが可能になります。

<h1>おはようございます</h1>

こんな感じ。

上のタグは見出しタグと言って、見出しに適用するタグになります。

表示させたい文字を、タグで囲うことで文字がサイトに表示されるようになるので、この場合だと「おはようございます」がブラウザで表示されることになります。

ヒロ
ヒロ

これならHTML行けるかも。

HTMLを学ばなければ、自分が作ったサイトをブラウザで表示することが出来ないので、必ず学ばなければいけない項目です。

「Wix」と言うサービスを使えば、HTMLを知らなくても直感的に作れますが、副業でホームページ制作をしていくなら、Wixだけ使えても少し厳しいのでHTMLは必須科目です。

 

先ほど紹介した<h1>タグだけでなく、<p>タグや<ul>タグなど覚えることは少し多いですが、完璧に覚える必要はありません。

なぜかと言うと、分からなかったらその都度調べるようにすればいいので、全て完璧に覚えなくても大丈夫です。

まずは基本的なタグさえ覚えればホームページを作ることができるでしょう。

基本的なタグは何か?と言われれば難しいですが、サイトを表示させるだけなら

  • 見出しタグ
  • 段落
  • divタグ
  • リストタグ

かなり強引になりますが、これさえ覚えていればなんちゃってサイトが作成できます。

僕は、割と完璧主義者なので、最初からすべて覚えようとしましたが、今考えると本当に時間の無駄でした。全部覚えられるほど脳みそのキャパは余っていないですし、覚えてもすぐ忘れてしまうので、「あのタグってなんだっけ?」ってなるんです。

なので、完璧には覚えようとせず、分からないタグは、その都度調べて勉強することをオススメします。

ヒロ
ヒロ

どうせ忘れるんだから次!

分からないまま放っておくのは、完璧主義者に取っては少しもどかしい感じがしてしまいますが、次々と進んでいくことで達成感も味わえますので、あまり気にしなくても大丈夫です。

HTMLの学ぶ方法としては、「Progate」を利用してみることをおすすめします。

probateトップ画像

「Progate」は、プログラミングの基礎を学ぶことができ、初心者の方でも安心して取り組めます。

無料プラン、有料プランとありますが、利用するならやはり「有料プラン」でしょう。

有料と言っても月額980円ですので、アルバイト1時間分と考えればとてもコスパが良いことがわかります。

さくっと1ヶ月で有料プランを終わらせれば、980円で済みますし、980円以上のリターンがありますので、早速Progateを利用してみましょう。

Progateはこちら

また他にも「ドットインストール」と言った動画で学ぶスタイルもあります。

ドットインストールのトップ画像

1つの動画が約3分なので、分からないとこはすぐに戻ることが出来ますし、記述の仕方も動画で学ぶことが出来ます。

講師の先生の手際の良さったらもう。。。

Progate、ドットインストールは王道ですが使わない選択肢はあり得ません。

Progateはこちら

ドットインストールはこちら

 

CSSを学ぶ

コーディング画像

HTMLと同時に学んでほしいのがCSSになります。

CSSはカスケーディング・スタイル・シートの略で、文字を赤くしたり、テキストに線を引いたり、レイアウトを変更したりなど、スタイルを指定するために使います。

CSSのプロパティもすべて覚えるとなると、時間がかかってしまいますしすぐに忘れてしまうので、完璧に覚えると言ったことはやめましょう。

僕もすべてのCSSを覚えている訳ではなく、その都度ググりながら覚えることもあります。

CSSの学び方ですが、まずは「これを使えばこうなる」くらいで大丈夫です。

どのプロパティを使えば、どんな挙動をするのかが大切だと思っています。

例えば

  • color: red; = テキストが赤くなる
  • margin-top: 30px; = 上に余白30ピクセル
  • background-color: #000; = 背景が黒くなる

と言った、どんな挙動をするのか覚えるようにしましょう。

 

少しアドバイスするとしたら、marginとpaddingの違い、position:absolute、relativeの使い方。これらはかなり使うことになると思うので、覚えておいてください!

CSSも学び方は一緒で、ここでもまたprogate、ドットインストールの登場です。

「またかよ!」とツッコミを入れられそうですが、progate、ドットインストールを使った方が明らかに吸収スピードが違うんですよね。

ヒロ
ヒロ

時間を有効的に使ってみましょう!

僕はProgateの存在を最近(約1年前)知り、有料プランになりましたが、「これもっと早くやっておけば良かった」と後悔しました。

大袈裟ではなく、本当のことですので、さくっとprogate、ドットインストールを終わらせてみてください。

コスパを考えるとこれ以上のものはない気がします。

Progateはこちら

ドットインストールはこちら

コメント

タイトルとURLをコピーしました