画像＋テキスト中央にして横並びにするときのリンク

Question

上の図のような感じで画像＋下に説明　のようにしたいです。
①<figure>タグにリンクつけてもいいのかどうか。デザインとして例のようになればいいので<figure>じゃなくてもいいのですけど。
どういう選択が一番よいのかわかりません。

②画像にもテキストにもリンクをつけたいですけど、全部をくくってしまうと画像とテキストがずれてしまいます。

③　参考https://hemmi-ge.com/　のcodeを拾ってみました。同じような感じで少し変更して職場のCMSを利用してコードを入れていくと、タグすべてにリンク先をいれないといけないようになって同じリンク先にもかかわらず４箇所ほどリンク先を記入しないといけなくなってしまいました。
そのために以下のように変更しました。
開発ツールをつかいこなせたら問題ないのかもしれませんが…　それは難しくてできません…

<h3>ああああああああああ</h3>
<div class="flex-container">    
    <figure>
        <a href="#"><img src="120×120の画像" alt="">
            <figcaption>いいいいいいいいいいいい</figcaption></a>
    </figure>
     <figure>
        <a href="#"><img src="120×120の画像" alt="">
            <figcaption>うううううううううううううう<br>えええええええええええ</figcaption></a>
    </figure>
    <figure>
        <a href="#"><img src="120×120の画像" alt="">
            <figcaption>おおおおおおおおおおおお<br>あああああああああああああああ</figcaption></a>
    </figure>
    
</div>     
    
 <h3>ダウンロード</h3>
<div class="flex-container">    
    <figure>
        <a href="#"><img src="120×120の画像" alt="文書ダウンロード">
            <figcaption>文書ダウンロード</figcaption></a>
    </figure>
    
</div> 
    

 .flex-container {
    display: -webkit-flex;
    display:         flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
}
.flex-container > figure {
    text-align: center;
}
.flex-container > figure > img {
    display: block;
}
    
 .flex-container  figcaption{
        
        font-size: 14px;
        font-weight: bold;
    }
    
    .flex-container a{
        text-decoration: none;
        color: #000000;
    } 
        
    }  

@media screen and (max-width:500px){
    .flex-container{
        display: flex;
        flex-wrap: wrap;
        justify-content:　space-around;
      
     }
   
        }    

Comments

[Lhankor_Mhy]

「開発ツールをつかいこなせたら問題ないのかもしれませんが…　それは難しくてできません… 」
それはwebデザイナをやるなら頑張るしかないのでは……
車庫入れができないタクシー運転手みたいなものでしょう。

[reiNaka]

職業は医療職でして。
職場の委員会でむりくりやっている感じです。
初歩的なことでも、一つ一つ調べながらなので、まだその段階にいかないっていう状況です。
オートマ車で前進したくらいです。
でも時間作って知識いれたいとは思っているところです。

[Lhankor_Mhy]

なるほど、本職は別にあるのですね。仲間ですね。

Answer 1

①<figure>タグにリンクつけてもいいのかどうか。

いいと思いますよ。

許可されている親要素 フローコンテンツを受け入れるすべての要素

<figure>: 任意のキャプション付きの図要素 - HTML: HyperText Markup Language | MDN

---

②画像にもテキストにもリンクをつけたいですけど、全部をくくってしまうと画像とテキストがずれてしまいます。

figcaption要素の親になれるのは、figure要素だけです。①のようにした方がいいと思います。

許可されている親要素 <figure> 要素。 <figcaption> 要素は最初または最後の子要素でなければなりません。

<figcaption>: 図キャプション要素 - HTML: HyperText Markup Language | MDN

---

③　参考https://hemmi-ge.com/　のcodeを拾ってみました。同じような感じで少し変更して職場のCMSを利用してコードを入れていくと、タグすべてにリンク先をいれないといけないようになって同じリンク先にもかかわらず４箇所ほどリンク先を記入しないといけなくなってしまいました。

「職場のCMS」の問題のように感じます。その「職場のCMS」の詳細がわからないと解決は難しいのかもしれません。

Comments

[reiNaka]

画像にリンクつけてほかのページにいくようにするっていう使い方はしないっていうことですか？

[Lhankor_Mhy]

そういうことは言っていないと思います。