レイアウト

レスポンシブ、リキッドレイアウト、positionなど、画面幅に応じて見やすいWebレイアウトを作る方法を解説します。

Flexboxのalign-items: stretchでmainとサイドバーの高さを揃え、子要素へposition: stickyを指定して自然に止める方法を解説します。効かないときに祖先要素のoverflowを確認するポイントも紹介します。

2026.08.26

WebCantaのstyle.cssを例に、rem・vw・clamp()を使ったリキッドレイアウトを具体的に解説します。ルートサイズ、共通コンテナ、記事余白、見出し、サイドバーの切り替えまで実コードで確認できます。

2026.05.17

CSSのposition: stickyを使い、トップページでは人気記事、記事詳細ページでは目次を一定位置から追従させる方法を解説します。基本コードと効かない原因、スマホ対応まで紹介します。

2023.06.22