現象

親要素に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

・htmlで記述した、プルダウンメニューの作り方

<form id="form>
   <select name="select">
      <option value="index.html>日本語</option>
      <option value="index-en.html>英語</option>
      <option value="index-zh.html>中文</option>
   </select>
</form>

・フォームに必要不可欠なname属性（入力項目をサーバーで扱うときに使う名前）はselectタグに記述する。optionタグには書かない。
・各optionタグにそのデータを表すvalue属性を記述する。
・プルダウンメニュー(select要素）の場合、selectタグのname属性と選択されたoptionタグのvalue属性がセットになって、サーバーに送信される。

ここから、javascriptを記述していきます。

'use strict';
document.getElementById('form').select.onchange=function(){
location.href=document.getElementById('form').select.value;
}

このコードは、onchangeイベントプロパティが発生したら呼び出される関数を作っている。
onchangeイベントは、「フォームに入力された内容が変わったとき」に発生する。
その関数の処理は、locationオブジェクトのhrefプロパティ（表示しているURL）に、フォームで選択されたoptionのvalue(URL)が代入される。
ここで、疑問なのが、なぜ「.select.value;」となっているのか？
言い換えると、selectタグ内にはvalue属性を書いてないで、optionタグ内にvalue属性を書いたのに、なぜselectの中でvalueプロパティを読み取っているのか？
その理由は、『プルダウンメニューの場合は選択されているoptionのvalue属性を調べるために、その親要素であるselectのvalueプロパティを読み取る。』

そして、script.js全体のコードを以下で記述します。

'use strict';

const lang=document.querySelector('html').lang;

if(lang==='ja'){
    document.querySelector('option[value="index.html"]').selected=true;

}else if(lang==='en'){
    document.querySelector('option[value="index-en.html"]').selected=true;

}else if(lang==='zh'){
    document.querySelector('option[value="index-zh.html"]').selected=true;
}

document.getElementById('form').select.onchange=function(){
    location.href=document.getElementById('form').select.value;
}

documentオブジェクトのquerySelectorメソッドは、()内に書かれた「セレクタ」にマッチする要素を取得する。セレクタとはCSSで使うやつです。例えば、
2行目のセレクタはタイプセレクタで指定している。
4行目のif文ないの処理では、('option[value="index-en.html"]');となっていて、これは属性セレクタです。
属性セレクタとは、　要素名[属性名＝"属性値"]　で指定する方法です。
ここでまた注意点があります。
（複数の要素がマッチしたらどうなるの？という点)
この場合、htmlではマッチした全てが対象になるが、
javascriptでは『最初にマッチした要素』一つだけ対象になる。

参考：javascript超入門　P198~

どうも7noteです。jQueryで同じ属性値同士を連動させる方法について。

全く同じチェックボックスが複数個所にある場面（通常時＆モーダル等）に出くわしたとき、通常画面ではチェックを入れているのにモーダルの画面にあるチェックボックスが反映されないので困ってしまいます。

今回は離れた場所でも同じ属性値を持つチェックボックス同士を連動させる方法について書いていきます。

この記事はjQueryを使用しています。（jQueryって何？という方はこちら）

ソース

index.html

//通常通り見えている用
<div class="normal">
  <label><input type="checkbox" value="りんご">りんご</label>
  <label><input type="checkbox" value="ばなな">ばなな</label>
  <label><input type="checkbox" value="みかん">みかん</label>
</div>

// モーダルで出てくる用
<div class="mordal">
  <label><input type="checkbox" value="りんご">りんご</label>
  <label><input type="checkbox" value="ばなな">ばなな</label>
  <label><input type="checkbox" value="みかん">みかん</label>
</div>

script.js

$(function(){
  $("input[type='checkbox']").on('change', function(){                 //チェックボックス（type='checkbox'）の値が変更されたとき・・・
    cbv = $(this).val();                                               //クリックされたチェックボックスのvalue値を変数に格納
    if( $(this).prop('checked')){                                      //もしクリックされたチェックボックスがチェックされていたら・・・
      $("input:checkbox[value='" + cbv + "']").prop('checked',true);   //同じvalueを持つチェックボックスは全部チェックを入れる
    }else{
      $("input:checkbox[value='" + cbv + "']").prop('checked',false);  //逆にチェックが外れていたら全部チェックを外す。
    }
  });
});

書いてみると大したことはなく、スクリプトだけなら10行以内で書けるほど簡単に書けます。
それぞれのスクリプトが行なっている処理はコメントで書いている通りですが、「チェックボックスにチェックが入ったタイミングで起動し、チェックボックスの状態を確認。その後、それに合わせて同じ値を持つ物に対して全部チェックを入れるか、外すか」という処理をしています。

まとめ

javascriptを勉強しはじめの頃は、1文字ズレたり、変数なのか文字列なのかの区別を付けさせるのに苦労しますが、1つ1つ丁寧に解読していけば分からないこともない程度なので、valueじゃなくnameでやったり、他の条件を追加するなどして使ってみてください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

初回の更新か早2ヶ月

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

以下、無駄話です。

---

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

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

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

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

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

まだまだ道は険しい。

【課題】乱数を発生させて、偶数が生成された場合はフォワードに、
奇数が生成された場合はリダイレクトに処理を転送する

【サーブレットクラス】

package p185;

import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/P185")
public class P185 extends HttpServlet {
    private static final long serialVersionUID = 1L;
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        int Ran=(int)(Math.random()*10);
        if(Ran%2==1) {
            response.sendRedirect("/example/redirected62.jsp");
        }else{
            RequestDispatcher dispatcher =request.getRequestDispatcher("/forwarded62.jsp");
            dispatcher.forward(request,response);
        }
    }
}

a

【リダイレクト(jspファイル)】

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>リダイレクトサンプル</title>
</head>
<body>
<h1>リダイレクトのサンプルを表示</h1>
</body>
</html>

【フォワード(jspファイル)】

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォワードサンプル</title>
</head>
<body>
<h1>フォワードのサンプルを表示</h1>
</body>
</html>

この記事を書いた背景

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

実施環境

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");
}

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

JavaScriptで数当てゲームを作る中で使用したMathオブジェクトについてまとめてみました。
(＊あくまでも使用したメソッドのみです。その他のMathメソッドについてはまた学習次第追記します。)

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

autofocus属性

「autofocus: true」とはページを読み込んだらすぐにautofocus属性を記述している部分にカーソルが移動して入力状態になる、というものです。

具体例

一覧ページからマイページへ移動し名前を変更しようとする場合。
　
一覧ページからマイページボタンをクリックしてマイページに行くと自ら名前のフォーム部分を選択しなくてもカーソルが移動した状態でマイページが表示されます。そのためすぐに編集をすることができます！

---

⚠️autofocus:trueは1つのhtmlファイルに1つまでということを押さえておきましょう。

記述の仕方

ここでは上記画像のコードをそのままご紹介します。
全体の中で「autofocus: ture」がどのように使用されているのかを把握しましょう。
環境：rails 6.0.0、VScode 1.46、macOS Catalina 10.15

app/views/users/show.html.erb

<div class="account-page">
  <div class="account-page-title">
    <h1>マイページ</h1>
  </div>
  <div class="account-info">
    <h2>ユーザー情報</h2>
  </div>
  <div class="account-page-form">
    <%= form_for(current_user) do |f| %>
      <div class="form-field">
        <div class="form-field-name">
          <%= f.label :name %>
        </div>
        <div class="form-field-name">
          <%= f.text_field :name, autofocus: true %>
        </div>
      </div> 
      <div class="form-field">   
        <div class="form-field-email">
          <%= f.label :email %>
        </div>
        <div class="form-field-email">
          <%= f.email_field :email %>
        </div>
        <br>
      </div>
      <%= f.submit "更新する" %>
      <br>
      <%= link_to "ログアウト", destroy_user_session_path, method: :delete%>
    <% end %>
  </div>
</div>

おわりに

参考サイトURL→Uhyohyoweb
「autofocus: trueの使用法」に関する記事はいかがでしたか？
autofocus自体はとっても簡単ですが知らないと「何それ？」ってなりますよね。
簡単なことすぎてピックアップされないので今回記事にしてみました！
少しでも理解のお役に立てたら幸いです。
また、いたらない点がございましたらご指摘ください。（初投稿かつ初学者なので皆さんのご指摘がとっても学びにつながります！）
皆さん、最後までご覧いただきありがとうございます。それではまた別の記事でお会いしましょう〜〜！