- 投稿日：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%までを水色にしなさいと言う意味になる。
まとめ
グラデーションマスターになると、画像を使わなくて済む箇所がめっちゃ増える。
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）
- 投稿日：2020-07-05T23:13:30+09:00
2020/6/30~ プログラミング学習状況
プログラミング学習 2週間目
6/30~7/5
使用した学習教材
Udemy
学習範囲
6/30
セクション5の66から787/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の学習に戻る。
学習のルーティングとかも組み込んでいきたい。
- 投稿日：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のアイコンを使用する。
（はてなマークとか）レスポンシブデザインのインプット。
以上。アウトプットを行うとモチベーションが以前よりも上がって楽しい。。。
- 投稿日：2020-07-05T21:53:10+09:00
文字数が多い時に最後に出す「...」をJSでパパッと作る。
今回は、webサイトでよく見る
「サンプルテキストです。サンプルテキストです。サンプルテキ...」の
「...」を関数で出力する方法を紹介。DEMOはこちら。
See the Pen
pogaWpj by 坊 拓磨 (@bo_chan6130)
on CodePen.
準備
HTML
JavaScriptできること
・ある文字数を超えると、末尾に「...」が出る。
・超えなかったら超えない範囲の文字をそのまま出力。実装
index.html<p id="hoge">サンプルテキストです。サンプルテキストです。</p>index.jsvar selectId = document.getElementById("hoge") var string = selectId.textContent.replace(/\s+/g,''); function truncate(str, len){ return str.length <= len ? str: (str.substr(0, len)+"..."); }; selectId.innerHTML = truncate(string, 5);ポイント
①任意のidを持ったタグの文章を変数stringにいれる。この際、文字列の中の不要な空白を削除したいのでreplace(/\s+/g,'')を記述。
②真ん中のfunction truncate(str,len)で出力の最大値を調整できるように関数を作成。
③最後、①を②の制限数分だけinnerHTMLで書き換え。まとめ
cssで擬似要素使う(こっちだとタグ出力範囲での制限だけでちょい使いづらい)よりもこっちの方が早かったので、
もし使いたい方はコピペドゾー。
- 投稿日：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.cssul { 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.cssul { 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要素いっぱいにしてテキストを上下中央にし、レスポンシブデザインに対応させる方法を教えてください??♀️
- 投稿日：2020-07-05T19:42:45+09:00
Laravel 7 PDF Tutorial: Generate PDF in Laravel with DOMPDF
Learn how to generate PDF from HTML using the DomPDF library.
click here to read more:
https://www.positronx.io/laravel-pdf-tutorial-generate-pdf-with-dompdf-in-laravel/
- 投稿日：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は触りますが。でも開発はこれからも続けていくつもりです。
- 投稿日：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で出来ると思うので、ご興味ある方追加して遊んでみてください。
また、ここは違う、ここはこうしたほうが良いかも？等々ございましたら、ご指摘いただけますと幸いです。
最後までみていただき、ありがとうございました。
- 投稿日：2020-07-05T00:55:27+09:00
Slickを使って画像のスライダーを実装する方法
はじめに
画像のスライダーを実装したいと思い、Slickを導入するも、意図した動作を起こせず苦戦したので、同じような状況の方の参考になればと思い掲載します。
Slickを利用する
Slick（スリック）とは
- jQeryをベースに作成された、 文字や画像のコンテンツをスライド移動させることのできるプラグインです。
- マウスによるドラッグ、矢印キー・ドット等での画像選択、無限ループ等、 オプション機能を活用することで、自由度の高い実装が可能です。
導入
1. 好きな名前で新規フォルダを作成します。
今回は"Slick-test"という名前で作成しました。
続けて、Slick-test内に、
css、img、jsフォルダを作成します。2. 下記リンクを開き、"get it now" を押下する。
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にはオプション機能が多いので、より高度でレスポンシブな実装ができるようにしたいと思います。
- お気付きの点があればご教示いただけるとありがたいです。
参考にさせて頂いた記事
