ミライ創造学舎

【Instagram】

===========================================

Bootstrapを活用しよう!【Ⅳ. モーダルの作成】

Bootstrap CSS HTML5 はてなブログフリーランスエンジニアプログラミング Web開発

皆さん、本日もお疲れ様です。

早速、Bootstrapを用いた「モーダル」の作成方法の紹介をさせて頂きます。

Bootstrapを用いたモーダルの作成
- モーダルとは??
- どのようにすればモーダルの機能を実現できるのか??
  - 【コード : 親ウインドウに表示させる部分】
  - 【コード : モーダルウインドウ本体】

Bootstrapを用いたモーダルの作成

モーダルとは??

　 = 「モーダルウインドウ」のこと。

　　ボタンを押されるなどのタイミングで

　　親ウインドウの上に子ウインドウを表示する。

　 → 子ウインドウの処理が終わったら閉じることで、

　　　再び親ウインドウを操作出来るようになる

言葉だけだとイメージつきにくいですよね...💦

では、実際にどのようなものなのか動きを確認してみましょう。

【実行例】

f:id:Varth-Connect:20190828225049p:plain

　　　　　　　　　　　　　　　　　↓

f:id:Varth-Connect:20190828225140p:plain

↑

この「テスト : m_01」というタイトルをクリックした際に

表示された子ウインドウが[ モーダルウインドウ ]と呼ばれているものになります。
これが表示されている間は、

後ろで表示されている親ウインドウは操作することが出来ません。

操作出来るようにするには、閉じるボタンを押して、画面を閉じる必要があります。

どのようにすればモーダルの機能を実現できるのか??

■ モーダル表示の種類もいくつかありまして、今回はその中でも上記と同じく中央に表示させる方法をご紹介致します。

【コード : 親ウインドウに表示させる部分】

<div class="content">
  <h1 class="pageTitle">モーダル表示 : フォームテスト</h1>
  <div class="b_content" >
    <h2 class="t_b" data-toggle="modal" data-target="#modal1" >
    <a href="#" class="link_b" name="con">テスト : m_01</a></h2>
    <p class="p_b">【-------  説明文 ---------】</p>
    <img src="DSC_0481.JPG" class="test04_img">
  </div>
  <div class="b_content">
    <h2 class="t_b" data-toggle="modal" data-target="#modal2">
    <a href="#" class="link_b" name="road">テスト : m_02</a></h2>
    <p class="p_b">【-------  説明文 ---------】</p>
    <img src="DSC_0509.JPG" class="test04_img" >
  </div>
</div>

[ 解説 ]

● data-target

= 表示されるモーダルウインドウを指定する : #○○で指定する。

● data-toggle

= 「toggle」は「なにをするか」を指定 : 今回はmodal。

【コード : モーダルウインドウ本体】

<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" 
                                              data-show="true" data-keyboard="true" data-backdrop="static">   
  <!-- modal-dialog-centered : 垂直に中央表示   -->
  <!-- .modal-dialog-scrollable : スクロールを可能にする -->
  <!-- モーダルが表示された際のコンテンツをclass = "modal-dialog"内に記述 -->
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <!-- class="modal-content"の中に具体的な内容を記述 -->
    <div class="modal-content">
      <!-- モーダルヘッダー -->
      <div class="modal-header">
        <!-- モーダルタイトル -->
	<h4 class="modal-title">子ウインドウ : m_01</h4>
	  <!-- モーダルを閉じる「?」ボタン -->
	  <button type="button" class="close" data-dismiss="modal">
	    <span aria-hidden="true">&#215;</span>
	  </button>
	  <!-- 「?」: 終 -->
      </div>
      <!-- モーダルの中身 -->
      <div class="modal-body">
        <!-- フォームを作成 -->
	<form>
	  <div class="form-group">
	    <label for="recipient-name" class="control-label">氏名 :</label>
	    <input type="text" class="form-control" id="recipient-name">
	  </div>
	  <div class="form-group">
	    <label for="recipient-name" class="control-label">メールアドレス :</label>
	    <input type="text" class="form-control" id="recipient-name">
	  </div>
	  <div class="form-group">
	    <label for="message-text" class="control-label">問い合わせ内容 :</label>
	    <textarea class="form-control" id="message-text"></textarea>
	  </div>
	</form>
	<!-- フォーム : 終 -->
      </div>
      <!-- モーダルの中身 : 終 -->
      <div class="modal-footer">
      <!-- モーダルを閉じるボタン -->
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
      <!-- 終 -->
      </div>
    </div> 
  </div> 
</div>

[ 解説 ]

● class="modal"

= 上記を記述したdivの中にモーダルに関する内容を書いていく。　

● id = "modal1"

= data-targetと紐づけることで、表示させるモーダルを選択できる。

● tabindex="-1"

=［Esc］キーでダイアログを閉じる

● class= "modal-dialog"

= モーダルに必要な内容が記述されているメインのclass。

● class="modal-dialog-centered"

= 画面の垂直に中央表示

● class="modal-dialog-scrollable"

= スクロールを可能にする。

　　　　　 ↓↓

【例】

f:id:Varth-Connect:20190829002707p:plain

● class="modal-content"

= モーダルの具体的な内容を記述するためのdivタグ内に配置。

● class="modal-header"

= モーダルのヘッダーを指定

● class="modal-title"

= モーダルのタイトルを指定

<button type="button" class="close" data-dismiss="modal">        

     <span aria-hidden="true">&#215;</span>      

</button>

= モーダルを閉じる「✖」ボタン

　　　　　　　　　　　↓↓

【例】

f:id:Varth-Connect:20190829002811p:plain

● class="modal-body"

= モーダルの中身

● class="modal-footer"

= モーダルのフッターを指定

 <button type="button" class="btn btn-default"

                   data-dismiss="modal">閉じる</button>

= モーダルを閉じるボタン

　　　　　　　　　 ↓↓

【例】

f:id:Varth-Connect:20190829002941p:plain

以上の内容を実践すると、

以下のような実行結果を確認することが出来ます。

【実行結果】

f:id:Varth-Connect:20190829003427p:plain

複数のモーダルを表示させる方法も御座いますが、

今回は割愛させて頂きます。

興味がある方もしくは質問などある場合は、気軽にご連絡頂ければと思います。

それでは、

今回はこれで終わっていきたいと思います。

皆さんの開発の手助けに少しでもなれば嬉しいです。

次回は、

Bootstrapを活用したよくECサイトで見かけるような

「カードリストの作成」

方法についてみていきたいと思います。

===========================================

↓↓ 以下のSNSでも情報の掲載などしております。

【Twitter】

【Instagram】

===========================================

Bootstrapを活用しよう! 【Ⅲ. スライドショーの作成】

Bootstrap CSS HTML5 Web開発はてなブログフリーランスエンジニアプログラミング

皆さん、お疲れ様です。

今後は3日以内の投稿を目指して、

頑張っていきますので今後とも本ブログを宜しくお願い致します。

では...

今回のBootstrapの活用方法を確認していきましょう!!

Bootstrap : スライドショーの作成

Bootstrap : スライドショーの作成

スライドショーと聞き、何をイメージされますか??

一般的には、画像を自動で切り替えて、スライド形式で画面に表示しているものになりますが、実は....HTML/CSS単体では実現できるものではなく、

通常はJavaScriptやjQueryといったものの知識がないといけません....(;´д｀)トホホ

　でも...安心してください!!

Bootstrapではスライドショーの作成方法も準備されています。

※ 始める前に何でも大丈夫なので、画像を3枚準備してください。

【コード例】

<解説>

class = "carousel slide"

: スライドショーのような機能を作成するためのCSSが準備されている。

[ 画像に関する情報を格納する場所 ]

<div class="carousel-inner">

  ~ 画像の設定からの記述はすべてこの中に記入する~

</div>

[ 画像の設定 ]

※ class="slaは、位置を調整するために"独自に加えたCSSです。

<div class="carousel-item active">
  <!-- 一つ目の画像 -->
  <img src="DSC_0481.JPG" alt="First slide" class="sla">
  <!-- <div class="carousel-caption" style="top:50px">
  <h6>Caption of first slide</h6> = キャプションのつけかた -->
</div>
<div class="carousel-item">
  <!-- 二つ目の画像 -->
  <img src="test_image.JPG" alt="Second slide" class="sla">
</div>
<div class="carousel-item">
  <!-- 三つ目の画像 -->
  <img src="1517671523452.jpg" alt="Third slide" class="sla">
</div>

※ 画像の設定の際は、<div class="carousel-item"></div>の内部で定義すること。

　 ちなみにキャプションとは、説明みたいなものです。

[ 前の画像に戻る機能 ]

※ 赤色の箇所が戻る機能に関係している。

f:id:Varth-Connect:20190830224628p:plain

<a class="carousel-control-prev"

　　　href="#example-2" role="button" data-slide="prev">

= 両者とも一つ目の画像に戻るために必要なCSSが定義されている。

  <span class="carousel-control-prev-icon" aria-hidden="true"></span>

= 「＜」のアイコンを設定するCSSが定義されている。

  <span class="sr-only">Previous</span>
</a>

[ 後ろの画像に進む機能 ]

※ 赤色の箇所が戻る機能に関係している。

f:id:Varth-Connect:20190830224707p:plain

<a class="carousel-control-next"

　　href="#example-2" role="button" data-slide="next">

= 両者とも次の画像へ進むために必要なCSSが定義されている。
  <span class="carousel-control-next-icon" aria-hidden="true"></span>

= 「＞」というアイコンを設定するCSSが定義されている。
  <span class="sr-only">Next</span>
</a>

[ 中央下部に今どのコンテンツを表示しているかを表示 ]

f:id:Varth-Connect:20190830224802p:plain

<ol class="carousel-indicators">

= インジケータを作成するために定義 : carousel-indicators
<li data-target="#example-2" data-slide-to="0" class="active"></li>

= data-slide-to="0"は、1番目の画像を指す
<li data-target="#example-2" data-slide-to="1"></li>

= data-slide-to="1"は、2番目の画像を指す
<li data-target="#example-2" data-slide-to="2"></li>

= data-slide-to="2"は、3番目の画像を指す
</ol>

[ クロスフェード ]

※ 例では2秒ごとに次の画像を表示しています。

<div class="carousel slide carousel-fade" data-interval=2000 ~ >

= carousel-fadeでクロスフェードを実現

= 秒数の指定は、data-interval=ミリ秒で指定する。(2000ミリ秒 ≒ 2秒 )

【実行結果】

Bootstrap [スライドショー作成 : 例 ]

youtu.be

以上で、今回の内容を終えていきたいと思います。

不明点や実行時のエラーなど起こった場合は、コメント欄から気軽にご相談ください!!

次回は、「モーダルの作成方法」をやっていこうと思います。

===========================================

↓↓ 以下のSNSでも情報の掲載などしております。

【Twitter】

【Instagram】

===========================================

Bootstrapを活用しよう!【Ⅱ. バッチの作成】

はてなブログ Bootstrap CSS HTML5 Web開発フリーランスエンジニアホームページ制作

こんにちわ!!

スケジュールの管理って....

こんな大変やったっけ??💦苦笑

とそんなことを呟いているのがこの頃な本ブログ管理人の流離の言霊です。

さてと,,

早速、今回の本題をみていければと思います。

Bootstrapの活用法 : バッチの作成

Bootstrapの活用法 : バッチの作成

※ HTMLファイルは、各自準備お願い致します。

これから紹介させて頂くコードに関しましては、

基本的にbodyタグ内に記述するものになります。

通知バッチの作成

【コード】

<span>[通知バッチ]</span><br>
  <button type="button" class="btn badge-danger">
           通知が届いています。 <span class="badge badge-light">3</span> 
  </button>
</span>

■ 以下はBootstrap経由で使用

[ class = btn ] → ボタンを作成する上で必要なCSS

[ class = badge-danger ] → 色の指定 : 赤

[ class = badge-light ] → 色の指定 : 白

　　　　　　　　　　　　　　　↓

【実行結果】

f:id:Varth-Connect:20190822215343p:plain — 通知バッチ [ 実行結果 ]

バッチの外観の変更

【コード】

 <!-- バッチの外観の変更 -->
<!-- badge-○○は色の指定  -->
  <span>[バッチの外観の変更]</span><br>
  <span class="badge badge-primary">青</span>
  <span class="badge badge-secondary">ねずみ色</span>
  <span class="badge badge-success">緑</span>
  <span class="badge badge-danger">赤</span>
  <span class="badge badge-warning">黄土色</span>
  <span class="badge badge-info">水色</span>
  <span class="badge badge-light">白</span>
  <span class="badge badge-dark">黒</span>

■ 以下はBootstrap経由で使用

[ class = badge ]
→ バッチを作成する上で必要なCSSが準備されている。

※ それぞれの色の違いについては上記のコードを確認してください。

↓

[ 実行結果 ]

f:id:Varth-Connect:20190823105447p:plain — バッチの外観の変更 : [ 実行結果 ]

バッチの外観の変更 : 角丸(badge-pill)

　　
【コード】

 <!-- バッチの外観の変更 : 角丸(badge-pill) -->
  <span>[バッチの外観の変更 : 角丸(badge-pill)]</span><br>
  <span class="badge badge-pill badge-primary">青</span>
  <span class="badge badge-pill badge-secondary">ねずみ色</span>
  <span class="badge badge-pill badge-success">緑</span>
  <span class="badge badge-pill badge-danger">赤</span>
  <span class="badge badge-pill badge-warning">黄土色</span>
  <span class="badge badge-pill badge-info">水色</span>
  <span class="badge badge-pill badge-light">白</span>
  <span class="badge badge-pill badge-dark">黒</span>

■ 以下はBootstrap経由で使用

　 badge及び色に関しては、これまでと意味は、同様です。

　[ class = badge-pill ]
→ 角丸にするためのCSSが含まれている

　　　　　　　　　　　　　　 ↓

【実行結果】

f:id:Varth-Connect:20190823110049p:plain — バッチの外観の変更 : 角丸(badge-pill) : [ 実行結果 ]

バッチにリンクを貼る

【コード】

<!-- バッチにリンクを貼る -->
  <span>[バッチにリンクを貼る]</span><br>
    <a href="https://getbootstrap.com/" class="badge badge-primary">Bootstrap</a>
    <a href="https://www.softbank.jp/" class="badge badge-secondary">Softbank</a>
    <a href="https://www.google.com/" class="badge badge-success">Google</a>
    <a href="https://www.au.com/" class="badge badge-danger">au</a>
    <a href="https://www.amazon.co.jp/" class="badge badge-warning">Amazon</a>
    <a href="https://www.facebook.com/" class="badge badge-info">Facebook</a>
    <a href="https://twitter.com/" class="badge badge-light">Twitter<a>
    <a href="https://github.com/" class="badge badge-dark">Github</a>

Bootstrap経由で使用しているCSSを受け取るclassは、二番目の際と同様でありますが、違いといえばspanタグではなく、リンクを表すために使用されるaタグを利用している点になりますね。
そのため、それぞれのバッチをクリックするとリンクで設定しているサイトへ飛びます。

　　　　　　　　　　　　　 ↓

【実行結果】

f:id:Varth-Connect:20190831210912p:plain — バッチにリンクを貼る : [ 実行結果 ]

今回は試しにGoogleのサイトへ飛べるか見てみましょう。

　　　　　　　　　　　　　↓

f:id:Varth-Connect:20190823111124p:plain

皆さんは無事にGoogleのサイトへ飛べましたか??
もし、辿りつけなかった場合は、コードをもう一度見直してみましょう!!

スペルの誤りなど細かい点で間違っている可能性があります。

ここまで4つ程、Bootstrapを活用したバッチの作成方法について紹介させて頂きましたが、如何でしたでしょうか??

決して難易度が高いものでは御座いませんが、他のタグとどのように結びつけるべきか...などを含め、様々な疑問が発生すると思います。

そのような問題点や不明点なども遠慮なく、コメント欄から質問して頂ければお答えしますので気軽に相談してくださいね♪

では、本日はここまでとします!!

最後まで見て頂き、有難う御座いました。

次回は、

「スライドショーの作成」

になります。

　　　　　　　　　　　　===========================================

↓↓ 以下のSNSでも情報の掲載などしております。

【Twitter】

【Instagram】

===========================================

https://getbootstrap.com/

Bootstrapを活用しよう! 【Ⅰ. 環境の準備】

Bootstrap はてなブログフリーランスエンジニア Web開発 HTML5 CSS プログラミングホームページ制作

こんにちわ、暑くて...

作業場も近所のファミレスかカフェにしがちな

本ブログ管理人の流離の言霊です(⌒∇⌒)

今年の夏は一際、暑いですね....苦💦

夜中の部屋の中ですら30℃はやばい...

そんな過酷な季節ではありますが、本日の本題に入っていきたいと思います。

Bootstrapの活用法 : 環境の準備

Bootstrapの活用法 : 環境の準備

Bootstrap [ホームページ]にてダウンロード

f:id:Varth-Connect:20190822204839p:plain

Bootstrap [ダウンロードページ]

ダウンロードしたファイルを理解していく。

【説明】

bootstrap-[バージョン]-dist というようなファイル名で指定の場所にダウンロードされるためその中に入っているcssフォルダとjsフォルダ内に入っているものだけを実際には使用します。

✫ もっと細かくしますと、以下を使用します。

■ cssフォルダ内のbootstrap.min.css

■ jsファルダ内のbootstrap.min.js

※ 実際に動かすためにはjQueryもHTMLファイル上で受け取れるようにしないといけないですが、後ほど説明しますのでご安心ください。

ダウンロードしたファイルを分割する。

　　→ 使いやすくするためです。

bootstrap-[バージョン]-dist というファイルに入っているcssフォルダとjsフォルダを取り出して、HTMLファイルがある場所に移動させる。
今回は、Bootstrap_sampleという新規のフォルダを作成し、そこにcssフォルダと jsフォルダ、HTMLファイルを配置しております。

f:id:Varth-Connect:20190822212939p:plain

新規のフォルダを作成し、
ダウンロードしたファイルとHTMLファイルを配置する。

これで配置上の準備は完了です(`･ω･´)b

早速、HTMLファイルに取り込む。

　 ※ HTMLファイルの準備は、各自でお願い致します。

もし、
準備が間に合わなかった場合は以下のコードを使用してみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- 文字化けをする場合はShift-JISからUTF-8に変更してください。 -->
    <meta charset="Shift_JIS">
    <!-- ページタイトル -->
    <title>Bootstrap Sample</title>
  </head>
  <body> 
     内容を記述
  </body>
</html>

■ 準備が完了したら、以下のコードをheadタグ内に記述してください。

jQueryに関しましても
同じように記述して頂ければ問題御座いません!!(⌒∇⌒)

<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.min.css" rel="stylesheet">
    
<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>

入力が完了したら動きを確認してみる。

■ 試しに通知バッチを画面に表示させてみる。

以下のようにbodyタグ内にバッチ用のコードを入力する。

classに指定されているCSSの詳細は、次回の【バッチの作成】にて説明致します。

今回は、Bootstrapが適用されるかの動作確認をしてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- 文字化けをする場合はShift-JISからUTF-8に変更してください。 -->
    <meta charset="Shift_JIS">
    <!-- ページタイトル -->
    <title>Bootstrap Sample</title>
    
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script> 
  </head>
  <body>
    <main>
      <div>
        <br>
        <!-- 通知バッチ -->
        <span>[通知バッチ]</span><br>
        <button type="button" class="btn badge-danger">
		  通知が届いています。 <span class="badge badge-light">3</span>
	</button>
      </div>
　  </main>
  </body>
</html>

　　　　　　　　　　　　　　　　↓

　　　　　　　　　　　　　　　↑↑

上記のような通知バッチが画面に表示されれば
成功です!!!

※ 実行時に通知バッチが正常に表示されなかった場合は、Bootstrapが適用されていないため、ファイルの場所やHTMLファイルのheadタグ内のコードの誤りがないかを確認してみてください。OSはWindows/Mac同様に実行確認済みのためどちらでも上記の方法で実行可能です。

その他、不明点や環境準備がうまくいかない場合は、コメント頂ければ対応させて頂きますので、遠慮なくご相談ください。

　次回は、

　今回動作の確認で使用した

「通知バッチも含めたバッチの作成方法」

　になります。

　今後とも皆様方のホームページ制作及び

Webシステム・アプリ開発に貢献出来るような

情報を公開していきますので楽しみに待っていてください(o^―^o)

===========================================

↓↓ 以下のSNSでも情報の掲載などしております。

【Twitter】

【Instagram】