【完全初心者向け】HTML&CSSを楽しく学べる方法【無料で始める!】

【完全初心者向け】HTML&CSSを楽しく学べる方法【無料で始める!】ブログ

パグのイラスト

「WordPressを使ってWebサイトは簡単に作れるの?」
「HTMLとCSSは勉強する必要ある?」

 

ビールを持つ女性

今日はこんなお悩みにお答えします。

結論、HTMLとCSSの知識はなくても問題ありません。

ですが、知っていると得することが非常に多いので

最低限の知識をもつことをおすすめします。

 

 

\この記事のポイント


◎HTMLとCSSとは?必要性を簡単に解説!
◎おすすめの学習方法紹介
 ①プログラミング学習サービス『Progate(プロゲート)』(無料でスタートOK)
 ②初心者でも挫折しないおすすめのテキスト

 

超初心者&プログラミングに抵抗があった私でもサクサク勉強を進めることができました。

WordPressを使い始めてから、役に立つことが多く「勉強していてよかった」と感じています!

これからWordPressを始める方、既に使っている方どちらにもおすすめします。

それではお話していきますね。

 

1. HTMLとCSSとは?必要性を簡単に解説!

今ご覧になっているWebページはHTML、CSS、画像ファイルなどで構成されています。

 

ウェブサイトの仕組み

 

HTML、CSSという言語でWebページが作られていきます!

ここからはそれぞれの言語を実際にお見せします。

①HTML【Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)】

HTMLは「ハイパーテキストに印をつけるための言語」という意味です。

ハイパーテキストとは「超テキスト(テキストを超えたテキスト)」という意味で

通常のテキストにない機能を備えています。

例えば、文章をクリックすると別の文章や画像に飛ぶといったような

複数の文書を関連付けて結びつけてくれる仕組みのこと。

 

パグのイラスト

難しくて意味がわからん

 

実際に見るとわかりますよ!

今読んでいただいているこちらの記事…

記事の全体図

 

裏側はこうなっています!

 

HTMLコードの図

 

こちらの言語には「見出し」を表すものや「段落」を表すものなど

様々な種類があります。

このような一連の記述を「ソースコード」と呼びます。

この「ソースコード」によって

私たちがWebページを理解できるようになっているんですね。

 

ビールを持つ女性

「こんなページつくってね」と

コンピューターに指示している

イメージです

 

②CSS【Cascading Style Sheets(カスケーディング・スタイル・シート)】

CSSは、文章や画像の「見た目」に関する情報を記述します。

具体的には文字や背景の色、サイズ、画像をどこに配置するかなどの

装飾全般を指定する言語です。HTMLと合わせて使用されます。

 

例)↓このような見出しをつけたい場合

今日イチblogのタイトル

 

 

【HTMLの表記】

<h1>今日イチblog</h1>  ※[h1]は見出しという意味

【CSSの表記】

h1{color:green;
font-size:20px}

※h1について緑色かつ文字の大きさを20pxと指定

 

 

ビールを持つ女性

HTML=情報

CSS=見た目

という役割をもっています

 

2. WordPressを始めるときにHTMLとCSSの勉強は必要か?

お店でパソコン作業する人

 

\勉強するメリット

①WordPressに出てくる言語に慣れる、理解できる
②自分でカスタマイズできるようになる

 

Webサイトをつくるためには、まずどのような構造になっているかを

理解し、最低限の知識をもっておくといいです。

いざ始めたときに見慣れない言語が並んでいると

それだけでくじけてしまうかもしれません。

「なんとなくわかる」位でおっけーなので

これから紹介する勉強方法でサクッと始めてみましょう!

 

3. HTML&CSS おすすめの学習方法紹介

①プログラミング学習サービス『Progate』

プロゲートのロゴ

 

 

 

 

株式会社Progateが運営する

初心者向けのプログラミング学習サービスです。

HTMLとCSSだけではなく、全部で15のプログラミング言語を

学ぶことができます。

初級編→中級編→上級編(間に道場コース)と

自分のレベルに合わせて進めることができます。

\Progateの良いところ

◎HTML&CSS初級編を無料で始められる(中級編〜は有料)

◎自分でソースコードを入力して実践的に学べる

◎とにかく解説が丁寧でわかりやすい

◎サイトがきれいで勉強意欲がわく

◎プログラミングのとっつきにくさをなくしてくれる

◎自宅で好きな時間に作業できる
 
 
 
ビールを持つ女性

初級編だけでも
十分満足のいく内容でした!

 

ちなみに私は、ついつい楽しくて
「次は中級編やるぞ〜!」と

ボタンをぽちっ。

 

“ここからは有料です”のメッセージが…。

「忘れていた!有料だった〜…」と悩みましたが、

月額980円(税別)と安いほうだったので

有料会員になって中級編まで挑戦しましたよ!

 

 

パグのイラスト

少し画面を見せてほしいな〜

 

ここからは

実際に私が作業した「初級編」の画面をお見せします!

①目標が与えられます

プロゲートの初級編の画面

 

②手順をわかりやすく説明してくれます

プロゲートの課題

 

③自分でコードを入れて目標物を完成させます

HTMLとCSSのコード表

 

パグのイラスト

うう、こんなのできるかな

ビールを持つ女性

大丈夫です。

わからなければすぐに

解説に戻れるようになっているので

入力→振り返り→入力→振り返り…

と繰り返しやっているうちに

自然とできるようになってきます!

Progateは子育て中のママや、仕事で忙しくて

中々勉強時間が取れない人に

本気でおすすめしたい勉強ツールです!

無料で始められるので、一度試してみてはいかがでしょうか。

 

 

②HTML&CSSを学べる本

完全初心者向けのおすすめのテキストをご紹介します。

 

 

\本の良いところ

◎フルカラーで見やすい

◎画像説明が多くわかりやすい

◎初心者向けのやさしい解説

◎練習問題があるので力がつく

◎1つのサイトを作るため達成感を味わえる
 
 
 
ビールを持つ女性
サイト作りって楽しい!
早くオリジナルサイトを
作れるようになりたい!と
興奮させてくれた本です。

初心者はこの本から
始めると間違いないですね。
 
 
 
 

4. まとめ

今回はWordPressをこれから始める方、現在使用している方に向けた学習方法を紹介しました。
初心者で自信がなくても、簡単に楽しくプログラミング言語を習得できます。基礎を学ぶともっとサイト作りが楽しくなるので、ぜひ参考にして下さい!

 

 

 

 

 

コメント

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