デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2017年12月10日 CSS

コレで完結!Bootstrapの使い方3

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

Bootstrap最終回!そしておすすめの勉強法!

前回までのBootstrap回、いかがでしょうか?

うちのブログでは、できるだけコピペでできるようにしていますので、ぜひ試してみて下さい!

というのも、私自身勉強をする時に本を1ページ目から順番に最後のページまで読んで勉強したことがほとんどなく、基本的に初めはコードをコピペして動きを確認してから、コードの意味を調べる勉強法でばかり覚えていってます。

だって、毎回分厚い本を1ページ目から順番に旅していくのって大変じゃないですか。どこかのページで行き詰った瞬間に進むことができない煩わしさが興味を失わせてしまいます。

それよりは、わかる所からコピペしてだいたい仕組みを理解できるようになってから本を見たほうが、かなりスムーズに覚えることができてます。(個人的にはですが…)

それに、Webの世界は、スクリプト言語も日々アップデートを行っており、本を出版した当時は正解の記述でも時間が経つと間違いの記述になることもよくあります。

 

とは言ってもWeb業界自体全くの素人で、初めて勉強するという方は本を読んだ方が当然いいと思います。そして、大まかなWebの仕組みを理解できたら実践あるのみ!

どこで使うかよくわからない知識を得るよりも、簡単なものでいいので実際に設置して、想像通りの動きをした時の感動を得たほうが、印象に残り技術を忘れづらいものです。

コピペできるものはコピペすればいいんです。私もあまり記憶力よくないのでAdvanced Custom fieldを実装する時は「WebJoy Custom field」とかで調べて自社のサイトを参考に実装したりしています。

そういったコピペできる参考サイトも目指しています!

はい、というわけで話がそれましたが、今回も引き続きBootstrapの解説を行っていきたいと思います。

画像にBootstrapのスタイルを付与

画像をレスポンシブ化

以下のように<img>タグにimg-responsiveというclassを設定することで、画像がレスポンシブ表示になります。

<img src="◯◯◯.jpg" class="img-fluid">

画像の形を変更

角丸

<img src="◯◯◯◯.jpg" class="img-rounded">

 

<img src="◯◯◯◯.jpg" class="img-circle">

 

写真風

<img src="◯◯◯◯.jpg" class="img-thumbnail">

画像とテキストを横並べ

以下のように画像とテキストを横並べにすることができます。「この記事を書いた人」のような項目に使えそうですね!

<div class="media">
<img class="mr-3" src="img/img.jpg">
<div class="media-body">
<h4>見出し</h4>
<p>本文テキスト</p>
</div>
</div>

 

ちなみに以下のように画像を右寄せにしたい時はimgタグの位置を移動させるのみで可能。

<div class="media">
<div class="media-body">
<h4>見出し</h4>
<p>本文テキスト</p>
</div>
<img class="mr-3" src="img/img.jpg">
</div>

Bootstrap4より様々なメディアオブジェクトが廃止されています。

「他のサイトと記述が違うけど・・・」と思われるかもしれませんが、Bootstrapはバージョンアップとともに仕様が変わります。当記事はBootstrap4で検証をしており、今後バージョンアップと共に、また仕様が変わり当記事のコードも使用できなくなる可能性もあります。

今回のバージョンアップで変更になったメディアオブジェクトの概要は以下のサイトをご覧ください。

Bootstrap移行ガイド(外部サイト)

Bootstrapで用意されたヘッダーとフッターのスタイル

グローバルナビ

結構複雑ですが、以下のコードをコピペすることでグローバルナビを上記のように表示させる事ができます。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">サイトロゴ</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)>/span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">リンク</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">使用禁止</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
    </form>
  </div>
</nav>

<button>の部分については、なくてもPC版は表示されますが、SP版の時にハンバーガーメニューを表示させる役割を果たしています。

パンくずリスト

上記のようにパンくずリストを表示させることができます。

以下の通り、<ol>にbreadcrumbというclassを設定し、子要素の<li>にbreadcrumb-itemというclassを設置するだけです。

※以前のバージョンでは、<ol>にbreadcrumbを設置するだけでなってました。

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

Bootstrapの練習にBootstrap Editorを活用

技術的なお話はこれで終了となりますが、ひとつサイトを紹介させて下さい。

Bootstrapの練習を行なうためには、通常Bootstrapをダウンロードして、htmlとリンクさせるという若干面倒な作業を行う必要がありました。

しかし、以下のサイトを利用することで、簡単に練習ができるようになります。

Bootstrap Editor

このサイトは特にログインの必要もありません。サイトにアクセスをしたら、Bootstrap4の方をクリックしてください。

 

すると、上記画像の通り、練習画面に入ります。左側の①にコードを入力すると、右側の②にリアルタイムで反映されます。

ちなみに、①の上部タブをクリックすることで、CSSやJavaScriptの追加も可能です。

練習をされる方は是非ご利用下さい。

※うちの環境だけなのか、ナビゲーションメニューの部分がこのサイトではうまく表示されませんでした。

まとめ

BootStrap全3回、いかがでしたか?

Bootstrapには、まだまだたくさんの機能が存在します。今シリーズではその中から確実に覚えておくべき事項をまとめて紹介させて頂きました。

スマホ対応が必須化した今、毎回0から設定をしていた時間がBootstrapを活用することで削減できると思います!

店舗・企業のWeb担当者はBootstrapくらいは覚えておかないと厳しい時代も近いかもしれません。


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2017年12月07日まだまだ出来ることたくさん!Bootstrapの使い方まとめ その2
2017年12月01日スマホサイト構築に便利!Bootstrapの使い方まとめ その1
2017年01月01日CSSで四則計算!CSS calcの使い方

コメント(ブログサークルアカウントが必要です。)

  • Facebookページ
  • 公式twitterアカウント