Written by Kasumi

【簡単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: 中央寄せコンテンツの半分;を追加します。

以上で起点を合わせる事ができます。

まとめ

右側チラ見せの横スクロールを実装するときに、起点は中央寄せコンテンツに合わせたい場合があるかと思います。

そんな時便利ですので参考にしてみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】CSSで文字のitalicが効かない。transformで傾きを付けよう

2022.04.10
1505
WordPress プログラミング

【簡単】ワードプレスのRSSフィードを取得して、外部サイトに記事一覧を表示する方法

更新日:2020.05.27
6899
WordPress プログラミング

Advanced Custom Fields Pro(ACFPRO)を使いオプションページを作成する方法

2022.04.22
3047
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
16251