きっかけ

paddingを一つだけ指定する場合、

// 個別指定
padding-bottom: 15px; 

//ショートハンド
padding: 0 0 0 15px; 

ではどちらが良い記述なの？という疑問が出てきたので、
双方のメリットとデメリットをメモします。

結論

個人で開発するなら どちらでも良い
チームで開発するなら 個別指定推奨

メリットとデメリット：個別指定

// 個別指定
padding-bottom: 15px; 

メリット

• メンテナンスが楽 （余分なpaddingを指定しないので他要素に影響しないので、むやみに他要素と打ち消しあうことがない）

大人数で同じソースコードを触るチーム開発では重要ポイント。
（後日後述）

デメリット

• 指定を増やす時少しだけめんどくさい （ほとんど書き直さなければならないため）
• 打つのが少しだけめんどくさい (文字量が増えるため)
• 読みずらい （bottomやらtopやらバラバラするため）

メリットとデメリット：ショートハンド

//ショートハンド
padding: 0 0 0 15px; 

メリット

• 指定を増やす時少しだけ楽 （0を変更するだけで良いため）
• 打つのが少しだけ楽 (文字量が増えるため)
• 読みやすい （bottomやらtopやらバラバラするため）

デメリット

• メンテナンスが厄介 （余分なpaddingを指定するので他要素に影響し、むやみに他要素と打ち消しあう可能性があるため）

大人数で同じソースコードを触るチーム開発ではなるべく避けたい。
（後日後述）

まとめ

2つまで個別指定するかたもいるとかいないとか。
完全に個人の感覚かと思っていましたが

メンテナンスが厄介 （余分なpaddingを指定するので他要素に影響し、むやみに他要素と打ち消しあう可能性があるため）

あたりは考えたことがなかったので良いきっかけになりました。

他の観点でメリットデメリットがあればぜひ教えていただきたいです。

それではさようなら！

やりたかったこと

下図のような感じで画面の両端にコンポーネントを配置したいなあと思っていました。

解決方法

左側に配置したいコンポーネントのクラスにmr-autoを追加しました。

コード

pug

  b-container
    b-row
      b-col.mr-auto(cols="auto")
        div タイトル
      b-col(cols="auto")
        b-button.download ボタン

mr-auto

このクラスが追加された要素の右側のマージンを、右側のコンポーネントまで詰めることができます。
↓こんな感じ↓

詰まっていたところ

CSSのfloatプロパティでできると思っていたのですが、flexではできない？

備考

右側のコンポーネントのcolsだけをautoにしてもできるけど、ちゃんとやりたいならマージンを使った方がいいのかなあと思います。

参考文献

Margin utilities on columns - Layout and Grid System _ Components _ BootstrapVue
CSS3: Bootstrap 4 Beta でグリッドレイアウトの offset クラスがなくなる

はじめに

今回はWebページ制作における背景画像の設定方法と端末ごとに表示する画像を変える方法について説明します.

Webページの背景画像の設定方法

HTMLファイル及びCSSファイルに以下のコードを記述します.

main.html

  <!--背景変更,headタグ内に記述-->
<link rel="stylesheet" href="common/css/sample.css" type="text/css">

sample.css

body {
background-image: url("./images/bg1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}

各設定の説明

• background-repeat:背景画像の繰り返し(repeatで繰り返し)
• background-attachment:背景画像の固定・移動(scrollで移動)
• background-position:背景画像の表示開始位置
• background-size:背景画像のサイズ(自動的にサイズを合わせる)

他にもいろいろな設定が可能です.参考

端末ごとに表示する背景画像を変更

CSSファイルにて端末のサイズ(幅)ごとに表示画像を変更するコードを記述する.スマホは980px以下,PCは981px以上で設定をしています.

sample.css

@media only screen and (max-width:980px) {
body {
background-image: url("./images/bg1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
     }
}

@media only screen and (min-width:981px) {
body {
background-image: url("./images/bg2.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
     }
}

おまけ

今回のように端末のサイズを調整し確認することを繰り返すなど,頻繁に繰り返していると,Webサイトへの反映がなかなかされない場合がある.そうなった場合はブラウザのキャッシュが原因の可能性が高いです.
キャッシュが残っていると,自動的に以前閲覧した，変更前のWebページを表示してしまいます．これを解決するには，キャッシュのクリアを行えばいいです．スマホなどの場合は履歴を消せば解決します．