エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSグリッドで作るコンテンツラッパー
はじめに サイトコーディングをする際、コンテンツの配置を揃えるためのレイアウト要素(以下ラッパーと... はじめに サイトコーディングをする際、コンテンツの配置を揃えるためのレイアウト要素(以下ラッパーとします)があります。 以下赤色の部分にあたる領域。 こちらのラッパーですが、CSSグリッドを使うことでも実装が可能です。 また従来のアプローチでは難しかったレイアウトの実装も可能になるので、今回はその解説をいたします。 サンプル 下記サンプルになります。 詳細に関してこれまでの実装と比較しながら、順を追って説明したいと思います。 従来の方法 こちらのコンテンツラッパーですが、CSSグリッドを使わなかった従来の実装方法が下記になります。 ※コンテンツ幅を1080pxにした例 ※あくまで一例です。 .container { max-width: 1080px; width: calc(100% - 20px * 2); margin-right: auto; margin-left: auto;