supilog環境構築からWEBアプリ開発・スマホアプリ開発まで。ときには動画制作やゲームも。【Bootstrap4入門】04.メインコンテンツ-お知らせを作る(カード型)【Bootstrap4入門】04.メインコンテンツ-お知らせを作る(カード型)2021/03/012021/02/28bootstrapShare前回、メインコンテンツ部分のトップ画像を作成しました。ページがにぎやかになってきましたね。今回挑戦するのは、ココの部分、サイトのお知らせやニュースみたいなパーツで使われがちな、カード型のパーツを並べてみたいと思います。お知らせを作成するまずはcontainerを配置して、タイトルをつける前回勉強したcontainerを配置して、「お知らせ」というタイトルをつけてみます。</div></main>...スタイルを追加して、タイトルを太字にしてみます。プロジェクト初のCSSですね。600;}text-centerとは「my-5」については、前回やったspacingの機能ですので説明は省略します。text-centerとは、文字をセンタリングする(センターに配置する)ものです。center;」となりますが、Bootstrapでは、text-centerクラスを付与してあげるだけ、cssを指定できます。(やっていることは同じです)https://getbootstrap.com/docs/4.5/utilities/text/#text-alignmentお知らせコンテンツにcard型パーツを配置してみるBootstrapの公式ドキュメントには、様々なコンポーネントが用意されています。その1つにcardがあります。詳しくはドキュメントをじっくりと読んでみてください。decks欄のコードをコピーして、貼り付けます。</div></main>...少し長いコードになっていますが、よく見てみると↓に書いたような、cardクラスのdivタグのカタマリが3個並んでいるものだと分かりますので安心してください。</div>サンプル画像を入れてあげるこのままでは少しさみしいので、画像を入れてあげましょう。alt="...">デザイン追加card-deckの下部に少し間隔が欲しいので、下記を追加してあげましょう。mb-3">ブラウザ確認こんな風に表示されていれば成功です。さいごに次回はBootstrapの機能の中でも非常に便利なグリッドを使ってデザインしていきたいと思います。次回をご期待ください!今回も、終了時点のファイルを記載しておきます。Author:SupiJava,PHPでWEBアプリ開発がメイン。iOSアプリも作成する。初学者の方のサポートにも力を入れています。ご相談などはお気軽にどうぞ。