Webデザイン | ITのあれこれ https://himatoto.com 初心者視点で分かりやすく Sat, 06 Aug 2022 02:28:54 +0000 ja hourly 1 https://wordpress.org/?v=6.6.1 https://himatoto.com/wp-content/uploads/2020/06/cropped-4495bed8051fcc9fd4ac4bababda36e3-32x32.png Webデザイン | ITのあれこれ https://himatoto.com 32 32 【Bootstrap】簡単に要素と要素の間隔をあける https://himatoto.com/bootstrap2/ https://himatoto.com/bootstrap2/#respond Tue, 18 Aug 2020 06:02:57 +0000 https://himatoto.com/?p=346 Bootstrapを利用して便利だと感じたことをまとめてます。

困った時に参考にして頂ければと思います。

（Bootstrapの逆引きとして参考にして頂ければと思います。）

※Bootstrap4での記述となります。

要素と要素の間隔をあける

HTMLでWebページを作成していると要素と要素の間隔をあけたい！ってことがあるかと思います。

下記図のように要素と要素の間隔をあける方法を説明します。

要素同士の間隔をあける場合、色んな方法がります。

今回は要素の外側に余白を設定し間隔をあける方法を説明します。

余白を設定したい要素のclsssに「m方向-余白のサイズ」を設定する。

<img src="./images/item1.png" class="mr-3" />
<img src="./images/item2.png" />
左側の要素の右側に余白を入れて間隔をあける場合
<img src="./images/item1.png" />
<img src="./images/item2.png" class="ml-3" />
右側の要素の左側に余白を入れて間隔をあける場合
少し詳しく

mr-3・・・要素の右側に余白（マージン）を設定

ml-3・・・要素の左側に予約（マージン）を設定

「r」or「l」の部分を変更すると余白を入れる方向が変わります。

Bootstrapのクラス名
（m隣に記載するもの）		 例 説明
なし m-1 要素の上右下左に余白（マージン）を設定
t mt-1 要素の上側に予約（マージン）を設定
r mr-1 要素の右側に余白（マージン）を設定
b mb-1 要素の下側に余白（マージン）を設定
l ml-1 要素の左側に余白（マージン）を設定

「3」の部分を変更すると余白の幅が変わります。

※数字の部分は「1」～「5」が設定できます。

もっと詳しく

下記表示は、Bootstrapのクラス名とそのクラス名内で書かれているCSSの対応表です。

Bootstrapのクラス名 CSS
mr-3 margin-right: 1rem!important;
ml-3 margin-left: 1rem!important;

※余白の部分に関する部分を記載しています。

]]> https://himatoto.com/bootstrap2/feed/ 0 【Bootstrap】スマートフォンの時だけ改行する https://himatoto.com/bootstrap1/ https://himatoto.com/bootstrap1/#respond Sat, 18 Jul 2020 03:08:09 +0000 https://himatoto.com/?p=200 Bootstrapを利用して便利だと感じたことをまとめてます。

困った時に参考にして頂ければと思います。

（Bootstrapの逆引きとして参考にして頂ければと思います。）

※Bootstrap4での記述となります。

横のサイズ

bootstrapでは横のサイズを表す時にclass名の一部に「sm, md, lg, xl」を使用します。

それぞれのclass名が表しているサイズは下記の通りです。

サイズをあらわすclass サイズ
sm 576px以上
md 768px以上
lg 992px以上
xl 1200px以上

スマートフォン表示の時改行する

スマートフォン表示の時だけ改行させたい！

そんな場合のclass指定の方法について説明します。

brタグ（改行）のclassに「d-sm-none」を指定すると、スマートフォン表示時に改行が有効になります。

<p>あいうえお<br class="d-sm-none" />かきくけこ</p>
パソコン表示イメージ
スマートフォン表示イメージ
少し詳しく

d-sm-none・・・表示領域が576px以上の場合、改行タグが非表示になります。

「sm」の部分を「md」「lg」「xl」に変更することでそれぞれのサイズで表示・表示の調整ができます。

もっと詳しく

下記表示は、Bootstrapのクラス名とそのクラス名内で書かれているCSSの対応表です。

Bootstrapのクラス名 CSS
d-sm-none @media (min-width:576px){
  .d-sm-none{
    display:none!important
  }
}

※表示・表示に関係する部分を記載してます。

パソコン表示の時改行する

上記で記載した内容の逆のパターン。

パソコン表示の時だけ表示させたい！

そんな時のclassの指定の方法を説明します。

<p>あいうえお<br class="d-none d-lg-inline" />かきくけこ</p>

brタグ（改行）のclassに「d-none」と「d-lg-inline」を指定すると、パソコン表示時に改行が有効になります。

パソコン表示イメージ
スマートフォン表示イメージ
少し詳しく

d-none・・・非表示にします。

d-lg-inline・・・表示領域が992px以上の場合、表示（インライン表示）します。

「d-none」で指定したタグを非表示にします。「d-lg-inline」を使用することにより表示領域が992pxの時タグを表示させることができます。

「lg」の部分を「sm」「md」「xl」に変更することでそれぞれのサイズで表示・表示の調整ができます。

もっと詳しく

下記表示は、Bootstrapのクラス名とそのクラス名内で書かれているCSSの対応表です。

Bootstrapのクラス名 CSS
d-none display:none;
d-lg-inline
@media (min-width:992px){
  .d-lg-inline-block{
    display:inline-block!important
  }
}

※表示・表示に関係する部分を記載してます。

]]> https://himatoto.com/bootstrap1/feed/ 0