- 投稿日：2020-05-20T22:52:38+09:00
phpでひとつ前のページにリダイレクトする方法
header('Location: '.$_SERVER['HTTP_REFERER']); exit;リダイレクトで処理が中断されるのでexit;を書いておきましょう。
- 投稿日：2020-05-20T22:52:38+09:00
PHPでひとつ前のページにリダイレクトする方法
header('Location: '.$_SERVER['HTTP_REFERER']); exit;リダイレクトで処理が中断されるのでexit;を書いておきましょう。
- 投稿日：2020-05-20T14:26:48+09:00
【忘備録】display:flexで複数カラムレイアウトを自由に実装する
display:flexで複数カラムのレイアウトを自由に実装する
display:flexはデフォルトではdisplay:table-cellの様に折り返しが利きませんが、flex-wrap: wrapを指定する事ではみ出した分は折り返すようになります。(イメージとしてはfloat:leftでコーディングするのと同じイメージです)
justify-content: centerとalign-items: centerを用いて縦横のセンタリングを適用が適用されるのでマークアップを変更することなく自由にレイアウトを実装する事が可能です。
使いどころとしては商品一覧ページで特定のアイテムだけ大きく見せたい場合などがあるかと思います。display:flexを使った実装サンプル
See the Pen qBOLjpo by YusukeIkeda (@YusukeIkeda) on CodePen.
HTML<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>display:flex</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <ul class="flex"> <li class="flex-item col2">ITEM 1</li> <li class="flex-item col2">ITEM 2</li> <li class="flex-item col1">ITEM 3</li> <li class="flex-item col2">ITEM 4</li> <li class="flex-item col2">ITEM 5</li> <li class="flex-item col1">ITEM 6</li> <li class="flex-item col2">ITEM 7</li> <li class="flex-item col2">ITEM 8</li> </ul> </div> </body> </html>style.css*{ padding: 0; margin: 0; } li{ list-style: none; } .container{ width: 600px; margin: auto; } .flex{ display: flex; flex-wrap: wrap; justify-content: space-between; } .flex-item{ display: flex; /* 子要素のテキストを縦横中央揃えにする */ justify-content: center; align-items: center; height: 100px; margin-bottom: 10px; border: solid #000 2px; color: #fff; } .flex-item:nth-child(3n){ background: #0080FF; } .flex-item:nth-child(3n-1), .flex-item:nth-child(3n-2){ background: #FF80C0; } .col1{ flex-basis: 100%; } .col2{ flex-basis: calc(50% - 10px); }参考1：floatで実装した場合
最近はあまり見かけないけどfloatを使用してもコードの量はあまり変わらず実装する事はできます。
ただしfloatで実装した場合は子要素のテキストを縦に中央揃えさせたい場合、下記サンプルのようにdisplay:tableを指定するなどの工夫が必要になってきます。
また、スマホページに最適化させたい場合、デバイスの幅によってレイアウト崩れが起きないように幅やマージンを調整する必要があるので現在はあまり良い選択肢ではありません。floatを使った実装サンプル
See the Pen oNjJeQg by YusukeIkeda (@YusukeIkeda) on CodePen.
HTML<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>float</title> <link rel="stylesheet" href="style.css"> </style> </head> <body> <div class="container clearfix"> <ul class="list"> <li class="list-item col2"><p class="text">ITEM 1</p></li> <li class="list-item col2"><p class="text">ITEM 2</p></li> <li class="list-item col1"><p class="text">ITEM 3</p></li> <li class="list-item col2"><p class="text">ITEM 4</p></li> <li class="list-item col2"><p class="text">ITEM 5</p></li> <li class="list-item col1"><p class="text">ITEM 6</p></li> <li class="list-item col2"><p class="text">ITEM 7</p></li> <li class="list-item col2"><p class="text">ITEM 8</p></li> </ul> </div> </body> </html>CSS*{ padding: 0; margin: 0; } li{ list-style: none; } .clearfix:after{ content: ''; display: block; clear: both; } .container{ width: 600px; margin: auto; } .list-item{ display: table; float: left; text-align: center; margin-bottom: 10px; border: solid #000 2px; color: #fff; } .list-item:nth-child(3n-1){ float: right; } .list-item:nth-child(3n){ background: #0080FF; } .list-item:nth-child(3n-1), .list-item:nth-child(3n-2){ background: #FF80C0; } .text{ display: table-cell; vertical-align: middle; height: 100px; } .col1{ width: 100%; box-sizing: border-box; } .col2{ width: calc(50% - 10px); }参考2：display:gridで実装した場合
まだ実務で使ったことは無いですが、display:gridを使用すると様々なレイアウトがCSSだけで実現できるようになります。
display:gridを使った実装サンプル
See the Pen yLYZNLq by YusukeIkeda (@YusukeIkeda) on CodePen.
HTML<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>grid</title> <link rel="stylesheet" href="style.css"> </style> </head> <body> <div class="container"> <ul class="grid"> <li class="grid-item box1">ITEM 1</li> <li class="grid-item box2">ITEM 2</li> <li class="grid-item box3">ITEM 3</li> <li class="grid-item box4">ITEM 4</li> <li class="grid-item box5">ITEM 5</li> <li class="grid-item box6">ITEM 6</li> </ul> </div> </body> </html>CSS*{ padding: 0; margin: 0; } li{ list-style: none; } .container{ width: 600px; margin: auto; } .grid{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 10px; text-align: center; } .grid-item{ display: grid; align-items: center; height: 100px; color: #fff; border: solid #000 2px; } .grid-item:nth-child(3n){ background: #0080FF; } .grid-item:nth-child(3n-1), .grid-item:nth-child(3n-2){ background: #FF80C0; } .box3, .box6{ grid-column-start: 1; grid-column-end: 3; }まとめ
display:flexをうまく使えれば今まではHTMLの構成を組み替える必要があったレイアウト変更もCSSだけで対応可能になりそうです。同じレイアウトを実現するにもいくつもの実装方法がある事を知っておくと様々なケースに対応することが出来ます。
- 投稿日：2020-05-20T09:55:06+09:00
200520学習記録：デフォルトCSSのリセット
ブラウザのデフォルトでマージンや余白、文字サイズなどが指定されている。
CSSを適用するために、一度それをリセットする。headに以下の一文を入れる。本来読み込むフCSSファイルはその下に入れる。
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style.css">
- 投稿日：2020-05-20T04:56:48+09:00
初心者によるプログラミング学習ログ 321日目
100日チャレンジの321日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
321日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) May 19, 2020
321日目 1.5h
・架空LP模写10日目1.5h（@ririru_123
）
・架空LP模写：お問い合わせ部分を作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日：2020-05-20T04:41:58+09:00
vue.jsとlocalStrageで閲覧履歴とお気に入り履歴を作ってみた
やったこと
ユーザの閲覧履歴やお気に入り履歴をlocal Strageに溜め込んでブラウザ側だけで履歴情報を表示するページを作りました。
中の処理ではVue.jsを使っています。使っているもの / できること
- 犬の画像をランダムで取得するAPI
- 直近５枚の見た画像の履歴を表示
- お気に入りへの追加、およびその削除
動いているページ
http://shima-07.ml/
ソースコード
<html> <head> <title>Hello My WebSite!</title> <style> img.pic1 { width: 50%; height: auto; } </style> <style> img.pic2 { width: 96px; height: 65px; } </style> </head> <body> <div id= "app"> <a v-bind:href="src" target="_blank"> <img v-bind:src="src" class="pic1"/> </a> <p><button v-on:click="getData()">次へ</button></p> <p> <button v-if="good" v-on:click="delfavo()">お気に入りから削除する</button> <button v-else v-on:click="favo()">お気に入りに追加する</button> </p> <p>最大５件まで過去閲覧画像を表示</p> <!-- 画像URLが存在するときのみ表示する--> <a v-bind:href="his_1" target="_blank"> <img v-if="his_1" v-bind:src="his_1" class="pic2"/> </a> <a v-bind:href="his_2" target="_blank"> <img v-if="his_2" v-bind:src="his_2" class="pic2"/> </a> <a v-bind:href="his_3" target="_blank" > <img v-if="his_3" v-bind:src="his_3" class="pic2"/> </a> <a v-bind:href="his_4" target="_blank" > <img v-if="his_4" v-bind:src="his_4" class="pic2"/> </a> <a v-bind:href="his_5" target="_blank" > <img v-if="his_5" v-bind:src="his_5" class="pic2"/> </a> <p>お気に入りのわんちゃんを表示</p> <!-- 画像URLが存在するときのみ表示する--> <a v-bind:href="fav_1" target="_blank"> <img v-if="fav_1" v-bind:src="fav_1" class="pic2"/> </a> <a v-bind:href="fav_2" target="_blank"> <img v-if="fav_2" v-bind:src="fav_2" class="pic2"/> </a> <a v-bind:href="fav_3" target="_blank" > <img v-if="fav_3" v-bind:src="fav_3" class="pic2"/> </a> <a v-bind:href="fav_4" target="_blank" > <img v-if="fav_4" v-bind:src="fav_4" class="pic2"/> </a> <a v-bind:href="fav_5" target="_blank" > <img v-if="fav_5" v-bind:src="fav_5" class="pic2"/> </a> <a v-bind:href="fav_6" target="_blank"> <img v-if="fav_6" v-bind:src="fav_6" class="pic2"/> </a> <a v-bind:href="fav_7" target="_blank"> <img v-if="fav_7" v-bind:src="fav_7" class="pic2"/> </a> <a v-bind:href="fav_8" target="_blank" > <img v-if="fav_8" v-bind:src="fav_8" class="pic2"/> </a> <a v-bind:href="fav_9" target="_blank" > <img v-if="fav_9" v-bind:src="fav_9" class="pic2"/> </a> <a v-bind:href="fav_10" target="_blank" > <img v-if="fav_10" v-bind:src="fav_10" class="pic2"/> </a> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var favlist =[]; var u0,u1,u2,u3,u4,u5,u6; var strage = []; var s = localStorage.getItem('imgs'); /// お気に入りようの配列/// if(localStorage.getItem('fav')){ // JSON.parse(data) の形で取り出す必要がある。 // ocalStorage.getItem('imgs').lengthにすると文字の長さになってしまうからダメ。JSON.parse()する for(let i = 0 ; i < JSON.parse(localStorage.getItem('fav')).length -1 ; i++){ favlist.push(JSON.parse(localStorage.getItem('fav'))[i]); } } /// 過去画像ようの配列//// if(localStorage.getItem('imgs')){ // JSON.parse(data) の形で取り出す必要がある。 // ocalStorage.getItem('imgs').lengthにすると文字の長さになってしまうからダメ。JSON.parse()する for(let k = 0 ; k < JSON.parse(localStorage.getItem('imgs')).length -1 ; k++){ strage.push(JSON.parse(localStorage.getItem('imgs'))[k]); } } ////////// メイン処理 ////////// const app = new Vue({ el: '#app', data: { src:'' , his_1: '', his_2: '', his_3: '', his_4: '', his_5: '', good: false, fav_1: '', fav_2: '', fav_3: '', fav_4: '', fav_5: '', fav_6: '', fav_7: '', fav_8: '', fav_9: '', fav_10: '' }, /// 過去の履歴を出すところ methods: { getData: async function(){ const URL = 'https://dog.ceo/api/breeds/image/random'; const response = await axios.get(URL); this.message = response.data; this.src = response.data.message; // local strageにため込む処理 strage.unshift({url:this.src}); //先頭に追加 // 5こ以上は消す strage = strage.slice(0,6); localStorage.removeItem('imgs'); //imgsだけ消す localStorage.setItem('imgs',JSON.stringify(strage)); // JSON.stringify(data) の形が需要。 console.log(strage); u0 = this.src; // 過去見たものの表示をする if(localStorage.getItem('imgs')){ // エラーを防ぐ為に、過去履歴が存在するときだけ、その分だけ表示する for(let j = 0 ; j < JSON.parse(localStorage.getItem('imgs')).length ; j++){ eval("this.his_"+ j + "= JSON.parse(localStorage.getItem('imgs'))[" + j + "].url"); // 普通に this.his_j = JSON.parse(localStorage.getItem('imgs'))[j].url;とは書けない } } console.log(this.his_1); this.good = false; // 画像が変わったらボタンを変える }, ///お気に入り登録する機能 favo: function(){ this.url = u0; favlist.unshift({url:this.url}); localStorage.setItem('fav',JSON.stringify(favlist)); this.good = true ; console.log(favlist); console.log(this.good); ///表示する if(localStorage.getItem('fav')){ // 存在確認とあまりにお気に入りが多い場合は10個にする var len1 = JSON.parse(localStorage.getItem('fav')).length; if(len1 > 10){ len1 = 10; } // エラーを防ぐ為に、過去履歴が存在するときだけ、その分だけ表示する for(let a = 0 ; a < len1 ; a++){ eval("this.fav_"+ (a+1) + "= JSON.parse(localStorage.getItem('fav'))[" + a + "].url"); // a番目のものをfav_a+1に格納する // 普通に this.his_j = JSON.parse(localStorage.getItem('imgs'))[j].url;とは書けない } } }, /// お気に入りから削除する機能 delfavo: function(){ favlist.shift(); //JSON.parse(localStorage.getItem('fav')).shift(); localStorage.setItem('fav',JSON.stringify(favlist)); this.good = false ; // falseに戻す console.log(favlist); if(localStorage.getItem('fav')){ // 存在確認とあまりにお気に入りが多い場合は10個にする var len2 = JSON.parse(localStorage.getItem('fav')).length; if(len2 > 10){ len2 = 10; } // エラーを防ぐ為に、過去履歴が存在するときだけ、その分だけ表示する for(let b = 0 ; b < len2 ; b++){ eval("this.fav_"+ (b+1) + "= JSON.parse(localStorage.getItem('fav'))[" + b + "].url"); // b番目のものをfav_b+1に格納する // 普通に this.his_j = JSON.parse(localStorage.getItem('imgs'))[j].url;とは書けない } } } }, mounted: function(){ this.getData(); this.favo(); this.delfavo(); } }) </script> </body> </html>
