HTMLとCSSを独学で学習する面において、コードを打つ場所やプログラミング言語の始め方などを調べる人が多いです。HTMLやCSSの言語獲得は必要ですが、それを発揮する術を知らなければ意味がありません。
メモ帳に書けば、コードをかける場所であれば、と考える方もいますがどちらにしてもコードが正しくても起動しないです。プログラミング言語は書くべき場所があるので、適当な場所を選んでも意味がないということになります。
私もHTMLやCSSなどのプログラミング言語を見似る際に、コードを書くべき場所を知らずに悩んでいた時期がありました。そこで、始めたての初心者へわかりやすいHTMLとCSSの始め方を紹介していきます。
- HTML&CSSの始め方
- やるべきことの解説
- コードの学習方法
- スキル上達のための必須ツール
プログラミング学習において、教室へ通うのも良いですが、お金を使わずに身に着けていきたいですよね。もちろん、上達スピードには各個人で異なりますが、ネットだけでも十分に学習することが出来るので、あきらめずに頑張りましょう。
言語をマスターしたところで、コードを使うことは出来ません。まずはどこにコードを書いていくのか、学習する際のやるべきことについて知っておく必要があります。
HTML/CSSの学習は簡単！文章と装飾の役割分担！
- HTMLとCSSで何ができるの？
- サイト作成に必要なものって何？
- HTMLとCSSのコード学習のやり方とは？
HTMLやCSSはプログラミング言語とよく間違われるのですが、実際には「マークアップ言語（HTML）」「スタイルシート言語（CSS）」が正式な種類なので覚えておいて損はないでしょう。本を使って学習する方もいますが、HTML/CSSはネット検索が一番効率が良いです。
本を購入するのに500円以上出費するのに対して、ネット検索では無料で学習することができます。また、ネットで最近話題の月額制学習サイトに登録することで様々な分野を学ぶことが出来ます。
一切、お金をかけたくないのであればGoogleなどの検索エンジンを使い勉強をしましょう。実は、学習するモノやサイトを利用するよりも、自身で調べて学習した方が身に付きやすい部分もあるので、ネット検索が一番効率がいいと考えることが出来ます。
自身で全部ネット検索を通じて学習するとHTMLやCSSに限らず、プログラミング言語の習得のやり方がわからないとも考えられます。また、学習に費やす時間が惜しいという方もいます。しかし、物事を学習するためには自分で模索した上で試行錯誤した方が結果に繋がりやすいです。
絶対に本やサイト登録をしてはいけないという話ではありません。時間に余裕のある方や、本気で学習をしたい方はネットサーフィンをしたほうが上達スピードが速いということです。
HTML/CSSで何ができるの？役割とは？
ホームページを作成する際にはHTMLとCSSを活用するのですが、どちらかが欠ければ、サイトの質が落ちてしまうと言われています。それはサイト自体に「文章」と「装飾」という役割があるからです。
サイトは文章があるから読まれるように、装飾があるから飽きない文章構成ができるようになっています。つまり、文章だけのサイトであれば訪問者がアクセスしてきても問題意識を解決するためにどこを見ればいいのかわからない、装飾だけだと文章が読めない事態が起こるということです。
何かしらの理由があり訪問者はサイトへのアクセスしているので、そこを解決のできないサイトは無意味と言えるでしょう。わざわざ時間を割いて探しに来ていることから、アクセスしても直ぐに帰ってしまいます。
CSSがなくてもHTMLだけあれば、多少な装飾はできます。しかし、CSS程の魅力をサイト全体に慣らすことは難しいので、両方を学び、使いことが理想です。
サイトの質を落とさずに構築したいのであれば、HTMLとCSSは両方学習していく必要があります。独学でプログラミング言語を習得することは人によって異なりますが、難しくはないので、訪問者がアクセスしても飽きないサイトを作りましょう。
HTMLとは
HTMLの出来ることは3つあります。その3つとは「サイト制作」「メール作成」「webアプリ制作」です。HTML言語をマスターしたいという方のほとんどは中でも、サイト制作を目標としています。
現代では、サイト作成をすることが出来れば本職に生かすことや副業をすることも可能です。そのため、メール作成やwebアプリ作成を好んで、プログラミング学習を始めるという方はあまり耳にしません。
iphoneなどのスマホが主流になっているので、HTMLを使ったプログラミングを希望する方はサイト制作したいと感じている方が多いのではないでしょうか。
CSSとは
CSSのできることは2つあります。その2つとは「サイト装飾」と「アニメーション制作」です。アニメーションを作成したい方はCSSの種類を選択して、CSS3という現代で主流となっているコードを使いましょう。
サイト装飾のためにCSSを使うのであれば、CSS3を推奨しますが、拘りのない方はCSSであればなんでも大丈夫です。
因みに、ブログなどのサイト内にあるアニメーションはCSSから構成されているので、CSSが使えなければ味気のないサイトになってしまいます。
サイト制作2つ用意する！参考書は必要に応じて！
- HTMLとCSSで何ができるの？
- サイト作成に必要なものって何？
- HTMLとCSSのコード学習のやり方とは？
HTML/CSSを使うにはエディタ(無料ダウンロード)とPCなどの電子機器が必要になってきます。iphoneやAndroidではエディタをダウンロードできないので、windowsかMacBookが必要になります。
既にパソコンがあるのであれば、スペックは問わないのでドンドン学習のために活用していくと良いです。そうなると、初期にかかるお金はWiFiの料金くらいなので安く済みます。持ち合わせていなくても、フリマアプリ等で格安のPCを買えばいいだけです。
また、高額なPCを購入したにしても元を取れると約束されたものではないですよね。なので、低スペックで我慢してHTML/CSSを学習すると良いでしょう。
スペックが低いからと言ってプログラミングに大幅な支障は出ません。
自身のスマホに負荷を与えたり、効率を気にしないのであればスマホでエディタ使ってプログラミングをするのも良いですがおすすめは出来ません。PCを使ってコードを書く方がスムーズで支障を与えることは無いでしょう。
多少なりともお金を掛けることも必要です。本気でプログラミングを学ぶ意思があるのであれば、PCを活用した方が効率も上がります。
専用ソフトは無料？ダウンロードする必要あり？
サイト制作に必要なのは「Wordpress」と「エディタ」と呼ばれる無料ダウンロードソフトです。ちなみに、Wordpressは独自のサイトを構築するために必要なソフトであり、エディタはプログラミング言語を起動させるためのソフトです。
WordPressとエディタの2つが無ければサイトを作成することは出来ないのか、HTMLとCSSをマスターするだけではダメなのかという疑問も湧くと思いますが、無ければ制作できません。
ダウンロードするだけならお金はかからないので安心してください。ただ、Wordpressではダウンロードするのと同時に「独自ドメイン」と「サーバー」が必要になります。これらが無ければ独自のサイトは作れないので覚えておきましょう。
仮に独自ドメインやサーバーなしでサイトを作ることの出来る方法があったとしても、サイトの所有権はあなたではなく、ドメインとサーバーを所有している人のモノになるので注意が必要です。
つまり、ダウンロードには一切お金はかかりませんが、独自のサイトを制作するのであれば多少のお金は必要になります。自分で作ったサイトを自分のモノにしておきたいなら契約をすることです。
WordPressとは
当サイトもWordpressを使用しているのですが、簡単に言えば、サイトを表示させるツールです。ブログ運用をするために、Wordpressを使っていますが、サイト制作をする際などにも使うのでダウンロードしておいて間違いはありません。
実際にブログ運営をしていれば、HTML/CSSのどちらも知識がつきます。私がプログラミングをすることになったのもブログ運営がきっかけです。本格的にサイト制作をしようと勉強してみたら、知っているコードばかりで復習のようでした。
WordPressはHTMLとCSSを使ってサイトをアレンジするのですが、無知な私が自然と使っていたコードがプログラミング言語だなんて思いもしませんでした。なので、まずはブログ運営から始めるとスタートが切りやすいです。
エディタとは
当記事で何度か紹介していますが、エディタとはプログラミング言語を扱う際のコードを書く場所のことを示しています。エディタが無ければコードを起動することが出来ません。
因みに、エディタはダウンロードしなくてもPCの中に予め備え付けられているので確認してみてください。検索画面にてターミナル(MakBook)やコマンドプロンプト(windows)と入力すれば出てきます。お遊び程度であれば備え付けられているモノでも大丈夫です。
しかし、自身のサイトを持ちたいと考えているのであれば、ダウンロードしていく必要があるので覚えておきましょう。使いやすさも変わってくるので、一度試してみると良いです。
ダウンロードをする際には「Visual Studio Code」をダウンロードしていきます。
HTML/CSSの学習サイト！エディタのダウンロード手順！
- HTMLとCSSで何ができるの？
- サイト作成に必要なものって何？
- HTMLとCSSのコード学習のやり方とは？
プログラミングの勉強は図書館に行けば学ぶことは出来ますが、書籍を購入すれば自宅でゆっくりと学習することが出来ます。しかし、書籍購入となれば、複数言語の習得は難しいです。また、エディタについても有名なモノをダウンロードした方が、トラブルになったとしても解決策を見つけることが出来ます。
その点、ネットで月額制の学習サイトを利用すれば好きな時に様々なプログラミング言語を学習することが出来ます。エディタはネットサーフィンだけでなくSNS媒体から答えを探すことが出来るので便利です。
エディタはほとんどが英語で説明がなされていますが、人気なエディタを使えば、ブログ記事やYouTubeに設定方法や使い方があるので困りません。
学習にお金を掛けたくない方は、ネットサーフィンで知識を身に着けていくことが好ましいですが、その場合は実践形式でプログラミング言語使っていく必要があります。知識を覚えるという勉強方法はプログラミング言語を習得する上では不向きです。
複数言語を身に付けるのであれば、暗記をするよりもプログラムを作り、慣れていくことがポイントです。つまり、プログラミング言語を学習する際にはプログラムを作る方が速いということになります。エディタに関しては一度設定等、終えれば困ることはありません。
動画学習はあり？月額制サイトとどっちがいい？
動画サイトやネット検索は有料級に良い情報が転がっているので、全然ありです。ただ、情報の信憑性は欠けるので判断力が問われます。月額制サイトではお金はもちろんかかりますが、一種のビジネスなので間違った情報はありません。
信憑性で選ぶのであれば、月額制のサイトを使った方が良いですが結論を言えば、両方活用した方が良いです。たまにネットで嘘を教えられることもありますが、ネットサーフィンで正解を突き止めることが出来ます。
また、誤った情報を掴まされたとしても、月額制サイトでは正しい解しか教えられないので答え合わせができます。
どちらか一方の学習で事足りますが、メリットを考えるとフルに学習できるモノを使っていくと効率が上がります。学習量に応じて動画コンテンツの信憑性などを図ることが出来るようになります。
誤った情報を正しいと思い込み学習してしまうと、費やしてきた時間が無駄になってしまいます。答え合わせができるように、両方使ってプログラミング言語を学習していきましょう。
Visual Studio Code のダウンロード手順
エディタを使う際には「Visual Studio Code」を使いましょう。様々な言語に対応しているだけでなく、使い勝手が良いのでサイト制作やアプリ制作に使える万能なエディタです。
ダウンロード方法は至って簡単です。Googleなどの検索エンジンを使って「vscode」と入力して、使っているPCの種類を選んでダウンロードします。 インストールが完了したら、左カテゴリー内の一番下をクリックして検索場所で「japan language」と入力し、インストールをすると日本語に設定できます。
日本語に設定をすることが出来れば、使い勝手が良くなります。わからないことがあれば、キーボードを元にネットサーフィンや動画検索をすれば解説があるので、心配ありません。
月額制サイトのプロゲートを使う
プロゲートでは基礎的なコード進行を学ぶことができる上に、解説がわかりやすいので、活用していくことをおすすめします。
無料での利用もできますが、カリキュラムの一部しか利用ができないので、試しに活用してから決めるのも一つの手段です。
僕も初めて言語を扱う際にプロゲートを利用していたので、活用すればいろいろなプログラム言語を扱えるようになることは立証済みです。
【WordPressダウンロード】の手順！【初心者向け】に解説
【初心者向け】 HTML、CSS、Javascriptの基本を理解しよう
