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

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

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

4回答

603閲覧

ポップアップのようにページを移動する方法を教えて下さい

iio

総合スコア10

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/12/10 00:44

###実現したいこと

下の画像のようにPC版のTwitterではリプボタンを押したときに背景がトップページのままURLが変わりリプライのページが表示されますがこれはどのような仕組みなのでしょうか。
調べていて**このサイト**を見つけたのですがこの方法だとトップページにすべてのコード(ポップアップの内容など)を書かないといけないため量が多くなったときに読み込みに時間がかかってしまいます。
どのように実現したらいいのでしょうか

イメージ説明

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

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

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

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

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

miyabi_takatsuk

2019/12/10 05:25

複垢とマルチポストのダブルだと質悪すぎですね。 そうだったら、やめましょう。 複垢もマルチポストも両方。
guest

回答4

0

URLが変わりリプライのページが表示されますがこれはどのような仕組みなのでしょうか。

全く同じ質問を以前に答えていますが、当方は詳細な仕様は存じ上げていませんがAjaxなんかで読み込んでいるんじゃないんですか?

投稿2019/12/10 02:31

kyoya0819

総合スコア10429

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

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

0

Twitter の作りは調べていませんが Ajax に pushState を合わせた Pjax と呼ばれるものと思います。
検索してみてください。
https://www.google.com/search?q=Pjax
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history

投稿2019/12/11 06:48

x_x

総合スコア13749

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

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

0

アクセスをindexに集めて、パスでルーティングを行い、例えば、「/」ならタイムライン、「/tweet/reply」ならリプライ用のモーダルを表示とかにしているのではないかと思いました。

投稿2019/12/10 01:01

編集2019/12/10 01:03
madone99

総合スコア1857

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

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

0

これはモーダルウィンドウと呼ばれるものです。
基本的に同じHTMLに記述されることが多いとおもいますが、
分けたければ、分けたらいいんじゃないでしょうか?
分ける方法は下記のような方法があります。

jQueryを使う場合
【jQuery】htmlページをパーツごとに分けて読み込む方法

jQueryを使わず、JavaScriptを使う場合
静的HTMLでHTMLファイルを読み込む

JavaScriptを使わない場合
ページの中に他のHTMLを読み込んで表示する

投稿2019/12/10 00:59

H40831

総合スコア975

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問