過去記事のまとめ

【HTML/CSSの始め方】何をする?【初心者向け】手順を解説!

へびくん
へびくん
HTMLとCSSの始め方がわからない…
ねっとここむ
ねっとここむ
最初は設定やダウンロードをしていく必要があるんだ!

HTMLとCSSを独学で学習する面において、コードを打つ場所やプログラミング言語の始め方などを調べる人が多いです。HTMLやCSSの言語獲得は必要ですが、それを発揮する術を知らなければ意味がありません。

メモ帳に書けば、コードをかける場所であれば、と考える方もいますがどちらにしてもコードが正しくても起動しないです。プログラミング言語は書くべき場所があるので、適当な場所を選んでも意味がないということになります。

私もHTMLやCSSなどのプログラミング言語を見似る際に、コードを書くべき場所を知らずに悩んでいた時期がありました。そこで、始めたての初心者へわかりやすいHTMLとCSSの始め方を紹介していきます。

この記事で分かること
  • HTML&CSSの始め方
  • やるべきことの解説
  • コードの学習方法
  • スキル上達のための必須ツール

プログラミング学習において、教室へ通うのも良いですが、お金を使わずに身に着けていきたいですよね。もちろん、上達スピードには各個人で異なりますが、ネットだけでも十分に学習することが出来るので、あきらめずに頑張りましょう。

言語をマスターしたところで、コードを使うことは出来ません。まずはどこにコードを書いていくのか、学習する際のやるべきことについて知っておく必要があります。

HTML/CSSの学習は簡単!文章と装飾の役割分担!

  1. HTMLとCSSで何ができるの?
  2. サイト作成に必要なものって何?
  3. HTMLとCSSのコード学習のやり方とは?

へびくん
へびくん
HTML/CSSって何ができるの?
ねっとここむ
ねっとここむ
Webアプリを作成できたりするよ!

HTMLやCSSはプログラミング言語とよく間違われるのですが、実際には「マークアップ言語(HTML)」「スタイルシート言語(CSS)」が正式な種類なので覚えておいて損はないでしょう。本を使って学習する方もいますが、HTML/CSSはネット検索が一番効率が良いです。

本を購入するのに500円以上出費するのに対して、ネット検索では無料で学習することができます。また、ネットで最近話題の月額制学習サイトに登録することで様々な分野を学ぶことが出来ます。

For example
例えば、1つの言語習得に2冊の本を費やすのであれば、出費として1000円以上かかります。月額制のネット学習を選択すれば、固定の金額(2000円程)で複数のプログラミング学習ができます。
一切、お金をかけたくないのであればGoogleなどの検索エンジンを使い勉強をしましょう。実は、学習するモノやサイトを利用するよりも、自身で調べて学習した方が身に付きやすい部分もあるので、ネット検索が一番効率がいいと考えることが出来ます。

自身で全部ネット検索を通じて学習するとHTMLやCSSに限らず、プログラミング言語の習得のやり方がわからないとも考えられます。また、学習に費やす時間が惜しいという方もいます。しかし、物事を学習するためには自分で模索した上で試行錯誤した方が結果に繋がりやすいです。

絶対に本やサイト登録をしてはいけないという話ではありません。時間に余裕のある方や、本気で学習をしたい方はネットサーフィンをしたほうが上達スピードが速いということです。

HTML/CSSで何ができるの?役割とは?

ホームページを作成する際にはHTMLとCSSを活用するのですが、どちらかが欠ければ、サイトの質が落ちてしまうと言われています。それはサイト自体に「文章」と「装飾」という役割があるからです。

サイトは文章があるから読まれるように、装飾があるから飽きない文章構成ができるようになっています。つまり、文章だけのサイトであれば訪問者がアクセスしてきても問題意識を解決するためにどこを見ればいいのかわからない、装飾だけだと文章が読めない事態が起こるということです。

何かしらの理由があり訪問者はサイトへのアクセスしているので、そこを解決のできないサイトは無意味と言えるでしょう。わざわざ時間を割いて探しに来ていることから、アクセスしても直ぐに帰ってしまいます。

CSSがなくてもHTMLだけあれば、多少な装飾はできます。しかし、CSS程の魅力をサイト全体に慣らすことは難しいので、両方を学び、使いことが理想です。

【HTMLの基礎知識】仕組みとは?【初心者向け】に解説! サイトを運用するなら、HTML言語の習得が必要になってきますが、結論から言えば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つ用意する!参考書は必要に応じて!

  1. HTMLとCSSで何ができるの?
  2. サイト作成に必要なものって何?
  3. HTMLとCSSのコード学習のやり方とは?

へびくん
へびくん
2つだけでサイトを運営できるの?
ねっとここむ
ねっとここむ
1つでもサイト運用が出来るんだよ!

HTML/CSSを使うにはエディタ(無料ダウンロード)とPCなどの電子機器が必要になってきます。iphoneやAndroidではエディタをダウンロードできないので、windowsかMacBookが必要になります。

既にパソコンがあるのであれば、スペックは問わないのでドンドン学習のために活用していくと良いです。そうなると、初期にかかるお金はWiFiの料金くらいなので安く済みます。持ち合わせていなくても、フリマアプリ等で格安のPCを買えばいいだけです。

For example
新型MacBookなどはスペックが高く、動作スピードが速いので理想ですが、本業としてプログラミングをするわけではないのでスペックに拘る必要はありません。
また、高額なPCを購入したにしても元を取れると約束されたものではないですよね。なので、低スペックで我慢してHTML/CSSを学習すると良いでしょう。
スペックが低いからと言ってプログラミングに大幅な支障は出ません。

自身のスマホに負荷を与えたり、効率を気にしないのであればスマホでエディタ使ってプログラミングをするのも良いですがおすすめは出来ません。PCを使ってコードを書く方がスムーズで支障を与えることは無いでしょう。

多少なりともお金を掛けることも必要です。本気でプログラミングを学ぶ意思があるのであれば、PCを活用した方が効率も上がります。

専用ソフトは無料?ダウンロードする必要あり?

サイト制作に必要なのは「Wordpress」と「エディタ」と呼ばれる無料ダウンロードソフトです。ちなみに、Wordpressは独自のサイトを構築するために必要なソフトであり、エディタはプログラミング言語を起動させるためのソフトです。

WordPressとエディタの2つが無ければサイトを作成することは出来ないのか、HTMLとCSSをマスターするだけではダメなのかという疑問も湧くと思いますが、無ければ制作できません。

ダウンロードするだけならお金はかからないので安心してください。ただ、Wordpressではダウンロードするのと同時に「独自ドメイン」と「サーバー」が必要になります。これらが無ければ独自のサイトは作れないので覚えておきましょう。

仮に独自ドメインやサーバーなしでサイトを作ることの出来る方法があったとしても、サイトの所有権はあなたではなく、ドメインとサーバーを所有している人のモノになるので注意が必要です。

【ドメインを契約するなら】おすすめはある?【初心者向け】解説 webサイトを作成して新しいサービスを始める際に欠かせないのがドメインです。 インターネット上で何かしらを公開し...
【レンタルサーバーを契約するなら】どこがいい?【初心者向け】解説 インターネット上にホームページを公開するために、セキュリティ設定をする必要があるので、レンタルサーバーを使います。 ...

つまり、ダウンロードには一切お金はかかりませんが、独自のサイトを制作するのであれば多少のお金は必要になります。自分で作ったサイトを自分のモノにしておきたいなら契約をすることです。

WordPressとは

当サイトもWordpressを使用しているのですが、簡単に言えば、サイトを表示させるツールです。ブログ運用をするために、Wordpressを使っていますが、サイト制作をする際などにも使うのでダウンロードしておいて間違いはありません。

実際にブログ運営をしていれば、HTML/CSSのどちらも知識がつきます。私がプログラミングをすることになったのもブログ運営がきっかけです。本格的にサイト制作をしようと勉強してみたら、知っているコードばかりで復習のようでした。

WordPressはHTMLとCSSを使ってサイトをアレンジするのですが、無知な私が自然と使っていたコードがプログラミング言語だなんて思いもしませんでした。なので、まずはブログ運営から始めるとスタートが切りやすいです。

エディタとは

当記事で何度か紹介していますが、エディタとはプログラミング言語を扱う際のコードを書く場所のことを示しています。エディタが無ければコードを起動することが出来ません。

因みに、エディタはダウンロードしなくてもPCの中に予め備え付けられているので確認してみてください。検索画面にてターミナル(MakBook)やコマンドプロンプト(windows)と入力すれば出てきます。お遊び程度であれば備え付けられているモノでも大丈夫です。

しかし、自身のサイトを持ちたいと考えているのであれば、ダウンロードしていく必要があるので覚えておきましょう。使いやすさも変わってくるので、一度試してみると良いです。

ダウンロードをする際には「Visual Studio Code」をダウンロードしていきます。

HTML/CSSの学習サイト!エディタのダウンロード手順!

  1. HTMLとCSSで何ができるの?
  2. サイト作成に必要なものって何?
  3. HTMLとCSSのコード学習のやり方とは?

へびくん
へびくん
ダウンロード方法とか学習サイトを教えて?
ねっとここむ
ねっとここむ
特別に1つずつ教えるよ!

プログラミングの勉強は図書館に行けば学ぶことは出来ますが、書籍を購入すれば自宅でゆっくりと学習することが出来ます。しかし、書籍購入となれば、複数言語の習得は難しいです。また、エディタについても有名なモノをダウンロードした方が、トラブルになったとしても解決策を見つけることが出来ます。

その点、ネットで月額制の学習サイトを利用すれば好きな時に様々なプログラミング言語を学習することが出来ます。エディタはネットサーフィンだけでなくSNS媒体から答えを探すことが出来るので便利です。

For example
月額制の学習サイトは自由に好きな時間で学習できる点や復習などに特化しているだけでなく応用編などの個人のレベルを考慮してくれているため、初心者でも気軽に勉強できるのが強みです。お問い合わせなども受け答えしてくれるサイトがほとんどなので、わからないことを無くすことが出来ます。
エディタはほとんどが英語で説明がなされていますが、人気なエディタを使えば、ブログ記事やYouTubeに設定方法や使い方があるので困りません。

学習にお金を掛けたくない方は、ネットサーフィンで知識を身に着けていくことが好ましいですが、その場合は実践形式でプログラミング言語使っていく必要があります。知識を覚えるという勉強方法はプログラミング言語を習得する上では不向きです。

複数言語を身に付けるのであれば、暗記をするよりもプログラムを作り、慣れていくことがポイントです。つまり、プログラミング言語を学習する際にはプログラムを作る方が速いということになります。エディタに関しては一度設定等、終えれば困ることはありません。

動画学習はあり?月額制サイトとどっちがいい?

動画サイトやネット検索は有料級に良い情報が転がっているので、全然ありです。ただ、情報の信憑性は欠けるので判断力が問われます。月額制サイトではお金はもちろんかかりますが、一種のビジネスなので間違った情報はありません。

信憑性で選ぶのであれば、月額制のサイトを使った方が良いですが結論を言えば、両方活用した方が良いです。たまにネットで嘘を教えられることもありますが、ネットサーフィンで正解を突き止めることが出来ます。

また、誤った情報を掴まされたとしても、月額制サイトでは正しい解しか教えられないので答え合わせができます。

どちらか一方の学習で事足りますが、メリットを考えるとフルに学習できるモノを使っていくと効率が上がります。学習量に応じて動画コンテンツの信憑性などを図ることが出来るようになります。

【HTMLの基礎知識】仕組みとは?【初心者向け】に解説! サイトを運用するなら、HTML言語の習得が必要になってきますが、結論から言えばHTML言語とCSS言語は瓜二つです。 片...

誤った情報を正しいと思い込み学習してしまうと、費やしてきた時間が無駄になってしまいます。答え合わせができるように、両方使ってプログラミング言語を学習していきましょう。

Visual Studio Code のダウンロード手順

エディタを使う際には「Visual Studio Code」を使いましょう。様々な言語に対応しているだけでなく、使い勝手が良いのでサイト制作やアプリ制作に使える万能なエディタです。

ダウンロード方法は至って簡単です。Googleなどの検索エンジンを使って「vscode」と入力して、使っているPCの種類を選んでダウンロードします。 インストールが完了したら、左カテゴリー内の一番下をクリックして検索場所で「japan language」と入力し、インストールをすると日本語に設定できます。

日本語に設定をすることが出来れば、使い勝手が良くなります。わからないことがあれば、キーボードを元にネットサーフィンや動画検索をすれば解説があるので、心配ありません。

月額制サイトのプロゲートを使う

プロゲートでは基礎的なコード進行を学ぶことができる上に、解説がわかりやすいので、活用していくことをおすすめします。

無料での利用もできますが、カリキュラムの一部しか利用ができないので、試しに活用してから決めるのも一つの手段です。

僕も初めて言語を扱う際にプロゲートを利用していたので、活用すればいろいろなプログラム言語を扱えるようになることは立証済みです。

【WordPressダウンロード】の手順!【初心者向け】に解説

【初心者向け】 HTML、CSS、Javascriptの基本を理解しよう

ABOUT ME
まふゆ らん
ブログを長いことやっています。 ブログ|アフィリエイト|猫を日々愛して毎日を送っています。 フリーなので、大体はPCかスマホとのにらめっこです。 人生の歩み方はそれぞれなので正解も間違えもないという信念を持ち合わせる。
RELATED POST