- 投稿日：2021-11-28T23:28:02+09:00
HTMLとCSSを使用したモーダル表示
HTMLとCSSを使用して表現したモーダル画面 ◆HTMLファイル <!DOCTYPE html> サイトタイトル rel="stylesheet"> <!-- [if lt IE 9] --> <!-- [endif] --> <!----- header-----> ヘッダー <!----- /header -----> モーダルを表示 モーダルの中身 閉じる <!----- /main -----> <!----- footer -----> フッター <!----- /footer -----> ◆CSSファイル .modal-wrapper { z-index: 999; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 40px 10px; text-align: center; } .modal-button { font-weight: bold; text-align: center; cursor :pointer; transition: all 0.3s; display: block; margin-top: 40px; margin-bottom: 1px; padding: 12px 2px; max-width:300px; text-decoration: none; } .modal-button:active { /ボタンを押したとき/ -webkit-transform: translateY(2px); transform: translateY(2px);/下に動く/ } /アイコンを表示/ .modal-button:after { font-family: "Font Awesome 5 Free"; content: "\f2d0"; padding-left: 8px; } /ラベルホバー時/ .modal-button:hover { color: #FFFFFF; background-color: #4f96f6; transition: .6s; } .image_modal img{ display: inline-block; width:50%; max-width:300px; min-width: none; text-align: center; } .modal-wrapper:not(:target) { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .modal-wrapper:target { opacity: 1; visibility: visible; transition: opacity .4s, visibility .4s; } .modal-wrapper::after { display: inline-block; height: 100%; margin-left: -.05em; vertical-align: middle; content: "" } .modal-wrapper .modal-window { box-sizing: border-box; display: inline-block; z-index: 20; position: relative; width: 70%; max-width: 600px; padding: 10px 30px 25px; border-radius: 2px; background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .6); vertical-align: middle } .modal-wrapper .modal-window .modal-content { max-height: 80vh; overflow-y: auto; } .modal_title { font-size: 1.5em; position: relative; overflow: hidden; padding: 0; } .modal_title::before, .modal_title::after{ content: ""; position: absolute; bottom: 0; } /* h2 プライマリカラー/ .modal_title:before{ border-bottom: 4px solid #6bb6ff; width: 100%; } / h2 セカンダリカラー*/ .modal_title:after{ border-bottom: 4px solid #c8e4ff; width: 100%; } .modal-content p { margin: 10px 0 0 0; } .modal-overlay { z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .8) } .modal-wrapper .modal-close { z-index: 20; color: red !important; font-size: 30px; font-weight: 700; text-decoration: none; text-indent: 0 } .modal-wrapper .modal-close:hover { color:red !important }
- 投稿日：2021-11-28T19:33:27+09:00
地味に便利なdisplay: contents;
これは何 普段そこまで使わない気がするものの、地味に便利なdisplay: contents;について説明した記事です display: contents;の働き 簡単に説明するならこのスタイルが適用されたタグは、存在しない扱いになるイメージです。 書いているコード <div style="display: contents;"> <div>中の要素</div> </div> 描画されるイメージ <div>中の要素</div> 使いどき 1. フレームワークなどの都合で不要な<div>が発生してしまう 筆者がパッと浮かぶのがRuby on Railsのfield_with_errorsや、React on Railsのid="#{@name}-react-component-#{SecureRandom.uuid}"です。 不要な箇所に勝手にdivを挟まれてしまうため、flexやgridでのレイアウトが壊れてしまう場合があります。 こんなときはclass名やid名を指定してdisplay: contents;をかけてあげると解決します。 2. セマンティックとレイアウトを両立させたい 例えばこういうコードがあったとします。 書いているコード <div> <h1>ページのタイトル</h1> <p>リード文</p> <section> <h2>1つ目のセクションのタイトル</h2> <div> <!-- セクションの中身 --> </div> </section> <section> <h2>2つ目のセクションのタイトル</h2> <div> <!-- セクションの中身 --> </div> </section> </div> コード自体は普通の内容だと思いますが、このとき実現したいレイアウトが以下のようなものだったとします。 見て分かるようにdisplay: grid;を使うとかなり楽に組めるのですが、先ほどのコードのsectionがあるので微妙にややこしくなってしまいます。 subgridが使えれば良いのですが、まだFirefoxでしか使えないので現実的ではありません。1 ここでdisplay: contents;を使うと……。 （説明のしやすさの都合上インラインでスタイルを書いています） display <div> <h1>ページのタイトル</h1> <p>リード文</p> <section style="display: contents"> <h2>1つ目のセクションのタイトル</h2> <div> <!-- セクションの中身 --> </div> </section> <section style="display: contents"> <h2>2つ目のセクションのタイトル</h2> <div> <!-- セクションの中身 --> </div> </section> </div> 上記はこういうイメージになります。 CSSが効いた後のHTMLのイメージ <div> <h1>ページのタイトル</h1> <p>リード文</p> <h2>1つ目のセクションのタイトル</h2> <div> <!-- セクションの中身 --> </div> <h2>2つ目のセクションのタイトル</h2> <div> <!-- セクションの中身 --> </div> </div> このため、一番上のdivにdisplay: grid;を指定すれば楽にレイアウトができます。 ここからここまではsectionで括られていることを示しつつもレイアウトが上手くできるので嬉しいのではないでしょうか。 ……ただ、現在はバグがあるようでdisplay: contentsが指定された要素はアクセシビリティツリーから削除されてしまうみたいです。 ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。 出典：display - CSS: カスケーディングスタイルシート | MDN さすがに対応されるだろうとは思うのですが……良さが半減してしまうのは否めません。 まとめ display: contents;は「指定された要素は存在しない扱い」になる フレームワークなどの都合で不要なdivが発生してしまうときや、セマンティックとレイアウトを両立したいときに使える ただし2021年11月現在、アクセシビリティ的に良いとは言えない subgridの良さはこちらの記事で紹介しているので良かったら読んでみてください。 ↩
- 投稿日：2021-11-28T12:53:38+09:00
PHP で PDO を使用し SQL から取得したデータを表にして見やすくする方法
PDO を使用して、SQL から取得したデータはそのままだと、「ただの文字列。」って感じで読みやすくないですよね。 そこで取得したデータを表にして色付けとかするやり方を解説します。 内容としてはめっちゃ簡単。 しかし僕は 2 時間くらい無駄に彷徨ってたので初心者としてはあるあるな悩みかと思います！ 今回は簡易的な本のブックマークアプリを作りました。 SQL からのデータの取得はもちろん SELECT を使用しています。 Before それではまずは元のコードを見てみます ↓ <?php // 1. DB接続（エラー処理追加） // 下記がDB使う時のデフォルト的な書き方。とりあえずここの try｛｝の部分はコピペでいい。 try{ // try とcatch はセット try{}の中にエラーがあった場合、catch でエラー $e を受け取り、exit で $e を表示する $pdo = new PDO('mysql:dbname=gs_db;charset=utf8;host=localhost','root','root'); // PDO を使えるようにするコマンド。mysql と書いているのはこれを呼び出している、他のを使う場合はそれに書き換え。 }catch(PDOException $e){ exit('DbConnectError:'.$e->getMessage()); } // 2. データ登録 SQL 作成 $stmt = $pdo->prepare("SELECT * FROM gs_bm_table"); // MySQL の SELECT 文で全てのデータを取得。INSERT の時のように変数渡したり、登録も何もしていないので、ケースにもよるが基本は bindValue も必要ない。 $status = $stmt->execute(); // 実行 // 3. データを表示 $view = ""; // 事前にこれをグローバル変数で定義 if($status==false){ // 文面 $error = $stmt->errorInfo(); //$stmt の中から errorInfo() にてエラー内容を取得 exit("QueryError:".$error[2]); //errorInfo() の中で文字列として人間が読める文面が[2]番に入っているためこれを取得。 }else{ // エラーじゃない場合。登録の時は header() で元のページにリダイレクトさせるけど、表示の場合は現状 $stmt にデータが入っているからそれを表示させるだけ。 while($result = $stmt->fetch(PDO::FETCH_ASSOC)){ //fetch() 関数はレコードを 1 行ずつ取り出すという意味。100 件データ（レコード）があったら自動で 100 件回る。そして $result に配列（FETCH_ASSOC は配列で返してくれる）で入れてくれる。 $view .= '<p>'; // $view は上にグローバル変数にて定義済みなので、「.=」で追加してる。<p> をつけると改行される。 $view .= $result["indate"]."："; //.= がないと最後のレコードしか表示されない。 $view .= $result["b_name"]."："; $view .= $result["b_url"]; $view .= '</p>'; } } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>本のブックマークアプリ</title> </head> <body> <!-- -------------ここで $view を表示してる ↓ ------------- --> <div> <div><?= $view ?></div> </div> <!-- -------------ここで $view を表示してる ↑ ------------- --> </body> </html> （自分のためでもあるので、やたらコメント多いのはご了承ください） 上記の場合の出力結果は以下の通りです。 「日時：書籍名：書籍URL」 の順に表示されています ↓ 一応 p タグで改行してはいるものの、なんだか寂しい。。 それでは次は表にしてみたり色を付けてみて見やすくしてみたいと思います ↓ After 下記が After のコードです ↓ <?php // 1. DB接続（エラー処理追加） // 下記がDB使う時のデフォルト的な書き方。とりあえずここの try｛｝はコピペでいい。 try{ // try とcatch はセット try{}の中にエラーがあった場合、catch でエラー $e を受け取り、exit で $e を表示する $pdo = new PDO('mysql:dbname=gs_db;charset=utf8;host=localhost','root','root'); // PDO を使えるようにするコマンド。mysql と書いているのはこれを呼び出している、他のを使う場合はそれに書き換え。 }catch(PDOException $e){ exit('DbConnectError:'.$e->getMessage()); } // 2. データ登録 SQL 作成 $stmt = $pdo->prepare("SELECT * FROM gs_bm_table"); // MySQL の SELECT 文で全てのデータを取得。INSERT の時のように変数渡したり、登録も何もしていないので、ケースにもよるが基本は bindValue も必要ない。 $status = $stmt->execute(); // 実行 // 3. データを表示 $view = ""; // 事前にこれをグローバル変数で定義 if($status==false){ // 文面 $error = $stmt->errorInfo(); //$stmt の中から errorInfo() にてエラー内容を取得 exit("QueryError:".$error[2]); //errorInfo() の中で文字列として人間が読める文面が[2]番に入っているためこれを取得。 }else{ // エラーじゃない場合。登録の時は header() で元のページにリダイレクトさせるけど、表示の場合は現状 $stmt にデータが入っているからそれを表示させるだけ。 $view .= '<table>'; $view .= '<tr>'; $view .= '<th>'."登録日時".'</th>'; $view .= '<th>'."書籍名".'</th>'; $view .= '<th>'."書籍 URL".'</th>'; $view .= '</tr>'; while($result = $stmt->fetch(PDO::FETCH_ASSOC)){ //fetch() 関数はレコードを 1 行ずつ取り出すという意味。100 件データ（レコード）があったら自動で 100 件回る。そして $result に配列（FETCH_ASSOC で配列で返してくれる）で入れてくれる。 $view .= '<tr>'; $view .= '<td>'.$result["indate"]."：".'</td>'; $view .= '<td>'.$result["b_name"]."：".'</td>'; $view .= '<td>'.$result["b_url"].'</td>'; $view .= '</tr>'; } $view .= '</table>'; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>本のブックマークアプリ</title> </head> <body> <!-- -------------ここで $view を表示してる ↓ ------------- --> <div> <div><?= $view ?></div> </div> <!-- -------------ここで $view を表示してる ↑ ------------- --> <!-- -------------ここで見た目の整え ↓ ------------- --> <style> table{ border-collapse: collapse; } table th{ border: 2px solid rgb(163, 163, 163); background-color:rgba(253, 196, 89, 0.13); color:orange; } table td{ border: 1px solid rgb(163, 163, 163); } </style> <!-- -------------ここで見た目の整え ↑ ------------- --> </body> </html> After の出力結果がこちら ↓ うん、雰囲気変わりましたね。 色付けは簡単にできるので、お試しあれ～！ では！
- 投稿日：2021-11-28T02:30:15+09:00
ワイ「Tailwind CSSで選択したラジオボタンの背景色を変えたいんやけど」
この記事はワイ記法です。やめ太郎@Yametaro氏にリスペクトをこめて。 ある日の我が家 ワイ「去年趣味でアプリ作っていたんやが」 ワイ「この頃はあまり見た目に拘ってなかったなぁ」 ワイ「ヤクルトも日本一になったし、この際セルフリメイクしてみよか！」1 Tailwind CSSを使ってみた ワイ「はぇーBootstrapだけじゃなくて」 ワイ「Tailwind CSSってのもあるんか」 ワイ「前回はBootstrapやったし、Tailwind CSSを使ってみるか」 ラジオボタンをどうにかしたい ワイ「ラジオボタンそのまま表示するのもなんか味気ないな・・・」 ワイ「どれどれ・・・ラジオボタンをボタン風に表示させることもできるんか」2 ワイ「これをTailwind CSSでいっちょやってみっか！」 まず通常通りラジオボタンを配置する ワイ「まずは普通にラジオボタンを配置してみよか」 radiobutton.html <body> <div> <input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ"> <label for="swallows">東京ヤクルトスワローズ</label> </div> <div> <input type="radio" name="central" id="tigers" value="阪神タイガース"> <label for="tigers">阪神タイガース</label> </div> <div> <input type="radio" name="central" id="giants" value="読売ジャイアンツ"> <label for="giants">読売ジャイアンツ</label> </div> <div> <input type="radio" name="central" id="carp" value="広島東洋カープ"> <label for="carp">広島東洋カープ</label> </div> <div> <input type="radio" name="central" id="dragons" value="中日ドラゴンズ"> <label for="dragons">中日ドラゴンズ</label> </div> <div> <input type="radio" name="central" id="baystars" value="横浜DeNAベイスターズ"> <label for="baystars">横浜DeNAベイスターズ</label> </div> </body> ワイ「まずはこんなもんか」 ワイ「Tailwind CSSを導入して」 ワイ「ラジオボタンのclassにhiddenをつけると○が非表示になるんやな」 hidden_radiobutton.html 〜略〜 <div> <input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden"> <label for="swallows">東京ヤクルトスワローズ</label> </div> 〜略〜 ワイ「お！いけるやん！」 ワイ「じゃあボタンっぽい表示にしよか」 〜〜試行錯誤中〜〜 ワイ「これでどやろか」 ワイ「labelのclassに色々追加してみたで」 radiobutton.html 〜〜略〜〜 <div> <input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden"> <label for="swallows" class="flex flex-col w-full max-w-lg mx-auto text-center border-2 rounded-2xl border-gray-900 p-2 my-4 text-3xl">東京ヤクルトスワローズ</label> </div> 〜〜略〜〜 ワイ「おっええやん」 ワイ「ボタンっぽくなったね（ニッコリ）」 もうちょい映えさせたい ワイ「このままだとちょっと寂しいのは変わらんなぁ」 ワイ「ドキュメント眺めてみよか」 ワイ「hoverってのがあるんか」 ワイ「カーソル乗せてる時に色変わったら見やすいんちゃうか？」 radiobutton.html 〜〜略〜〜 <div> <input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden"> <label for="swallows" class="flex flex-col w-full max-w-lg mx-auto text-center border-2 rounded-2xl border-gray-900 p-2 my-4 text-3xl hover:bg-yellow-200">東京ヤクルトスワローズ</label> </div> 〜〜略〜〜 ワイ「これなら今何を選ぼうとしてるかはっきりわかんだね」 本題：クリックした項目の背景色を変える ワイ「これはええんやけど」 ワイ「このままだとどれを選択したかはわからないんやな」 ワイ「ということは」 ワイ「今度は選択したら背景色を変えるようにすればええんやな」 ワイ「このcheckedみたいにしたらええんかな？」 ワイ「checked:bg-green-200を追加してみたで」 button.html 〜〜略〜〜 <div> <input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden"> <label for="swallows" class="flex flex-col w-full max-w-lg mx-auto text-center border-2 rounded-2xl border-gray-900 p-2 my-4 text-3xl hover:bg-yellow-200 checked:bg-green-200">東京ヤクルトスワローズ</label> </div> 〜〜略〜〜 確認のため、選択した項目を下に表示しています。 ワイ「あれれ〜？」 ワイ「確実にクリックされてるはずなのに」 ワイ「背景色が変わらん・・・」 娘(４歳)3「パパー」 娘「そのcheckedはcheckboxの時に使えるやつなの」 娘「ラジオボタンでは使えないのよ」 ワイ「なんやて！」 ワイ「（4歳なのに既にワイよりTailwind CSSを理解している・・・！？」 ワイ「娘ちゃん、どこでそんなの知ったんや」 娘「先生がよく読み聞かせをしてくれるの」 ワイ「（今時の保育園はドキュメントの読み聞かせをしてるんか・・・？）」 ワイ「（ワイは幼稚園通いだったからぐりとぐらばっか読んでたわ・・・）」 ワイ「で、でも娘ちゃん。そしたらクリックした箇所の背景色を変えるのはできないってことなんか？」 娘「ググっても日本語の記事が出ないからって諦めちゃダメよ」 娘「それに、ちゃんとStack Overflowに同じ質問があったよ」 娘「その回答によると」 娘「Tailwind CSS v2.1以上で使えるJust-in-Timeモードにした上で」 娘「inputの方のclassにpeerを追加して」 娘「lavelの方のclassにpeer-checkedを追加すると」 娘「チェックした時にどうするか指定できるみたいね」 radiobutton.html 〜〜略〜〜 <div> <input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden peer"> <label for="swallows" class="flex flex-col w-full max-w-lg mx-auto text-center border-2 rounded-2xl border-gray-900 p-2 my-4 text-3xl hover:bg-yellow-200 peer-checked:bg-green-200">東京ヤクルトスワローズ</label> </div> 〜〜略〜〜 娘「今回はpeer-checked:bg-green-200にして、緑になるようにしてみたの」 娘「ほらできたでしょ（ﾄﾞﾔｯ）」 ワイ「はぇ〜すっごい・・・」 娘「ちなみにJust-in-Timeモードについては「こ↑こ↓」をみてね」 娘「CDNで試してみたい場合は、<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>を使うといいみたい」 ワイ「サンキュームッスメ」 ワイ「ちょっとこれでやってみるわ！」 数日後 ワイ「いやー娘ちゃんのおかげでなんとかいい感じにできたわ」 ワイ「根を詰めたから22時には寝てもうたわ！」 ヨッメ「（一体いつ作業していたのかしら・・・）」 ワイ「ひとまず現状のスキルとしては十分やな彡(^)(^)」 ワイ「良かったら使ってみてくれやで〜彡(^)(^)」 参考 CSSだけでボタン風のラジオボタン TailwindCSS - Change Label When Radio Button Checked Tailwind CSS v2.2 説明用に作成したコードはこちら Qiitaにアップする画面動画をgifアニメで簡単に作ろう ちなヤクちなハム ↩ これ自体はCSSのみで可能です ↩ 実在するで ↩
- 投稿日：2021-11-28T00:20:30+09:00
aタグの下線を消す方法
cssファイルに text-decoration: none; と記述すると消えます。