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

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

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

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

2264閲覧

slickを使用して作成したスライドのレイアウトが崩れてしまう

nakamurasan

総合スコア12

HTML

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/10/04 23:18

slickを使いスライドを作成したのですがレイアウトが崩れてしまいますイメージ説明
添付画像のようにdotsが縦に表示されてしまったり
marzin:auto;を指定しても左詰めになってしまっています。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>home</title> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 9 <link rel="stylesheet" href="css/style.css"> 10 <link rel="stylesheet" href="css/slick.css"> 11 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> 13 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 14 <script src="js/slick.min.js"></script> 15 <script type="text/javascript" src="js/guiter.js"></script> 16</head> 17<body> 18 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 19 <a class="navbar-brand" href="#">楽器</a> 20 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 21 <span class="navbar-toggler-icon"></span> 22 </button> 23 24 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 25 <ul class="navbar-nav mr-auto"> 26 <li class="nav-item active"> 27 <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a> 28 </li> 29 <li class="nav-item"> 30 <a class="nav-link" href="#">商品情報</a> 31 </li> 32 <li class="nav-item"> 33 <a class="nav-link" href="#">新着情報</a> 34 </li> 35 <li class="nav-item"> 36 <a class="nav-link" href="#">問い合わせ</a> 37 </li> 38 <li class="nav-item dropdown"> 39 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 40 教室 41 </a> 42 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 43 <a class="dropdown-item" href="#">ギター教室</a> 44 <a class="dropdown-item" href="#">ピアノ教室</a> 45 <div class="dropdown-divider"></div> 46 <a class="dropdown-item" href="#">教室料金</a> 47 </div> 48 </li> 49 <li class="nav-item"> 50 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> 51 </li> 52 </ul> 53 <form class="form-inline my-2 my-lg-0"> 54 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 55 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button> 56 </form> 57 </div> 58 </nav> 59 <div id="cap"> 60 <div><img src ="images/guiter1.jpeg" width="500px" height="250px"></div> 61 <div><img src ="images/guiter2.jpeg" width="500px" height="250px"></div> 62 <div><img src ="images/guiter3.jpeg" width="500px" height="250px"></div> 63 </div> 64 65</body>

css

1 2body { 3 position: relative; 4} 5/* トップページCSS */ 6.top{ 7 position:absolute; 8 top:0; 9 left:0; 10 right:0; 11 bottom:0; 12 margin:auto; 13 height:10%; 14 margin:auto; 15} 16/* ホームページCSS */ 17#cap{ 18 margin:auto; 19} 20

js

1$(document).ready(function(){ 2 $('#cap').slick({ 3 slidesToShow : 1, 4 slidesToScroll:1, 5 autoplay:true, 6 dots:true, 7 }); 8}); 9

解決方法を教えていただけないでしょうか?

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

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

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

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

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

Lhankor_Mhy

2019/10/05 00:46

「marzin:auto;を指定しても左詰めになってしまっています。」とのことですが、ご提示のCSSで margin:auto をつけているのは、.top だと思います。 しかし、HTMLに top というクラスの要素が見当たりませんでした。 これは、セレクタの間違いでしょうか?
Lhankor_Mhy

2019/10/05 01:02

ああ、#cap の方でしたか。失礼しました。
guest

回答1

0

ベストアンサー

添付画像のようにdotsが縦に表示されてしまったり

ドキュメントのとおり、slick-theme.cssを読み込んでみてください。
Getting Started | slick - the last carousel you'll ever need

marzin:auto;を指定しても左詰めになってしまっています。

'width'の値が[auto]の場合
'width'以外の[auto]は"0"として扱われます。

水平方向に値として[auto]を使用した場合 - CSS Dencitie

ということですから、解決方法は、widthauto以外の値を与えることです。

投稿2019/10/05 01:12

Lhankor_Mhy

総合スコア35865

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

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

nakamurasan

2019/10/05 15:34

theme.cssしていしたつもりが漏れていました。 ありがとうございます。 また、左詰めの問題も解決できました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問