僕の世界観を変えてみる

文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。仲良くやろうよ。

MENU
トップ > HTML > 趣味でプログラミングやっている者だけどポートフォリオ(仮)を作ってみた

趣味でプログラミングやっている者だけどポートフォリオ(仮)を作ってみた

HTML CSS JavaScript

f:id:htmllifehack:20200603231708j:plain
title

お久しぶりです。

コロナ蔓延の候、みなさまいかがお過ごしでしょうか。

半年ぶりでしょうか。

随分とブログの更新をサボってしまいました。

2019年の10月後半にバセドウ病を患い、それでも11月には1記事書いたものの

体調が優れないため何もできない日々が続いていました。

そんな中コロナウイルスが流行りだし、

時期が重なれば死んでいたんではないかと思う今日この頃。

こんにちは、えこです。

徐々によくなってきたこともあり、最近ポートフォリオを作成しました。

拘ったものではないのですが、全くのポートフォリオ初心者の方の参考になれば幸いです。

作成したもの

ポートフォリオはHTML,CSS,JavaScriptを使用し、CMSを使わずに作りました。

サーバは、企業に見せるならフリーのサーバを使うなという記事も見かけましたが練習のためにGoogleのFirebaseを利用しました。

作成したものはこちらです。

▼https://portfolio-535d0.firebaseapp.com/

みんなが作ったポートフォリオを見に行く

まずポートフォリオがどんな物なのか調べました。

【ポートフォリオ　参考】

で検索し、どんなことを書いているのかを把握します。

主に、メニューバー、サイトトップ、自己紹介、スキル、製作物、問合せさき、あたりで構成されているようです。

参考にしたサイトはこちら

▼イケてるWebデザインで作られたポートフォリオサイト21選まとめ | マイナビクリエイター

Adobe XDでワイヤーフレーム を作成する

まずポートフォリオの作り方をググっていたら最初にワイヤーフレーム を作るという記事が出ました。

いきなりコードを書くのではなくて完成イメージを書くようでげす。

【ワイヤーフレーム 　ツール】

などで検索するとAdobe XDの体験版が出てきたのでこれを使うことにしました。

Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツール

使い方はよくわからないけど、公式サイトにチュートリアルがあるので大体で作成しました。

f:id:htmllifehack:20200525093318p:plain
f:id:htmllifehack:20200525093345p:plain

あとサイトはレスポンシブ デザインで構築する必要があります。

スマホの普及率増加に伴い、検索やネット閲覧もパソコンよりもスマホで見る機会が増えました。

2017年のデータですがネット接続の端末の比率は以下の通りです。

https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h30/image/n4201020.png 出典：総務省 インターネット利用の広がり より

また、スマホの普及率でいうと

https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h30/image/n4201030.png 出典：総務省 インターネット利用の広がり より

20代、30代に関してはスマホの普及率は９割を超えています。

  • 20〜50代のスマホの普及率は７割越え
  • パソコンよりもスマホでネット閲覧をしている人の方が多い

という理由からサイト製作する際はスマホ画面で見られることを優先的に考えて作成する方が良いということです。

これは結構前から言われていることですね。

スマホファーストです。

コードを書いていく

ワイヤーフレーム で完成イメージができたらこのイメージに沿ってコードを書いていきます。

仕様書の作成、要件定義なども必要との事でしたがいまいちわからないのでこれは飛ばします。

【HTML編】section,main,articleがわからない

エディタはVScodeを使います。

VScodeは標準でemmetが使えるので html:5 と入力すると基本のタグは生成されて便利です。

さて、構成としては

  • メニューバー
  • サイトトップ
  • 自己紹介
  • スキル
  • 製作物
  • 問合せさき

この辺りを見出しにしてdivで区切っていこうかなと。

と思っていたのですが、HTML5で検索するとどうやらarticleやsectionやmainなどのタグが追加され、これらを使う事でよりわかりやすく構築できるという記事を読みました。

じゃせっかくだしそれらを使って書いていこう！とリファレンスを読んでみたものの、sectionとarticleの違いがわかりませんでした。

何章何節みたいな使い方をするのがsectionであり、sectionの子要素にh1などの見出しを入れるべきらしい。

じゃarticleは？

articleは独立したコンテンツに使うらしい。

▼HTML5のお勉強 articleとsectionとか - Qiita

なるほど、と言いたいところですがわからん！

いくつかのサイトをDeveloper toolsを使って見ましたが、articleを使っているサイトはなく、なんならsectionすら使っていないサイトもあっ他くらいです。

ということで、わからないなりに適度な感じでベースを作ってみました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/css.css">
    <title>こんにちは</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#top">top</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#skill">skill</a></li>
                <li><a href="#career">career</a></li>
                <li><a href="#works">works</a></li>
                <li><a href="#contact">contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="top">

    </section>
    <main>
        <section id="about">
            <h1 class="sub-title">about</h1>

        </section>
        <section id="career">
            <h1 class="sub-title">career</h1>

        </section>
        <section id="skill">
            <h1 class="sub-title">skill</h1>

        </section>
        <section id="works">
            <h1 class="sub-title">works</h1>

        </section>
        <section id="contact">
            <h1 class="sub-title">contact</h1>

        </section>
    </main>
    <footer>
        <small>Copyright ©︎ 2020 eco All Rights Reserved.</small>
    </footer>
</body>
</html>

これをベースにして肉付けをしていきます。

【CSS】画面サイズで読み込むCSSを変更する

CSSフォルダの中に、スマホ用cssとPC用CSSを作成しHTMLのhead内に条件を記述します。

<head>
    <link rel="stylesheet" href="./css/css.css" media="screen and (max-width:480px)">
    <link rel="stylesheet" href="./css/pc.css" media="screen and (min-width:481px)">
</head>

media screenで480px以下の時はcss.cssを読み込ませ、481px以上の時はpc.cssを読み込ませるようにしています。

一つのCSS内にmedia screenを記述しても同じようにできますが、編集する際にスクロールするのが大変なので分けて作りました。

こう言うやり方もあるんですね。

動きがないとダサい問題

ここまでだと普通すぎていい印象を与えられそうにない。

が、一から動きがあってセンスのいいサイトを作る知識もない。

と言うわけで簡単に導入できてセンスのあるアニメーションを取り入れてみました。

particles.js

幾何学模様を画面上に表示するjsです。

導入するだけでおしゃれなサイトに様変わりです。

▼particles.js - A lightweight JavaScript library for creating particles

最初はtopにparticles.jsを入れてたんですが、なぜかfirebaseにデプロイすると反映されないので困りました。

仕方ないのでkeyframesでグラデーションの背景を動かして代替としました。

悲しい…

AOS

▼AOS - Animate on scroll library

スクロールして各sectionに移動する時、なんの動きもないのは少し味気ないのでアニメーションを取り入れました。

スクロールに連動してフェードイン・フェードアウトしてくれます。

今回はCDNで使いました。

サイトに行ってみるとどんな動きかわかりますよ。

CDNの記載と、javascriptに初期化のコードを記載するだけで使えます。

<script>
  AOS.init();
</script>

keyframes

keyframesを使って簡単なアニメーションを作りました。

#top {
    width: 100%;
    height: 100vh;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    background-attachment: fixed;
    background: linear-gradient(-45deg,#30cfd0 0%, #4a8ef3 30%, #b721ff 60%, #f43b47 100%) ;
    background-size: 500% 100%;
    position: relative;
    animation: gradient 10s ease-in-out infinite;
}

@keyframes gradient {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 100% 200%;
    }
    100% {
        background-position: 0 0%;
    }
}

#topのtopbackgroundにlinear-gradientでグラデーションを作成します。

backgroundのグラデーションをドアップで表示させます。

で、keyframesで左上から右下に移動させて、背景が流れているように見せかけています。

ハンバーガーメニュー

▼【ハンバーガーメニュー＆トグルニュー】クリックすると表示されるグローバルナビの実装方法 | Tech dig

スマホで閲覧するときはハンバーガーメニューを表示させたかったので、こちらのサイトのコードをお借りしました。

簡単に言うと、ハンバーガーメニューのclassかidを作成して、普段はhiddenさせておき、ハンバーガーメニューをクリックするとjavascriptでハンバーガーメニュー用のclassかidを付与する仕組みです。

const body = document.body;
const hamburger = document.querySelector('#js-hamburger');
const bg = document.querySelector('#js-bg-black');
hamburger.addEventListener('click', function(){
    body.classList.toggle('menu-open');
})

bg.addEventListener('click', function(){
    body.classList.toggle('menu-open');
})

varじゃなくletやconstが推奨になったとのことで、僕もvarは使わずにやっていきます。

document.bodyでbodyを取得

document.querySelector('#js-hamburger'); でid=js-hamburgerの要素を取得

const bgも同様

onclickPよりもaddEventListener`のほうが推奨されているのでこちらを使います。

onclickと同様で、id=hamburgerの要素がクリックされたときbodyにmenu-openというクラスを追加する、という意味になります。

通常クラスの追加や削除には

body.classList.add('クラス名');　// クラス追加

body.classList.remove('クラス名');　// クラス削除

としますが、これを一度にできるのがtoggleです。

toggleはクラスがなければ追加、すでに存在していれば削除をしてくれる便利メソッドです。

javascriptでタイトルをタイピング風にする

▼JavaScriptとCSSアニメーションでタイピング風表示を行う - Qiita

いくつか調べましたが、僕のなかではこの記事の方法が最高でした。

[...sentence]のところの意味はわかりませんがなるほどと思いましたね。

カーソルの部分はkeyframeを使って点滅を再現。

本当はもっと点滅！って感じにしたかったんですけどわからないのでいったんこれでOKにしてます笑

カーソルは｜で表現しました。shift + ¥ （パイプとかパイプラインと呼ばれる記号）

#top p:after {
    padding-bottom: 5px;
    content: '|';
    /* border-right: 1px solid; */
    animation: flash 1.7s linear infinite;

}
@keyframes flash {
    0%, 100% {
      opacity: 0;
      color: #fff;
    }

    35% {
        opacity: 1;
        color: #fff;
    }

    65% {
        opacity: 1;
        color: #fff;
    }
  }

先人たちの技術力をお借りして、やっとマシな見た目になってきました。

実績がない問題

ここまで作っておいてあれですが、僕にはポートフォリオに載せる実績がありませんでした。

😢

仕方ないのでこのブログから厳選した記事を載せておきます。

何かしらサービスを作ったほうが良さそうですね。

何を作ろうかな🤔

まとめ

さて、今回は企業にアピールするためにポートフォリオ（仮）を作ってみました。

sectionやらarticleやらがいまいちわからないんですけどそれっぽいものが作れてよかったです。

cssのkeyframesも今回初めて知ったので簡単にアニメーションが作れるってのは感動しました。

少しずつ何かサービスを作ってポートフォリオ（仮）を充実させていきたいですね。