【簡単CSS】横幅100%コンテンツを幅指定された中央寄せコンテンツの起点に合わせて左揃えにする方法
横幅100%のコンテンツを幅指定された中央寄せコンテンツの起点（始点）に合わせて左揃えにしたい。
レスポンシブに可変させても合わせた起点がズレないようにしたい。
本記事ではこのような悩みを解決します。
実装デモ
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
codepenの実装デモです。
ブルーの横幅100%コンテンツがイエローの中央寄せコンテンツの起点に合ってる事がわかります。
実装手順は以下の通りです。
中央寄せコンテンツに起点を合わせるCSS
/* 横幅100%コンテンツ */
.contents {
/* 左から50%余白を空ける */
padding-left: 50%;
/* 中央寄せコンテンツ幅の半分をマイナスマージン入れる */
margin-left: -100px;
}
/* 中央寄せコンテンツ*/
.center {
max-width: 200px;
width: 100%;
margin: auto;
background-color: yellow;
}
横幅100%コンテンツを中央寄せコンテンツの起点に合わせるCSSコード例です。
起点を合わせたいコンテンツに以下プロパティを追記するだけです。
横幅100%コンテンツにpadding-lft: 50%;を付与し、左から50%余白を空けます。
中央寄せコンテンツ幅の半分のpx数をマイナスマージンとしてmargin-left: 中央寄せコンテンツの半分;を追加します。
以上で起点を合わせる事ができます。
まとめ
右側チラ見せの横スクロールを実装するときに、起点は中央寄せコンテンツに合わせたい場合があるかと思います。
そんな時便利ですので参考にしてみてください。
以上で解説を終わります。
目次
