【保存版】超初心者のためのサイトの組み立て方！画像＆動画付き「過保護説明」
html/cssの基礎は分かった！でも。。。
実際にサイトを作る際に、それをどうやって組み立てていくの？と疑問に思っている方、
お任せくださいっ！！
実は、私もそこはかなり戸惑ったところです。本にしろ、ブログにしろ、基礎を紹介してくださっているものは結構あるのですが、サイトの組み立てて方を流れで紹介してくれているものは意外とないんですよね(^_^;)
この解説は「サイトの組み立て方を流れで説明してくれるサイトがあったらな～。。」という＜サイト作成の際に戸惑った私＞に向けて作成しました！
ちなみに、私は熟練のプログラマーかというと、全くのド素人ですっ！！（自慢ではありません笑）
●html/cssで簡単なサイトをかろうじて作れるようになった
ぶっちゃけ人に教えられるレベルでは当然ありませんが、だからこそ、専門用語少な目で、分かりやすく伝えられるかなと思っています。
というわけで、サイトの組み立て方の流れを6回に渡り、全く初心者の私が画像多め＆動画付きで解説していきます！
Contents
こちらのサイトの目的
上記にも書きましたが、＜サイト作成の際に戸惑った私＞に向けて書いています。
また、私は、何かを勉強したらアウトプットするというのが一番自分の身になると考えており、つまりは自分のためでもあります笑
それが結果的に誰かのお役に立てるのは、とってもうれしいです(^^)
途中まで無料で提供し、終盤になって有料にする。。といったことはなく、最後まで完全無料でお届けしますので、安心してお付き合いください(^^)
こちらのサイトの対象レベル
html/cssの基礎の基礎があればOKです！！私は、マナブさんという方のブログで紹介されていた、下記の動画で基礎を学びました！
このレベルがあるということで進めさせていただきます。
こちらのサイトのゴール
6回の渡り、下記のサイトと同じようなものを一緒に完成させていきます。
●cssでデザインするのが若干楽しくなる
●html/cssコードへの「脳の拒絶」が若干、軽減する
つまりは、サイトの組み立て方の基礎の基礎が分かるということです。
サイトの組み立て方の流れ解説：全6回の目次
１．サイトの組み立て方：第1回目「大まかな流れ～header部分をhtmlで作る」
サイトの組み立て方の大まかな流れを説明し、上記サイトのheaderの部分をhtmlで作っていきます。
formタグの使い方や、アイコンにはFontawesomeも使用しています(^^)
【初心者必見】サイトの組み立て方①画像＆動画付き「過保護説明」
２．サイトの組み立て方：第2回目「bodyの部分をhtmlで作る」
上記サイトの「旅を贈ろう」の部分、その下の「いつも完璧な贈り物」の部分を、htmlで作っていきます。
複雑な部分のクラス名の付け方がスッキリします！
【初心者必見】サイトの組み立て方②画像＆動画付き「過保護説明」
上記サイトの「ギフトカートをもらったら」と「footer」の部分を、htmlで作っていきます。
前回同様、複雑な部分のクラス名の付け方や組み立て方などが参考になるかなと思います(^^)
【初心者必見】サイトの組み立て方③画像＆動画付き「過保護説明」
４．サイトの組み立て方：第4回目「header、bodyの部分をCSSでデザインする」
ここからが楽しいパートのスタートかなと思います！上記サイトのheaderの部分と「旅を贈ろう」の部分をデザインしていきます。
虫眼鏡付きの検索ボックスの作成方法なども紹介しています(^^)
【初心者必見】サイトの組み立て方④画像＆動画付き「過保護説明」
５．サイトの組み立て方：第5回目「bodyの部分をCSSでデザインする」
上記サイトの「いつも完璧な贈り物」の部分と「旅を贈ろう」の部分をデザインしていきます。
一番苦労するであろう、横並びのデザインについて、display:flex;を使って説明しています。
【初心者必見】サイトの組み立て方⑤画像＆動画付き「過保護説明」
最後のfooterの部分をデザインしていきます。複雑なリストの横並びで、簡単な方法を紹介しています！
【初心者必見】サイトの組み立て方⑥画像＆動画付き「過保護説明」
スキップOKです！！
途中まで作っていて、ここだけ分からない。。という方は、上記の目次を見て、必要な部分だけ参考にしてもらえればOKかなと思います(^^)
おわりですっ！
最後までお付き合いいただ、きありがとうございましたm(_ _)m
私も初心者なので、うまく説明出来ているか分かりませんが、少なくとも、初心者の目線で、専門用語少な目での解説は出来たかなと思っております。
サイトの組み立て方の基礎が分かれば、後は応用で、難しいサイトの模写にチャレンジしつつ、知識を増やしていけばいいのかなと(^^)
私もまだまだ勉強中の身ですが、一緒に頑張りましょう！！
最後に、もし少しでもお役に立てましたら、いいね！やシェアしていただけると、飛び跳ねて喜びます♡♡♡
リツイートなど、私に通知が来るものであれば（Twitterの機能はあまりよく分かっていないのですが笑）、御礼のコメントしに行かせていただきますっ！！
