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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1006閲覧

小説のページをめくるように、ボタンクリックで横スクロールさせたい。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2018/11/20 01:07

編集2022/01/12 10:55

前提・実現したいこと

いつもお世話になっています。
初めての投稿になります。

Kindleで小説を読むように、横長で画面いっぱい縦書きのWebサイトを作成しています。
現在は手動で横スクロールが可能な状態なのですが、要素をクリックすることでページをめくるように表示されている画面幅だけ横(右から左方向)に移動させたいと思っているのですが、js、jqueryともに上手くいかず…。

ちなみに画面幅はCSSのvhとvwで指定しています。
同じように画面の幅をjsかjqueryで取得しながら、なおかつボタンクリックすることでoverflow-x:scroll;を指定した要素を横にスクロールさせたいのですが…。
「ページトップへ戻る」のような仕組みかと思い色々と試したのですが、横向きに移動させる方法が分からず質問させていただきました。

イメージ説明

コメントでご指摘いただいた例での動作結果はこちらになります。

イメージ説明

$(function() { $(".navigate-left").click(function(){ $('.container_single').css({left: "100%"}) }); });

僕の力量では難しく、アドバイスを頂きましたが悪戦苦闘しております。
具体的なコードがありましたら載せていただけると大変嬉しく思います。

よろしくお願いします。

もし解決されたら、横向きになりながらコーラ一気飲み余裕なぐらい元気でます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

Squishyさんがjsの処理をどの程度出来るのかが分からないのですが
ボタンのクリックイベントで下記の処理などで移動します

js

1$('要素').css({left: "100%"})

追記

移動する領域を作ればいいですよ
言葉では難しいので分かりやすい参考サイトあったので貼っておきますね
コピペして、動きを確認して、構造(?)を確認してみてください
jqueryでsliderを自作するなら

投稿2018/11/20 02:22

編集2018/11/20 03:47
akihiro3

総合スコア955

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

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

退会済みユーザー

退会済みユーザー

2018/11/20 03:34

bodyの中にあるcontent要素のため、たとえば $(function() { $(".navigate-left").click(function(){ $('.container_single').css({left: "100%"}) }); }); のような指定だとbodyごと移動してしまいました。 また最後までスクロールさせる(何回もボタンを押す)ことになるため、何度でも押すことのできる仕組みが必要ですが、僕には技術足らずかもしれないので具体的な例があるとすごく助かります。 またコメントがありましたらその都度、試してみたいと思います。 ご返信ありがとうございます。 この動作の結果は画像として載せておきました。
akihiro3

2018/11/20 03:47

追記しておきました
退会済みユーザー

退会済みユーザー

2018/11/23 16:43

返信が遅れて申し訳ありません。 やはり僕の力量では難しく…あれから悪戦苦闘しております。 具体的に、クリックした幅だけ要素(bodyで大丈夫です。)を画面幅だけ左に動かす仕組みがありましたら載せていたけると、ようやく横になりながらコーラ一気飲みできるようになるかもしれません。
akihiro3

2018/11/23 16:54

現状のhtml,css,jsのコードを見せてください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問