ミライ創造学舎

事業の最新情報の更新及び開発手法・おすすめのテクニックの紹介をさせて頂きます。

Bootstrapを活用しよう!【Ⅴ. カードリストの作成】

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

 

9月に入りながらも天気予報を確認すると雨が多いように感じますが、、

正直なところ....洗濯物が乾きにくいので、晴れてほしいものです💦

 

 

今回は、Bootstrapの活用方法の中でも「カードリストの作成」の方法について紹介させて頂きます。



Bootstrap を用いたカードリストの作成方法



カードリストとは??

= 恐らくですが、実際にみたほうがピンとくるのではないでしょうか??
↓↓

[ サンプル 例① ]
以下の「写真とテキスト」が配置されている領域を [ カード ] と言います。
それを横に並べたものが [ カードリスト ] です。


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



カードリストの作成方法

● 上記の例①と同じように表示させる方法に加えて、
タイトル付きのリスト
複数行のカードリスト を作成する方法を紹介致します。


サンプルコードは、bodyタグ内に記述するようにしてください。


[ 例① コード ]


<i><p style="font-size:21px; margin:20px; font-weight:bold;">●画像付き カードリスト </p></i> 
  <!-- カードブロック: card-deck -->
  <div class="card-deck" id="te">
    <!-- カード 本体 : card -->
    <div class="card">
    <img src="DSC_0481.JPG" class="card-img-top" alt="...">
      <!-- カードのボディ部分 : card-body -->
      <div class="card-body">
        <!-- カードのタイトル : card-title -->
	<h5 class="card-title">鳥の群れ</h5>
	<!-- カードのテキスト : card-text -->
	<p class="card-text">テキストを入力する箇所</p>
      </div>
    </div>
    <div class="card">
      <img src="DIS.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">星ヶ丘</h5>
	<p class="card-text">テキストを入力する箇所</p>
      </div>
    </div>
    <div class="card">
      <img src="1517671523452.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">フラワー園</h5>
	<p class="card-text">テキストを入力する箇所</p>
      </div>
    </div>
  </div>

             ↓


[ 例① 実行結果 ]

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




[ タイトル付きリスト コード ]

<i><p style="font-size:21px; margin:20px; font-weight:bold;">●タイトル付きのリスト </p></i> 
  <div class="card" id="mm" style="width: 18rem;">
    <div class="card-header" id="md">
      リスト : タイトル
    </div>
		 
    <ul class="list-group list-group-flush">
      <li class="list-group-item">■ ナポリタン</li>
      <li class="list-group-item">■ カルボナーラ</li>
      <li class="list-group-item">■ スパゲッティ</li>
   </ul>
  </div>


             ↓


[ 実行結果 ]


f:id:Varth-Connect:20190903210957p:plain
タイトル付きリスト




[ 複数行カードリスト コード ]


 <div class = "card-deck" ~ > </div>  の個数分 

            ≒  カードリストの行数となる
<i><p style="font-size:21px; margin:20px; font-weight:bold;">●複数行 カードリスト </p></i> 
  <!-- カードブロック: card-deck -->
  <div class="card-deck" id="te">
    <!-- カード 本体 : card -->
    <div class="card">
    <img src="DSC_0481.JPG" class="card-img-top" alt="...">
      <!-- カードのボディ部分 : card-body -->
      <div class="card-body">
        <!-- カードのタイトル : card-title -->
	<h5 class="card-title">鳥の群れ</h5>
	<!-- カードのテキスト : card-text -->
	<p class="card-text">テキストを入力する箇所</p>
      </div>
    </div>
    <div class="card">
      <img src="DIS.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">星ヶ丘</h5>
	<p class="card-text">テキストを入力する箇所</p>
      </div>
    </div>
    <div class="card">
      <img src="1517671523452.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">フラワー園</h5>
	<p class="card-text">テキストを入力する箇所</p>
      </div>
    </div>
  </div>
  <!-- カードブロック: card-deck -->
  <div class="card-deck" id="te">
    <!-- カード 本体 : card -->
    <div class="card">
      <img src="DSC_0481.JPG" class="card-img-top" alt="...">
      <!-- カードのボディ部分 : card-body -->
        <div class="card-body">
          <!-- カードのタイトル : card-title -->
	  <h5 class="card-title">鳥の群れ</h5>
	  <!-- カードのテキスト : card-text -->
	  <p class="card-text">テキストを入力する箇所</p>
        </div>
      </div>
      <div class="card">
        <img src="DIS.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">星ヶ丘</h5>
	     <p class="card-text">テキストを入力する箇所</p>
          </div>
      </div>
      <div class="card">
        <img src="1517671523452.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">フラワー園</h5>
	    <p class="card-text">テキストを入力する箇所</p>
          </div>
        </div>
      </div>

             ↓


[ 実行結果 ]

f:id:Varth-Connect:20190903213428p:plain
複数行のリスト表示









以上になりますが、如何でしたでしょうか??
その他不明点など御座いましたら、コメントして頂ければと思います。
確認次第、迅速に対応させて頂きます!!


それでは、今回はこれで終わっていきたいと思います。
皆さんの今後の開発の手助けに少しでもなれば嬉しいです(⌒∇⌒)






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

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

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