f:id:ShotaNukumizu_1000:20210924094808p:plain

おはようございます。Shotaです。

先日に私のホームページ(いわゆるポートフォリオサイト)を掲載しました。

▼私のポートフォリオサイト

shota-nukumizu.github.io

中身はHTML/CSSだけで作った非常にシンプルなホームページですが、簡単なアニメーションを入れながらそれなりに工夫して完成できました。

今回の記事では、私のポートフォリオサイトで工夫した点やその実装方法を簡単に解説します。

それでは早速、本題に入りましょう。

工夫したポイント
まとめ
制作環境

工夫したポイント

ナビゲーションバー(Bootstrap)

まずは、ナビゲーションバーを工夫しました。これは、スマホでも私のサイトを閲覧しやすくするためです。(当然のことかもしれませんが)

▼パソコンでの画面

f:id:ShotaNukumizu_1000:20211227051132p:plain

▼スマホでの画面

f:id:ShotaNukumizu_1000:20211227051321p:plain

スマホで私のサイトのナビゲーションバーが表示される場合、上にハンバーガーのような形をしたマークがあります。そのボタンをクリックすることで、私のホームページの内訳がパッと掲載されるような感じになっています。

これは至って簡単で、Bootstrapを使えば一瞬で仕上がります。

<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Shota's Resume</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars" area-hidden="true"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#top">TOP PAGE</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about">製作者</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#resume">経歴</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#services">事業内容</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#contact">お問い合わせ</a>
            </li>
        </ul>
    </div>
</nav>

それぞれのナビゲーションバーに表示されているリンクにあるhref属性に、#と該当タグのid名を記載すると、そのページに移動するような仕組みになっています。

ハンバーガーのような形をしたマークはFont Awesomeで簡単に手に入ります。以下のコードをコピペして使いました。(あらかじめFont Awesomeをインストールする必要があります)

<i class="fas fa-bars" area-hidden="true">

ただし、アイコンはスマホで閲覧する場合にしか表示させない場合はarea-hidden属性をtrueにしておく必要があります。

スキルグラフ

次に工夫した点はスキルグラフです。

f:id:ShotaNukumizu_1000:20211227052541p:plain

これも簡単にBootStrapで実装できます。

<div class="skills-bar">
    <p>Django, Vue.jsを用いたWEBアプリ開発</p>
    <div class="progress">
        <div class="progress-bar" style="width: 30%;">30%</div>
    </div>

    <p>Django REST Frameworkを用いたAPI開発</p>
    <div class="progress">
        <div class="progress-bar" style="width: 10%;">10%</div>
    </div>

    <p>ブログ(ライティング)</p>
    <div class="progress">
        <div class="progress-bar" style="width: 20%;">20%</div>
    </div>

    <p>WEB制作</p>
    <div class="progress">
        <div class="progress-bar" style="width: 15%;">15%</div>
    </div>
</div>

自分がどのぐらいのスキルを持っているのか相手に目で理解できるように、一部cssで手直ししてみました。

.skills-bar p {
    margin-bottom: 6px;
    font-weight: 600;
}

.progress {
    border-radius: 16px !important;
    margin-bottom: 10px;
}

.progress-bar {
    border-radius: 16px;
    background: #000 !important;
}

一部手を加えた内容は以下の通りです。

グラフにpタグを付けてどのスキルに関するグラフなのかひと目で分かるようにした。

スキルの具体的な数値を%で示した。その際に、デフォルトだと文字が黒になってしまうため見づらいので、数値を入れた。

上記のcssファイルにある!importantは一言でいえば、合わせて使用したプロパティを最優先で使用することにする命令です。

このようにして簡単なスキルグラフを作成できました。

タイムライン表示

ここが一番凝った内容かな、と思っています。

f:id:ShotaNukumizu_1000:20211227053740p:plain

私の経歴と趣味を両方書いて、見出しとその内容を色で分けて見やすいデザインにしてみました。

▼HTMLファイル

<div class="resume" id="resume">
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3 class="text-center">私の経歴</h3>
            <ul class="timeline">

                <li>
                    <h4><span>2021/03/01 -</span> 大学2年の春休みにプログラミング独学開始</h4>
                    <p>
                        業務自動化で仕事を効率化するためにPythonからスタートするものの、環境構築で挫折してしまう。
                    </p>
                </li>

                <li>
                    <h4><span>2021/04/01 -</span> はてなブログ(無料版)開設</h4>
                    <p>
                        プログラミングやPython、アプリ開発を中心に毎日情報発信中。ブログは2021年10月にGoogle AdSenseで収益化成功。
                    </p>
                </li>

                <li>
                    <h4><span>2021/04/30 -</span> Twitterアカウント開設</h4>
                    <p>
                        はてなブログの更新、プログラミングの基礎知識を中心に毎日情報発信中。2021年12月1日現在で、フォロワー数258
                    </p>
                </li>

                <li>
                    <h4><span>現在 -</span> Djangoを中心にWEB開発に没頭</h4>
                    <p>
                        Djangoをバックエンドとして、Vueと組み合わせてWEBアプリを開発。来年夏の個人事業設立に向けて必死に勉強中。
                        最近はDjango REST Frameworkを用いたAPI開発に興味がある。
                    </p>
                </li>

            </ul>

        </div>

        <div class="col-md-6">
            <h3 class="text-center">私の使っている言語, 趣味</h3>
            <ul class="timeline">

                <li>
                    <h4><span>言語 -</span> Python, JavaScript(Vue, Angular, React), TypeScript</h4>
                    <p>
                        PythonではDjangoを使った開発が得意。Djangoで簡単なWEBアプリやAPIを構築できる。
                        フロントエンドはJavaScript, 特にVueが得意。最近はAngularに興味を持っているが、
                        TypeScriptの開発に少し手を焼いている....
                    </p>
                </li>
        
                <li>
                    <h4><span>趣味 -</span> 読書</h4>
                    <p>
                        月に最低4冊本を読む。ブログで毎週日曜は本の要約記事を書いている。
                        紙で本は読まず、Amazon Kindleで読んでいる。
                        最近のおすすめの本は『最高の戦略教科書 孫子』。
                    </p>
                </li>
        
                <li>
                    <h4><span>趣味-</span> アニメ鑑賞</h4>
                    <p>
                        毎日最低30分間はアニメ鑑賞に費やす。<br>
                        最近オススメのアニメは『僕のヒーローアカデミア』。最も好きな作品は『鋼の錬金術師』。
                    </p>
                </li>
        
            </ul>
        
        </div>
    </div>
</div>

▼CSSファイル

.resume {
    margin-top: -50px;
    padding-top: 50px;
    padding-bottom: 30px;
    background: #f9f9f9;
}

.resume h3 {
    margin-bottom: 50px;
}

.timeline {
    list-style-type: none;
    position: relative;
}

.timeline:before {
    content: '';
    background: #555;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 1;
}

.timeline li {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    background: #fff;
}

.timeline li h4 {
    background-color: #000;
    padding: 5px 0 5px 20px;
    color: #fff;
    font-size: 15px;
}

.timeline li h4 span {
    font-weight: bold;
    color: #ccc;
}

.timeline li:before {
    content: '';
    background: #fff;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #000;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 1;
}

cssのbeforeプロパティを使って、指定した要素の直前に図形や線が入るように工夫してみました。そうすることで、ただのカードの羅列にならないようにしました。

あとは、spanタグを使ってその部分だけ別の色にして見出しを強調させることで、より自分のサイトを見やすくしました。

カードのアニメーション

f:id:ShotaNukumizu_1000:20211227055313p:plain

あと、カードのアニメーションにもこだわりました。スマホであればタップした時、パソコンであればカーソルをカードに移動させた時に色を反転させて見やすくするアニメーションを付けてみました。

▼HTMLファイル

<div class="services" id="services">
    <div class="container">
        <h1 class="text-center">活動内容</h1>

        <div class="row">
            <div class="col-md-4">
                <div class="services-box">
                    <i class="fab fa-python" aria-hidden="true"></i><span>WEBアプリ開発</span>
                    <p>主にDjango, REST Framework, VueやReactを用いたWEBアプリの開発を行います。</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="services-box">
                    <i class="fas fa-laptop-code" aria-hidden="true"></i><span>WEBサイト制作(コーディング)</span>
                    <p>HTML/CSS, JavaScriptを中心に簡単なWEB制作案件に応じます。</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="services-box">
                    <i class="fas fa-blog" aria-hidden="true"></i><span>はてなブログ</span>
                    <p>はてなブログでプログラミング, PythonやWEBアプリ開発に関する情報を発信しています。</p>
                </div>
            </div>

        </div>

    </div>
</div>

▼CSSファイル

.services {
    padding-top: 50px;
    padding-bottom: 50px;
}

.services h1 {
    margin-bottom: 15px;
}

.services-box {
    background: #f9f9f9;
    padding: 10px;
    margin-top: 20px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.services-box fa {
    margin: 0 10px;
    font-size: 20px;
}

.services-box span {
    margin: 3px;
    font-size: 20px;
    font-weight: bold;
}

.services-box p {
    font-size: 15px;
    margin-top: 20px;
    color: #777;
}

.services-box:hover {
    background: #000;
    color: #fff;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transition: 1s;
}

.services-box:hover p {
    color: #fff;
}

.services-box:hover {
    background: #000;
    color: #fff;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transition: 1s;
}

cssのhoverを使って、マウスを動かす際に簡単なアニメーション(この際は色が反転する)ができるように工夫しました。

ボタンのアニメーション

最後に、ボタンのアニメーションを詳細に解説します。

f:id:ShotaNukumizu_1000:20211227060106p:plain

▼HTMLファイル

<div class="social-icons">
    <ul>
        <a href="https://twitter.com/Nameless_SN"><li><i class="fab fa-twitter"></i></li></a>
        <a href="https://shotanukumizu-1000.hatenablog.com/"><li><i class="fas fa-blog"></i></li></a>
        <a href="https://github/shota-nukumizu.com"><li><i class="fab fa-github"></i></li></a>
    </ul>
</div>

▼CSSファイル

.social-icons {
    top: 50%;
    transform: translateY(-50%);
    position: sticky;
    z-index: 1;
    width: 80px;
}

.social-icons ul {
    padding: initial;
}

.social-icons ul li {
    height: 40px;
    width: 40px;
    list-style-type: none;
    padding-left: 12px;
    padding-top: 6px;
    margin-top: 5px;
    color: #fff;
    background-color: #000;
}

.social-icons ul li:hover {
    padding-left: 30px;
    width: 80px;
    transition: 1s;
}

これもhoverを使って、カーソルが上に来た時にアニメーションできるように工夫してみました。

まとめ

今回は私の処女作であるポートフォリオサイトの制作方法について簡単に説明しました。正直HTMLとCSSだけでこんな簡単なWEBサイトが完成するのはめちゃくちゃ凄いですね....

なお、今回本記事にアップしているコードはGitHubで公開していますので確認してみてください。

今回の記事を参考に、自身のWEBサイトの制作に役立ててくだされば幸いです。

今回の記事はこれで終了です。

▼GitHubのソースコード

github.com

制作環境

Visual Studio Code
Font Awesome ver5.10.0
BootStrap ver4.1.0

Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

HTML/CSSで簡単かつモダンなホームページを作成する方法

工夫したポイント

ナビゲーションバー(Bootstrap)

スキルグラフ

タイムライン表示

カードのアニメーション

ボタンのアニメーション

まとめ

制作環境