大学生のモノづくり記録

Webページ作成(主にHTML、CSS、PHP、jQuery)、ArduinoやRaspberry Piを使って物作りの勉強した記録を載せたり/趣味のことを書いていきたいなと思います。(クオリティはかなり低いです)

ド素人が作る自分のポートフォリオサイト作成 第1回目

 前回ド素人が作るTODOリストを作っていきましたが、今回は、自分のことについてまとめたポートフォリオのサイトを作っていこうと思いました。そしてこれが第1回目になります。

 今回の目標としては、前回は、自分が使えればいいようなサイトのデザインでしたが今回は、様々な人でも見やすいようなサイトを作っていこうと思います。

 

デザインとしては、

f:id:kyozinnlove55:20200310004034p:plain

※汚くてごめんなさい

上図のような感じで作成していき背景の配色もうまくしていこうと思います。

実際に今時点で作成できている段階としては、

f:id:kyozinnlove55:20200310004345p:plain

大まかなところまで、作成していきました。これからCSSを勉強しながら上手く作っていこうと思います。

以降進み次第随時更新していこうと思うます。

 

※今の所のプログラム

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>自己紹介サイト</title>
    <link rel="stylesheet" href="name.css">
  </head>
  <body>
    <header>
     <ul>
       <li><a href="name.html">Home</a></li>
       <li><a href="game.html">ゲームのサイト</a></li>
       <li><a href="baseball.html">自分の好きな野球ぼやき</a></li>
       <li><a href="prog.html">頑張りたいプログラミング</a></li>
     </ul>
    </header>
    <div class="icon">
      <img src="img/megane.png
      " width="120" height="120" alt="自分の眼鏡です">
   </div>
   <div class="info">
     <h1>自己紹介</h1>
     <li>氏名:ド素人太朗</li>
     <li>職業:大学生</li>
     <li>趣味:ゲーム、野球、プログラミング</li>
     <li>今後の目標:もっと自由気ままにプログラミングを出来るようにする。</li>
     <p>以下に自分の趣味について書いたところに飛べるような物があります。</p>
   </div>
    <div class="game"></div>
    <p>自分の好きなゲームについてまとめた記事がコチラ</p>
    <form action="game.html">
      <input type="submit" value="GO!!">
    </form>
    <div class="baseball"></div>
    <p>自分の好きな野球チームについての記事がコチラ</p>
    <form action="baseball.html">
      <input type="submit" value="GO!!">
    </form>
    <div class="prog">
    <p>・・・
    </p>  
    <form action="prog.html">
      <input type="submit" value="GO!!">
    </form>
    </div>
  </body>

</html>