はじめに
「自分の制作物を自慢したい」
「知識ないけどポートフォリオサイトを作りたい」
もしくは
「プログラミング学習のアウトプットとしてWebサイトを作りたい」
という方向けに、ポートフォリオサイトの作り方について簡単に書きます！
作ったポートフォリオサイト
僕が作ったWebサイトです！気に入っています
ザックリ作り方紹介
Webサイトを作る方法は様々です。大きく分けて２種類かと思います。
- HTML/CSS/JavaScriptなどを使って0からWebサイトを作る方法
- WordPressなどのホームページ作成ツールで作る方法
僕は今回、0からポートフォリオサイトを作れる自慢をしたかったので、
- HTML/CSS/JavaScriptなどを使って0からWebサイトを作る方法
この方法でポートフォリオサイトを作りました！
では作り方の流れを以下に書きます！
（詳しいWebサイトの作り方は今回は書きません！）
ページ構成を決めた
どんなページが必要なのか書きだしました
僕の場合、簡単なポートフォリオサイトですので、
「制作物ページ」「所有スキルページ」「自己紹介ページ」の３つです
デザインを決めた
ページ構成を決めたら、各ページのデザインを考えました
僕の場合、デザイン力が全く無かったので、他Webサイトのデザインを参考にしました
まずは真似することが上達の近道です！迷ったら、他Webサイトからヒントをもらうと良いと思います
HTMLを書いた
簡単なWebサイトは「HTMLファイル」と「CSSファイル」で構成されています
HTMLでは文字や画像を入れる事ができ、CSSでレイアウトや色、大きさ、形などを決めます
作りながらHTML/CSSを書くと、コードがぐちゃぐちゃになりがちなので先にHTMLを書きました！
CSS（必要があればJavaScriptも）を書いた
HTMLを書いたらCSSを書きました！
Webサイトに動きをつけたいならJavaScriptも書きましょう！
おすすめ学習本
ここまで読んで、
「HTML/CSSって何？ 具体的に何をすればいいの？」
と思う方もいるのではないでしょうか
ネットで調べて作ることもできると思います
しかし、ネットに散らばった情報を取捨選択するのは大変です
より正しく効率よくWebサイトを作りたいなら、本を参考に実際にWebサイトを作ってみましょう！
おすすめ本１：作りながら学ぶ HTML/CSSデザインの教科書
「とにかく作りたい！」
という方におすすめです！Webサイトを作りながら学ぶことができます！アウトプットを通じて実用的な知識をみにつけましょう！
おすすめ本２：世界一わかりやすいHTML５＆CSS３コーディングとサイト制作の教科書
「基礎から勉強したい！」
そんな方におすすめです！Webサイト作成に必要な基礎から学べます！パソコン操作などに慣れていない方は是非！
おわりに
今回ポートフォリオサイトを作成したので、その作り方について簡単に説明しました！
html/cssでWebサイトを作成するに当たり、もし行き詰まったら当ブログのお問い合わせから質問していただいても構いません
文面でお伝えできることに限界があること、すぐに返信できないことがあることはご了承ください
