【HTML,CSS】webサイトを作るためのコードの書き方【まとめ記事！】

この記事は、HTML,CSSを使って、webサイトを作るためのコードの書き方についての「まとめ記事」です。

上から順番に、記事を読み進めていき、その都度読んでほしい記事を貼っておくので、手順にそって学習することで、実務レベルをこなせるように成長できます。

ではいきます！

HTMLとは？

まず、「HTML」というプログラミング言語についての基礎知識を習得して下さい。

CSSとは？

次にCSSというプログラミング言語についての基礎知識を習得して下さい。

webサイトを作るための環境構築方法。

次に、webサイトを作るための環境を構築する方法についてまとめた下記の記事をお読み下さい。

HTMLの基本的な書き方。

やっとHTMLのコードの書き方を解説した記事に突入です。

今までの記事にあった知識があれば、読み進めることができるはずです。

HTMLを実務レベルで習得！

HTMLの基礎知識がついたところで、実際に実務で使うようなレベルまで引き上げるための記事を書きました！

よく使うタグなんかがまとめてあります。

CSSの基本的な書き方！

HTMLの知識がしっかりついたところで、CSSの基本的な書き方を習得しましょう！

CSSも使うことで、やっと本格的なwebサイトがつくれるようになります。

CSSにおけるセレクターの知識まとめ！

CSSは必要な知識量がHTMLよりも少し多いので、セレクターについてまとめた記事を個別に書きました。

基礎的かつ重要な知識なので、ここでマスターしましょう！

CSSのdisplayプロパティについて

CSSのdisplayプロパティは、他のプロパティよりも重要な知識なので、これも個別に記事を用意しました！

徹底的に勉強しましょう！

ボックスモデルという概念

CSSのはボックスモデルという概念が存在します。

この記事の知識で、点と点が繋がったように、もう一段CSSについて理解が深まると思いますのでぜひ！

フレックスボックスレイアウト

この記事は、実践的な内容です。

フレックスボックスレイアウトについてまとめました。この記事を読むことで、具体的にレイアウトを組む方法がイメージできれば幸いです。

グリッドレイアウト

フレックスボックスレイアウトの次に、グリッドレイアウトについても紹介します！

どちらも適材適所で使うことで、効率的にレイアウトを組むことができるようになると思います！

webサイトに動きをつける！

より本格的で、モダンなwebサイトをつくるために必要な知識をまとめました！

動きをつけるのは、視覚的にも作っていて楽しいと思います！

レスポンシブウェブデザインの重要性と実現方法！

現在、レスポンシブウェブデザインはとても重要です。

今の時代はスマホでインターネットを利用するユーザーも多いので、しっかり知識をつけておきましょう！

viewportとは？？

レスポンシブウェブデザインなどを勉強した方は、「viewportって何？？」のように、若干の疑問が残っているのかなと思います。

その疑問を解決して、クリアにしていきます！

お問い合わせフォームの作り方！【HTML】

お問い合わせフォームを作るための、HTMLの知識です！

CSS変数の使い方！

CSSにも変数があるのをご存知でしょうか！

しっておくと、便利な場面もあるので、ぜひお読み下さい！

まとめ！

この記事の内容をしっかりと順番に読み込んで、自分でも作りたいものを作ってみると、それだけで実務レベルに必要な知識が身に付いたんじゃないかなと思います。

もっともっと細かい知識など、書ききれていない部分はたくさんありますが、随時更新していきたいと思います。

ですが、十分に実力がついたのではないでしょうか？？

これからも楽しいという気持を忘れず、大切に、プログラミングを頑張って下さいね！

ではではっ。