ポートフォリオサイトの作り方【初心者向け】

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

Webサイト制作の基本のき

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

Web制作の流れと必要なもの【イラスト付き】

まず用意しておくもの

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

Google Chromeとは？ダウンロード方法から設定方法まで【初心者向け】

【簡単】Sublime Textのダウンロード方法【Mac・Windows対応】

HTMLの書き方【全2回】

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

ポートフォリオサイト：HTMLを使ってサイト制作

ポートフォリオサイトのHTMLの書き方【part2】

CSSの書き方

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

ポートフォリオサイトのCSSを追加【基本も紹介】

JavaScript・jQueryの書き方

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

ポートフォリオサイトをJavaScript（jQuery）使って動きを出していく

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

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

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

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

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

ポートフォリオサイトのデザインパターン

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

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

Coming Soon