Web制作

【超簡単】短時間で行うHTML&CSSのポートフォリオ制作

ユウ
ユウ
皆さんこんばんにちは、ユウです。

今回はHTMLとCSSだけで作る、ポートフォリオの制作記事まとめだよ。

紹介するポートフォリオの全体はこちらからみることが出来ます。)

紹介しているポートフォリオのコード内容は、全然コピペして大丈夫です。

簡単にコードを書いているので、1時間ほどで作れるかと思います。

このシリーズの記事では、コード内容について詳しく説明しているので、とりあえずコピペして動作確認後に説明を見るのもありかと思います。

それでは、準備から始めてみましょう!

準備編

ポートフォリオ制作 【準備編】皆さんこんばんにちは、ユウです。 今回は、ポートフォリオ制作について紹介していきたいと思います。 実際に私が過去に作ったもの...

ここでは、ポートフォリオ制作をする上での基礎知識等を紹介しています。

一応、一通りの技術があるよという方でも、これを見ておくと、制作が進めやすくなるので、見てみて下さい。

ポートフォリオ制作を始める前に、基礎知識などが足りないなという方でもわかりやすいように、リンクなどを貼って紹介しているので安心して下さい。

特に、今回はBootstrapというフレームワークを使って作っているので、Bootstrapの使い方はこの記事を通して知っておくようにして下さい!

Bootstrapの機能については、各記事で出てきたら紹介しているのでそこまで覚えなくても大丈夫です。

Bootstrapの記事は、短い時間で読める記事を紹介しているので、読んでみると最低限の知識が身につきます。

Head編

ポートフォリオ制作 【Head編】ポートフォリオ制作のhead編となります。ここで公開しているコードは自由に使って良いのでぜひ、この記事を通して自分のポートフォリオを作ってみてはいかがでしょうか。フリーランスを始める前の準備として作っておくのも良いかと思います。...

ここでは、HTMLのhead部分の紹介しています。

metaタグ等を配置して、HTMLの内部情報を記述するheadの部分についての紹介です。

ポートフォリオ制作で、headはあまり関係ないですが、知っておくと便利な機能なども紹介しているので、見てみて下さい!

HTML作成において、基本的にはheadはかなり重要になってきます。

あまりheadについて理解してないよという方は、見てみるのをオススメします。

ヘッダー編

ポートフォリオ制作 【ヘッダー編 1】今回はポートフォリオ制作のヘッダー編の前半となります。Bootstrapでヘッダーを制作すると簡単にナビゲーションバーができレスポンシブも簡単なのでぜひポートフォリオ制作をする際はBootstrapを使用してヘッダーを制作してみてはどうでしょうか。今回はそんな方に向けた記事となります。...
ポートフォリオ制作 【ヘッダー編 2】今回はヘッダー制作の後半となります。今回のヘッダー制作ではBootstrapを使って制作しているので、Bootstrapの使い方を実践的に知りたい方はぜひ見てみて下さい。...

ここでは、簡単に作れるヘッダーの紹介をしています。

ヘッダーはページの上部にある、バー等を構成していきます。

今回は、レスポンシブを楽にするためにBootstrapを使用しています。

ですので、ここではほとんどBootstrapの内容になります。

前半の記事では、ヘッダーの枠組みの構成を具体的に紹介しています。

後半では、メニューアイコンなどの部品の取り付け方や、レスポンシブ機能について紹介しています。

本文制作編+α

ポートフォリオ制作【本文制作1】今回はポートフォリオ制作のメイン部分となります。この記事ではBootstrapだけではなくCSSも使用していきます。 画像の丸め方や、配置の方法を主にやっていっています。HTMLとCSSの基本的な構文でポートフォリオを制作しているので初心者の方にも優しい内容となっています。興味がある方はぜひ、見て下さい。...
ポートフォリオ制作【本文制作2】今回でポートフォリオ制作は最終回となります。ここまでの記事でかなり基礎的なことを説明してきたので、この記事を読み終わると、一人で作品を作っていけることが出来ます。ぜひ、ポートフォリオの制作をしてみたいという方は、読んでみて下さい。...

ここでは、ポートフォリオのメイン部分であるbodyを埋めていきます。

レスポンシブはBootstrapに任せる感じで、やっているのでめんどくさいCSSの処理は必要ありません。

かなり、簡単に書いていけます。

前半と後半では、2部に分けているだけで、やっていることはほとんど変わりません。

フッターの書き方なども後半の最後で紹介していますが、今回のフッターは簡単に書いているので、理解しやすいかと思います。

最後に

ポートフォリオ制作は今回で以上になります。

今回作ってもらったものは、非常に簡単で、物足りないという方もいらっしゃるかもしれませんね。

そういった方は、ぜひこれを改造したりオリジナルを1から作ってみたりしてみて下さい!

きっと楽しいかと思います!

このポートフォリオ制作を通して、基礎となるものは身につけられるので、まだ理解できていないという方は、復習することをオススメします。

今回はこれで以上となります。

最後まで読んでいただきありがとうございました!

ABOUT ME
ユウ
ユウ
プログラミング担当です。夜行性大学生やってます。 メンバーの中で一番プログラミングが得意で、将来はBMIという研究をしてALSの患者さんへの医療機器の開発を目標にしています。(すごそう) 無線LAN有線LANより便利。