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

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回答

2729閲覧

slick.jsにて横幅がはみ出てしまう

TMTN

総合スコア52

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クリップ

投稿2021/06/26 17:30

自己紹介サイトを作成しており、スマホに対応させたく調整を行っているところです。

そこでslickを使用してスライドショーを導入しておりますが、サイト全体が右に余白が出てしまっております。

原因を調べていたところ恐らく以下画像にあるようにslickの画像が飛び出ているのが原因かと思われます。

イメージ説明

「slider-photo img」に対してwidth:90%と指定しておりますが、改善方法が分からない状況です。

分かる方いらっしゃいましたらお力添えを頂きたいです。
宜しくお願い致します。

html

1 <h2 class="photo-title fade-in-bottom flex font-title animate" id="photo"> 2 PHOTO 3 </h2> 4 <div class="photo-inner flex"> 5 <div class="photo-inner-items flex"> 6 <div class="slider-photo flex"> 7 <div><img src="img/難波.jpg" alt="難波" /></div> 8 <div><img src="img/渋谷.jpg" alt="渋谷" /></div> 9 <div><img src="img/横浜.jpg" alt="横浜" /></div> 10 <div><img src="img/東山.jpg" alt="東山" /></div> 11 <div><img src="img/博多.jpg" alt="博多" /></div> 12 <div><img src="img/花園.jpg" alt="花園" /></div> 13 <div><img src="img/祇園.jpg" alt="祇園" /></div> 14 <div><img src="img/吉祥寺.jpg" alt="吉祥寺" /></div> 15 <div><img src="img/秋葉原.jpg" alt="秋葉原" /></div> 16 <div><img src="img/新宿.jpg" alt="新宿" /></div> 17 <div><img src="img/川越.jpg" alt="川越" /></div> 18 <div><img src="img/池袋.jpg" alt="池袋" /></div> 19 <div><img src="img/天王寺.jpg" alt="天王寺" /></div> 20 <div><img src="img/梅田.jpg" alt="梅田" /></div> 21 <div><img src="img/伏見稲荷.jpg" alt="伏見稲荷" /></div> 22 </div> 23 <div class="work-font font-title"> 24 - PHOTO一覧 - 25 <a href="photo.html" 26 ><i class="work-arrow fas fa-chevron-right"></i 27 ></a> 28 </div> 29 </div>

css

1 2h2#photo { 3 padding-top: 12rem; 4 margin-top: -8rem; 5} 6 7.photo-inner { 8 width: 100%; 9 height: 45rem; 10 flex-direction: column; 11 margin-bottom: 5rem; 12 13 &-items { 14 width: 90%; 15 height: 40rem; 16 margin-top: 8rem; 17 position: relative; 18 flex-direction: column; 19 20 &::after { 21 width: 100%; 22 height: 40rem; 23 content: ""; 24 position: absolute; 25 left: 0rem; 26 top: 1rem; 27 transform: skewY(-5deg); 28 z-index: -1; 29 transform-origin: bottom left; 30 background: $main-color-b; 31 } 32 33 .slider-photo { 34 div { 35 img { 36 margin: 0 auto; 37 } 38 } 39 } 40 41 .work-font { 42 font-size: 1.5rem; 43 color: $main-color-w; 44 45 a { 46 i { 47 transition-duration: 0.4s; 48 padding: 2rem; 49 z-index: 10; 50 } 51 } 52 53 i:hover { 54 transform: translateX(20px); 55 } 56 57 .work-arrow { 58 color: $main-color-w; 59 padding: 1rem; 60 } 61 } 62 } 63} 64 65.photo-inner { 66 &-items { 67 .slider-photo { 68 width: 90%; 69 height: 20rem; 70 } 71 72 & div img { 73 width: 25rem; 74 height: 18rem; 75 } 76 77 .slick-arrow { 78 cursor: pointer; 79 position: absolute; 80 top: 0; 81 bottom: 0; 82 margin: auto; 83 } 84 85 .prev-arrow { 86 color: $main-color-w; 87 left: -1.5rem; 88 top: 8rem; 89 z-index: 10; 90 } 91 92 .next-arrow { 93 color: $main-color-w; 94 right: -1.5rem; 95 top: 8rem; 96 } 97 } 98} 99

js

1$(".slider-photo").slick({ 2 infinite: true, 3 autoplay: true, 4 arrow: true, 5 slidesToShow: 3, 6 slidesToScroll: 1, 7 autoplaySpeed: 4000, 8 centerMode: true, 9 centerPadding: "-10%", 10 prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>', 11 nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', 12 responsive: [ 13 { 14 breakpoint: 1024, 15 settings: { 16 infinite: true, 17 autoplay: true, 18 arrow: true, 19 slidesToShow: 2, 20 slidesToScroll: 1, 21 autoplaySpeed: 4000, 22 prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>', 23 nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', 24 }, 25 }, 26 { 27 breakpoint: 600, 28 settings: { 29 infinite: true, 30 autoplay: true, 31 arrow: true, 32 slidesToShow: 1, 33 autoplaySpeed: 4000, 34 prevArrow: '<i class="prev-arrow fas fa-chevron-left"></i>', 35 nextArrow: '<i class="next-arrow fas fa-chevron-right"></i>', 36 }, 37 }, 38 ], 39}); 40 41$(".slider-works").slick({ 42 slidesToShow: 3, 43 responsive: [ 44 { 45 breakpoint: 1024, 46 settings: { 47 slidesToShow: 2, 48 }, 49 }, 50 { 51 breakpoint: 600, 52 settings: { 53 slidesToShow: 1, 54 }, 55 }, 56 ], 57}); 58 59$(document).ready(function () { 60 $("#top-button").hide(); 61 $(window).on("scroll", function () { 62 if ($(this).scrollTop() > 100) { 63 $("#top-button").fadeIn("fast"); 64 } else { 65 $("#top-button").fadeOut("fast"); 66 } 67 scrollHeight = $(document).height(); 68 scrollPosition = $(window).height() + $(window).scrollTop(); 69 footHeight = $("footer").innerHeight(); 70 if (scrollHeight - scrollPosition <= footHeight) { 71 $("#top-button").css({ 72 position: "absolute", 73 }); 74 } else { 75 $("#top-button").css({ 76 position: "fixed", 77 }); 78 } 79 }); 80 81 $("##top-button").click(function () { 82 $("body,html").animate( 83 { 84 scrollTop: 0, 85 }, 86 800 87 ); 88 return false; 89 }); 90});

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

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

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

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

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

guest

回答1

0

自己解決

恥ずかしながら本件が原因でなかった為、クローズ致します。

投稿2021/06/26 19:10

TMTN

総合スコア52

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問