[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック
ページをレスポンシブ対応にする時、デスクトップでは空白スペースを多めにとり、スマホでは少なめにして、スクリーンサイズに適したマージンを与えたい時があります。 マージンの最小値と最大値を設定し、その間の値を変化させる、ビューポートの単位（vw, vh）を使って実装するスタイルシートのテクニックを紹介します。 デモページ 幅1200px, 800px, 480pxでデモページを表示したもので、上部のマージン（margin-top）が変化しているのが分かると思います。 マージンの最大値は15em、最小値は5em、その間の値はスクリーンサイズに応じて変化します。 実際の動きは、下記ページでご確認ください。
![[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/37ba897bfe36cfd2c74c23337ef086ec138cd07b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016102006-01.png)
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
派遣会社のマージン率（ピンハネ率）は取りすぎ！？大手を一覧で比較
