メイソニーレイアウト

はじめに

この実験では、メイソニーレイアウトの概念を探り、画像表示に最適な視覚的に魅力的なグリッド状の構造を作成する方法を学びます。CSSとHTMLを使用して、柔軟な列数と列幅を持ち、さまざまな画面サイズに適応する応答型のメイソニースタイルのレイアウトを構築します。この実験では、ウェブページにエレガントで機能的なレイアウトを作成するための実践的な経験を提供します。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/ResponsiveandAdaptiveDesignGroup -.-> css/media_queries("Media Queries") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") css/CSSPreprocessorsGroup -.-> css/variables("Variables") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} css/margin_and_padding -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} css/width_and_height -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} css/display_property -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} css/pseudo_classes -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} css/media_queries -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} css/mobile_first_design -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} css/variables -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} css/mixins -.-> lab-35224{{"CSS を使った応答型メイソニーレイアウト"}} end

VM内には既にindex.htmlとstyle.cssが用意されています。

メイソニースタイルのレイアウトを作成するには、.masonry-containerをメインコンテナとして使用し、.masonry-columnsを内部コンテナとして追加し、その中に.masonry-brick要素を配置します。レイアウトは、互いに重なり合う「レンガ」で構成され、完璧なフィットを形成します。垂直レイアウトの場合はwidthを固定し、水平レイアウトの場合はheightを固定できます。

レイアウトが適切に流れるようにするには、.masonry-brick要素にdisplay: blockを適用します。最初の要素の位置を考慮して、:first-child疑似要素セレクタを使用して、最初の要素に異なるmarginを適用します。

より大きな柔軟性と応答性を得るには、CSS変数とメディアクエリを使用します。.masonry-containerには、列数とギャップ用のCSS変数があります。列数は、異なる画面サイズに対して異なる列数と幅を指定するメディアクエリによって制御されます。

<div class="masonry-container">
  <div class="masonry-columns">
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1016/384/256"
      alt="An image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1025/495/330"
      alt="Another image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1024/192/128"
      alt="Another image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1028/518/345"
      alt="One more image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1035/585/390"
      alt="And another one"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1074/384/216"
      alt="Last one"
    />
  </div>
</div>

.masonry-container {
  --column-count-small: 1;
  --column-count-medium: 2;
  --column-count-large: 3;
  --column-gap: 0.125rem;
  padding: var(--column-gap);
}

.masonry-columns {
  column-gap: var(--column-gap);
  column-count: var(--column-count-small);
  column-width: calc(1 / var(--column-count-small) * 100%);
}

@media only screen and (min-width: 640px) {
  .masonry-columns {
    column-count: var(--column-count-medium);
    column-width: calc(1 / var(--column-count-medium) * 100%);
  }
}

@media only screen and (min-width: 800px) {
  .masonry-columns {
    column-count: var(--column-count-large);
    column-width: calc(1 / var(--column-count-large) * 100%);
  }
}

.masonry-brick {
  width: 100%;
  height: auto;
  margin: var(--column-gap) 0;
  display: block;
}

.masonry-brick:first-child {
  margin: 0 0 var(--column-gap);
}

右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

まとめ

おめでとうございます！あなたはメイソニーレイアウトの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を行って練習してください。