【爆速ポートフォリオ作成】 STEP3 Bootstrapでポートフォリオ作成

どーも。さいんです。

爆速ポートフォリオ作成シリーズもいよいよメインコンテンツのポートフォリオの作成となります。

Webエンジニアの道はどこまでも続きますが、Web制作として稼ぐために最低限必要なスキルは今回のポートフォリオの作成を通して知ってもらえればと思います。

さいん

わたしは、とある企業にてWebエンジニアとして年収1,000万ほどいただきながらサラリーマンをしています。
たくさんの方がプログラミングを勉強している事実を知り、稼げるエンジニアとして成長する手助けになればとブログを作りました。

多くのプログラミングが学習できるサイトはHTMLの学習を繰り返し、CSSをゼロから自分で書いてみるという学習法をオススメしていますが、私はBootstrapを活用しポートフォリオを作成し学習する方法をオススメしています。

Bootstrapを使用する場合でも最低限のHTMLやCSSの知識は必要になりますので、ProgateのHTML & CSS 初級編は完了しておくことをオススメします。

こんな人に読んでほしい
  • ポートフォリオを作ってみたい
  • HTMLを学習したが次のステップがわからない
  • ポートフォリオの作成にチャレンジしたが失敗した
  • Bootstrapを使ったサイトを作ってみたい

HTMLの基礎からBootstrapを使用して、ポートフォリオの作成を通して一気に稼げるエンジニアへ駆け上がりましょう。

目次

爆速ポートフォリオ作成について

爆速でポートフォリオを公開する手順を大きく5つのステップに分けて解説しています。

STEP
レンタルサーバでホームページを公開する
STEP
ポートフォリオの作成

今回解説する内容

HTML/CSS&Bootstrapでポートフォリオの作成方法を解説します。

STEP1、STEP2でレンタルサーバの準備と、簡単なホームページの公開方法を紹介しました。

今回はいよいよメインのポートフォリオ作成になります。まだレンタルサーバが準備できていない方は、ポートフォリオを作成後公開できませんので、準備しておきましょう。

あわせて読みたい
【爆速ポートフォリオ作成】 STEP1 レンタルサーバの準備 Progateの勝手に深掘りシリーズなど、HTMLやCSSについての解説をこなっていますが、より実践的なシリーズとして爆速ポートフォリオ作成という企画を行なっていきます。 ...

前回契約したレンタルサーバはさくらのレンタルサーバですが、別のサーバでも今回のBootstrapでのポートフォリオ作成と、ホームページの公開は可能です。

Bootstrapとは

Bootstrapとは

BootstrapとはCSSフレームワークです。

と言ってもなかなかわかりにくいですよね?

もっとわかりやすく説明するとレゴブロックやホームページの制作キットのようなイメージです。

様々なパーツや仕組みが簡単に作れるように詰め込まれたキットの中から、あなたが必要なものをHTMLとして記載することで簡単にクオリティの高いホームページが作れちゃいます。

中にはBootstrapは邪道だ!Web制作では使わない!と言った方もいてBootstrapに対して不安を抱く方もいらっしゃると思います。

しかし、それはあくまで作り手の意見

もしお客さんがBootstrapのデザインでも満足し、その代わり納期を早くしたり、機能が豊富だったり、バグが少なかったりすれば満足度が高いでしょう。

最近ではBootstrapを教えるスクールやサイトも増えていますので、安心してBootstrapでポートフォリオを開発してみてください。

まずはBootstrapを使って、どんなページが作れそうかいろいろと触って遊んでホームページ作成を楽しむことを重視してくださいね。

Bootstrapの使い方

それでは早速Bootstrapを使ってみましょう!

導入方法は公式ホームページをチェックしましょう。

あわせて読みたい
Bootstrap 世界で最も人気のあるフロントエンドフレームワーク
Bootstrapの始め方

Bootstrapに限らず、多くのプログラミング言語やフレームワークでは公式HPに使い方が丁寧に解説されています。

Bootstrapでは”はじめる”をクリックすると、すぐに使い方が解説されています。

Bootstrapの導入方法
  • CSSと記載されている内容を<head>の中に
  • JSと記載されている内容を</ body>の中に

記載しましょう。

サンプル(STEP2のindex.htmlをベースに)

作成中のindex.html
Bootstrapのindex.html

右にはみ出た部分は省略しています。先ほどコピーしたコードをそのまま貼り付けましょう。

実は少しスクロールするとBootstrapの公式のテンプレートが準備されています。

Bootstrapのテンプレート

ゼロからサイトを作る場合はこれをそのまま使ってしまうのもオススメです。Bootstrapがどうやって使えるようになるかは知っておきましょう。

目標はテンプレートのCarousel

今回みなさんがBootstrapの勉強が今後進めやすいように、Bootstrapが提供している公式のテンプレートを目標として、どう開発を進めていくかを解説していきます。

あわせて読みたい
サンプル フレームワークの部品の使用例や, コンポーネントのカスタマイズ例などの幅広いサンプルを使って, すぐにプロジェクトを始められます。

上記にアクセスするとBootstrapが用意してくれているテンプレートの一覧が表示されます。

Bootstrapのサンプル

少し質素ではありますが、サイトのベースとなるレイアウトがすでに組み上がったテンプレートがたくさん準備されています。

Bootstrapに慣れてきたら、別のテンプレートを使用して独自のサイトの制作も挑戦してみてください。

今回はポートフォリオ作成ということでCarouselを目標とします。

BootstrapのCarousel

こちらのテンプレートをベースに作成していきましょう!

あわせて読みたい
カルーセルテンプレート for Bootstrap · Bootstrap

テンプレートを読み解く

Carouselをみながらページを読んでいただくとよりわかりやすいと思うので、可能であれば別ウィンドウでCarouselのテンプレートを開いてみてくださいね。

今回作成するCarouselを大きくパーツごとに分割してみましょう。

テンプレートの分割
  1. ヘッダー
  2. スライダー(カルーセル)
  3. 横並びコンテンツ
  4. 文章&写真コンテンツ1
  5. 文章&写真コンテンツ2
  6. 文章&写真コンテンツ3
  7. フッター

という大きく7つの構成でできていることがわかると思います。

あとはこれを真似して作成していくだけです!簡単ですね!

テンプレートのソースコードを見ながら

Carouselのサイトを見ていただいていると思いますが、今から作成するソースコードを覗き見しながら開発をしていきましょう。

完全にコピーではなく、あくまでテンプレートを作るためにどんなコードを書いているかを知るためです。

Chromeで開いている方は

右クリック -> ページのソースの表示
Ctrl+U(Windows)または ⌘-Option-U(Mac)

でテンプレートのソースコードの表示ができます。

これからの解説はテンプレートのソースコードをもとに調べている流れで解説しますので、ソースコードも見ながら開発していきましょう!

ヘッダー

テンプレートのヘッダー部分
Bootstrapのヘッダー

ヘッダー部分の作成をしていきましょう。

まずはテンプレートではどのように書かれているかを確認します。

テンプレートのソースコードチェック

ソースコードで”無効ボタン”などで検索してみましょう

テンプレートのコード
Bootstrapの作成中

どうも無効ボタンやホームなどヘッダーに記載されている部分は

<header>
<nav class=”navbar navbar-expand-md navbar-dark fixed-top bg-dark”>
いろいろ書かれている
</nav>
</header>

で記載されているようです。

<header>はヘッダーの記載を表すタグでHTMLの要素です。

Bootstrapではclassに記載をしてデザインなどを適応していくので、navタグに記載されたnavbarというのがヘッダーのデザインや要素を決めていそうだと見当がつきます。

公式サイトで使い方の確認

そこで公式ページで調べてみましょう。

あわせて読みたい
はじめに 世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

公式ページの検索ボックスに”navbar“と入力してみてください。

Bootstrapの検索
Bootstrapのnavbar

すると、関連するページが見つかると思うのでみてみましょう。

Bootstrapのnavbarの説明

ヘッダー、ナビバーなどのドキュメントと例と記載があり、ずばり解説しているページを発見できましたね!

このように、ソースコードから公式HPのドキュメントの解説部分の解説を読んで、自分でコードを書くというのがオススメです。

このページからあなたが作りたいヘッダーのレイアウトを調べてみてください。

今回私は、シンプルなデザインが良いので途中にある

Bootstrapのnavbarのサンプル

を使用したいと思います。文言などを適度に編集してみましょう。

HTMLを編集する

開発中のindex.html
Bootstrapのnabvarのhtml

みなさんも同じように<header></header>のなかに公式HPの中からあなたのイメージにあったヘッダーのコードを選び解説を読みながらあなたのindex.htmlファイルに記載してみましょう。

私は一部文言を変えてみました。

開発中のHTMLのプレビュー
Bootstrapで作成中のサイト

ヘッダーができましたね!

ほとんどが基本的なHTMLタグとBootstrapで解説されているclassを適応することで、おしゃれなページがどんどんできていくことを体験できると思います。

スライダー(カルーセル)

続いて、ページで一番目立つコンテンツでもあるスライダー(カルーセル)の部分です。

テンプレートのスライダー部分
Bootstrapのスライダー

同様にソースコードから”見出しの例”で検索してみましょう。

テンプレートのソースコードチェック

テンプレートのコード
Bootstrapのスライダーのソースコード

<main>というタグの中に、<div>があり、そこにclassでcarousel slideと設定してありますね。

今回もcarouselで公式HPから調べてみましょう。

公式サイトで使い方の確認

Bootstrapでcarousel
Bootstrapのcarouselの説明

今回もすぐに検索で見つけることができました。

使い方に関しては公式HPに左右の矢印の付け方や説明文の入れ方など解説されています。

スライドショーのスクロールするインターバルの説明なんかも下に説明されているので、あなたのイメージにあったカスタマイズもチャレンジしてみましょう。

私は、フェードで画像を差し替えたいと思うので

Bootstrapのcrossfade

これを適応してみることにします!

HTMLを編集する

開発中のindex.html
Bootstrapのcarouselの導入

テンプレートと同じように<main></main>の中にコードを追加してみましょう。

もし余裕がある方は、今回追加したカルーセルのコードのどのコードが画面の何を意味しているかをひとつずつ変更して、どういう影響があるのかを試してみることをオススメします。

また、data-*を使用したカスタマイズもあなたの提案の幅を広げることができるので、チャレンジしてみましょうね。

作成できたら、index.htmlをブラウザで開き確認してみましょう。

開発中のHTMLのプレビュー
Bootstrapのcarouselの作成

サンプル通り、カルーセルの部分が表示され、左右のボタンを押すとスライドされることが確認できました!

もし、うまく表示されない、動かないという方は公式HPやテンプレートのHTMLコードと比較して何が違うのかをチェックしましょう。

画像を差し替えてみる

すでにお腹いっぱいという方は、全体の大枠を作り上げることに集中して問題ありません!

しかし、せっかく作るなら自分のサイト用にカスタマイズしたいという方は画像を差し替えてみましょう!

画像はご自身で準備していただいても良いですし、無料で使用ができるサイトの活用でも構いません。

今回はぱくたそを活用してみます。

ぱくたそ(PAKUTASO)
ぱくたそ - すべて無料の写真素材(フリー素材)人物や背景・テクスチャなどの写真をダウンロード 人物や背景(テクスチャ)など様々なジャンルの写真素材を無料で配布しているフリー素材では国内最大規模の「ぱくたそ(PAKUTASO)」公式サイトです。2021年11月24日現在、...

サンプルでは3枚の画像をスライドしていたので、3枚ピックアップしてみます。

3枚の画像を今回はcarouselX.jpgという名前で、imgというフォルダの中に入れてみます。

今回はページの頭にどかっと表示するので、少し横長にしておくのがオススメです。

もちろんCSSなどで調整は可能ですが、今回は爆速がテーマなので事前に画像を1440px x 440pxのサイズにトリミングして進めています。

ファイル構成
作成中のフォルダ構成

それでは先ほどのコードの編集をしてみます。

先ほどのコードではグレーで表示されている部分を画像に差し替えたいので、グレーになっている部分はどこかを探してみましょう。

似たような3つ同じような記載されている<svg></svg>の要素が怪しいですね。

svgについては、どういうものか検索してみるのをオススメです!

このsvgを先ほど準備した画像に置き換えてみます。画像はimgタグでしたよね?

書き換え前
作成中のhtml
書き換え後
書き換え後のhtml

画像はimgフォルダの下を指定し、classには公式HPに記載のあった”d-block w-100″を設定しておきましょう。設定することで、ブラウザのサイズが小さくなっても画像の横がはみ出さなくなります。

開発中のHTMLのプレビュー
作成中のHTMLのプレビュー

それっぽくなってきましたね!

横並びコンテンツ

続いて、ポートフォリオではスキル一覧などで使われている横並びのコンテンツになります。

テンプレートの横並びコンテンツ部分
横並びコンテンツ

テンプレートのソースコードチェック

それではソースコードで横並びコンテンツ部分のソースコードを探してみましょう。

今回は見出しや文章があるので、その辺りを検索すればサクッと見つけられそうですね。

テンプレートのコード
テンプレートのソースコード

<div class=”container”>という中に、<div class=”row”><div class=”col-lg-4″>とずらずらと並んでいます。

横並びのコンテンツが3つあるので、どうやら<div class=”col-lg-4″>の部分が実際に横に並んでいる部分のようですね。

それではそれぞれ使い方を調べてみましょう!

公式サイトで使い方の確認

まずはcontainerというclassが設定されたdivが登場したので、調べてみましょう。

Bootstrapでcontainerを検索

出て来ました!

どうやらcontainerもちゃんとBootstrapで意味がある要素のようです。

Bootstrapのcontainersの説明

ふむふむ・・・難しいことが書いてありますが、グリッドシステムを使うために必要なようですね。

カルーセルではグリッドシステムを使用しなかったので、containerの中に入れませんでしたが、横並びコンテンツはグリッドシステムを使っているようです。

BootstrapのGrid

グリッドシステムと聞いて、全くちんぷんかんぷん・・・と思っていたらメニューにGridを発見!ここをクリックして説明を見てみましょう。

BootstrapのGridの説明
BootstrapのGridの詳細

どうやら、要素を良い感じに横に並べてくれて、さらにデバイスに応じて良い感じに並べてくれるシステムのようです。

レスポンシブ対応というベースがこのグリッドシステムを指すことも多いです。

試しにMix and matchをブラウザを大きく開いて表示してみてください。

BootstrapのGridの例

こんな感じで表示されたと思います。

その後、ブラウザの横幅を小さくしていってみましょう。

BootstrapのGridのスマホ表示

ある要素は横幅全部まで広がり、ある要素は半分まで、別の要素は横並びにとclassを設定する中身を変えるだけで、ブラウザのサイズでどう並べたいかをコントロールできちゃうすごいやつなんです!

colのあとの英字や数字はグリッドシステムの解説を読んでもらえればわかりますが、簡単にいうとコントロールしたい画面(デバイス)のサイズと、コンテンツのサイズになります。

横幅は合計12までが同じ行に表示され、こえたものは次の行になります。

ではテンプレートの要素に戻ってみると

Bootstrapの横並びコンテンツの詳細

同じ行を定義するrowの中にcol-lg-4が3つ並んでいます。

大きめのデバイスやウィンドウの時に4が設定されたものが3つで12。

その結果、横に3つきれいに並ぶということです。

では大きめのデバイスだけコントロールしているので、テンプレートのウィンドウを小さくしてみましょう。

横並びコンテンツのスマホ表示

画像は途中で切っていますが、3つの要素が縦に並びました。

横に3つ並べるコントロールが外れたので縦に並んだということです。

これでスマホの時とパソコンの時の表示の切り替えが簡単にできそうですね。

それでは、HTMLを作成していきましょう。

HTMLを編集する

今回は私のスキル一覧を作ろうと思うので、

  • HTML
  • CSS
  • Bootstrap
  • WordPress

をスキルとして記載したいと思います。

次のステップでWordPressもインストールするので、スキルに入れちゃってみます。4つ横並びに表示したいのでcol-lg-3が良さそうです。

スマホサイズでも2つ横並びの2行にできれば良いなと思っています。

画像はいろんなサイトが提供していたり、FontAwsomeなども使いやすいですが、今回はicon-icons.comから各種ロゴをお借りしたいと思います。

あわせて読みたい
Open Source SVG, JavaScript & Webfont Icons · CoreUI Icons Premium designed free icon set with marks in SVG, JavaScript, and Webfont formats. CoreUI Icons are beautifully crafted symbols for common actions and items. Yo...

無料の素材・画像でもライセンスによって使用制限などが変わるので使用する際は必ず確認しましょう。

開発中のindex.html
横並びコンテンツのhtml

先ほど作成したカルーセルのコードの下に今回の横並びのコンテンツを書いていきましょう。

このコンテンツもメインのコンテンツの一部ですので、<main>の中に書くことを忘れずに!

私は横に4つでスマホだと2つ並べたいので、上記のようなclassを設定しましたが、あくまでサンプルですのでみなさんの作成したいようにカスタマイズしてくださいね。

完成したらブラウザで開いてみましょう。

開発中のHTMLのプレビュー
横並びコンテンツの表示サンプル

それっぽいサイトができて来ましたね!それではウィンドウを小さくして、スマホだったらどう見えるかも確認しましょう。

スマホ画面
横並びコンテンツのスマホサンプル

ちゃんとなってますね!こんな感じでスマホでサイトがどう見えるのかも確認しておきましょう。

まだ1行もCSSを書いていないことにお気づきでしょうか?難しいコードもなく、HTMLとBootstrapを使用すると簡単にサクサクサイトが作れてしまうんです。

文章&写真コンテンツ1~3

続いて、文章と大きめの写真が表示されている部分ですね

テンプレートのスライダー部分
写真と文章部分

写真が右にあったり、左にあったりとレイアウトが若干違うコンテンツが並んでいますね。

テンプレートのソースコードチェック

ではいつも通り、テンプレートのソースコードをチェックしてみましょう。

今回は”作りかけのヘッダ”で検索してみます。

開発中のindex.html
写真と文章のソースコード

あっさり出て来ましたね。

ここであることに気づいた方は、かなり鋭いです!

実は3つの項目は、パソコンで表示すると画像と文章の位置が左右違いますが、ソースコードでは順番は同じ順で記載されているんです。

このサイトをスマホで表示すると・・・

コンテンツのスマホとパソコンでの比較

スマホだと文章が上で、写真が下と統一されるんです。

こんなページの構成もBootstrapならclassを記載するだけでできちゃうんで驚きですね。

真ん中の要素だけ順番が変わっているので、真ん中の要素にだけ記載されているclassを探してみましょう。

order-md-2みたいな記載がありますね!これを公式サイトで調べてみましょうね。

公式サイトで使い方の確認

order-md-2の2はどうやら順番のようなので、order-mdで調べてみましょう。

Bootstrapのorderの検索

でてきましたね!

Bootstrapのorderの詳細

ドンピシャの説明にたどりつけたようです。さらにこの公式の解説のページには要素の順番だけでなく、レイアウトに関する様々な解説がされていますね。

こんな感じで、調べているついでに他の発見をしていくことも重要です。

今回もこのページに記載されている内容でカスタマイズすることもオススメです。

HTMLを編集する

今回はヘッダーに記載した過去の案件価格の要素2つだけ作成します。

せっかくなので、価格は表示順をパソコンだけ変えてみます。

開発中のindex.html

Bootstrapのorderの作成

今回のコンテンツもグリッドシステムを使いたいのでcontainerのdivの中に記載しましょう。

開発中のHTMLのプレビュー

文章と画像のサンプル表示

それっぽい感じになって来ましたね!それではいよいよ最後のコンテンツでもあるフッターを作成しましょう。

フッター

テンプレートのスライダー部分

Bootstrapのフッター

サイトの一番したの部分ですね。サンプルではかなりシンプルですが、ブログなどの場合はフッターも作り込んでいる場合がありますので、今後サイトを見るときは、どんなフッターになっているのかみてみてください。

サイトによっていろんなこだわりが詰まっているのもフッターだったりします。

テンプレートのソースコードチェック

今回もテンプレートのソースコードをチェックしましょう。Company, Incと記載があるので、この辺りで検索してみます。

テンプレートのコード

Bootstrapのフッターのソース

テンプレートなので、丁寧にコメントが記載されていますね。

<footer>を使っているので、containerのclassが書かれた<div>を閉じて<footer>の部分が記載されていますね。

<footer>の後に<main>のタグが閉じていますね。

公式サイトで使い方の確認

今回は特にfooter用のclassがないことにも着目しましょう。

footerでは特にBootstrapの機能やスタイルはテンプレートでは使ってないですね。

では、早速ポートフォリオの制作を進めましょう。

HTMLを編集する

開発中のindex.html

Bootstrapのフッターの実装

完成したHTMLのプレビュー

Bootstrapでのフッターの完成

フッターもできました!これで大枠が完成ですね!

結構なボリュームの記事になりましたが、みなさんよくここまで制作できました。

ここまででもBootstrapの使い方の基礎はマスターできています。さらにみなさんはテンプレートからソースコードでどう制作しているかを調べることができ、さらに公式サイトから使い方を学びカスタマイズするスキルも持っているはずです。

同様に、カルーセルだけでなく、他のテンプレートもソースコードをチェックし、公式サイトから使い方を学び、似たようなサイトを作ってみましょう。

レイアウトの微調整

ここから少し、補足の情報になりますが今完成したサイトと、テンプレートのサイトの違いに気づいたでしょうか?

Bootstrapでのレイアウトの微調整

テンプレートのサイトには独自のcssが適用されています。

Bootstrapでも標準で余白の設定ができるので、余白をチャレンジしましょう。

CSSを勉強した方はmarginやpaddingで余白を設定するのはご存知だと思います。ではmarginでBootstrapの公式サイトで検索してみましょう。

Bootstrapのmarginの検索

それっぽいものがでてきましたね!

marginとpadding

spacing utilitiesをみてみるとさらに詳細の記載方法があり

BootstrapのNotationの説明

今回はcarouselの要素には下方向にmarginを追加したいのでmb-x、その他の場所は上下にmarginの要素を追加したいので、my-xという記載が合いそうです。

また、スキルの部分のテキストが左寄せになっていますが、中央に寄せた方がバランスが良さそうですね。

CSSでテキストを中央にする際は”text-align”を使用するので、Bootstrapでも検索してみます。

Bootstrapのtext alignの説明
Bootstrapのtext alignの詳細

またもや、ずばりのコンテンツがBootstrapでサポートされていますね。

text-centerというclassをつけるだけでテキストを中央揃えにできちゃいます。

このように、こんなことCSSだったらこうやるけどと思ったことはとりあえず検索してみちゃうってのが便利な使い方です。

調整したHTMLのプレビュー

調整後のサイト

キャプション

調整後のスマホサイト

どうでしょうか?一気に見やすくなったのではないでしょうか?

こういった調整はお客さんと頻繁に発生します。そのため、あなた自身で細かい調整に時間をかける前に、暫定でもいいので大枠の作成が終わったら、途中経過報告として大きく認識がずれてないか共有しましょう。

そして、余白などの認識合わせを一緒に作成中のページを見ながら話すと、とてもスムーズに調整ができます。

ホームページを公開する

前回のステップでも解説しましたが、同様の方法で今回作成したファイルをアップロードしましょう。

今回はindex.htmlだけでなく、imgフォルダとその中の画像ファイルもアップロードすることを忘れずに!

あわせて読みたい
【爆速ポートフォリオ作成】 STEP2 レンタルサーバでホームページ公開 前回に引き続き、HTMLは書けるけど、ホームページの公開方法がわからないなどの悩みを持った方が多いことを知り、実際にあなたの手でゼロから公開するところまで徹底解...

まとめ

爆速ポートフォリオのメインコンテンツでもある実際にBootstrapを使用してのポートフォリオの作成でした。

Bootstrapを使用することで、CSSやレイアウトが苦手な方でもさくさくホームページが作成できたと思います。

今回はまだまだ荒削りで、こんなんでWeb制作って呼んでいいのか不安になる方もいらっしゃると思います。

しかし、どんなにおしゃれなサイトを作れる人も初めはシンプルなサイトをつくり一歩ずつ勉強や実践をして成長したのです。

後少し、作成したサイトにこだわりのカスタマイズをして、ぜひココナラなどにWeb制作のスキルを出品してみてくださいね。

実際に仕事を受けることで、必要なスキルを知ることもでき、一気に成長できますよ。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる