ポートフォリオサイトの作り方

ポートフォリオサイトの作り方

はじめに

ここでは、「Webサイトを作りたい」「自分のポートフォリオサイトを作りたい」という方に向けて無料で制作方法を解説しています。初心者向けですので、中級者以上の方は物足りなく感じるかもしれませんが、ご了承下さい。では、早速制作に入って行きましょう。ちなみに質問はTwitter・メールにて承っております。

Webサイト制作の基本のき

まず、サイトを作るにあたって何が必要なのか、そしてどんな流れで制作していくのかを理解しておきましょう。

まず用意しておくもの

早速制作に入る前に下記の2つを用意しておきましょう。10分で終わります。



HTMLの書き方【全2回】

ここから実際に制作に入っていきます。まずサイト作りの基本となる「HTML」を理解しましょう。


CSSの書き方

HTMLで土台を作ったらCSSで装飾していきましょう。CSSを使うとグッとサイトっぽくなるので、ぜひチャレンジしてみてください。

JavaScript・jQueryの書き方

この記事ではJavaScriptではなく、jQueryを用いて解説しています。jQueryを覚えるとサイトに動きをつけることができるので、ぜひ取り入れてみてください。

ポートフォリオサイトの下層ページを作る

下層ページとは、商品一覧ページや商品ごとのページなどのことを言います。ここでは、デモサイトのWork(作品)の「作品一覧ページ」・「作品別ページ」を作っていきます。

ポートフォリオサイトの
プロフィールなどのデザイン3パターン

デモサイトのAbout(プロフィール)・Work(作品など)のデザインを変更するHTML・CSSを3つ紹介します。

ドメイン・サーバーの設定

サイトの住所や土地となる役目を持つドメインとサーバーを開設していきます。これをしないとスマホやパソコンで見ることができないので、必ず開設しておきましょう。

Coming Soon