質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

727閲覧

articleタグの使い方がイマイチわかりません

退会済みユーザー

退会済みユーザー

総合スコア0

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/15 07:06

編集2020/11/15 07:12

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> コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問