HTMLとCSSを使って学習しようとすると、コードを書く場所やコードそのものの学習方法をわからない方が多いです。
時代が変化しているので、本を買わなくても実際にスキルを得ることは可能ですが、YouTubeやブログではタイトル通りの教えを得られることはできません。
僕は学ぶ際にたくさんの動画や記事や本を漁ってスキルを得ることができたので、わかりやすく簡単にHTMLとCSSのスキルを得られるように解説をしていきます。
- HTML&CSSの始め方
- やるべきことの解説
- コードの学習方法
- スキル上達のための必須ツール
HTMLとCSSはWordpressやLPと呼ばれるライティングページを作成するために使われるコードです。
どちらか片方をマスターしても意味がないので、2つで1セットと覚えて学習していくと後に便利です。
HTMLとCSSで何ができるの？プログラミングより簡単って本当？
- HTMLとCSSで何ができるの？
- サイト作成に必要なものって何？
- HTMLとCSSのコード学習のやり方とは？
HTMLやCSSはプログラミング言語とよく間違われるのですが、実際には「マークアップ言語（HTML）」「スタイルシート言語（CSS）」が正式な種類なので覚えておいて損はないです。
パソコンに向かってコードを打ち込むのは一緒なのですが、全くの別物なのでコードを使って何がしたいのかを最初に決めておくといいです。
似たようで全然似ていない3つですが、ここでは詳しい違いをわかりやすく解説していきます。
HTMLとCSSは一緒に覚えて共に使う戦友！
ホームページを作成する際にはHTMLとCSSを活用するのですが、どちらかが欠けてしまえば、質が落ちてしまうと言われています。
ただ作るにしても文章と装飾があるからこそ他社に見てもらえるサイトを作ることができるので、「文章と装飾」の２つの分担をしっかりと理解しておかなければなりません。
HTMLって何ができる言語なの？
- サイト制作（文章の執筆）
- HTMLのメール作成
- webアプリ制作
一番最初の「サイト制作」以外を作りたいから学ぶという方は非常に少ないです。
HTMLのメールは構成しなくても簡単にスマホからコンタクトをとることができるので、好んで制作に励む方はごく少数です。
webアプリ制作も同様に、webを使ったアプリよりもスマホを使ったアプリの方が需要が高いので、アプリ制作をしたい方はプログラミング言語を学ぶ確率が高いです。
CSSって何ができる言語なの？
- サイト装飾
- アニメーション作成
アニメーションを作成したい方はCSSの種類を選択して、CSS3という現代で主流となっているコードを使いましょう。
CSS3でなくてはならない理由は特にないので、サイト装飾のためにCSSを使うのであれば、HTMLと共に学習していくことです。
サイトにボタンなどのアニメーション（動き）を表現しているのはスタイルシート言語だということがわかったので、早速サイト作成の始め方を解説していきます。
サイト作成に必要なものって何？かんたんな解説で身軽にスタート！
- HTMLとCSSで何ができるの？
- サイト作成に必要なものって何？
- HTMLとCSSのコード学習のやり方とは？
サイト制作（LP）はスマホ単体ではできないので、PC（MacBook or windows）が最低1台必要になってきます。
PCがある方は、専用のソフトをダウンロードした上でサイト作成に励んでいきましょう。
現状パソコンがないという方は安い（スペックの小さい）PCでも作成することができるので、問題なく動くものを購入します。
- PC(MacBook or windows)
- 専用無料ダウンロードソフト
- 必要に応じた参考書
無料専用サイトのダウンロードとは？
サイト作成に必要なのは「WordPress」と「エディタ」と呼ばれる無料ダウンロードソフトです。
ホームページを作成するにはドメインとドメインの2つが必要になってくるので、下記のリンクから詳しい情報を確認しておきましょう。
その上で、Wordpressというツールを使う必要があるので、ホームページを作成する前に独自ブログサイトを構築するためにブログ運営を勉強していくことです。
WordPressってなにができるの？
かんたんに言えば、サイト作成からブログ記事を作ることができるツールで無料でダウンロードできるのですが、サーバーやドメインを利用するので多少お金が掛かります。
ブログ運営をしてからホームページを作成を勉強した方が、かんたんにコードや進行方法を覚えることができるので、まずはブログをやってみましょう！
WordPressの中にはHTMLだけでなくCSSを記入してサイトアレンジをすることができるので、初心者の方でも無知識な状態で始めることができます。
エディタってなにができるの？
HTMLやCSSやプログラミング言語を扱う際に、コードを書く場所のことを示しています。
コードを書く場所というのは最初からPC(MacBook or Windows)に備え付けられているので、試しにエディタを読んでみましょう。
- MacBook→タミーナル
- Windows→コマンドプロンプト
無料のものでも十分なのですが、よく使われているコードを書く場所をダウンロードしていきましょう。
名前を「Visual Studio Code」というので、こちらをダウンロードしていきます。
Visual Studio Code のダウンロード手順とは？
- Googleにてvscodeと入力
- 各PCを選択しダウンロード
- デフォルト通りに次へをクリック
- ダウンロード完了
Visual Studio Code はさまざまな言語に対応しているので、とても使い勝手が良くサイト作成やアプリ制作何でもコードで作れます。
インストールが完了したら、左カテゴリー内の一番下をクリックして検索場所で「japan language」と入力してインストールします。
インストールが完了すると、日本語対応のエディタになるので理解しやすくなります。
HTMLとCSSのコード学習のやり方とは？動画や記事や本を頼るのもあり！
- HTMLとCSSで何ができるの？
- サイト作成に必要なものって何？
- HTMLとCSSのコード学習のやり方とは？
お金をかけて学習した方がスキルアップする時間が短縮されるので、多少の金銭をかける意気込みで学習するといいです。
現代では、無料で情報を集めることができるので「動画配信サイトやブログ記事や図書館」の利用だけで十分な学習を得ることができます。
有料でスキルを磨いていくことが一番効率がいいのですが、無料にこだわるのであれば、時間との勝負になります。
効率的な学習方法はプロゲートを利用すること！
プロゲートでは基礎的なコード進行を学ぶことができる上に、解説がわかりやすいので、活用していくことをおすすめします。
無料での利用もできますが、カリキュラムの一部しか利用ができないので、試しに活用してから決めるのも一つの手段です。
僕も初めて言語を扱う際にプロゲートを利用していたので、活用すればいろいろなプログラム言語を扱えるようになることは立証済みです。
まとめ：難しく考えずに実行するだけ！
動画やブログ記事や本の利用はさまざまなカテゴリー目線で解説されているものが多いですが、間違った情報は少ないので小1時間、2時間かけて判断していきます。
ダウンロードに抵抗がある方ややることの多い事に抵抗がある方でも簡単にホームページを制作することができるのでチャレンジしていきましょう。
流れに沿ってホームページを制作したいのであれば、自身のブログサイトを構築してからHTMLとCSSの勉強をするとすんなりとカリキュラムが頭の中に入ってくるので、成長が速いです。
