見出し画像
Photo by golchiki

Reactでポートフォリオサイトを作る、Bootstrapを使ってみる

tonoccho

こんにちはとのっちょです。

前回React.jsを利用してサイトを作るためにとりあえず項目を満たすところまでやりました。

とはいえ、あまりにもダサいのでもうちょっと見栄えをよくしていきたいと思いました。

そういうわけでBootstrapを使うことにしました。


Bootstrapってなに？

BootstrapはCSSフレームワークというやつで、すでにいろんなものが用意されたものを使ってウェブサイトを作れます。

で、色々と適用して今のポートフォリオはこんな感じになっています。

こんな感じになりました

前回のクソダサウェブサイトからだいぶ垢抜けた気がします。

アイコンはicooon-monoから

アイコンも随分いいデザインのものになりましたが、書いているわけではありません。icooon-monoから使わせていただきました。

デザインはbootstrapのexampleを参考にしました。

私はUIデザイナーとかそういうのではないので、コンポーネントをどう配置するかとかはよくわかりませんから、bootstrapのexampledsを参考にしてコピペ改変しました。

Reactでbootstrapを使うには

私はindex.htmlでCSSやJSを読み込んで、App.jsの中でCSSを当てたJSXを返しています。以下は抜粋です。

import './App.css';

function App() {
  return (
    <div>
      <main role="main">
        <div class="container col-xxl-8 px-4 py-5">
          <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
            <div class="col-10 col-sm-8 col-lg-6">
              <img src="images/tonoccho.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"/>
            </div>
            <div class="col-lg-6">
              <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">とのっちょのポートフォリオ</h1>
              <p class="lead">2014年からニュージーランド在住。現在はJavaプログラマーとしてAucklandに住んでいます。</p>
            </div>
          </div>
        </div>
        <div class="container px-4 py-5" id="featured-3">
          <h2 class="pb-2 border-bottom">Biography</h2>
          <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            <div class="feature col">
              <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-gradient fs-2 mb-3">
                <img src="images/icon_000850_256.png" alt="" width="32" />
              </div>

今はあまりにもベタ書きなので、もうちょっと変えていくことにします。

この記事が気に入ったらサポートをしてみませんか？