ポートフォリオサイト作ってみた!作ってみたい初心者必見!!

未分類

はじめに

「自分の制作物を自慢したい」

「知識ないけどポートフォリオサイトを作りたい」

もしくは

「プログラミング学習のアウトプットとしてWebサイトを作りたい」

という方向けに、ポートフォリオサイトの作り方について簡単に書きます!

作ったポートフォリオサイト

僕が作ったWebサイトです!気に入っています

 

ザックリ作り方紹介

Webサイトを作る方法は様々です。大きく分けて2種類かと思います。

  1. HTML/CSS/JavaScriptなどを使って0からWebサイトを作る方法
  2. WordPressなどのホームページ作成ツールで作る方法

     

    僕は今回、0からポートフォリオサイトを作れる自慢をしたかったので、

    1. HTML/CSS/JavaScriptなどを使って0からWebサイトを作る方法

    この方法でポートフォリオサイトを作りました!

     

    では作り方の流れを以下に書きます!

    (詳しいWebサイトの作り方は今回は書きません!)

    ページ構成を決めた

    どんなページが必要なのか書きだしました

    僕の場合、簡単なポートフォリオサイトですので、

    「制作物ページ」「所有スキルページ」「自己紹介ページ」の3つです

    デザインを決めた

    ページ構成を決めたら、各ページのデザインを考えました

    僕の場合、デザイン力が全く無かったので、他Webサイトのデザインを参考にしました

    まずは真似することが上達の近道です!迷ったら、他Webサイトからヒントをもらうと良いと思います

    HTMLを書いた

    簡単なWebサイトは「HTMLファイル」と「CSSファイル」で構成されています

    HTMLでは文字や画像を入れる事ができ、CSSでレイアウトや色、大きさ、形などを決めます

    作りながらHTML/CSSを書くと、コードがぐちゃぐちゃになりがちなので先にHTMLを書きました!

    CSS(必要があればJavaScriptも)を書いた

    HTMLを書いたらCSSを書きました!

    Webサイトに動きをつけたいならJavaScriptも書きましょう!

     

    おすすめ学習本

    ここまで読んで、

    「HTML/CSSって何? 具体的に何をすればいいの?」

    と思う方もいるのではないでしょうか

     

    ネットで調べて作ることもできると思います

    しかし、ネットに散らばった情報を取捨選択するのは大変です

    より正しく効率よくWebサイトを作りたいなら、本を参考に実際にWebサイトを作ってみましょう!

    おすすめ本1:作りながら学ぶ HTML/CSSデザインの教科書

    とにかく作りたい!

    という方におすすめです!Webサイトを作りながら学ぶことができます!アウトプットを通じて実用的な知識をみにつけましょう!

    おすすめ本2:世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書

    基礎から勉強したい!

    そんな方におすすめです!Webサイト作成に必要な基礎から学べます!パソコン操作などに慣れていない方は是非!

    おわりに

    今回ポートフォリオサイトを作成したので、その作り方について簡単に説明しました!

    html/cssでWebサイトを作成するに当たり、もし行き詰まったら当ブログのお問い合わせから質問していただいても構いません

    文面でお伝えできることに限界があること、すぐに返信できないことがあることはご了承ください

      コメントを残す

      メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

      ABOUT US

      投稿者のケンティです! 佐藤健を3回殴った顔に似ていると言われます! イケメンと呼ばれたい大学生です 主に情報工学について学んでいます 大学進学時にパソコンを購入し「ものづくり」をはじめました パソコンを使った工作や、技術について投稿していきます