【Bootstrapサンプル】超初心者でもオシャレなサイトを作る方法

Bootstrapサンプル
ととまる君

プログラミング初心者だけど、簡単でオシャレなサイトを作ってみたい

こんな要望の方にオススメです。


Web系プログラミング初心者にとって最初は楽しいですが、もっとオシャレなサイトを作ってみたい!と思われる方は多いのではないでしょうか。


僕も、プログラミング始めたての頃、全く同じことを思っていました。


今日はそんなあなたに向けて、オシャレで簡単にできるサイトを一緒に作っていきましょう。

こんな方におすすめ

  • プログラミング初心者だけどオシャレなサイト作ってみたい
  • 段々、プログラミングのモチベーションが下がってきている方

この記事を読むと、初心者でもオシャレなサイトが簡単に作れるようになります

てつろう

完成図を見る

まずは、これから目標とする完成図を見ていきましょう。

Bootstrapサンプル完成図



いかがですか。とてもオシャレでかっこいいですよね。今日はこれを目指していきます。

簡単なので、一緒にサクサク楽しみながら作っていきましょう。

完成図のコードだけ見たい!という方はこちらをご覧ください。

Bootstrapのサンプルを使ってみる


今から一緒に作るサイトはBootstrapのサンプルコンテンツを参考にしながら紹介します。

では、早速リンクからBootstrapのホームページにいきましょう。


【Bootstrapサンプル】Bootstrapの使用準備をする

Bootstrapを使用するためには、最初にBootstrapの導入をしなければなりません。

Bootstrapの導入方法は以下のリンクから5分くらいでできるので、まずはそちらをご覧下さい。




Bootstrapのサンプルへ


Bootstrapのサイトで「はじめる」を押して、上のメニューバーの中から「サンプル」をクリックしてください。



【Bootstrapサンプル】使いたいテンプレートを探す

このページには多くのBootstrapテンプレートが用意されているので、自分で作ってみたいものを探してみてください。


今回は「Album」を例に作ってみるので、「Album」をクリック。

Bootstrapのサンプルページ
ページのソースを自分のエディタにコピペ


今のページで右クリック(Macユーザーなら指二本でタップ)し、「ページのソースを表示」をクリックしてください。

Bootstrapサンプル手順1




230行ほどのHTMLコードが出てきたでしょうか。


その中から、15行目周辺にある<header>タグから215行目周辺にある</footer>タグまでをコピーして、自身のエディターの<body>タグ内にペーストしてください。

Bootstrapサンプル手順2



自分のエディタにペーストすると、以下のようなコードになっているでしょうか。

もし、なっていない場合は以下のコードを自身のエディタにコピペしてもらったらいいですよ。

参考ページのスタイルシートを自分のエディタにコピペ


HTMLのコピペができれば、次はスタイルシートのコピペです。


スタイルシートはどこに隠されているかというと、先ほどの「ページのソースを表示」で出てきたソースの6行目「album.css」をクリックしてください。

Bootstrapサンプル手順3



すると、サンプルサイト(Album)で使われているスタイルシートが出てくるので全てエディタにコピペしましょう。


コピペが完了すると、自身のスタイルシートには以下のものが入っているはずです。

こちらから、同様にコピーしてもらっても構いませんよ。



自身のエディタにHTMLもCSSも書き込むことができればまずは、GoogleChromeに反映させてみましょう。


しっかりと、反映されていれば以下のようになります。

Bootstrapサンプル手順4


いかがでしょうか。上の画像の通りできたでしょうか。

もし、うまくいかないという方は僕に連絡するか、上のコードをコピペしてみてくださいね。

自分でカスタマイズする

今の状態ではカードの写真や画像が反映されていません。


自分の好きな写真を用意して実際に挿入してみましょう。

今回は、僕が準備したものを挿入してみますね。

画像を挿入する


画像を挿入したい場所がHTMLコード内のどこにあたるのかを探します。

この記事の最初のコードを参考に、65行目、80行目、95行目、110行目、125行目、140行目に<img>タグが見つかったでしょうか。

このタグの場所に画像を挿入します。


実際に加えたのが以下のコードとなります。



全てを記載すると長いので、ここでは、65行目に画像を挿入した例をここではあげています。


また、画像もサイズによっては高さや幅が異なることがあります。

ですので、ここでは<img>タグ内にwidthやheightでサイズを均一に指定しています。


では、GoogleChromeに表示してみます。赤色の部分が画像になっていればOKです。

Bootstrapサンプル手順5
文章やボタンを変える


次にページ上の文言やボタンをカスタマイズしていきます。

以下の場所を変えることにしますね。横の数字は最初のHTMLコードの行番号を表します。

・ロゴ(ヘッダー左上):38行目
・Album(ヘッダー左上):39行目
・Album example(ヘッダー真ん中):51行目
・青色/グレー色のボタン(ヘッダー真ん中):53行目〜56行目
・各カードの言葉(メイン):67行目
・各カードのボタン(メイン):70行目
・各カードの9min(メイン):73行目



これらの場所を変更してみますね。ひとつずつやってみましょう。



ここでも同様に、全て記載すると該当場所だけあげてみます。

実際に表示すると、以下のようになっているでしょうか。

Bootstrapアルバム手順6


いかがでしょうか。

赤色で囲った部分が変わっているでしょうか。

変わっていれば最後、背景などの色を変えていきましょう。

背景をカスタマイズする

ここまできたら、あと一歩ですね。

最後はCSSを変更して、背景色などを変えてみましょう。

早速、変える場所を紹介します。

・一番上の色(ヘッダー):17行目
・ヘッダー真ん中周辺:49、50行目



これらの場所を一つずつ変更してみますね。


これらをそのままCSSに入れてみてください。具体的にどのように変えたのかは、追加したコードを見ながら考えてみてください。「!important」というのは同じクラスに異なる数値や色が入っていたときに優先するように指示するものです。


実際に表示してみます。

Bootstrapアルバム完成

Bootstrap まとめ

いかがでしょうか。


もしかしたら、初めての場合は少し時間がかかるかもしれません。ですが変更した部分はとても簡単で、わかりやすいところになっているはずです。

2回、3回と繰り返しやってみて、要領を掴めるようになったら、「Album」以外のものに挑戦してみましょう。


今回は、Bootstrapのサンプルを使って、カスタマイズしていきました。

さらに変更すればオシャレなデザインで自分だけのオリジナルサイトが作れますね。

何か分からないことがあれば、連絡くださいね。


最後まで読んでくださり、ありがとうございました。

-プログラミング学習
-,

Copyright© ととろぐライブラリー , 2021 All Rights Reserved.