- 投稿日：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-28T15:21:49+09:00
javascript記入中に検証ツールでエラーが出た時の原因
この The value "" for key "width" is invalid, and has been ignored. の原因について。 問題のHTMLファイルはこれ。。。 shift+1でもう一度HTML雛形を確認してみると widthの後の device-width が抜けている！！ いつ抜けたのかはわからない笑 抜けた場所にdevice-width,(カンマを忘れずに)を入れると エラーがなくなった。
- 投稿日：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; と記述すると消えます。