https://pas-pol.jp/
上記サイトのコーディング模写をしています。
このサイトのproductのエリアなんですが、私はリストタグで記述、実際のサイトはarticeタグで一つ一つを独立させていました。
違いというか、そもそもarticleの使い方が調べてもピンとこなかったのですが、どういうときに使うと望ましいのでしょうか。
私がリストタグを使った理由として、同じデザインのコラムが続くのでリストタグを使ったという感じです。
リストタグも本来の使い方としてあまりよくわかってないのですが、こちらもよろしければ教えてください。
articeは独立性の高い構成に使うとよく出てきますが
→独立性の高い構成って例えば何?という状態です。
だいたいこんな感じで記述してます。
<section> <div> <h2>NEWSMORE</h2> <a href="#">MORE</a> </div> <ul> <li> <a href="#"> <div> <img src="image/banner_thumb1.png" alt="365日 北海道 絶景日めくりカレンダーの画像"> </div> <div> <p>【10/7募集箇所更新】世界遺産フォトグラファーとつくる『365日世界遺産絶景の旅』。不足場所の「旅人の声」を募集中!</p> <p>2020.10.2</p> <p>現在制作中の「世界遺産」だけを365箇所集めた書籍『365日世界遺産絶景の旅』に掲載する、旅人の声を9月末まで募集しておりました。 約100名の方からたくさんの感想コメントをいただき、365箇所分のうち、211箇所まで集まりました。ご応募いただいたみなさま、本当にありがとうございます…! しかし、あと132箇所が残っている状態です…なんとか、365箇所まで近づけたく、募集期間を延長することにしました。(募集するのは不足場所のみとなります) この場所に行ったことがある!という方は、感想コメントをご ...</p> </div> </a> </li> コード
実際のサイトのコードはこんな感じです。
article以外はだいたいおんなじような感じです、(コンテナとかは除く)
<section class="l-section l-section--news"> <div class="l-container l-container--narrow"> <div class="m-sectionTitle l-row"> <h1 class="m-sectionTitle-text">NEWS</h1> <div class="m-sectionTitle-button"> <a href="https://pas-pol.jp/news/" class="m-button m-button--more">MORE</a> </div> </div> <div class="m-newsList l-row"> <article class="m-newsList-item"> <a href="https://pas-pol.jp/2020/10/world-heritage-365-lack/" class="m-newsList-item-link l-row"> <div class="m-newsList-item-image l-grid-5"> <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/10/th_shutterstock_756071179.jpg" width="800" height="365" alt=""> </div> <div class="m-newsList-item-text l-grid-7"> <h2 class="m-newsList-item-title">【10/7募集箇所更新】世界遺産フォトグラファーとつくる『365日世界遺産絶景の旅』。不足場所の「旅人の声」を募集中!</h2> <p class="m-newsList-item-date"><time pubdate="2020-10-02">2020.10.2</time></p> <p class="m-newsList-item-description">現在制作中の「世界遺産」だけを365箇所集めた書籍『365日世界遺産絶景の旅』に掲載する、旅人の声を9月末まで募集しておりました。 約100名の方からたくさんの感想コメントをいただき、365箇所分のうち、211箇所まで集まりました。ご応募いただいたみなさま、本当にありがとうございます…! しかし、あと132箇所が残っている状態です…なんとか、365箇所まで近づけたく、募集期間を延長することにしました。(募集するのは不足場所のみとなります) この場所に行ったことがある!という方は、感想コメントをご ...</p> </div> </a> </article> コード
あなたの回答
tips
プレビュー