Q&A
最後の↓これはなんでしょう？
X
前提・実現したいこと
HTML5とCSSでリンクを押したら、画像が複数枚表示されるコードを書きたいと思っています。
サイト(https://blog.codecamp.jp/programming-html-a)を参考に実際にリンク(HTML)を作り、リンク先に画像を貼り付けました。
HTMLやCSSといった言語は普段書かないので、ここら辺の感覚があまり分らないのですが、
リンク先に複数の画像を貼り付けるため、そのたびにHTMLファイルを作り、張り付けていたら膨大な量になり、管理が難しくなるように感じます。
質問が抽象的で、本当に申し訳ないのですが、リンク先に複数の画像を貼り付ける際にもう少し効率的な方法はありませんか?
(新たにHTMLリンクを書かなくて済む、保守、改変しやすくなる方法etc)
該当のソースコード
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" >JumpLink</a> 15 16 <img src="C://Users//ForProgramming//Documents//HTML//Picture.jpg"width="100" height="100"> 17 </div> 18 19</body> 20</html> 21
リンク先のhtml(img1)
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 <img src="C://Users//For Programming//Documents//HTML//pic1"width="100" height="100"> 12 <img src="C://Users//For Programming//Documents//HTML//pic2"width="100" height="100"> 13 <img src="C://Users//For Programming//Documents//HTML//pic3"width="100" height="100"> 14 <img src="C://Users//For Programming//Documents//HTML//pic4"width="100" height="100">
補足情報（FW/ツールのバージョンなど）
ATOM
HTML5
CSS
あと「管理」はどこまでを想定されていますでしょうか。
※そもそも画像のリンクのさせ方が自身のローカル限定になっていますが、公開はどこまで想定されていますか？
もう１点すみません
>HTMLやCSSといった言語は普段書かないので、
どういった言語を普段書かれるのでしょうか。それによっては別途アドバイスが可能になるかもしれません。追記願います。
質問内容が抽象的で申し訳ありません。
一点目の「管理」についてですが、ホームページ等に公開したり等ではなく、自分用にと考えています。
現状、テストケースのためリンクを一つしか張っていませんが、最終的にはリンクを縦に10個、横に10個展開しようと考えています。(なので各リンクに対して画像が4枚、計400枚)
普段は主にPythonを書いております。(統計解析や画像やcsvのファイルの処理が主)
Xに関しては、打ち間違いの勘違いです。
私は詳しくないですが、PythonならDjangoというWebフレームワークがあったと思います。
静的HTMLではなく動的にされたほうが記述量も少なく済むのではないでしょうか。
もちろん、ファイル名などに規則性があるにこしたことはないですが。
返信が遅くなってしまい申し訳ありません。動的なフレームワークがあるんですね,,,HTML?フロントエンド?周りに関しては全然知らなかったので助かりました。
ファイル名等々には規則性があり、動的に処理できるのであればいくらでも手はありそうなのでやってみます。ありがとうございます。
回答1件
0
ベストアンサー
最終的にどうなればOKなのか、どれくらい作成しないといけないページがあるのか分かりませんが、提案です。
■１ページにおさめる場合
・ページ内リンクを利用し、リンクテキストをクリックすると、対応した画像が表示されている場所まで移動する。
参考サイト（デモあり）：http://www.shoshinsha.com/hp/ref/html/a_sample.html
・モーダルウィンドウを利用し、リンクテキストをクリックすると、ポップアップで画像を表示させる
参考サイト（デモあり）：https://qiita.com/hacchi56/items/b365344ea8a4930b114f
■すべてのページを作成する場合
・CSVデータで登録してHTMLを生成するコンバーター（bpTran等）を利用する。
参考サイト：https://note.com/makoma/n/n8afbd34a7b45
投稿2020/04/21 17:25
総合スコア52
返信ありがとうございます。自分自身、あまりHTMLやCSS周りの事をやった事がないので選択肢が提示され助かりました。恐らく一番最後の提案が自分のやりたい事にあっているかなと思っています。
もう少し、自分で試行錯誤してみます。
あなたの回答
tips
プレビュー
