レスポンシブの margin と width 設定

CSS

目次一覧

 状態:-  閲覧数:56  投稿日:2022-09-14  更新日:2022-09-14
要件 / 結論コード / 考え方

要件 / 結論コード / 考え方

 閲覧数:21 投稿日:2022-09-14 更新日:2022-09-14 

要件


縦 2 列に並べたい。
marginを均等に設定したい。


結論コード


@media (max-width: 1500px) {
  .box {
    margin:0 0 0 1em;
    width: calc((100% - 3em) / 2);
  }
}


考え方


1.最初に「margin」を決定します。
今回は、1emと設定しました。

2.次に今回必要な「margin」の数を決定します。
今回は縦 2 列なので、計 3 つのmargin( 3 × 1 em)が必要になります。

3.次に縦 2 列それぞれの「width」を決定します。
全体(100%)から、計 3 つのmargin( 3 × 1 em)を引いた数値が、縦 2 列のwidthになります。
縦 1 列のwidthを求めたいので、2 で割ります。
width: calc((100% - 3em) / 2);



隣接兄弟結合子{h1 + p}と、一般兄弟結合子{h1 ~ p}は、意味が異なる



週間人気ページランキング / 11-22 → 11-28
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 59
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
4 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 12
4 「属性」「プロパティ」「アトリビュート」の違い | CSS 12
5 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 11
5 RGBの種類 / ビットカラー | RGB(色) 11
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 10
7 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 8
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 8
7 16進数カラーコード / 2進数 8
7 Design 0 8
7 「bgcolor」「background-color」「background」の違い | CSS 8
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 7
8 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 7
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
9 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 6
9 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 6
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
2022/11/29 1:01 更新