こんにちは、けーぷろです！
プログラミング初心者が初めに勉強する「HTML/CSS」は意外と難しいですよね。
今回はこういった悩みを解決していきます！
Contents
この記事の信頼性
私は大学生の時にHTML/CSSを初めてやりました。
ネットの記事に簡単と書いてあり、ちゃんと勉強せずにコードを書いていました笑
もちろんまともに書けることができず、挫折。
そこから、勉強を繰り返しホームページ作成に成功しました！
HTML/CSSは当たり前ですが、勉強しないと習得できないです。
HTML/CSSの学習は簡単？
結論から言うと、勉強すれば簡単です！
逆に勉強しないと、かなり難しいです！
（当たり前ですよね笑）
勉強するポイントを後で紹介しますが、最低限理解するポイントは他の言語に比べると少ないです。
なので、プログラマーには「HTML/CSSは簡単やで！」とよく言われています。
しかし、プログラミング初心者には難しいと思います。
周りの人が簡単と言っていても、騙されずに勉強しましょう！
独学で学習するの必要なサイト
今からHTML/CSSを勉強する人、既にHTML/CSSを勉強している人は何で勉強していますか？
HTML/CSSを勉強するには主に2つの勉強方法があります。
- HTML/CSSの参考書を購入
- 学習サイトで勉強する
基本この２つだと思います。
どちらで勉強しても問題ないですが、個人的に学習サイトで勉強することをおすすめします！
学習サイトでおすすめする理由
学習サイトでおすすめする理由は「分かりやすい！！」です！
本当にだれが見ても分かりやすいので、勉強が苦手な方でも勉強できます！
また、学習サイトは実際にコードを書きながらコード確認できます！
これが参考書でしたら、本を開きながらコードを書くのは難しいです。
多くのエンジニアの方もHTML/CSSや他のプログラミング言語を学習サイトで勉強することをおすすめしてます！
おすすめの学習サイトはこの2つだけ！
プログラミングの学習サイトはたくさんあります。
中には怪しいサイトもあるので注意する必要がありますよね。
今回は有名な学習サイトを紹介します！
progate
超有名なプログラミング学習サイトの「progate」です！
progateはプログラミング初心者のために作成した、プログラミング学習サイトです！
多くの企業もこちらのprogateを用いた研修を行っている会社もあります。
progateの「HTML/CSSコース」を勉強すれば、効率よくHTML/CSSを習得することができます！
このHTML/CSSコース全て勉強すれば、webサイトを作成することができます！
おためし・入門編は無料！
中級者向け・上級者向けコースは月額980円！（安い！）
ドットインストール
こちらもプログラミング学習サイトの中でも有名なサイトです！
ドットインストールの見所は3分の動画で勉強できることです！
3分の音声動画が流れるので、勉強が嫌いな人でも気軽に勉強ができます！
あまり集中力がない人はかなりおすすめです！
ドットインストールの「Webサイトを作れるようになろう」というコースを勉強すればHTML/CSSが完璧になります！
一部無料！
全ての動画を見る場合は月額900円！
HTML/CSSは学習サイトで勉強する方が早く習得できます
先ほど紹介した学習サイトのどちらかで勉強すれば、HTML/CSSは必ず習得できます！
私はgoogleで検索しながら勉強していましたが、右も左も分からなかったので何を勉強すればいいか分からない状態でした。
勉強するモチベはあるのに何をしたらいいのか分からないのはもったいないです！
次に、HTML/CSSを勉強する際に難しいと感じるポイントをまとめます！
私はこれらのポイントをできるようになってから激変しました！
HTML/CSSの学習が難しくなるポイント
HTML/CSS難しく感じるのはどれ？
HTML/CSSは覚えるべきポイントがいくつかあります！
個人的に「ここ分かってHTML/CSSが急成長した！」のポイントを紹介します
レイアウトの基本
こちらは私が以前まで運営していたブログサイトです！
HTML/CSSでこのようなwebサイトやブログサイトを作成してみたいですよね
しかし、どうやって作成していくのかちんぷんかんぷんですよね
しかし、このようなwebサイトは作り方の型が決まっています！
その型を知っておきましょう！
それがこちらです！
多くのwebサイトがこちらのレイアウトで構成されています！
- header・・ホームページのメニューバー
- content・・ホームページの主要な部分
- menu・・サイドバー
- footer・・下にあるメニュー、終わりを示す
webサイトはこのレイアウト通りに作成していきます！
それでは次に、レイアウトを構成する上で重要な「div」の説明をします！
レイアウトはidとdivで作成する
先ほど紹介したレイアウト構造を作っていくのに必要不可欠なのが「div構造」です！
divって何？おいしいの？
divとは一つのブロックを作ることができます！
そのブロックを何個も作成して、webサイトをレイアウトしていくのです！
divを使いこなせるようになるとHTML/CSSを自由にレイアウトできるようになります！
こちらに記載されているサイトを見ればdivの使い方がわかると思います！
divのややこしいポイントなどあるので、次回ブログで投稿するのでお待ちください。
positionで微調整する
HTML/CSSに少し慣れてきた時に、便利な機能を紹介します！
それが「position」です！
画像の上に字を入れたい
文字を微調整したい
画像の上にボタンを置きたい！
このような工夫があるレイアウトをする為に欠かせないのが「position機能」です！
HTML/CSSでposition機能は必要不可欠なので絶対覚えましょう！
使いこなせるようになるとかっこいいページが作れちゃいます！
横並びにできるflex機能
画像の横に字を入れたい！
文字を横並びにしたい！
とりあえず横並びにしたい！
このような横並びをしたい時どうしたらいいか分からないですよね。
そんな悩みを解決してくれるのが「flexbox機能」です！
flexをdivに反映させると、div要素の中身が横並びにすることができます！
必要なコマンドがいっぱいあって覚えるのが大変です。
コードは覚えずに、コードをまとめているサイトがあるので紹介しておきます！
最後に：HTML/CSSの学習について
以上がHTML/CSSが急成長するポイントでした。
これらができるようになると、HTML/CSSが簡単に思えると思います！
HTML/CSSは勉強初めの頃は難しく感じますが、慣れていくとできるようになります！
最初は難しく感じて当たり前なので、落ち着いてやっていきましょう！
HTML/CSSが簡単やった！と言えるように最後まで勉強して頑張りましょう！
HTML/CSS簡単って聞いたけど本当？
HTML/CSS難しそう！
HTML/CSS勉強してるけど全然分からん！