はじめに 昨日の投稿の続きです。 セレクターについて改めて勉強し直した① ここからは逆引き方式で クラス名は違うんだけど、同じスタイルを適用させたい html <div class="section">テスト</div> <p class="content">テスト</p> css .section, .content{} クラス名とクラス名の間に「,」を入れる。 親要素の中の子要素にスタイルを適用させたい html <div> <p>テスト</p> </div css div > p {} divが親で pが子。
昨日の投稿の続きです。 セレクターについて改めて勉強し直した①
<div class="section">テスト</div> <p class="content">テスト</p>
.section, .content{}
クラス名とクラス名の間に「,」を入れる。
<div> <p>テスト</p> </div
div > p {}
divが親で pが子。
これを実装したくて、調べて、テストしてました。 忘れそうなので、備忘録も兼ねて記事にします。 reCAPTCHAのAPIキーを取得する 1) reCAPTCHAにログイン reCAPTCHAのサイトにアクセスして、Googleアカウントでログイン。 2) サイトの登録 各種設定を行い、[作成]をクリックします。 項目 設定内容 ラベル 覚えやすい名前を入力してください reCAPTCHAタイプ 使いたいものを選択してください ドメイン 設置するサイトのドメインを入力してください オーナー メールアドレスが正しいか確認してください reCAPTCHAに同意する チェックをONにします アラートをオーナーに送信する ONにします 3） APIキーを取得する APIキー画面が表示されたら、それぞれコピーしておきましょう。 また、シークレットキーは絶対に流出しないようにしましょう。 管理画面>[設定]アイコン>[reCAPTCHAのキー]で後から確認することも可能です。 HTMLに設置する 設置したい箇所に<div class="g-recaptcha" data-sitekey="site key"></div>を入力します。 site keyにはAPIキーのサイトキーに上書きしてください。 contact.html <form action="sample.php" method="post"> <!-- 省略 --> <div class="g-recaptcha" data-sitekey="site key"></div> <input name="submit_buton" type="submit" id="submit_button" value="送信" class="fas"> </form> 設置はこれで完了です。 PHPで動作を記述する サーバー側で、reCAPTCHAのチェックがONになっているか判定するコードを書く必要があります。 今回は、formを実行したときに呼び出すphpファイルの中に、以下のコードを追記してみました。 secret=secretKeyのsecretKey部分を、取得したシークレットキーに上書きしてください。 sample.php <?php $captcha; if (isset($_POST['g-recaptcha-response'])) { $captcha = $_POST['g-recaptcha-response']; } if (!$captcha) { $alert = "<script type='text/javascript'>alert('reCAPTCHA にチェックを入れて下さい。');</script>"; echo $alert; echo "<script type='text/javascript'>history.go(-1);</script>"; exit; } $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=secretKey&response=" . $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']); // reCAPTCHAが成功した場合の処理を以降に記述 // (例: お問い合わせ送信処理、投稿処理 等) ?> チェックがONになっていない場合、 alert('reCAPTCHA にチェックを入れて下さい。');";でブラウザの通知を使ってチェックを促し、history.go(-1);で自動で前のページに戻す。という処理にしています。 また、JavaScriptを使うため、$alert = "<script type='text/javascript'>~~~</script>";と記述して、タグの中にJavaScriptコードを記述しています。 実行 チェックがOFFのままフォームを送信すると、通知ウィンドウが正しく表示されました。 また、チェックがONのときは正常に送信されることを確認しました。
これを実装したくて、調べて、テストしてました。 忘れそうなので、備忘録も兼ねて記事にします。
reCAPTCHAのサイトにアクセスして、Googleアカウントでログイン。
各種設定を行い、[作成]をクリックします。
APIキー画面が表示されたら、それぞれコピーしておきましょう。 また、シークレットキーは絶対に流出しないようにしましょう。
管理画面>[設定]アイコン>[reCAPTCHAのキー]で後から確認することも可能です。
設置したい箇所に<div class="g-recaptcha" data-sitekey="site key"></div>を入力します。 site keyにはAPIキーのサイトキーに上書きしてください。
<div class="g-recaptcha" data-sitekey="site key"></div>
site key
<form action="sample.php" method="post"> <!-- 省略 --> <div class="g-recaptcha" data-sitekey="site key"></div> <input name="submit_buton" type="submit" id="submit_button" value="送信" class="fas"> </form>
設置はこれで完了です。
サーバー側で、reCAPTCHAのチェックがONになっているか判定するコードを書く必要があります。
今回は、formを実行したときに呼び出すphpファイルの中に、以下のコードを追記してみました。 secret=secretKeyのsecretKey部分を、取得したシークレットキーに上書きしてください。
secret=secretKey
secretKey
<?php $captcha; if (isset($_POST['g-recaptcha-response'])) { $captcha = $_POST['g-recaptcha-response']; } if (!$captcha) { $alert = "<script type='text/javascript'>alert('reCAPTCHA にチェックを入れて下さい。');</script>"; echo $alert; echo "<script type='text/javascript'>history.go(-1);</script>"; exit; } $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=secretKey&response=" . $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']); // reCAPTCHAが成功した場合の処理を以降に記述 // (例: お問い合わせ送信処理、投稿処理 等) ?>
チェックがONになっていない場合、 alert('reCAPTCHA にチェックを入れて下さい。');";でブラウザの通知を使ってチェックを促し、history.go(-1);で自動で前のページに戻す。という処理にしています。
alert('reCAPTCHA にチェックを入れて下さい。');";
history.go(-1);
また、JavaScriptを使うため、$alert = "<script type='text/javascript'>~~~</script>";と記述して、タグの中にJavaScriptコードを記述しています。
$alert = "<script type='text/javascript'>~~~</script>";
チェックがOFFのままフォームを送信すると、通知ウィンドウが正しく表示されました。
また、チェックがONのときは正常に送信されることを確認しました。
対応ブラウザをIEからChromeに変更する時の注意点その２(size 属性) 対応ブラウザをIEからChromeに変更する時の注意点について備忘録的に記載します。 発生問題点 input type text を size 属性でサイズを指定した場合、IEとChromeで違いが発生する(ブラウザにより size 属性の解釈が異なる) 環境 OSはWindows10 バージョン：1909(OS ビルド 18363,1256) Microsoft Internet Explorer バージョン：11.1198.18362.0 Google Chrome バージョン：87.0.4280.141(Official Build) (64ビット) 解決方法 size 属性の値を調整する。 又は、size 属性は使用せずに <input type="text" style="width:300px;"> のようにwidthをピクセル指定する。 size 属性で指定した場合とwidthをピクセル指定にした場合の画面イメージ IEでの表示 Chromeでの表示 ※size 属性で指定するとIEとChromeでtextの幅が異なるが、widthをピクセル指定するとIEでもChromeでも同様の表示となる。 使用ソース <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>inputタグのsize属性とwidth</title> </head> <style> body { margin: 0; padding: 0; } th { width: 150px; } input { background:#CCCCCC; } </style> <body> <form action="#" method="post" id="customerIpt"> <table> <tr><th>size属性：50</th><td><input type="text" name="txt1" size="50" value="１２３４５６７８９０１２３４５６７８９０１２３"></td></tr> <tr><th>width：300px</th><td><input type="text" name="txt1" style="width: 300px;" value="１２３４５６７８９０１２３４５６７８９０１２"></td></tr> </table> </form> </body> </html>
対応ブラウザをIEからChromeに変更する時の注意点について備忘録的に記載します。
input type text を size 属性でサイズを指定した場合、IEとChromeで違いが発生する(ブラウザにより size 属性の解釈が異なる)
OSはWindows10
Microsoft Internet Explorer
Google Chrome
size 属性の値を調整する。 又は、size 属性は使用せずに
<input type="text" style="width:300px;">
のようにwidthをピクセル指定する。
IEでの表示
Chromeでの表示
※size 属性で指定するとIEとChromeでtextの幅が異なるが、widthをピクセル指定するとIEでもChromeでも同様の表示となる。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>inputタグのsize属性とwidth</title> </head> <style> body { margin: 0; padding: 0; } th { width: 150px; } input { background:#CCCCCC; } </style> <body> <form action="#" method="post" id="customerIpt"> <table> <tr><th>size属性：50</th><td><input type="text" name="txt1" size="50" value="１２３４５６７８９０１２３４５６７８９０１２３"></td></tr> <tr><th>width：300px</th><td><input type="text" name="txt1" style="width: 300px;" value="１２３４５６７８９０１２３４５６７８９０１２"></td></tr> </table> </form> </body> </html>
どうも7noteです。スイッチを作りました。 またまた唐突に思い立って、もしかしたらそれっぽいのが作れるのではと思い作ってみました。 使い所は少ないかもしれないですが、どこかのサイトの作成の参考になればいいなと思います。 作り方 index.html <label class="rocker"><input type="checkbox" value="" name="rocker"><span></span></label> style.css label input { display: none; /* デフォルトのinputは非表示にする */ } label.rocker { border: 5px solid #000; border-radius: 5px; display: inline-block; } label.rocker span { width: 150px; height: 50px; position: relative; border: 1px solid #666; border-right: 5px solid #666; background: linear-gradient(to right, #000 50%, #333 51% ); display: inline-block; box-sizing: border-box; } label.rocker span::before, label.rocker span::after { position: absolute; top: 50%; transform: translateY(-50%); } label.rocker span::before { content: 'OFF'; color: #FFF; left: 2px; } label.rocker span::after { content: 'ON'; color: #999; right: 2px; } label.rocker input:checked + span { background: linear-gradient(to right, #333 50%, #000 51% ); border-left: 5px solid #666; border-right: 1px solid #666; } label.rocker input:checked + span::before { color: #999; } label.rocker input:checked + span::after { color: #FFF; } ※課題点 ・labelが1つだけではonとoffの切り分けが難しい。 このソースでは、onを押したときだけonにし、offを押したときだけoffにすることができない。 labelを2つ使い分ければできそうな気がするが、また時間のあるときに追記しようと思う。 まとめ ところでこのスイッチの名前はなんていうのかと思って調べたら、 「ロッカスイッチ」というらしいですね。 勉強になりました。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
またまた唐突に思い立って、もしかしたらそれっぽいのが作れるのではと思い作ってみました。 使い所は少ないかもしれないですが、どこかのサイトの作成の参考になればいいなと思います。
<label class="rocker"><input type="checkbox" value="" name="rocker"><span></span></label>
label input { display: none; /* デフォルトのinputは非表示にする */ } label.rocker { border: 5px solid #000; border-radius: 5px; display: inline-block; } label.rocker span { width: 150px; height: 50px; position: relative; border: 1px solid #666; border-right: 5px solid #666; background: linear-gradient(to right, #000 50%, #333 51% ); display: inline-block; box-sizing: border-box; } label.rocker span::before, label.rocker span::after { position: absolute; top: 50%; transform: translateY(-50%); } label.rocker span::before { content: 'OFF'; color: #FFF; left: 2px; } label.rocker span::after { content: 'ON'; color: #999; right: 2px; } label.rocker input:checked + span { background: linear-gradient(to right, #333 50%, #000 51% ); border-left: 5px solid #666; border-right: 1px solid #666; } label.rocker input:checked + span::before { color: #999; } label.rocker input:checked + span::after { color: #FFF; }
・labelが1つだけではonとoffの切り分けが難しい。 このソースでは、onを押したときだけonにし、offを押したときだけoffにすることができない。 labelを2つ使い分ければできそうな気がするが、また時間のあるときに追記しようと思う。
ところでこのスイッチの名前はなんていうのかと思って調べたら、 「ロッカスイッチ」というらしいですね。 勉強になりました。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
