質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

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

Q&A

1回答

610閲覧

画像をジャバスクリプトを用いて、画面サイズの横幅いっぱいでダイナミックに動かしたい

mikiko.s

総合スコア14

JavaScript

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

0グッド

0クリップ

投稿2020/11/13 08:21

編集2020/11/13 10:23

前提・実現したいこと

下記のような動きをサイトに入れたいと考えています。
https://aqua2020.sakura.ne.jp/new/

次のサイトのソースをコピーして入れているのですが、
ビジュアルのイメージをもう少し横幅いっぱいのイメージに
したいと考えています。
(画面拡大した時に、横幅100%は無理でも、
もう少し大きく見せたいと思っています。)
https://codepen.io/zadvorsky/pen/PNXbGo

ジャバスクリプトで画像サイズが計算されているようなのですが、
どのようにさわれば実現できるのかがわからず、
ご教示いただけますと幸いです。

なお、文字数の制限でソースコードをこちらには載せられませんでしたので
下記からジャバスクリプトのソースをご覧いただけますでしょうか。
https://aqua2020.sakura.ne.jp/new/moove.text

どうぞよろしくお願いいたします。

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

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

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

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

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

miyabi_takatsuk

2020/11/13 10:08

ご自身でどこまでやったかのソースコードを記載してください。
mikiko.s

2020/11/13 10:21

コメントありがとうございます。 ソースコードなのですが、文字数制限にひっかかってしまい、載せることができませんでした。 下記からソースコードをご覧いただけますので、可能であればご覧いだけますと幸いです。 https://aqua2020.sakura.ne.jp/new/moove.text
miyabi_takatsuk

2020/11/13 10:31 編集

JavaScriptなのに、.txtなんですか? というか、下記のサイトの動き、の方は、質問者さんが作った物ということですか?ドメインが同じだったので・・・。 話があべこべだと思うのですが・・・。
miyabi_takatsuk

2020/11/13 10:40

ひとまず、コード量がかなり多く、 一回答で回答できるものではありません。 (お金払って検証してもらうレベルに近い) なので、検証の仕方や、こうやって該当箇所を特定する、 といった、方法の提示しかできませんが、それでもいいでしょうか?
mikiko.s

2020/11/13 10:44

申し訳ありません。。どうぞよろしくお願いいたします。
guest

回答1

0

ブラウザの検証を使い、どう動いているかみましょう。
そうすれば、canvas要素を、ウィンドウサイズに合わせて動的に変えているのがわかります。

そこから、読み込んでいるJavaScriptの処理の中で、canvas要素を、動的に処理している場所を見つけ、
そこから、大きさ調整の処理を見つけ、調整する、といった手順でしょう。

とかく、一個一個の処理を、コンソールでどこを通っているかを確認しつつ、しらみ潰しで該当処理の箇所を見つけるしかありません。

投稿2020/11/13 15:24

miyabi_takatsuk

総合スコア9555

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問