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

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

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

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

343閲覧

自動スライドショーWebライブラリ

Madreader

総合スコア13

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/03/10 05:26

編集2018/03/10 07:29

Swiperを使って
スライドショー入れてみましたが
なぜかスライドが枠からずれてしまいます。

Styleタグ内みましたが
どこを調整すればいいのか見当つかないので
ヒントやキーワードだけでもいいので、
教えてください。

こちらのサイトのヘッダーにあるスライドは成功しましたが、
ページ記事内のスライド(立体効果がある)はエラーになります。
ズレてしまいます↓↓
https://jpthing.blogspot.jp/2018/03/blog-post.html

コードはこちらになります。
HTMLコード内では<HTML><Style><Javascript>の順ではいってます。

HTML

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" /> 2 3 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 5<!-- Slider main container --> 6<div class="sample sample02"> 7 <div class="swiper-container"> 8 <div class="swiper-wrapper"> 9 <div class="swiper-slide"> 10 <div class="sample02-inner"> 11 <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br class="u-d-n u-d-i-md" />うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p> 12 </div> 13 </div> 14 15 <div class="swiper-slide"> 16 <div class="sample02-inner"> 17 <p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</p> 18 </div> 19 </div> 20 21 <div class="swiper-slide"> 22 <div class="sample02-inner"> 23 <p>では、わたくしはいつかの小さなみだしをつけながら、<br class="u-d-n u-d-i-md" />しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p> 24 </div> 25 </div> 26 </div> 27 28 <div class="swiper-button-prev"> 29 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 27 44"> 30 <path class="c-arrow c-arrow-prev" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" /> 31 </path></svg> 32 </div> 33 <div class="swiper-button-next"> 34 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 27 44"> 35 <path class="c-arrow c-arrow-next" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" /> 36 </path></svg> 37 </div> 38 39 <div class="swiper-pagination"></div> 40 </div> 41</div> 42<style> 43.sample02 .swiper-wrapper { 44 align-items: stretch; 45} 46 47.sample02 .swiper-slide { 48 display: flex; 49 justify-content: center; 50 align-items: center; 51 height: auto; 52 padding-bottom: 25px; 53} 54 55.sample02 .sample02-inner { 56 display: flex; 57 justify-content: center; 58 align-items: center; 59 width: 100%; 60} 61 62.sample02 .swiper-button-prev, 63.sample02 .swiper-button-next { 64 display: none; 65 width: 20px; 66 height: 32.58px; 67 fill: #666; 68 stroke: none; 69 stroke-width: 0; 70 background-image: none; 71 z-index: 10000; 72} 73 74.sample02 .swiper-container-horizontal > .swiper-pagination-bullets { 75 bottom: 0; 76} 77 78.sample02 .swiper-pagination-bullet-active { 79 background: #666; 80} 81 82@media (min-width: 768px) { 83 .sample02 .swiper-slide { 84 padding: 50px; 85 } 86 87 .sample02 .swiper-button-prev, 88 .sample02 .swiper-button-next { 89 display: block; 90 } 91 92 .sample02 .swiper-container-horizontal > .swiper-pagination-bullets { 93 bottom: 10px; 94 } 95} 96</style> 97<script> 98window.addEventListener('DOMContentLoaded', function() { 99 var swiper = new Swiper('.sample02 .swiper-container', { 100 pagination: '.swiper-pagination', 101 paginationClickable: true, 102 nextButton: '.swiper-button-next', 103 prevButton: '.swiper-button-prev', 104 loop: true, 105 speed: 500, 106 autoplay: 3000, 107 spaceBetween: 0, 108 effect: 'coverflow' 109 }); 110}, false); 111</script>

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

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

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

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

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

Lhankor_Mhy

2018/03/10 07:02

拝見した限り、ずれているところが分からなかったのですが、どのような表示になるのを想定していますか?
Madreader

2018/03/10 07:26

コメントありがとうございます。swiper公式サイトのdemoに変えたら大丈夫でしたが、ここ掲載のコードだとダメです。新しいページにエラー状態を貼りなおしました。 https://jpthing.blogspot.jp/2018/03/blog-post.html
kei344

2018/03/10 07:44

「公式サイトのdemo」はどれのことでしょうか。URLを提示できませんか?
Madreader

2018/03/10 08:12 編集

コメントありがとうございます。http://idangero.us/swiper/demos/ のAutoPlayに変えたらちゃんと動きました。エラーが起こるのは、http://web改善事例.com/js-swiper-sample/#sample02 のコンテンツスライダーをコピペしたときです。ちゃんと動くのはページ内のヘッダー?に貼ってあります。変な動きをするスライドはこちらの記事内になります。https://jpthing.blogspot.jp/2018/03/blog-post.html
Lhankor_Mhy

2018/03/10 09:36

coverflow のサンプルと質問者のサンプルのCSSで異なるのは、* {box-sizing: border-box;} でした。試してみてはいかがでしょう。
Madreader

2018/03/10 10:16

すごいです!できました!!Coverflowでわかったんですね。勉強になります!
Lhankor_Mhy

2018/03/10 10:39

ご解決してなによりです。回答欄から自己解決の登録をお願いします。
Madreader

2018/03/10 10:43

最初から最後まで申し訳ないです。助言通り自己解決いたします。心よりありがとうございました。
guest

回答1

0

自己解決

paddingとborderを含むborder-boxに指定すると直りました。

css

1* {box-sizing: border-box;}

投稿2018/03/10 10:50

Madreader

総合スコア13

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問