HTMLとCSSを使った実装の方針

最初に

HTMLとCSSを使用してプロダクトを作りたいと思っています。(今までHTMLとCSSの経験は殆ど0です)
そのため、プロダクトの実装の方針が見えてなく、どこから手を付けていいか分かりません。
直接的な魚でなくとも、魚の釣り方を大まかに教えて頂けると幸いです。

前提・実現したいこと

HTML5とCSSと何かしらのWFを使って、1枚目に添付している画像のようなものを作成したいと思っています。
(ホームページ等として公開する訳ではなく、オフラインで自分用に使う予定です)

写真を縦10枚,横10枚の計100枚を表示して、各写真の上に文字列(Sample n)とリンク(Figure)があり、
(10*10で表示する写真は全部別,リンク先の内容もそれぞれ異なる)
リンク先のHTMLは、2枚目に添付している画像の様に、図を4枚並べたものにしたいと考えています。

HTML内で10*10枚分の写真のパスを手書きし、リンク先のHTMLを作成した後に図4枚分のパスを書けば実装できない事もないのですが、手作業での作業量が非常に多くなり、動的に処理したいです。
(100枚分の写真のパス + リンク先の図のパス400枚で合計500回手書きパスを書く必要が出てくる。)

今までHTMLやCSSを使った事がないのと、HTML上に対して動的な処理を行った事がないのでどのように実装すればいいのかの検討がまったくつきません。
直接的なコードでなくとも、どの様に実装すればいいのかの大まかな流れ、実装するにはどの様な知識が必要なのか教えて欲しいです。

10*10に展開する画像とリンク先の画像に関しては、以下の様にファイル名にも規則性がありディレクトリ下のフォルダにあります。

 
    img1.jpg
    img2.jpg
    img3.jpg
    img4.jpg
    img5.jpg
    img6.jpg
    img7.jpg
    img8.jpg
    img9.jpg
    img10.jpg
    .
    .
    img96.jpg
    img97.jpg
    img98.jpg
    img99.jpg
    img100.jpg

該当のソースコード

まだ途中までしか書いていないのですが、下の写真様な感じで10*10で展開したいと考えています。

HTML5
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="SUCKMYPENIS.css">
7  </head>
8
9<body>
10  <div class = "arrayPicture">
11
12    <div class = "img1">
13      <p>sample1</p>
14      <a href= "img1.html" >Figure</a>
15      <img src="pic1.png"width="100" height="100">
16    </div>
17
18    <div class = "img2">
19      <p>sample2</p>
20      <a href= "img2.html" >Figure</a>
21      <img src="pic2.png"width="100" height="100">
22    </div>
23
24
25
26</body>
27</html>

CSS
1body {
2  font-family: "Avenir Next";
3}
4
5.arrayPicture p{
6  font-size: 10px;
7  padding: 0.1px 0.1px 0.1px 0.1px;
8}
9
10.arrayPicture{
11	display: flex;
12}
13
14a,img{
15 font-size: 10px;
16 display: block;
17}

今まで使った事のある言語

Python3(主にデータの前処理や可視化)
HTML5(このプロダクトを作成するためProgateで触りました)
CSS(上に同じ)
JavaScript(文法のみ)

補足情報（FW/ツールのバージョンなど）

HTML5
CSS
ATOM

もし何か不明瞭な点等があれば、質問して頂けると幸いです。
抽象的な質問で申し訳ありません。

行動規範の内容に同意します

回答2件

オフラインで自分用に使う予定です

HTMLだけでは、管理するのが難しくなると思います。特にネットワーク上に公開する予定が無いのであれば、HTMLにこだわらずに「ファイル管理ソフト」「ファイルビュアー」などで使い勝手の良いものを探すほうが手早いです。

また、同様の質問をされていて、それについて「解決済み」となっているので、まずそれを試してみればよいのでは。(更新：teratailの保存バグの対応)

【CSS - aHTMLとCSSにおいてリンク先に効率良く、複数の画像を設置する方法｜teratail】
https://teratail.com/questions/255362#reply-367985

投稿2020/04/22 08:46

編集2020/04/22 09:12

kei344

総合スコア69407

Savanof

2020/04/22 09:06

返信ありがとうございます。自分の質問の内容が抽象的だったため、微妙にニュアンスがずれてしまったのですが、ファイルを効率的に管理する事や、フォルダー内の写真に対して何か処理を加えたり、写真を見るのが目的ではなく、あくまでもHTML上に10*10の写真を展開させて、任意の写真の上部にあるリンク(Figure)をクリックすると、写真に対応する図を表示させる事を目的にコードを書きたい、つくりたいと思っています。結果的に管理等々が難しい(仮に不可能だとしても)ディレクトリ構造を工夫するなり、正規表現等を使用しても上記の様なものを実装したいです。 (別に営利案件という訳でも、学校等の課題という訳でもないのですが、上からHTML上で実装する事を拘泥されています...)

kei344

2020/04/22 09:14

「画像ファイルのリストを作る」がHTMLではできません。「存在するリスト」からHTML上に表示することはできます。

Savanof

2020/04/22 09:20 編集

自分のディレクトリ内に画像ファイルのリストがある場合であれば、半自動的にHTML上に表示させる事が可能という事ですか?

kei344

2020/04/22 09:21

リストファイルをHTMLから使える形にしていれば不可能ではありません。

Savanof

2020/04/22 09:30

リストファイルをHTMLから使える形というと、名称的にはどのようなものになりますか?

行動規範の内容に同意します

ベストアンサー

こんな形でいかがでしょうか?
余白が必要であれば、.imgのpaddingにつけると楽そうです。

HTML
1<div class="arrayPicture" id="arrayPicture"><!-- idを追加 -->
2<!--
3   <div class="img img1">
4     <p>sample1</p>
5     <a href="img1.html">Figure</a>
6     <img src="pic1.png">
7   </div>
8-->
9</div>

CSS
1body {
2  font-family: "Avenir Next";
3}
4
5.arrayPicture p {
6  font-size: 10px;
7  padding: 0.1px 0.1px 0.1px 0.1px;
8}
9
10.arrayPicture {
11  display: flex;
12  flex-wrap: wrap;　/* 追加 */
13}
14
15/* 追加 */
16.arrayPicture .img {
17  flex-grow: 0;
18  flex-shrink: 0;
19  flex-basis: calc(100% / 10);
20  box-sizing: border-box;
21}
22.arrayPicture .img img {
23  max-width: 100%;
24}
25
26a,
27img {
28  font-size: 10px;
29  display: block;
30}
31

↓追加: 連番になっている前提です。

JS
1let arrayPicture = document.getElementById('arrayPicture');
2
3for (let i = 1; i <= 100; i++) {
4  var html = '';
5  html += '<div class="img img' + i + '">';
6  html += '<p>sample' + i + '</p>';
7  html += '<a href="img' + i + '.html">Figure</a>';
8  html += '<img src="pic' + i + '.png">';
9  html += '</div>';
10  arrayPicture.insertAdjacentHTML('beforeend', html);
11}

投稿2020/04/22 08:36

編集2020/04/22 09:35

new1ro

総合スコア4528

Savanof

2020/04/22 09:11

昨晩からお世話になっております。質問の意図が明瞭でなくて申し訳ないです... 中途半端に写真を2つ表示させるコードを書いてしまったのですが、実際には写真が縦横10*10で展開され、上のコードで言えば<class="img img1">が<class = img img100>である、作りにしたいと思っています。上記の例ではテストケースのために写真のファイル名がpic1,pic2みたいな感じなのですが、実際にはフルパスで記述しそれに伴いHTMLリンクが発生する形なるので、手動ではなくその部分も自動で書く方法はないかと考えていました。 (もちろんファイル名やフォルダー名には規則性があり、きちんと整列されている前提です) ご迷惑をおかけしてしまい申し訳ありません。

new1ro

2020/04/22 09:36 編集

> もちろんファイル名やフォルダー名には規則性があり、きちんと整列されている前提です連番になっている、と理解し、JavaScriptの記述を追加してみました。回答に書いたソースコードではリンク先が「img1.html」などとなっていますが、「img.html?num=1」などの形にして、 img.htmlという別のファイル側で、numの値を見て画像を出力する、というつくりにすればOKかと思います。

Savanof

2020/04/22 09:30

HTMLに対して動的に作成を行う、実装のイメージが持てました。ありがとうございます。これをベースにチューンしていきます。

行動規範の内容に同意します

あなたの回答