どーも。さいんです。
爆速ポートフォリオ作成シリーズもいよいよメインコンテンツのポートフォリオの作成となります。
Webエンジニアの道はどこまでも続きますが、Web制作として稼ぐために最低限必要なスキルは今回のポートフォリオの作成を通して知ってもらえればと思います。
さいんわたしは、とある企業にてWebエンジニアとして年収1,000万ほどいただきながらサラリーマンをしています。
たくさんの方がプログラミングを勉強している事実を知り、稼げるエンジニアとして成長する手助けになればとブログを作りました。
多くのプログラミングが学習できるサイトはHTMLの学習を繰り返し、CSSをゼロから自分で書いてみるという学習法をオススメしていますが、私はBootstrapを活用しポートフォリオを作成し学習する方法をオススメしています。
Bootstrapを使用する場合でも最低限のHTMLやCSSの知識は必要になりますので、ProgateのHTML & CSS 初級編は完了しておくことをオススメします。
- ポートフォリオを作ってみたい
- HTMLを学習したが次のステップがわからない
- ポートフォリオの作成にチャレンジしたが失敗した
- Bootstrapを使ったサイトを作ってみたい
HTMLの基礎からBootstrapを使用して、ポートフォリオの作成を通して一気に稼げるエンジニアへ駆け上がりましょう。
爆速ポートフォリオ作成について
爆速でポートフォリオを公開する手順を大きく5つのステップに分けて解説しています。
前回解説した内容です。まだSTEP1を実施していない方は、STEP1の内容を事前にチェックしてくださいね
STEP1でレンタルしたサーバに簡単なホームページをアップして公開します。
今回も作成したHPを最後にアップロードしますので、流れは確認してください。
今回解説する内容
HTML/CSS＆Bootstrapでポートフォリオの作成方法を解説します。
今後独自ドメインの設定が必要になった時のために、ドメインの取得方法と設定方法を解説いたします。
WordPressをインストール、初期設定をした後にテーマをカスタマイズして会社のコーポレートを作成します。
STEP1、STEP2でレンタルサーバの準備と、簡単なホームページの公開方法を紹介しました。
今回はいよいよメインのポートフォリオ作成になります。まだレンタルサーバが準備できていない方は、ポートフォリオを作成後公開できませんので、準備しておきましょう。
前回契約したレンタルサーバはさくらのレンタルサーバですが、別のサーバでも今回のBootstrapでのポートフォリオ作成と、ホームページの公開は可能です。
Bootstrapとは
BootstrapとはCSSフレームワークです。
と言ってもなかなかわかりにくいですよね？
もっとわかりやすく説明するとレゴブロックやホームページの制作キットのようなイメージです。
様々なパーツや仕組みが簡単に作れるように詰め込まれたキットの中から、あなたが必要なものをHTMLとして記載することで簡単にクオリティの高いホームページが作れちゃいます。
中にはBootstrapは邪道だ！Web制作では使わない！と言った方もいてBootstrapに対して不安を抱く方もいらっしゃると思います。
しかし、それはあくまで作り手の意見。
もしお客さんがBootstrapのデザインでも満足し、その代わり納期を早くしたり、機能が豊富だったり、バグが少なかったりすれば満足度が高いでしょう。
最近ではBootstrapを教えるスクールやサイトも増えていますので、安心してBootstrapでポートフォリオを開発してみてください。
まずはBootstrapを使って、どんなページが作れそうかいろいろと触って遊んでホームページ作成を楽しむことを重視してくださいね。
Bootstrapの使い方
それでは早速Bootstrapを使ってみましょう！
導入方法は公式ホームページをチェックしましょう。
Bootstrapに限らず、多くのプログラミング言語やフレームワークでは公式HPに使い方が丁寧に解説されています。
Bootstrapでは”はじめる”をクリックすると、すぐに使い方が解説されています。
- CSSと記載されている内容を<head>の中に
- JSと記載されている内容を</ body>の中に
記載しましょう。
サンプル(STEP2のindex.htmlをベースに)
右にはみ出た部分は省略しています。先ほどコピーしたコードをそのまま貼り付けましょう。
実は少しスクロールするとBootstrapの公式のテンプレートが準備されています。
ゼロからサイトを作る場合はこれをそのまま使ってしまうのもオススメです。Bootstrapがどうやって使えるようになるかは知っておきましょう。
目標はテンプレートのCarousel
今回みなさんがBootstrapの勉強が今後進めやすいように、Bootstrapが提供している公式のテンプレートを目標として、どう開発を進めていくかを解説していきます。
上記にアクセスするとBootstrapが用意してくれているテンプレートの一覧が表示されます。
少し質素ではありますが、サイトのベースとなるレイアウトがすでに組み上がったテンプレートがたくさん準備されています。
Bootstrapに慣れてきたら、別のテンプレートを使用して独自のサイトの制作も挑戦してみてください。
今回はポートフォリオ作成ということでCarouselを目標とします。
こちらのテンプレートをベースに作成していきましょう！
テンプレートを読み解く
Carouselをみながらページを読んでいただくとよりわかりやすいと思うので、可能であれば別ウィンドウでCarouselのテンプレートを開いてみてくださいね。
今回作成するCarouselを大きくパーツごとに分割してみましょう。
- ヘッダー
- スライダー（カルーセル）
- 横並びコンテンツ
- 文章&写真コンテンツ1
- 文章&写真コンテンツ2
- 文章&写真コンテンツ3
- フッター
という大きく7つの構成でできていることがわかると思います。
あとはこれを真似して作成していくだけです！簡単ですね！
テンプレートのソースコードを見ながら
Carouselのサイトを見ていただいていると思いますが、今から作成するソースコードを覗き見しながら開発をしていきましょう。
完全にコピーではなく、あくまでテンプレートを作るためにどんなコードを書いているかを知るためです。
Chromeで開いている方は
右クリック -> ページのソースの表示
Ctrl+U（Windows）または ⌘-Option-U（Mac）
でテンプレートのソースコードの表示ができます。
これからの解説はテンプレートのソースコードをもとに調べている流れで解説しますので、ソースコードも見ながら開発していきましょう！
ヘッダー
ヘッダー部分の作成をしていきましょう。
まずはテンプレートではどのように書かれているかを確認します。
テンプレートのソースコードチェック
ソースコードで”無効ボタン”などで検索してみましょう
どうも無効ボタンやホームなどヘッダーに記載されている部分は
<header>
<nav class=”navbar navbar-expand-md navbar-dark fixed-top bg-dark”>
いろいろ書かれている
</nav>
</header>
で記載されているようです。
<header>はヘッダーの記載を表すタグでHTMLの要素です。
Bootstrapではclassに記載をしてデザインなどを適応していくので、navタグに記載されたnavbarというのがヘッダーのデザインや要素を決めていそうだと見当がつきます。
公式サイトで使い方の確認
そこで公式ページで調べてみましょう。
公式ページの検索ボックスに”navbar“と入力してみてください。
すると、関連するページが見つかると思うのでみてみましょう。
ヘッダー、ナビバーなどのドキュメントと例と記載があり、ずばり解説しているページを発見できましたね！
このように、ソースコードから公式HPのドキュメントの解説部分の解説を読んで、自分でコードを書くというのがオススメです。
このページからあなたが作りたいヘッダーのレイアウトを調べてみてください。
今回私は、シンプルなデザインが良いので途中にある
を使用したいと思います。文言などを適度に編集してみましょう。
HTMLを編集する
みなさんも同じように<header></header>のなかに公式HPの中からあなたのイメージにあったヘッダーのコードを選び解説を読みながらあなたのindex.htmlファイルに記載してみましょう。
私は一部文言を変えてみました。
ヘッダーができましたね！
ほとんどが基本的なHTMLタグとBootstrapで解説されているclassを適応することで、おしゃれなページがどんどんできていくことを体験できると思います。
スライダー（カルーセル）
続いて、ページで一番目立つコンテンツでもあるスライダー(カルーセル)の部分です。
同様にソースコードから”見出しの例”で検索してみましょう。
テンプレートのソースコードチェック
<main>というタグの中に、<div>があり、そこにclassでcarousel slideと設定してありますね。
今回もcarouselで公式HPから調べてみましょう。
公式サイトで使い方の確認
今回もすぐに検索で見つけることができました。
使い方に関しては公式HPに左右の矢印の付け方や説明文の入れ方など解説されています。
スライドショーのスクロールするインターバルの説明なんかも下に説明されているので、あなたのイメージにあったカスタマイズもチャレンジしてみましょう。
私は、フェードで画像を差し替えたいと思うので
これを適応してみることにします！
HTMLを編集する
テンプレートと同じように<main></main>の中にコードを追加してみましょう。
もし余裕がある方は、今回追加したカルーセルのコードのどのコードが画面の何を意味しているかをひとつずつ変更して、どういう影響があるのかを試してみることをオススメします。
また、data-*を使用したカスタマイズもあなたの提案の幅を広げることができるので、チャレンジしてみましょうね。
作成できたら、index.htmlをブラウザで開き確認してみましょう。
サンプル通り、カルーセルの部分が表示され、左右のボタンを押すとスライドされることが確認できました！
もし、うまく表示されない、動かないという方は公式HPやテンプレートのHTMLコードと比較して何が違うのかをチェックしましょう。
画像を差し替えてみる
すでにお腹いっぱいという方は、全体の大枠を作り上げることに集中して問題ありません！
しかし、せっかく作るなら自分のサイト用にカスタマイズしたいという方は画像を差し替えてみましょう！
画像はご自身で準備していただいても良いですし、無料で使用ができるサイトの活用でも構いません。
今回はぱくたそを活用してみます。
サンプルでは3枚の画像をスライドしていたので、3枚ピックアップしてみます。
3枚の画像を今回はcarouselX.jpgという名前で、imgというフォルダの中に入れてみます。
今回はページの頭にどかっと表示するので、少し横長にしておくのがオススメです。
もちろんCSSなどで調整は可能ですが、今回は爆速がテーマなので事前に画像を1440px x 440pxのサイズにトリミングして進めています。
それでは先ほどのコードの編集をしてみます。
先ほどのコードではグレーで表示されている部分を画像に差し替えたいので、グレーになっている部分はどこかを探してみましょう。
似たような3つ同じような記載されている<svg></svg>の要素が怪しいですね。
svgについては、どういうものか検索してみるのをオススメです！
このsvgを先ほど準備した画像に置き換えてみます。画像はimgタグでしたよね？
画像はimgフォルダの下を指定し、classには公式HPに記載のあった”d-block w-100″を設定しておきましょう。設定することで、ブラウザのサイズが小さくなっても画像の横がはみ出さなくなります。
それっぽくなってきましたね！
横並びコンテンツ
続いて、ポートフォリオではスキル一覧などで使われている横並びのコンテンツになります。
テンプレートのソースコードチェック
それではソースコードで横並びコンテンツ部分のソースコードを探してみましょう。
今回は見出しや文章があるので、その辺りを検索すればサクッと見つけられそうですね。
<div class=”container”>という中に、<div class=”row”><div class=”col-lg-4″>とずらずらと並んでいます。
横並びのコンテンツが3つあるので、どうやら<div class=”col-lg-4″>の部分が実際に横に並んでいる部分のようですね。
それではそれぞれ使い方を調べてみましょう！
公式サイトで使い方の確認
まずはcontainerというclassが設定されたdivが登場したので、調べてみましょう。
出て来ました！
どうやらcontainerもちゃんとBootstrapで意味がある要素のようです。
ふむふむ・・・難しいことが書いてありますが、グリッドシステムを使うために必要なようですね。
カルーセルではグリッドシステムを使用しなかったので、containerの中に入れませんでしたが、横並びコンテンツはグリッドシステムを使っているようです。
グリッドシステムと聞いて、全くちんぷんかんぷん・・・と思っていたらメニューにGridを発見！ここをクリックして説明を見てみましょう。
どうやら、要素を良い感じに横に並べてくれて、さらにデバイスに応じて良い感じに並べてくれるシステムのようです。
レスポンシブ対応というベースがこのグリッドシステムを指すことも多いです。
試しにMix and matchをブラウザを大きく開いて表示してみてください。
こんな感じで表示されたと思います。
その後、ブラウザの横幅を小さくしていってみましょう。
ある要素は横幅全部まで広がり、ある要素は半分まで、別の要素は横並びにとclassを設定する中身を変えるだけで、ブラウザのサイズでどう並べたいかをコントロールできちゃうすごいやつなんです！
colのあとの英字や数字はグリッドシステムの解説を読んでもらえればわかりますが、簡単にいうとコントロールしたい画面（デバイス）のサイズと、コンテンツのサイズになります。
横幅は合計12までが同じ行に表示され、こえたものは次の行になります。
ではテンプレートの要素に戻ってみると
同じ行を定義する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から各種ロゴをお借りしたいと思います。
無料の素材・画像でもライセンスによって使用制限などが変わるので使用する際は必ず確認しましょう。
先ほど作成したカルーセルのコードの下に今回の横並びのコンテンツを書いていきましょう。
このコンテンツもメインのコンテンツの一部ですので、<main>の中に書くことを忘れずに！
私は横に4つでスマホだと2つ並べたいので、上記のようなclassを設定しましたが、あくまでサンプルですのでみなさんの作成したいようにカスタマイズしてくださいね。
完成したらブラウザで開いてみましょう。
それっぽいサイトができて来ましたね！それではウィンドウを小さくして、スマホだったらどう見えるかも確認しましょう。
ちゃんとなってますね！こんな感じでスマホでサイトがどう見えるのかも確認しておきましょう。
まだ1行もCSSを書いていないことにお気づきでしょうか？難しいコードもなく、HTMLとBootstrapを使用すると簡単にサクサクサイトが作れてしまうんです。
文章&写真コンテンツ1~3
続いて、文章と大きめの写真が表示されている部分ですね
写真が右にあったり、左にあったりとレイアウトが若干違うコンテンツが並んでいますね。
テンプレートのソースコードチェック
ではいつも通り、テンプレートのソースコードをチェックしてみましょう。
今回は”作りかけのヘッダ”で検索してみます。
あっさり出て来ましたね。
ここであることに気づいた方は、かなり鋭いです！
実は3つの項目は、パソコンで表示すると画像と文章の位置が左右違いますが、ソースコードでは順番は同じ順で記載されているんです。
このサイトをスマホで表示すると・・・
スマホだと文章が上で、写真が下と統一されるんです。
こんなページの構成もBootstrapならclassを記載するだけでできちゃうんで驚きですね。
真ん中の要素だけ順番が変わっているので、真ん中の要素にだけ記載されているclassを探してみましょう。
order-md-2みたいな記載がありますね！これを公式サイトで調べてみましょうね。
公式サイトで使い方の確認
order-md-2の2はどうやら順番のようなので、order-mdで調べてみましょう。
でてきましたね！
ドンピシャの説明にたどりつけたようです。さらにこの公式の解説のページには要素の順番だけでなく、レイアウトに関する様々な解説がされていますね。
こんな感じで、調べているついでに他の発見をしていくことも重要です。
今回もこのページに記載されている内容でカスタマイズすることもオススメです。
HTMLを編集する
今回はヘッダーに記載した過去の案件と価格の要素2つだけ作成します。
せっかくなので、価格は表示順をパソコンだけ変えてみます。
今回のコンテンツもグリッドシステムを使いたいのでcontainerのdivの中に記載しましょう。
それっぽい感じになって来ましたね！それではいよいよ最後のコンテンツでもあるフッターを作成しましょう。
フッター
サイトの一番したの部分ですね。サンプルではかなりシンプルですが、ブログなどの場合はフッターも作り込んでいる場合がありますので、今後サイトを見るときは、どんなフッターになっているのかみてみてください。
サイトによっていろんなこだわりが詰まっているのもフッターだったりします。
テンプレートのソースコードチェック
今回もテンプレートのソースコードをチェックしましょう。Company, Incと記載があるので、この辺りで検索してみます。
テンプレートなので、丁寧にコメントが記載されていますね。
<footer>を使っているので、containerのclassが書かれた<div>を閉じて<footer>の部分が記載されていますね。
<footer>の後に<main>のタグが閉じていますね。
公式サイトで使い方の確認
今回は特にfooter用のclassがないことにも着目しましょう。
footerでは特にBootstrapの機能やスタイルはテンプレートでは使ってないですね。
では、早速ポートフォリオの制作を進めましょう。
HTMLを編集する
フッターもできました！これで大枠が完成ですね！
結構なボリュームの記事になりましたが、みなさんよくここまで制作できました。
ここまででもBootstrapの使い方の基礎はマスターできています。さらにみなさんはテンプレートからソースコードでどう制作しているかを調べることができ、さらに公式サイトから使い方を学び、カスタマイズするスキルも持っているはずです。
同様に、カルーセルだけでなく、他のテンプレートもソースコードをチェックし、公式サイトから使い方を学び、似たようなサイトを作ってみましょう。
レイアウトの微調整
ここから少し、補足の情報になりますが今完成したサイトと、テンプレートのサイトの違いに気づいたでしょうか？
テンプレートのサイトには独自のcssが適用されています。
Bootstrapでも標準で余白の設定ができるので、余白をチャレンジしましょう。
CSSを勉強した方はmarginやpaddingで余白を設定するのはご存知だと思います。ではmarginでBootstrapの公式サイトで検索してみましょう。
それっぽいものがでてきましたね！
spacing utilitiesをみてみるとさらに詳細の記載方法があり
今回はcarouselの要素には下方向にmarginを追加したいのでmb-x、その他の場所は上下にmarginの要素を追加したいので、my-xという記載が合いそうです。
また、スキルの部分のテキストが左寄せになっていますが、中央に寄せた方がバランスが良さそうですね。
CSSでテキストを中央にする際は”text-align”を使用するので、Bootstrapでも検索してみます。
またもや、ずばりのコンテンツがBootstrapでサポートされていますね。
text-centerというclassをつけるだけでテキストを中央揃えにできちゃいます。
このように、こんなことCSSだったらこうやるけどと思ったことはとりあえず検索してみちゃうってのが便利な使い方です。
どうでしょうか？一気に見やすくなったのではないでしょうか？
こういった調整はお客さんと頻繁に発生します。そのため、あなた自身で細かい調整に時間をかける前に、暫定でもいいので大枠の作成が終わったら、途中経過報告として大きく認識がずれてないか共有しましょう。
そして、余白などの認識合わせを一緒に作成中のページを見ながら話すと、とてもスムーズに調整ができます。
ホームページを公開する
前回のステップでも解説しましたが、同様の方法で今回作成したファイルをアップロードしましょう。
今回はindex.htmlだけでなく、imgフォルダとその中の画像ファイルもアップロードすることを忘れずに！
まとめ
爆速ポートフォリオのメインコンテンツでもある実際にBootstrapを使用してのポートフォリオの作成でした。
Bootstrapを使用することで、CSSやレイアウトが苦手な方でもさくさくホームページが作成できたと思います。
今回はまだまだ荒削りで、こんなんでWeb制作って呼んでいいのか不安になる方もいらっしゃると思います。
しかし、どんなにおしゃれなサイトを作れる人も初めはシンプルなサイトをつくり一歩ずつ勉強や実践をして成長したのです。
後少し、作成したサイトにこだわりのカスタマイズをして、ぜひココナラなどにWeb制作のスキルを出品してみてくださいね。
実際に仕事を受けることで、必要なスキルを知ることもでき、一気に成長できますよ。
コメント