今回はHTMLとCSSだけで作る、ポートフォリオの制作記事まとめだよ。
（紹介するポートフォリオの全体はこちらからみることが出来ます。）
紹介しているポートフォリオのコード内容は、全然コピペして大丈夫です。
簡単にコードを書いているので、1時間ほどで作れるかと思います。
このシリーズの記事では、コード内容について詳しく説明しているので、とりあえずコピペして動作確認後に説明を見るのもありかと思います。
それでは、準備から始めてみましょう！
準備編
ここでは、ポートフォリオ制作をする上での基礎知識等を紹介しています。
一応、一通りの技術があるよという方でも、これを見ておくと、制作が進めやすくなるので、見てみて下さい。
ポートフォリオ制作を始める前に、基礎知識などが足りないなという方でもわかりやすいように、リンクなどを貼って紹介しているので安心して下さい。
特に、今回はBootstrapというフレームワークを使って作っているので、Bootstrapの使い方はこの記事を通して知っておくようにして下さい！
Bootstrapの機能については、各記事で出てきたら紹介しているのでそこまで覚えなくても大丈夫です。
Bootstrapの記事は、短い時間で読める記事を紹介しているので、読んでみると最低限の知識が身につきます。
Head編
ここでは、HTMLのhead部分の紹介しています。
metaタグ等を配置して、HTMLの内部情報を記述するheadの部分についての紹介です。
ポートフォリオ制作で、headはあまり関係ないですが、知っておくと便利な機能なども紹介しているので、見てみて下さい！
HTML作成において、基本的にはheadはかなり重要になってきます。
あまりheadについて理解してないよという方は、見てみるのをオススメします。
ヘッダー編
ここでは、簡単に作れるヘッダーの紹介をしています。
ヘッダーはページの上部にある、バー等を構成していきます。
今回は、レスポンシブを楽にするためにBootstrapを使用しています。
ですので、ここではほとんどBootstrapの内容になります。
前半の記事では、ヘッダーの枠組みの構成を具体的に紹介しています。
後半では、メニューアイコンなどの部品の取り付け方や、レスポンシブ機能について紹介しています。
本文制作編+α
ここでは、ポートフォリオのメイン部分であるbodyを埋めていきます。
レスポンシブはBootstrapに任せる感じで、やっているのでめんどくさいCSSの処理は必要ありません。
かなり、簡単に書いていけます。
前半と後半では、2部に分けているだけで、やっていることはほとんど変わりません。
フッターの書き方なども後半の最後で紹介していますが、今回のフッターは簡単に書いているので、理解しやすいかと思います。
最後に
ポートフォリオ制作は今回で以上になります。
今回作ってもらったものは、非常に簡単で、物足りないという方もいらっしゃるかもしれませんね。
そういった方は、ぜひこれを改造したりオリジナルを1から作ってみたりしてみて下さい！
きっと楽しいかと思います！
このポートフォリオ制作を通して、基礎となるものは身につけられるので、まだ理解できていないという方は、復習することをオススメします。
今回はこれで以上となります。
最後まで読んでいただきありがとうございました！
