タイトル
商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。
<!--▼▼▼▼▼ここから「3カラムレイアウト」--> <section class="bg1"> <h2 class="c no-line"><span class="main-text">3カラムレイアウト</span><span class="sub-text">3 column layout</span></h2> <div class="list-grid1"> <div class="list blur"> <figure><a href="#"><img src="images/1.jpg" alt=""></a></figure> <div class="text"> <h4>タイトル</h4> <p>商品の簡単な説明を入れます。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p> </div> </div> ・・・(省略) </div> <!--/.list-grid1--> </section> <!--▲▲▲▲▲ここまで「3カラムレイアウト」-->
cssフォルダのstyle.cssから「list-grid1」でテキスト検索してみて下さい。詳しい解説もあります。
カラムレイアウトにしたいlistブロックを全てこの中に入れておいて下さい。
背景色の指定です。色を変更したい場合は、style.cssからテキストで「bg1」を検索して下さい。
カラム内のブロック1個あたりです。
この中の「figure」内にimg要素を、「text」ブロック内に見出しと説明文を入れます。
「blur」は、ぼやけながら出現するスタイル効果です。汎用的にどこにでも使えます。
style.cssから「list-grid1」でテキスト検索して下さい。
以下の3が3カラムの指定箇所です。4にすれば4カラムになります。
grid-template-columns: repeat(3, 1fr);
800px未満の画面幅だと1カラムになります。
このブレイクポイントを変更したい場合は、
@media screen and (min-width:800px) {