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

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

ただいまの
回答率

90.52%

  • JavaScript

    16348questions

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

  • jQuery

    6674questions

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

slick.jsで、画像(スライド)の高さが小数点にならないようにするには?

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 220

WataruT

score 59

 スライダーのメイン画像の高さが小数点になってしまう

困っている事

整数でないと、画像が綺麗に見えない

http://kenwheeler.github.io/slick/

 ↓ slick jsのサイトのサンプルが既に小数点になっています。

※ 画像ではないですが、、
イメージ説明 

どこをいじれば、高さが整数になるのでしょうか。

以下、ソースです。

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>
 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/07/11 20:27

    何のために(どんな理由で)整数にするのかを質問文に追記してください。

    キャンセル

  • oikashinoa

    2018/07/11 20:32

    ソースかURLぐらいは書きましょう。あと、%指定されていたら小数点になるのかも。

    キャンセル

  • WataruT

    2018/07/11 20:41

    すみません、、追加しました。

    キャンセル

  • sousuke

    2018/07/12 13:44

    「小数点がでずに整数であること」と「画像がきれいに見える」かは関係がないと思います。端数処理して画像がきれいに見えるとはとても思えません

    キャンセル

回答 3

+3

小数点が発生することには特に問題はありません。

slick.js などのスライダーは画像を画面内に表示するために横幅100%などのスタイルが付いています。画面幅によっては横幅自体も半端なピクセル数になるし、縦のピクセル数は縦横比によって決まるため小数点以下が出やすいといえば出やすいです。

例えば画面幅(デバイス幅)が360pxのときに、横456px縦123pxの画像を表示しようとした場合、横幅100%なら縦は97.1052...pxとかになります。これを整数値に無理やり直すために97pxにしたら、画像が歪む事になります。

さらに、現在の高解像度ディスプレイの場合、1CSSピクセルをそれ以上のドットで表現する状況になっているので、それを踏まえた画像の準備をされることをお勧めします。(これについては記事を参照してください)


【今さらだけど、Webデザイン制作における解像度のおはなし】
https://qiita.com/imusam/items/cd4f8da49c3ab73d6475#ディスプレイの解像度

【いまさら聞けないRetina対応のための「ピクセル」の話 | Rriver】
https://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays

【「解像度」の理解があいまいだったので備忘録としてまとめてみた | 株式会社INDETAIL - インディテール】
https://www.indetail.co.jp/blog/171208/

【スマートフォンで画像がぼやけるのはなぜ?「デバイスの画像解像度」とスマホ表示について調べてみました。 | 独学でWebデザインまとめんばーず |Webクリオンライン】
https://web-creators-tips.com/matome/スマートフォンで画像がぼやけるのはなぜ?「デ/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/12 10:13

    ご回答ありがとうございます。ただ、今回のdemoは画像が使われておりません。また、ratina対応で、割り切れる倍数の画像を設置しても、高さが2px増えたり、さらに小数点がついてしまいます。slick.js で、その辺りを改善する策はないのでしょうか。

    キャンセル

  • 2018/07/12 10:19

    もう一度書きますが、小数点が発生することには特に問題はありません。

    キャンセル

  • 2018/07/12 10:49

    かしこまりました。小数点が出ることにより、画像が歪むので、綺麗な画像にならないかと思っていました。

    キャンセル

  • 2018/07/12 10:58

    小数点が出ても目視でわかるほど画像が歪むことはありませんよ。別の原因があるのでは?

    キャンセル

checkベストアンサー

+2

やっつけ感ですが...~
例えば1のところを変えたかったらstyle="height:xxpx"で指定しては?

slick.jsが作ったH3ダグなんで、XPathとかで指定しないといけないから無し
<h3 style="height:190px">1</h3>

正しい指定方法が有るかもしれないので、settingsを見てみて下さい。

adaptiveHeightをtrueにすると画像に合わせた高さになるのかな。

…本家サイトのDocumentって見ないんですか?見て、試してダメなら質問しましょう。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/12 10:42

    ご回答ありがとうございます。見ました。。試しました、、。でも、ダメだったので、質問しました。「あ、それね」的な方に聞いた方が早いと思います。僕もかなり調べるタイプですが、結局、時間がかかった後、「あ、それね、こうするんよ」って言われた時、あー、時間無駄やったー、、ってなるんで、、

    adaptiveHeight は、あまり関係しておりませんでした。

    キャンセル

  • 2018/07/12 11:36 編集

    試したんですね。試した事は書いてくれるとコチラの考えも発散しなくて良いのではないでしょうか?(書いてないので調べてないのかと勘違いしてました。ごめんなさい。)

    使った画像と歪んだ結果?をアップすると話早いと思います。もしかして小さき画像が拡大された時の画質が気になっている?

    > 時間無駄やったー、、ってなるんで、、
    ソレ、自分の事だけでなく回答者の事も考えてくださいね。回答者は複数人いますし、面識ない人に助けてもらうんですから。

    キャンセル

  • 2018/07/12 17:42

    そうですよね。。自分の事しか考えておりませんでした。失礼しました。

    キャンセル

  • 2018/07/12 18:00

    自分が試した事を事細かに漏れ無く書いている質問は回答が付きやすいし、解決もしやすい傾向が有ると思います。

    回答する方もやりやすいですし、困っているんだ〜助けようって気になるもんです。

    キャンセル

+1

slick.js愛用者です。
slick.jsはレスポンシブ対応なので中身の要素に応じてslick-slideの高さが決まります。
質問者様はレスポンシブ対応を予定しておりましたでしょうか。
もしそうでないならばslick-slideの子要素に当たるimgにheightを入れて見てはいかがでしょうか。
小要素にheightを指定する
slick-slideのheightが整数になる

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/17 17:59

    ご回答いただきありがとうございます。
    レスポンシブを予定しております。
    slickjsのサイトが既に縦がパーセント表示になっていたので、
    気になっておりました。
    ただ、元画像と同じ横サイズ、
    ratinaの場合は、倍のサイズにすれば解決できそうです。
    ただ、スマホの場合は、iPhone7以外は、小数点が出ても仕方ないかなと思いました。

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16348questions

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

  • jQuery

    6674questions

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