🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML

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

Q&A

解決済

2回答

2255閲覧

ページネーションは自動的に生成できますか?

Kosketu

総合スコア46

HTML

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

0グッド

0クリップ

投稿2021/01/05 22:55

おはようございます。まだまだ初学者です

現在、HPを作成しているのですが、手法と構成を練り悩んでおりまして、ご教授いただければ幸いです
下記のように、sectionタグをどんどん追加し、index.htmlを構成したいと考えています
なお、articleタグを逐次追加するので、無限スクロールも考えましたが、作成するサイトには不都合なので、ページネーションを採りました。

html

1 <body> 2 <header>...</header> 3 <nav>...</nav> 4 <article> <section>...</section> </article> 5 <article> <section>...</section> </article> 6   : 7 <article> <section>...</section> </article> 8 9 <div class='wp-pagenavi' role='navigation'> 10    <span aria-current='page'>1</span><a title="Page2">2</a><a title="Page 3" >3</a><a title="Page 4" >4</a><a title="Page 5">5</a><span>...</span><a title="Page 10">10</a><span>...</span><a class="nextpostslink">次へ</a> 11 </div> 12 <footer>...</footer> 13 </body>

ここで、質問なのですが、
ページネーションは自動で項数を増やしていくことはできますか?

もしありましたら、概念やプログラム名だけでもいいのでお教えて下さい。

また、同時系列で、もう一点ご質問させていただいております。お目通しいただけると幸いです。

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

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

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

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

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

m.ts10806

2021/01/05 23:11

>wp-pagenavi WordPressの話でしょうか。
m.ts10806

2021/01/05 23:12

同じ質問に見えます。わざわざ分けることはないのでは。
Kosketu

2021/01/06 00:09

申し訳ありません、確かにおっしゃる通りでした汗 次回以降、考えて投稿してみるようにします!!
guest

回答2

0

動的に html を出力したいのであれば、CMS を使用するのが一般的です。
静的に html を用意しておきたいのであれば、 静的サイトジェネレーター(Static Site Generators - SSG)を使用すると、意図した html を準備することが出来ます。

投稿2021/01/05 23:01

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Kosketu

2021/01/06 00:13 編集

迅速なご回答ありがとうございます!! 早速調べてみたいと思います!A_kirisakiさんの回答が、Jsを使うとのことで、自身の方針にマッチしてそうでした。ただ、お二方がベストアンサーです。ありがとうございます(><)!!
guest

0

ベストアンサー

「自動的に」「無限スクロール」といったキーワードから SPA(Single Page Applicarion)、一つのページで更新せずにデータだけを取ってきて動的に項目を増やすといった作りが想定されました。そのためには React などの JavaScript フレームワークを使うのがよいでしょう。

それプラス最近では Next.js などのより簡単に静的と動的の中間のサイトをお手軽に作れるフレームワークも存在するので是非チェックしてみてください。ただどちらも JavaScript が出来た上での話なのでそちらも学びながらという形にはなりますが。

投稿2021/01/05 23:08

A_kirisaki

総合スコア2853

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

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

Kosketu

2021/01/05 23:29

ありがとうございます!!JSで挑戦してみたいと思います!!フレームワークはNode.jsを使ってるのですが、他の種類との差異がよくわかってないので、この機会に触れてみます!!!
Kosketu

2021/01/06 00:43

Node.jsはライブラリでした。Angular.jsを使っていきたいと思います!!!
A_kirisaki

2021/01/06 00:47 編集

ああ、Next.js は React を使ったフレームワークなので Angular との組み合わせは難しいと思います……。Angular なら Scully https://scully.io/ というのがあるらしいですが、情報がとても少ないので苦労すると思います。
Kosketu

2021/01/06 00:54

すいません、混ぜくりました。Reactが前提でしたね、方向性固めます汗 ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問