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

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

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

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

HTML

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

CSS

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

Q&A

1回答

1058閲覧

bxslider サイト読み込み時画像がずれる

satoruko

総合スコア12

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/01/14 02:59

編集2022/01/12 10:55

前提・実現したいこと

bxsliderで写真のスライドを作っています。
実装はされるのですが、サイト読み込み時に画像がずれてしまい、通常最後の画像が最初に来てしまいます。

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

毎回ということはなく、一度サイトをどこか移動してまた読み込み直すと正常に動きますが、二回に一回は読み込み時、画像がずれる、且つサイズが少し縮小され2枚目の画像が見切れている。 常時正常に動いて欲しいので困っています。 ```![エラー時の状態]() ![正常の状態]()
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="apple-mobile-web-app-capable" content="yes"/> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.fitvids.js"></script> <script src="js/jquery.bxslider.min.js"></script> <link rel="stylesheet" href="css/jquery.bxslider.css"/> <style type="text/css"> body { /* 画像ファイルの指定 */ background-image: url(images/ilust/sato.png); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #ffffff; } .slider { position: relative; margin-top: 10p; vertical-align: middle; background-color: rgba(255,0,0,0); } .bx-wrapper { margin: 0 !important; position: relative; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: none !important; background: none !important; } .balloon1 { position: relative; display: inline-block; margin-top: 100px; margin-left: 50px; padding: 10px 10px; min-width: 120px; max-width: 100%; line-height: 100px; max-height: 100%; color: #555; background: #fff; border-radius: 30px; text-align: center; border: solid 3px #000000; transition: 1s; -webkit-transition: 1s; transform-origin: bottom; } .balloon1:before{ content: ""; position: absolute; top: 99%; left: 30%; margin-left: -15px; border: 12px solid transparent; border-top: 12px solid #fff; z-index: 2; } .balloon1::after { display: block; content: ""; padding-top: 100%; position: absolute; bottom: -30px; top: 100%; left: 30%; margin-left: -17px; border: 14px solid transparent; border-top: 14px solid #000000; z-index: 1; } .balloon1 p { position: relative; display: inline-block; text-align: center; vertical-align: middle; color:#d36a15; } .balloon1:hover{ transform: scale(2); font-size: 7px; } .first, .second { width: 100%; position: absolute; top: 0; left: 0; } .first { opacity: 1; font-size: 16px; } .second { opacity: 0; } .balloon1:hover .first { opacity: 0; } .balloon1:hover .second { opacity: 1; } .gif { margin-top: 10px; margin-bottom: 10px; margin-right: 50px; } </style> <script> var roomSt = "sato"; $(document).ready(function(){ $.get("kick.php", {room:roomSt, num:0}); $('.slider').bxSlider({ auto: false, pause: 5000, speed: 1000, mode: 'horizontal', pager:false,//下の●●●● slideWidth: 600, slideHeight: 700, onSliderLoad: function() { }, onSlideAfter: function($slideElement, oldIndex, newIndex) { console.log(newIndex); $.get("kick.php", {room:roomSt, num:newIndex}); } }); }); </script> </head> <body> <script type="text/javascript"> $(function(){ // サイトアクセス時にbodyを非表示にしてから、フェードインさせる $('#wrapper').hide(); $('#wrapper').fadeIn(2000); // リンククリック時にフェードアウトしてから、画面遷移する $('a.fadelink').click(function(){ // URLを取得する var url = $(this).attr('href'); // URLが空ではない場合 if (url != '') { // フェードアウトしてから、取得したURLにリンクする $('#wrapper').fadeOut(1000); setTimeout(function(){ location.href = url; }, 1000); } return false; }); }); </script> <div id="wrapper"> <div style="float: left; margin-top: 25px;"> <ul class="slider"> <li><img src="images/photo/sato/0.png"></li> <li><img src="images/photo/sato/1.png"></li> <li><img src="images/photo/sato/2.png"></li> <li><img src="images/photo/sato/3.png"></li> </ul> </div>

試したこと

sliderのcssに
padding: 0;
margin: 0;
を入れてみたが変わらず。

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

sliderとは関係ないコードもありますが、それが関係してる可能性も踏まえて全て入れています。

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

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

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

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

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

kei344

2019/01/14 03:04

「発生している問題」の部分はコードでないので、コードブロックで囲む必要はありません。
kei344

2019/01/14 03:09

コードブロックにはコード/エラーのみを入れるようにしてください。文章はコードブロック外にあるほうが読みやすいです。また、バッククオート3つの前後には改行を入れてください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
guest

回答1

0

ソースを見ての
非常にざっくりとした感想ですいませんが
JavaScriptを読み込む前にCSSを先に読み込ませて見てください。

画面上でレンダリングする時の処理の順番が問題なだけの気がします。

html

1<script stc......>~//jsファイルの読み込み 2<link rel.....>~//cssファイルの読み込み

となっているのを

html

1<link rel.....>~ 2<script stc......>~

にしてみるだけです。

投稿2019/01/23 15:10

MakotoOoka

総合スコア51

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問