20201013のCSSに関する記事は5件です。

CSS Gridでslickしたら中身がクソでかくなった時のメモ

現象

親要素にCSSグリッドレイアウトを使用していて子要素をslickでカルーセルにしたら、カルーセルの大きさがとんでもないことになった。

index.html
<div class="grid">
    <h2 class="title">hoge</h2>
    <ul id="slick" class="slider">
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
    </ul>
</div>
style.css
.grid {
    display: grid;
    grid-template:
        "title" auto
        "slider" auto /
        auto;
}
.title {
    grid-area: title;
}
.slider {
    grid-area: slider;
}
script.js
$('#slick').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: true,
    dots: true,
    draggable: true,
    infinite: true,
    slidesToScroll: 1,
    slidesToShow: 3
})

解決策

  • column幅をminmax(0, 1fr)
  • slickの要素にmax-width: 100%; min-width: 0px;
  • slickのオプションにrow:0を渡す
style.css
.grid {
    display: grid;
    grid-template:
        "title" auto
        "slider" auto /
        minmax(0, 1fr); /* 変更 */
}
.slider {
    grid-area: slider;
    max-width: 100%; /* 追加 */
    min-width: 0px; /* 追加 */
}
script.js
$('#slick').slick({
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: true,
    dots: true,
    draggable: true,
    infinite: true,
    slidesToScroll: 1,
    slidesToShow: 3,
    row:0 //追加
})

参考

Grid of Sliders - CSS Grid + Slick
Slick not working with CSS grids fr-units (fractions) · Issue #2959 · kenwheeler/slick · GitHub
slick - the last carousel you'll ever need

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ド初心者がWEBデザイナーになる話。 #2

初回の更新か早2ヶ月

お久しぶりの更新でございます。

以下、無駄話です。


初回更新時は目指すべき道がわからな過ぎて、webサイトの模写をしていたと思う。
最近はWordPressを使用したサイトの保守管理を行っていて、調べながらなんとか1つずつ問題を解消する日々。
ただ、解決出来る問題もあれば解決できない問題もあり…
根本的なWordPressへの理解が浅いんだなと思う。

作るものはコレ、例えば投稿ページをカスタムしてー
って、意味はわかるし仕組みはなんとなくわかるけど
じゃあそれを実践、ってなると全く何もできなくなってしまう。

プロの方々はどうやってWordPressを勉強したのだろうか。

本を頼りに、もともと作成してあったWebサイトをWordPressにしよう♪
みたいなのは完遂したが、それだけではちっとも知識として入っていないらしい。

やるべき事はわかっているのに、手段を調べてもさっぱり理解出来ていない現状。

まだまだ道は険しい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

デプロイ後に背景画像が適用されない場合の対処法

この記事を書いた背景

デプロイしたら背景画像が表示されない!
調べたら結構そういう人いたため。

実施環境

macOS Catalina 10.15.7
VS Code 1.50.0
Ruby 2.6.5
Rails 6.0.0
サーバー:AWS EC2
WEBサーバー:Nginx
アプリケーションサーバー:unicorn 5.4.1

対処法

僕はこれでいけました。
デプロイ後、本番に上がったアプリ等で背景画像が表示されます。

①背景画像は『/app/assets/images』フォルダに格納する

②背景画像を指定するCSSの種類を『SCSS』にする

③背景画像を指定するCSSの記述『background-image: image-url("画像名");』

scss
/*例*/
body { 
  background-image: image-url("wallpaper.jpg");
}

※この記述だと逆にローカル環境で背景画像が表示されない...笑

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初投稿!!Mathオブジェクトまとめ

JavaScriptで数当てゲームを作る中で使用したMathオブジェクトについてまとめてみました。
(*あくまでも使用したメソッドのみです。その他のMathメソッドについてはまた学習次第追記します。)
スクリーンショット 2020-10-13 14.04.37.png

スクリーンショット 2020-10-13 14.05.33.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSS BUTTONS

Untitled.png

Creative Button Hover

See the Pen Creative Button Hover by G Rohit (@grohit) on CodePen.

Button hover effect

See the Pen Button hover effect by Comehope (@comehope) on CodePen.

Creative Button Animation Effects | Only Using HTML & CSS

See the Pen Creative Button Animation Effects | Only Using HTML & CSS by Ahmad Emran (@ahmadbassamemran) on CodePen.

Add button hover animation

See the Pen Add button hover animation by Aaron Iker (@aaroniker) on CodePen.

Button hover effect

See the Pen Button hover effect by Comehope (@comehope) on CodePen.

More Related Article

50+ CSS BUTTONS

30+ Radio Button CSS style

9 Bootstrap Date picker

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む