20200705のCSSに関する記事は13件です。

投稿日：2020-07-05T23:32:01+09:00

【初心者でもわかる】�グラデーションをつかって、コップに好きなジュースを注ぐ方法

どうも、7noteです。今回はCSSグラデーションをつかってコップに好きなジュースを注いで飲みたいなと思います。

でも今は夏なので、水分補給のために水を飲みましょう。

材料はこちら(1人前)

ファイル CSSプロパティ意味

index.html

style.css background: linear-gradient(); 背景にグラデーションを指定

作り方

index.htmlでコップの場所を用意。

style.cssでコップを表現。

style.cssでコップに水を注いで完成。おまけ. 色を変えていろんなジュースに変えてみる。

1.index.htmlでコップの場所を用意。
index.html
<div class="cup"></div>
2. style.cssでコップを表現。
style.css
.cup {
    width: 100px; /* コップの横幅を指定 */
    height: 150px; /* コップの高さを指定 */
    border: solid 1px #999; /* コップの縁を描画 */
    border-top: none; /* コップの上は線を消す */
}
3. style.cssでコップに水を注いで完成。
style.css
.cup {
    background: linear-gradient(transparent 30%, #EEEEFF 30%);
    /* 上から30%までは透明で、30%〜100%までは水色にする */
}
＼完成／

おまけ. 色を変えていろんなジュースに変えてみる。
style.css
.cup {
    /*オレンジジュース*/
    background: linear-gradient(transparent 30%, #FDB92C 30%);

    /*コーラ*/
    background: linear-gradient(transparent 30%, #222222 30%);

    /*飲み残されたコーラ*/
    background: linear-gradient(transparent 80%, #222222 80%);
}
オレンジジュース

コーラ

飲み残されたコーラ

解説・作り方のコツ

背景色のlinear-gradientは本来グラデーションを作る物なので、綺麗な色を指定すればカクテルのようなグラデーションのある飲み物を再現することも可能！

「,」（カンマ）ごとに1色と距離を指定でき、今回だと、「transparent 30%」と「#EEEEFF 30%」の2つに分けて作られています。前の「transparent 30%」と言うのが、上から0%〜30%までは透明にしなさいと言う意味になり、後ろの「#EEEEFF 30%」が、30%〜100%までを水色にしなさいと言う意味になる。

まとめ

グラデーションマスターになると、画像を使わなくて済む箇所がめっちゃ増える。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

ファイル	CSSプロパティ	意味
index.html
style.css	background: linear-gradient();	背景にグラデーションを指定

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T23:13:30+09:00

2020/6/30~ プログラミング学習状況

プログラミング学習 2週間目

6/30~7/5

使用した学習教材

Udemy

学習範囲

6/30
セクション5の66から78

7/1
セクション6の79から86

模写コーディング

FaceBook ログイン画面
https://www.facebook.com/

<アカウント作成画面（モーダルウィンドウ）>

学習時間

6/30
Udemy:2時間半

7/1
Udemy:２時間半
模写:3時間
計：５時間半

7/2
模写：5時間半

7/3
模写＋インプット：2時間半
（細かいスタイリング）

7/4
模写：1時間半
（細かいスタイリング）
インプット:1時間
(モーダルウィンドウについて）

7/5
インプット＋模写：3時間
（モーダルウィンドウ作成）

環境構築

・Google Chrome（ブラウザ）
・Visual Studio Code（コードエディター）

感想など

インプットした内容をすぐに活かせるようなアウトプットは有益だなと感じた。

例えば、ここのスタイルってどうやってつけるんだろうとか、必要にならないとまず調べようともしなかったので、アウトプットをしないと上達しないってのは実感。

明日以降は今行っている模写コーディングを終わらせ、Udemyでjavascriptの学習に戻る。

学習のルーティングとかも組み込んでいきたい。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T23:10:42+09:00

模写コーディング FaceBook ログイン画面その3

模写コーディング

模写するサイト

FaceBook ログイン画面
https://www.facebook.com/

作成時間

その１：3時間
その２：5時間半(+2時間半）
その3 ： 5時間半
計：16時間半

環境構築

・Google Chrome（ブラウザ）
・Visual Studio Code（コードエディター）

模写する上でのルール

1.文字のコピペはOK
2.フォントの種類は何でもOK
3.少しのズレはOK
4.背景画像も入れる
5.角丸やフォントの大きさも近いものにする
6.レスポンシブデザインにも対応する

https://codelearn.jp/articles/mosya#1HTMLCSS

進捗

モーダルウィンドウに使用するアカウント作成画面を作りました。

次回

javascriptを記述して、モーダルウィンドウの表示/非表示機能を追加する。

必須入力事項のエラーの出し方と正規表現のインプットし、導入する。

font awesomeのアイコンを使用する。
（はてなマークとか）

レスポンシブデザインのインプット。
以上。

アウトプットを行うとモチベーションが以前よりも上がって楽しい。。。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T22:36:14+09:00

スタイルを当てやすくする豆知識　padding/margin編　初心者

padding/marginのリセット
styles.css
* {
  padding: 0;
  margin : 0;
}
サイトの模写をしていると、なぜか意図しない余白が付けられて困ったときの対処法として、

上記のコードをCSSに記述することで、意図しない余白を消すことができる。

※　「*」
これは、全称セレクタと言って、全ての要素を対象にする。

参考サイト:http://www.htmq.com/tutorial/08_5.shtml

これを記述した途端に、思い通りのスタイルを当てることができるようになったので、共有します。

基本的な知識だけど、これからのコードを書く際の準備に付け加えていきます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T19:55:51+09:00

liタグの中のaタグを親要素いっぱいにし、かつテキストを上下左右中央にする方法。

liタグの中のaタグを親要素いっぱいにし、かつテキストを上下左右中央にする方法について説明します。

【お願い】
自分も同じ内容で困っていたため、たくさん調べてようやくこの方法にたどり着き、解決することはできました。しかし、理論？はいまいち分かっていません。理論や仕組みが分かる方教えてください。また、問題点等もあれば教えていただきたいです。

【手順】
① liタグの中のaタグを親要素いっぱいにする。
② liタグの中のaタグのテキストを上下左右中央にする。

4つのボタンが横に並んでいるメニューのようなデザインにしました。
名前はシンプルにTest1...Test4です。
test.html
    <ul>
      <li>
        <a href="#">Test1</a>
      </li>
      <li>
        <a href="#">Test2</a>
      </li>
      <li>
        <a href="#">Test3</a>
      </li>
      <li>
        <a href="#">Test4</a>
      </li>
    </ul>
test.css
ul {
  display: flex;
}

li {
  list-style: none;
  width: 200px;
  height: 100px;
  background-color: #ffdab9;
  border: 1px solid #515151;
}

a {
  text-decoration: none;
  background-color: #ffc0cb;
  color: #515151;
}
liタグとaタグの違いをわかりやすくするために色を変えました。
liタグがオレンジでaタグがピンクです。

上記のコードだとこの状態です。↓

【① liタグの中のaタグを親要素いっぱいにする。】

liタグの中に
display: table;
aタグの中にdisplay: table-cell;を書きます。

aタグ（ピンク）が親要素いっぱいになりました。

【② liタグの中のaタグのテキストを上下左右中央にする。】

liタグにvertical-align: middle;
aタグにtext-align: center;を書く。

完成です。
test.css
ul {
  display: flex;
}

li {
　list-style: none;
  width: 200px;
  height: 100px;
  background-color: #ffdab9;
  border: 1px solid #515151;
  display: table;
  text-align: center;
}

a {
　text-decoration: none;
  background-color: #ffc0cb;
  display: table-cell;
  vertical-align: middle;
　color: #515151;
}
display: table;はレスポンシブデザインで自由がきかないと出てきたので試してみました。

どなたかこの方法をつかってレスポンシブデザインに対応させる方法か、liタグをa要素いっぱいにしてテキストを上下中央にし、レスポンシブデザインに対応させる方法を教えてください??‍♀️

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T19:07:24+09:00

[CSS]ぷよぷよするお寿司（）のセレクターを的確に選び出す[ぷよぷよ前編]

目的

実務的なHTMLを使う時の感情を、複雑で混乱する嫌な気持ち→簡単な気持ちに変化させる。

CSSでセレクタを適切に選び出せる。

今日やること

ぷよぷよ寿司ゲーム
https://flukeout.github.io
※正確には寿司ではありませんwww

学び

A.className level 7 of 32

Aタグのクラス名に一致する要素を選択する。

小さいオレンジのみ選択しろ
orange.small
注意

親子で指定するのか、子のクラスだけで指定するのかを間違えやすい。
たとえば、"弁当のオレンジ"を指定したい場合は、下記記述
bento .small
A * level 11 of 32

Aの中にある要素を選択する。

plateに乗っている要素を選択しろ
plate *
注意
plate
だと、中の要素ではなくplate自身が選択される。

A + B level 12 of 32

Aの直後にあるBを選択する。

**plateの直後のりんごを選択しろ
plate + apple
A > B level 14 of 32

Aの中にある要素Bを選択する。

皿の上にあるリンゴを選択しろ
plate > apple
:first-child level 15 of 32

最初の子要素を選択する。

皿の一番上のオレンジを選択しろ
plate :first-child
***注意

これはなぜ一番下がfirstchildではないのか（HTML上は確かに一番上がfirstchild)が理解できていない。

:only-child level 16 of 32

兄弟要素がない子要素を選択する。

皿の上のリンゴときゅうりを選択しろ
plate :only-child
:nth-child(A)　level 18 of 32

A番目の子要素を選択する。

３番目の皿を選択しろ
plate:nth-child(3)
:nth-last-child(A) level 19 of 32

??

これはうまくできませんでした。
明日もまたやろう。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T19:07:14+09:00

プチ・スケジュール管理システム作ってみた

こんにちは、還暦女子です。

今度はスケジュール管理表を作ってみました。
お店や病院などの営業予定や出勤表、シフト表、マイスケジュール等CSSを工夫すれば色々使えるかなと思って考えました。
初めての試みがいっぱいで穴だらけのコードですが、とりあえず一通り動きました。

作りたい仕様

ログイン管理内で編集、別ページのプレビューで表示
HTMLで入力可
祝日は自由にカスタマイズ
毎月自動更新
データベースを使わないライトな作り

サイト設計とデザイン

AdobeXDで作成しました。
サイトデザイン以外にも設定イメージ、マニュアル、プロトタイプでプレゼンテーションも使える便利マルチツールです。書き出しは画像形式以外にもプラグインを使えばPDFも可能です。

デザインを元にHTMLとCSSのテンプレートを作成します。
今回は水色ベース。

管理画面イメージ

プレビュー画面イメージ

カレンダー管理画面

ログインすると当月の管理画面に移行します。
tableとname属性もphpのfor文で書き出し。
Postで変数に変換するのもfor文。プログラムって一つ一つ書かなくていいから便利です。
カレンダー部分はネットに載ってるものを拾ってきてカスタマイズしました。

更新するとfile_put_contents()でjsonファイルに上書きします。
ファイル名は変数を入れてdays'.$m.'.jsonとして常に当月のjsonを取得。
jsonは1月から12月の12個のファイルを作っておき、毎年このデータを使い回す予定です。
ログインとログアウトのページは省略します。

当月のカレンダー

control.php

<?php
//当月のカレンダー
    session_start();
    session_regenerate_id(true);
    if(isset($_SESSION['login']) === false){
        echo 'ログインしていません。';
        exit();
    }

    //XSS
    function html_esc($word){
        return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
    }

    //トークン生成
    function getCSRFToken()
    {
        $nonce = base64_encode(openssl_random_pseudo_bytes(48));
        setcookie('XSRF-TOKEN', $nonce);
        return $nonce;
    }
    $token = getCSRFToken();
    $token = html_esc($token);


    date_default_timezone_set('Asia/Tokyo'); //東京時間にする
    $y = date('Y');
    $m = date('m')+0;//+intをつけないと祝日設定できない
    $week = ['日','月','火','水','木','金','土'];
    //月末の日を取得
    $lastday = date("t", mktime(0, 0, 0, $m , 1 , $y));

    //json更新
    require_once(dirname(__FILE__).'/timer.php');
    //ファイル名は月で変動
    $file = file_get_contents('./json/days'.$m.'.json');                                     $data = mb_convert_encoding($file, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $array = json_decode($data,true);  


    if($_SERVER['REQUEST_METHOD'] === 'POST'){
        //postトークン追加
        function validateCSRFToken ($post_token)
        {
            return isset($_COOKIE['XSRF-TOKEN']) && $_COOKIE['XSRF-TOKEN'] === $post_token;
        }
        if(isset($_POST['csrf_token']) && validateCSRFToken($_POST['csrf_token'])){
            //OKだったら空文字でスルー
            echo '';
        } else {
            echo 'トークンが不正です。';
            exit();
        }    
        //パスをサーバーと合わせておく
        header('Access-Control-Allow-Origin: ファイルパス');
        header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
        header('X-Frame-Options: SAMEORIGIN');
        //postトークンここまで

        //name値をfor文で書き出し
        for($i = 0; $i < $lastday; $i++){
            $name[$i] = html_esc($_POST['name'.$i]);
        }

        //JSON形式に変換 
        $json = json_encode($name);
        //JSON書き出し
        //タイマー設定が作用するので前月にもデータを入れておかないと消えてしまう
        file_put_contents('./json/days'.($m-1).'.json',$json);
        file_put_contents('./json/days'.$m.'.json',$json);
        //jsonファイルを取得、valueに再代入
        $file = file_get_contents('./json/days'.$m.'.json');
        //文字コードをUTF-8に変換する
        $data = mb_convert_encoding($file, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
        $array = json_decode($data,true);
    }

?>
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>スケジュールカレンダー管理画面 | 当月</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="common/reset.css">
    <link rel="stylesheet" href="common/style.css">
    <!--ファビコン32x32-->
    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<div id="wrapper">
   <header id="logout" class="clearfix"><a href="logout.php">ログアウト</a></header>
   <main>
     <h1 id="title">Myカレンダー管理画面</h1>
     <div id="infoLeft">
        <div>
            <p id="ym"><?php echo $y; ?>年<span><?php echo $m; ?></span>月</p>
            <p id="next"><a href="control2.php">翌月<span class="material-icons md-24">keyboard_arrow_right</span></a></p>
            <p id="view"><a target="_blank" rel="noopener" href="schedule.php">プレビュー</a></p>
        </div>
        <p id="info">HTMLも入力できます。<br>リンクや画像も貼ってカスタマイズができます。入力後更新ボタンを押すと表示用のページに自動入力されます。変更の場合は上書きしてください。</p>
     </div>
     <form action="" method="post">
     <!-- トークンの値をvalueに -->
     <input type="hidden" name="csrf_token" value="<?php echo $token ?>">
     <table id="cale">
        <tr><?php
                foreach($week as $weeks){
                    echo '<td>'.$weeks.'</td>';
                }            
            ?>
        </tr>
        <?php
      // 1日の曜日を取得
            $wd1 = date("w", mktime(0, 0, 0, $m, 1, $y));
            // その数だけ空白を表示
            for ($i = 1; $i <= $wd1; $i++) {
            echo "<td>　</td>";
            }

            // 1日から月末日までの表示
            $d = 1;
            $n = 0;

            //休日を共通にしたかったので別ファイルに
            require_once(dirname(__FILE__).'/holiday.php');
            //holiday.phpで祝日設定
            for($d = 1; $d <= $lastday; $d++) {
                echo '<td class="'.$holiday[$d].'"><span class="days">'.$d.'</span><textarea class="memo" name="name'.$n.'" value="'.$array[$n].'">'.$array[$n].'</textarea></td>';
                // 今日が土曜日の場合は…
                if (date("w", mktime(0, 0, 0, $m, $d, $y)) == 6) {
                    // 週を終了
                    echo "</tr>";
                    // 次の週がある場合は新たな行を準備
                    if (checkdate($m, $d + 1, $y)) {
                        echo "<tr>";
                    }
                }
                $n++;
            } 

            // 最後の週の土曜日まで移動
            $wdx = date("w", mktime(0, 0, 0, $m + 1, 0, $y));
            for ($i = 1; $i < 7 - $wdx; $i++) {
            echo "<td>　</td>";
            }
        ?>
     </table>
     <p id="update"><input type="submit" value="更新する"></p>
     </form>
   </main>
   <footer>
       <small>Copyright 2020 All Rights Reserved. 無断転載禁止</small>
   </footer>
</div>  
</body>
</html>

翌月のカレンダー

最初の月設定
$m = date('m')+1になってます。

control2.php

<?php
//翌月のカレンダー
    session_start();
    session_regenerate_id(true);
    if(isset($_SESSION['login']) === false){
        echo 'ログインしていません。';
        exit();
    }

    //XSS
    function html_esc($word){
        return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
    }

    //トークン生成
    function getCSRFToken()
    {
        $nonce = base64_encode(openssl_random_pseudo_bytes(48));
        setcookie('XSRF-TOKEN', $nonce);
        return $nonce;
    }
    $token = getCSRFToken();
    $token = html_esc($token);


    date_default_timezone_set('Asia/Tokyo'); //東京時間にする
    $y = date('Y');
    $m = date('m')+1;//+intをつけないと祝日設定できない
    $week = ['日','月','火','水','木','金','土'];
    //月末の日を取得
    $lastday = date("t", mktime(0, 0, 0, $m , 1 , $y));

    //jsonから翌月のデータ取得
    $file = file_get_contents('./json/days'.$m.'.json');                                     $data = mb_convert_encoding($file, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $array = json_decode($data,true);

    //次月に日付分の空文字設定jsonへ書き出し
    //年末だけ特別
    if($m === 12){
        $y = date('Y')+1;
        $days = [];
        for($i= 0; $i < date("t", mktime(0, 0, 0, 1 , 1 , $y)); $i++){
            $days[$i] = '';
        }
        $file = json_encode($days);
        file_put_contents('./json/days1.json',$file);
    } else {
        $days = [];
        for($i= 0; $i < date("t", mktime(0, 0, 0, ($m+1) , 1 , $y)); $i++){
            $days[$i] = '';
        }
        $file = json_encode($days);
        file_put_contents('./json/days'.($m+1).'.json',$file);
    }    

    if($_SERVER['REQUEST_METHOD'] === 'POST'){
        //postトークン追加
        function validateCSRFToken ($post_token)
        {
            return isset($_COOKIE['XSRF-TOKEN']) && $_COOKIE['XSRF-TOKEN'] === $post_token;
        }
        if(isset($_POST['csrf_token']) && validateCSRFToken($_POST['csrf_token'])){
            //OKだったら空文字でスルー
            echo '';
        } else {
            echo 'トークンが不正です。';
            exit();
        }    
        //パスをサーバーと合わせておく
        header('Access-Control-Allow-Origin: ファイルパス');
        header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
        header('X-Frame-Options: SAMEORIGIN');
        //postトークンここまで

        //name値をfor文で書き出し
        for($i = 0; $i < $lastday; $i++){
            $name[$i] = html_esc($_POST['name'.$i]);
        }

        //JSON形式に変換 
        $json = json_encode($name);
        //JSON書き出し、パーミッション変更忘れずに
        file_put_contents('./json/days'.$m.'.json',$json);

        //jsonファイルを取得、valueに再代入
        $file = file_get_contents('./json/days'.$m.'.json');
        //文字コードをUTF-8に変換する
        $data = mb_convert_encoding($file, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
        $array = json_decode($data,true);

    }

?>
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>スケジュールカレンダー管理画面 | 翌月</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="common/reset.css">
    <link rel="stylesheet" href="common/style.css">
    <!--ファビコン32x32-->
    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<div id="wrapper">
   <header id="logout" class="clearfix"><a href="logout.php">ログアウト</a></header>
   <main>
     <h1 id="title">Myカレンダー管理画面</h1>
     <div id="infoLeft">
        <div>
            <p id="ym"><?php echo $y; ?>年<span><?php echo $m; ?></span>月</p>
            <p id="next"><a href="control.php">当月<span class="material-icons md-24">keyboard_arrow_right</span></a></p>
            <p id="view"><a target="_blank" rel="noopener" href="schedule2.php">プレビュー</a></p>
        </div>
        <p id="info">HTMLも入力できます。<br>リンクや画像も貼ってカスタマイズができます。入力後更新ボタンを押すと表示用のページに自動入力されます。変更の場合は上書きしてください。</p>
     </div>
     <form action="" method="post">
     <!-- トークンの値をvalueに -->
     <input type="hidden" name="csrf_token" value="<?php echo $token ?>">
     <table id="cale">
        <tr><?php
                foreach($week as $weeks){
                    echo '<td>'.$weeks.'</td>';
                }            
            ?>
        </tr>
        <?php
      // 1日の曜日を取得
            $wd1 = date("w", mktime(0, 0, 0, $m, 1, $y));
            // その数だけ空白を表示
            for ($i = 1; $i <= $wd1; $i++) {
            echo "<td>　</td>";
            }

            // 1日から月末日までの表示
            $d = 1;
            $n = 0;

            //休日を共通にしたかったので別ファイルに
            require_once(dirname(__FILE__).'/holiday.php');
            //holiday.phpで祝日設定
            for($d = 1; $d <= $lastday; $d++) {
                echo '<td class="'.$holiday[$d].'"><span class="days">'.$d.'</span><textarea class="memo" name="name'.$n.'" value="'.$array[$n].'">'.$array[$n].'</textarea></td>';
                // 今日が土曜日の場合は…
                if (date("w", mktime(0, 0, 0, $m, $d, $y)) == 6) {
                    // 週を終了
                    echo "</tr>";
                    // 次の週がある場合は新たな行を準備
                    if (checkdate($m, $d + 1, $y)) {
                        echo "<tr>";
                    }
                }
                $n++;
            } 

            // 最後の週の土曜日まで移動
            $wdx = date("w", mktime(0, 0, 0, $m + 1, 0, $y));
            for ($i = 1; $i < 7 - $wdx; $i++) {
            echo "<td>　</td>";
            }
        ?>
     </table>
     <p id="update"><input type="submit" value="更新する"></p>
     </form>
   </main>
   <footer>
       <small>Copyright 2020 All Rights Reserved. 無断転載禁止</small>
   </footer>
</div>  
</body>
</html>

カレンダープレビュー画面

ここは管理画面と作りはほぼ一緒。file_get_contents()でjsonからデータを取得してます。
翌月の方は省略します。

schedule.php

<?php
    date_default_timezone_set('Asia/Tokyo'); //東京時間にする
    $y = date('Y');
    $m = date('m')+0;
    $week = ['日','月','火','水','木','金','土'];
    $lastday = date('t', mktime(0, 0, 0, $m, 1, $y));

    //json取得
    $file = file_get_contents('./json/days'.$m.'.json');                                     $data = mb_convert_encoding($file, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $array = json_decode($data,true);

    //デコード
    function decode_html($word){
        return html_entity_decode($word);
    }

?>
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>スケジュールカレンダー | 当月</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="common/reset.css">
    <link rel="stylesheet" href="common/style.css">
    <!--ファビコン32x32-->
    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
<body>
<div id="wrapper">
<header id="frontHeader">
    <h1 id="title">Myカレンダー予定表</h1>
    <p>管理画面から書き出されたものが表示されています。</p>
</header>
<main id="scheduleMain">
    <h2 id="ym"><?php echo $y; ?>年<span><?php echo $m; ?></span>月</h2>
    <p id="next"><a href="schedule2.php">翌月<span class="material-icons md-24">keyboard_arrow_right</span></a></p>
    <table id="cale">
        <tr>
            <?php
                foreach($week as $weeks){
                    echo '<td>'.$weeks.'</td>';
                }       
            ?>
        </tr>
        <tr>
        <?php
            // 1日の曜日を取得
            $wd1 = date('w', mktime(0, 0, 0, $m, 1, $y));
            // その数だけ空白を表示
            for ($i = 1; $i <= $wd1; $i++) {
                echo "<td>　</td>";
            }
            // 1日から月末日までの表示
            $d = 1;
            $n = 0;
            //当月用休日設定
            require_once(dirname(__FILE__).'/holiday.php');
            //holiday.phpで祝日$holiday設定
            for($d = 1; $d <= $lastday; $d++){
                echo '<td class="'.$holiday[$d].'"><span class="days">'.$d.'</span><div class="memoUp">'.decode_html($array[$n]).'</div></td>';
                if (date("w", mktime(0, 0, 0, $m, $d, $y)) == 6) {
                    // 週を終了
                    echo "</tr>";
                    // 次の週がある場合は新たな行を準備
                    if (checkdate($m, $d + 1, $y)) {
                        echo "<tr>";
                    }
                }
                $n++;
            }
            // 最後の週の土曜日まで空欄を作る
            $wdx = date("w", mktime(0, 0, 0, $m + 1, 0, $y));
            for ($i = 1; $i < 7 - $wdx; $i++) {
            echo "<td>　</td>";
            }
        ?>
        </tr>
    </table>
</main>
<footer>
       <small>Copyright 2020 All Rights Reserved. 無断転載禁止</small>
   </footer>
</div>
</body>
</html>

祝日の共通設定ファイル

ここは各ファイルに共通インクルードとして一つにしました。書き換えを楽にする為に。
Google APIを使うのも有りですが、独自で休日を入れたかったりローカルで編集したいこともあり自作しました。
Classの付与をif文で条件分岐させてます。
毎年手書きで更新する必要がありますが。。。

※6月から作ったので6月から記述してます。

holiday.php

<?php
//祝日の配列1
$holiday = [];
for($d; $d <= $lastday; $d++){
    $holiday[$d] = 'none';
    if($m === 6){//月
            $holiday[$d] = 'none';
    }
    if($m === 7 ){
        if($d === 23 || $d === 24){
            $holiday[$d] = 'holiday';
        } else {
            $holiday[$d] = 'none';
        }
    }
    if($m === 8){
        if($d === 10){
            $holiday[$d] = 'holiday';
        } else {
            $holiday[$d] = 'none';
        }
    }
    if($m === 9){
        if($d === 21 || $d ===22){
            $holiday[$d] = 'holiday';
        } else {
            $holiday[$d] = 'none';
        }
    }
    if($m === 10){
            $holiday[$d] = 'none';
    }
    if($m === 11){
        if($d === 3 || $d ===23){
            $holiday[$d] = 'holiday';
        } else {
            $holiday[$d] = 'none';
        }
    }
    if($m === 12){
        if($d === 23 || $d ===22){
            $holiday[$d] = 'holiday';
        } else {
            $holiday[$d] = 'none';
        }
    }
}

自動更新タイマー設定

これが一番大変でした。
postしたデータはDBに格納することが多いと思いますが、DBを使うまでもないしお手軽に組み込みたい。
でも外部データを使わないとpostデータは失われてしまう。
そこでjsonを使うことにしました。
json使うの初めてです。

管理画面もプレビュー画面もここからfile_put_contents()とfile_get_contents()でデータを上書き、取得しています。
月が変わった時、先月のデータを取ってきて当月に上書きし翌月は日付分の空文字を挿入。
タイマーはif文でstrtotime(date('Y-m-d H:i:s')）より大か小かで振り分けてますが、これでいいのかイマイチ不安。
小刻みのタイマーテストはしてみましたが、ひと月たったらちゃんと動いているかどうか…

サーバ上で時をみながら確認して、変わってなかったら考えることにします。気長にゆるゆる開発。

timer.php

<?php
//毎月1になったら自動でカレンダーを繰越し

//当月になったら先月のデーターを移行する
function daily($num){
    $file = file_get_contents('./json/days'.($num-1).'.json');
    $data = mb_convert_encoding($file, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); 
    $array = json_decode($data,true);
    $json = json_encode($array);
    file_put_contents('./json/days'.$num.'.json',$json);
}

//年初めの時
function start_daily($num){
    $file = file_get_contents('./json/days12.json');
    $data = mb_convert_encoding($file, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN'); 
    $array = json_decode($data,true);
    $json = json_encode($array);
    file_put_contents('./json/days'.$num.'.json',$json);
}

if(strtotime(date('Y-01-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-02-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    start_daily(1);

} elseif (strtotime(date('Y-02-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-03-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(2);

} elseif (strtotime(date('Y-03-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-04-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(3);

} elseif (strtotime(date('Y-04-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-05-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(4);

} elseif (strtotime(date('Y-05-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-06-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(5);

} elseif (strtotime(date('Y-06-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-07-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(6);

} elseif (strtotime(date('Y-07-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-08-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(7);

} elseif (strtotime(date('Y-08-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-09-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(8);

} elseif (strtotime(date('Y-09-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-10-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(9);

} elseif (strtotime(date('Y-10-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-11-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(10);

} elseif (strtotime(date('Y-11-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-12-01 00:00:00')) > strtotime(date('Y-m-d H:i:s'))){
    daily(11);

} elseif (strtotime(date('Y-12-01 00:00:00')) < strtotime(date('Y-m-d H:i:s')) && strtotime(date('Y-12-31 23:59:59')) > strtotime(date('Y-m-d H:i:s'))){
    daily(12);

} else {
    //json初期値とりあえず作っておく
    for($i=1; $i < 13; $i++){
    file_put_contents('./days/days'.$i.'.json',null);
    }
}

とりあえず作ってみて思ったこと

簡単なシステムでも、一つの形になるものを作るのってすごく難しいですね。
ほんの少し操作性がいいものを追加しようとすると2、3日は軽く悩む。
今までのコードは全て捨てて、新しく作り変えることも少なくないです。
まだまだ初心者なので知らないこともいっぱいあるし。

でも動いた時の感動は恐悦至極。これがあるからやめられない。
そろそろクラスやフレームワークも触ってみたいし、DBも挑戦してみようかななどと思っています。

就職が決まって6月下旬から働き始めたので、今までみたいにまとまった時間は作れなくなりました。
希望職のwebデザインですが仕事でプログラムを組むことは、まずなさそう。HTMLは触りますが。

でも開発はこれからも続けていくつもりです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T17:07:11+09:00

簡単なJavaScriptを使って、睡眠時間が6時間未満だと千鳥のノブから怒られる実装をしてみた。

仕様書

　・JavaScriptでチェックボタンの有り無しで、条件分岐させて処理させる
　・チェックボタンは2つ用意し、4パターン条件をかく
　・診断ボタンを押すと、診断結果を新らしく表示させる
　・診断ボタンの下にidやクラスのみ記述し、そこに文章が追加されるようにする
　・診断ボタン及び、追加で新しく表示させる文章にanimate.cssを使用

実装画面

昨日の睡眠時間は？っという質問にすればよかった・・・・あとで気づきました。

コード（HTML,CSS,JavaScript書いてます）
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
    rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
  </head>
  <body>
    <div id="sleeping">睡眠時間についてお聞きいたします<br>

    <form name="form1" action="" class="form1">
      <input id="Checkbox1" type="checkbox"/><label for="Checkbox1">睡眠時間6時間未満</label><br/>
      <input id="Checkbox2" type="checkbox"/><label for="Checkbox2">睡眠時間6時間以上</label><br/>
      <input type="button" value="診断" onclick="onButtonClick();" class ="animate__animated animate__rubberBand"/>
    </form>
    <div id="output" class="animate__animated animate__heartBeat output"></div>
  </div>
  </body>

  <style>
    #sleeping{
      font-size: 25px;
      text-align: center;
    }
    #sleeping .form1{
      font-size: 15px;
    }
    #output{
      font-size: 30px;
    }
    .animate__rubberBand,
    .output
    {
      animation-iteration-count: infinite;
    }

  </style>

  <script type="text/javascript" language="javascript">
    function onButtonClick() {
        check1 = document.form1.Checkbox1.checked;
        check2 = document.form1.Checkbox2.checked;
        target = document.getElementById("output");

    if (check1 == true && check2 == false) {
          target.innerHTML = "寝ろ！脳が疲れとるかもしれん（千鳥のノブ風）";
       }  else if(check1 == true && check2 == true){
        target.innerHTML = "両方選択すなー！（千鳥のノブ風）";
       } else if(check1 == false && check2 == false){
        target.innerHTML = "どちらかを選択せぇ（千鳥のノブ風）";
    };

    if (check2 == true && check1 == false) {
          target.innerHTML = "よだれダコくん睡眠は十分、明日も頑張れ";
    };
    }
  </script>
</html>
なんだかノブの声が聞こえてくるような・・・・

簡単な解説

診断ボタンにonclick属性を追加
<input type="button" value="診断" onclick="onButtonClick();" 
class ="animate__animated animate__rubberBand"/>
↑onclickに記述しているのはJavaScriptで実装する関数名ですね。これ便利。

ちなみに、このanimate__animatedと記述しているのは、animate.cssを使用する際に必要となります。
バージョン4になってからの情報が少ないため、animate.cssが動かなかった場合公式ページをみるといいかもしれませんね。

animate__rubberBandはanimate.cssのアニメーションの効果です。色々用意されているので、公式ページより選んでみてください。

超簡単にanimate.cssを実装する方法を詳しく
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
を<head>に追加。

アニメーションしたい箇所にクラスを設けて、クラス名に
animate__animated ○○
○○には追加したいアニメーション名を記述する（デフォルトの設定が動きます）

実装した感想

チェックの有無を簡単なJavaScriptで実装できるのは良いなと思いました。
あと、チェックボタンが押された瞬間に動作するような実装やJQueryで書いてみたりしてみるともっと面白いものができそうだなぁと思いました。

PS.
アニメーションでノブのツッコミの画像が出てくると面白そうですね。
あと読み上げソフトで発火した文章を読み上げてくれるか、ノブの声に近づけた声を作って読み上げさせたり、やりたいこと挙げると私はきりがありません。。。

animate.cssで出来ると思うので、ご興味ある方追加して遊んでみてください。

また、ここは違う、ここはこうしたほうが良いかも？等々ございましたら、ご指摘いただけますと幸いです。
最後までみていただき、ありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T14:24:47+09:00

[css]input要素のtext入力フォーム左に余白を空ける方法

実装イメージ

余白ナシ▼

を
余白アリ▼　にしたいということ。

考え方

フォーム内に余白を作成したいのでpaddingを使う。
だが、paddingで指定した余白分フォームが広がってしまう...

なのでwidthを設定すればいい。

コード
 padding-left: 4%;
 width: 96%;
コードを記述するとこうなる。
＃ただし、フォームを親要素分一杯に配置したい場合は,width: 100%;でよい。

良かったら参考にして下さい！

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T02:26:14+09:00

【絶対失敗しない】Vueで作るCSSナビゲーションメニューまとめ１０選

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ

ヘッダーデザインにコピペで使えるナビゲーションメニュー３選

動きは下の画像のような感じになります

１. ヘッダーで使いやすいシンプルなナビゲーションメニュー

２. ボタンが滑らかに拡大するかわいらしいナビゲーションメニュー

３. ボタンが縮小しながら立体的に浮き出るナビゲーションメニュー

4. ボタンが凹みながら縮小する超動くナビゲーションメニュー

コードを確認する

マウスオーバーでドロップダウンするナビゲーションメニュー３選

動きは下の画像のような感じになります

１. ドロップダウンするシンプルなナビゲーションメニュー

２. ボタンが浮く！独特でかわいいナビゲーションメニュー

３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. hoverするとボタンが浮き上がるナビゲーションメニュー

２. hoverするとボタンが凹むナビゲーションメニュー

３. hoverするとボタンが立体的に浮き出るナビゲーションメニュー

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T02:26:14+09:00

【Vueエンジニアが作る】絶対失敗しないCSSナビゲーションメニューまとめ１３選

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ

ヘッダーデザインにコピペで使えるナビゲーションメニュー３選

動きは下の画像のような感じになります

１. ヘッダーで使いやすいシンプルなナビゲーションメニュー

２. ボタンが滑らかに拡大するかわいらしいナビゲーションメニュー

３. ボタンが縮小しながら立体的に浮き出るナビゲーションメニュー

4. ボタンが凹みながら縮小する超動くナビゲーションメニュー

コードを確認する

マウスオーバーでドロップダウンするナビゲーションメニュー３選

動きは下の画像のような感じになります

１. ドロップダウンするシンプルなナビゲーションメニュー

２. ボタンが浮く！独特でかわいいナビゲーションメニュー

３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. hoverするとボタンが浮き上がるナビゲーションメニュー

２. hoverするとボタンが凹むナビゲーションメニュー

３. hoverするとボタンが立体的に浮き出るナビゲーションメニュー

コードを確認する

初心者でも簡単！動きのあるナビゲーションバーデザイン３選

動きは下の画像のような感じになります

１. マウスオーバーで文字が太くなるナビゲーションバーデザイン

２. マウスオーバーで文字が傾くナビゲーションバーデザイン

３. transform: skew＋hoverでシンプルなナビゲーションバーデザイン

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T02:26:14+09:00

【絶対失敗しない】CSSナビゲーションメニューまとめ１０選(Vueで使えるアニメーション)

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ

ヘッダーデザインにコピペで使えるナビゲーションメニュー３選

動きは下の画像のような感じになります

１. ヘッダーで使いやすいシンプルなナビゲーションメニュー

２. ボタンが滑らかに拡大するかわいらしいナビゲーションメニュー

３. ボタンが縮小しながら立体的に浮き出るナビゲーションメニュー

4. ボタンが凹みながら縮小する超動くナビゲーションメニュー

コードを確認する

マウスオーバーでドロップダウンするナビゲーションメニュー３選

動きは下の画像のような感じになります

１. ドロップダウンするシンプルなナビゲーションメニュー

２. ボタンが浮く！独特でかわいいナビゲーションメニュー

３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. hoverするとボタンが浮き上がるナビゲーションメニュー

２. hoverするとボタンが凹むナビゲーションメニュー

３. hoverするとボタンが立体的に浮き出るナビゲーションメニュー

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-05T00:55:27+09:00

Slickを使って画像のスライダーを実装する方法

はじめに

画像のスライダーを実装したいと思い、Slickを導入するも、意図した動作を起こせず苦戦したので、同じような状況の方の参考になればと思い掲載します。

Slickを利用する

Slick（スリック）とは

jQeryをベースに作成された、文字や画像のコンテンツをスライド移動させることのできるプラグインです。
マウスによるドラッグ、矢印キー・ドット等での画像選択、無限ループ等、オプション機能を活用することで、自由度の高い実装が可能です。

Slick Git-Hub

導入

1. 好きな名前で新規フォルダを作成します。

今回は"Slick-test"という名前で作成しました。
続けて、Slick-test内に、
css、img、jsフォルダを作成します。

2. 下記リンクを開き、"get it now" を押下する。

Slickのダウンロード

3. "Download Now"を押下する。

4. Slick-zipファイルを解凍すると下記のような内容となっています。

上記の画像の色分け説明を参考に、
作成したSlick-test内の各フォルダへコピーペーストします。

VSコードでSlick-testフォルダを開いた際、
上記のような内容・階層になれば、準備は完了です。

imgフォルダには使用したい画像を入れてください。
また、以下のファイルを作成します。
- index.htmlファイル
- cssフォルダ内にmain.cssファイル
- jsフォルダ内にmain.jsファイル

今回は3種類のスライダーを作成

見本

無限ループスライダー

下部のドット・左右の矢印キーにて画像切り替えるスライダー

サムネイル付きのスライダー

HTMLの雛形を作成

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/slick.css"/>
    <link rel="stylesheet" href="css/slick-theme.css"/>
    <link rel="stylesheet" href="css/slick.scss"/>
</head>
<body>
  <div class="wrap">
    <h1 class="slider-name">無限ループスライダー</h1>
    <div class="slider">
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
　　　 <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
    </div>

    <h1 class="slider-name">下部ドットマーク選択により画像を切り替えるスライダー</h1>
    <div class="slider2">
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
　　　 <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
    </div>

    <h1 class="slider-name">サムネイル付きのスライダー</h1>
    <div class="thumbnail">
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
　　　 <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
    </div>
    <div class="thumbnail-thumb">
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
　　　 <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
      <div href="#"><img src="img/画像名" alt=""></div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

画像名の箇所にはimgフォルダ内に入れた画像名を記入して下さい。

main.jsファイルを作成

main.js

$(function(){
  //①無限ループスライダー
  $('.slider').slick({
    autoplay: true,//自動でスクロール
    autoplaySpeed: 0,//自動再生のスライド切り替えまでの時間をミリ秒で設定
    speed: 5000,//スライド/フェードアニメーションの速度を設定
    cssEase: "linear",//波のないアニメーションを指定
    slidesToShow: 4, //表示するスライドの数
    slidesToScroll: 1, //スクロールで切り替わるスライドの数
    swipe: false, // 操作による切り替えはさせない
    arrows: false, //矢印非表示
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    responsive: [
      {
        breakpoint: 750,
        settings: {
          slidesToShow: 3,
        }
      }
    ]
  });

  //②下部ドットマークor左右矢印選択により像を切り替えするスライダー
  $('.slider2').slick({
    arrows: true,
    infinite: true, //スライドのループ有効化
    dots: true, //ドットのナビゲーションを表示
    slidesToShow: 5, //表示するスライドの数
    slidesToScroll: 1, //スクロールで切り替わるスライドの数
    responsive: [{
      breakpoint: 768, //ブレークポイントが768px
      settings: {
        slidesToShow: 5, //表示するスライドの数
        slidesToScroll: 1, //スクロールで切り替わるスライドの数
      }
    }, {
      breakpoint: 480, //ブレークポイントが480px
      settings: {
        slidesToShow: 5, //表示するスライドの数
        slidesToScroll: 1, //スクロールで切り替わるスライドの数
      }
    }]
  });

  //③サムネイル付きのスライダー
  $('.thumbnail').slick({
    infinite: true, //スライドのループ有効化
    arrows: false, //矢印非表示
    fade: true, //フェードの有効化
    draggable: false //ドラッグ操作の無効化
  });
  $('.thumbnail-thumb').slick({
    infinite: true, //スライドのループ有効化
    slidesToShow: 8, //表示するスライドの数
    focusOnSelect: true, //フォーカスの有効化
    asNavFor: '.thumbnail', //thumbnailクラスのナビゲーション
  });
});

main.cssを作成

今回は特にサムネイル付きスライダーへ調整をしています。

main.css

*{
  background-color: black;
}

img {
  width: 100%;
}

.slider-name{
  color: white;
  padding-top: 100px;
}

.thumbnail { max-width: 300px; margin: 0 auto 5px; padding: 0;}
.thumbnail img,.thumbnail-nav img{ width: 100%;}
.thumbnail-thumb { max-width: 700px; margin: auto; height: 100px;}
.thumbnail-thumb img {max-height: 70px;}
.thumbnail-thumb li { margin: 5px;}
.thumbnial-thumb .slick-next { right: 20px; z-index: 100;}
.thumbnail-thumb .slick-prev { left: 15px; z-index: 100;}
.thumbnail-thumb .slick-current { opacity: 0.5;}
.thumbnail-thumb div div div { cursor: pointer;}

さいごに

Slickにはオプション機能が多いので、より高度でレスポンシブな実装ができるようにしたいと思います。
お気付きの点があればご教示いただけるとありがたいです。

参考にさせて頂いた記事

　 Tweet
Qiitaで続きを読む

20200705のCSSに関する記事は13件です。

【初心者でもわかる】�グラデーションをつかって、コップに好きなジュースを注ぐ方法

どうも、7noteです。今回はCSSグラデーションをつかってコップに好きなジュースを注いで飲みたいなと思います。

材料はこちら(1人前)

作り方

1.index.htmlでコップの場所を用意。

2. style.cssでコップを表現。

3. style.cssでコップに水を注いで完成。

＼完成／

おまけ. 色を変えていろんなジュースに変えてみる。

解説・作り方のコツ

まとめ

おそまつ！

2020/6/30~ プログラミング学習状況

プログラミング学習 2週間目

使用した学習教材

Udemy

学習範囲

模写コーディング

学習時間

環境構築

感想など

模写コーディング FaceBook ログイン画面 その3

模写コーディング

模写するサイト

作成時間

環境構築

模写する上でのルール

進捗

次回

スタイルを当てやすくする豆知識 padding/margin編 初心者

padding/marginのリセット

liタグの中のaタグを親要素いっぱいにし、かつテキストを上下左右中央にする方法。

[CSS]ぷよぷよするお寿司（）のセレクターを的確に選び出す[ぷよぷよ前編]

目的

今日やること

学び

A.className level 7 of 32

注意

A * level 11 of 32

注意

A + B level 12 of 32

A > B level 14 of 32

:first-child level 15 of 32

:only-child level 16 of 32

:nth-child(A) level 18 of 32

:nth-last-child(A) level 19 of 32

プチ・スケジュール管理システム作ってみた

作りたい仕様

サイト設計とデザイン

カレンダー管理画面

当月のカレンダー

翌月のカレンダー

カレンダープレビュー画面

祝日の共通設定ファイル

自動更新タイマー設定

とりあえず作ってみて思ったこと

簡単なJavaScriptを使って、睡眠時間が6時間未満だと千鳥のノブから怒られる実装をしてみた。

仕様書

実装画面

コード（HTML,CSS,JavaScript書いてます）

簡単な解説

超簡単にanimate.cssを実装する方法を詳しく

実装した感想

[css]input要素のtext入力フォーム左に余白を空ける方法

実装イメージ

考え方

コード

【絶対失敗しない】Vueで作るCSSナビゲーションメニューまとめ１０選

ヘッダーデザインにコピペで使えるナビゲーションメニュー３選

１. ヘッダーで使いやすいシンプルなナビゲーションメニュー

２. ボタンが滑らかに拡大するかわいらしいナビゲーションメニュー

３. ボタンが縮小しながら立体的に浮き出るナビゲーションメニュー

4. ボタンが凹みながら縮小する超動くナビゲーションメニュー

コードを確認する

マウスオーバーでドロップダウンするナビゲーションメニュー３選

１. ドロップダウンするシンプルなナビゲーションメニュー

２. ボタンが浮く！独特でかわいいナビゲーションメニュー

３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

コードを確認する

模写コーディング FaceBook ログイン画面その3

スタイルを当てやすくする豆知識　padding/margin編　初心者

:nth-child(A)　level 18 of 32