- 投稿日：2020-11-24T22:50:53+09:00
JavaScript勉強日記＃１
①確認ダイアログボックスの表示
・目的：下記のダイアログボックスを表示する
https://gyazo.com/3da5a0c50544d85af25c1c7cd4adce3b
https://gyazo.com/f9808943633140799071c34fea626e74index.html<script> if(window.confirm('ゲームスタート！準備はいいかい？')) { console.log('ゲームを開始します！'); } else { console.log('ゲームを終了します。'); } </script>
window.confirm('message')で表示できた。
alertメソッドとの違いはT/Fでリターンを返してくる事。②テキストを持ったダイアログを表示
・目的：下記のダイアログの表示
https://gyazo.com/c24d08dedc4a761b0f2faea00317ae3e
https://gyazo.com/67b10557bbb964c2fbcf729268dc9fb0
window.confirm('message')で表示できた。
これは変数を用いる事で保存が可能になる。
例えばlet answer(変数名) = window.confirm('message')と書けばこれ以降answerと書く事でmessageを取得できる。③入力内容で動作を変更する
・目的：動作を条件分岐させたいindex.htmlconst answer = window.prompt('ヘルプを見ますか？'); if(answer === 'yes') { window.alert('タップでジャンプ、障害物をよけます。'); }constで生成された変数は後から上書きできない。
- 投稿日：2020-11-24T22:40:39+09:00
ドラクエ５の結婚イベントを考える
結婚する相手毎にメッセージを変更する。
index.html.rb<script> 'use strict'; if(window.confirm('ビアンカと結婚しますか？')) { window.alert('偽善者が！！！'); } else { if(window.confirm('フローラと結婚しますか？')) { window.alert('金の亡者が！！！！'); } else { if(window.confirm('デボラと結婚しますか？')) { window.alert('性欲猿が！！！'); } else { window.alert('一生独身決定！！！'); }}} </script>コードの内容は
window.confirm()とwindow.alert()、条件式if(){}だけなのでとてもシンプルです。
ドラ○エらしくYes/Noで作りたかったのでこの形を取りました。
windows.prompt()を使えばもっと短く表現できるのであとで追記しようかと思っています。ちなみに私はフローラを選びました（笑）
- 投稿日：2020-11-24T20:38:48+09:00
WEBサイトで「乗算」を再現？IE非対応でいいならCSSできるよ
どうも7noteです。忌々しい乗算に悩まされない日が近づいています。
WEBデザインで一番困るといっても過言ではない「乗算」。
現状全てのブラウザに対応するための一般的な方法は存在しません。そのためコーダーは透明度や色合いなどで微調整するしかなかったのですが、
実はIEを無視すれば乗算に対応することができます！見本（右のみCSSで乗算にした結果）
このように、薄い背景であれば白背景付きのロゴ画像でも色付きの場所になじませて配置することが可能なんです。
ソース
index.html<div class="bg"> <img src="logo.png"> <img src="logo.png" class="mbm"> </div>style.css.bg { background: #fdd; padding: 10px; } .bg .mbm { mix-blend-mode: multiply; /* 「乗算」する */ }解説
本日の主役「
mix-blend-mode: multiply;」です。
何度も言いますがmix-blend-modeはIEに非対応です。https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode#Browser_compatibility
ですがそれさえ無視すれば、乗算にしたい要素に
mix-blend-mode: multiply;を記述するだけなので非常に簡単に実装することができます。
mix-blend-modeは他にもさまざまな加工ができるので使ってみてください。あぁ。IEさえいなければ・・・
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日：2020-11-24T17:40:41+09:00
【jQuery】TD内のアイテム押下で行にあれこれする
はじめに
はじめてjQueryを使う機会があり、表アイテムを使った便利な機能を実装してみたところ、
すごく苦戦したので備忘録の為に記録します。前提
・jQueryの基礎(セレクタの扱い方程度)を理解している
・HTMLの表中にあるアイテムを使ってあれこれしたい人やりたいこと
・TDの中にあるアイテムを押下した際に以下のイベントを起こす
-ボタンと同じ行を黄色に着色する
-選択行のテキストを変数で受け取り、アラート表示する
-選択行のテキストを別の値に置き換える覚えておきたい記述
find()を用いることで、以前の要素の下の階層でさらにセレクタを指定することができます。今回の機能を実装する上で重要な記述となるので覚えておきましょう。
例):html<input type="text" name="hoge" value="hogehoge~" /> <input type="text" name="fuga" value="fugafuga~" size="20" /> <input type="text" name="fuga" value="funga~funga~" size="30" />jsfunction getInfo(){ // nameがhogeのアイテムのvalue値 var a = $('input:text[name="hoge"]').val(); // nameがfugaかつsizeが30のテキストのvalue値 var b = $('input:text[name="fuga"]').find('[size="30"]').val(); // "hogehoge~"を出力 console.log(a); // "funga~funga~"を出力 console.log(b); }このようにnameが"fuga"のテキストアイテムが複数ある場合、他の属性をfind()によってさらに指定することで、絞り込みをかけていくことができます。
これを利用し、テーブル内のボタンを利用したイベントを作成してみます。表にボタンを配置(HTML,CSS)
HTMLにてイベント発火用のボタンと、アラート表示用のリンクを含めたテーブルを作成します。
index.html<HTML> <HEAD> <SCRIPT src="ui/libs/jQuery-1.7.1.js"></SCRIPT> <TITLE>2020年最新のゲーム機</TITLE> </HEAD> <BODY> <TABLE name="tblGameList"> <!-- ヘッダの行 --> <TR> <TD>選択</TD> <TD>商品ID</TD> <TD>商品名</TD> <TD>発売元</TD> <TD>イベント</TD> </TR> <!-- データの行 --> <TR> <TD><input type="button" name="sel_event" value="回" /></TD> <TD>P00001</TD> <TD> <input type="text" name="game" value="プレイステーション4" readonly /> </TD> <TD>SIE</TD> <TD><a name="event" alt="アラートを表示">アラート表示</a></TD> </TR> <TR> <TD><input type="button" name="sel_event" value="回" /></TD> <TD>P00002</TD> <TD><input type="text" name="game" value="Nintendo Switch" readonly /> </TD> <TD>任天堂</TD> <TD><a name="event" alt="アラートを表示">アラート表示</a></TD> </TR> <TR> <TD><input type="button" name="sel_event" value="回" /></TD> <TD>P00003</TD> <TD><input type="text" name="game" value="Xbox Series X" readonly /> </TD> <TD>マイクロソフト</TD> <TD><a name="event" alt="アラートを表示">アラート表示</a></TD> </TR> </TABLE> </BODY> </HTML>cssinput[type="text"]{ background-color:white; border:none; } .changeColor{ background-color:"yellow"; }「選択」列のボタン押下で選択行の背景色を変更する
背景色を変更するには、addClass()を使用し、クラスの追加を行うことができます。
元に戻す場合はremoveClass()でクラスを削除します。
また、ボタンを押下するたびに背景色をON←→OFFのように切り替えたいので、toggle()を使用しています。index.js// name="sel_event"のボタン押下時イベント $(function(){ var rowInfo = $(this).closest('tr'); $('input:button[name="sel_event"]').toggle( // 奇数回ボタンを押した時に処理します function(){ rowInfo.addClass('changeColor'); }, // 偶数回ボタンを押した時に処理します function(){ rowInfo.removeClass('changeColor'); } ); });リンク押下で行の情報をアラート表示する
index.js$('a[name="al_event"]').on('click',function(){ // 行情報の取得 var rowInfo = $(this).closest('tr'); var gameName = rowInfo.find('[name="game"]').val(); // 選択行のアラート表示 alert(gameName); });ボタン押下で値の上書きをする
.val()を使用して値を上書きすることができる。
index.js$('a[name="al_event"]').on('click',function(){ var newValue = "プレイステーション5"; // 行情報の取得 var rowInfo = $(this).closest('tr'); rowInfo.find('[name="game"]').val(newValue); });ここでは本題とは関係ないため、上書きする情報をハードコーディングで指定していますが、実際に実装する際は非同期処理でDBにアクセスして取得した情報を変数に代入するのがよさげです。
おわりに
ここで紹介したソースは自分が実際に実装したソースを基にしていますが、回りくどいやり方をしているなど改良の余地があると思います。
こんなやり方の方がいいよっていうのがあれば、ご教授いただければ幸いです。
- 投稿日：2020-11-24T12:47:00+09:00
レスポンシブ画像のテンプレートを作ろう
はじめに
img レスポンシブというようなワードでimgタグによって出力される画像をレスポンシブ対応させようとしたことはないでしょうか？
いろいろな記事を参考にしてるとどれが正解のコードなのか分からなくなってしまいます。
デザインに正解はないから見た目が整っていればいいんだよという人もいれば、これはHTMLのルールに則っていないからダメだという人もいます。
初学者は何を参考にすればいいのか分からず頭を抱えてしまうので、テンプレートを基にコードを書いて貰えばいいのでは？と思ったので、今回はimgタグのレスポンシブのレンプレートを作ります前置き
以下の知識は知っているものとして話を進めていきます。
- ブロックレベル要素
- インライン要素
- imgタグはインライン要素
- width
- max-width
画像をレスポンシブ対応していく
早速レスポンシブ対応にしていきたいところなのですが、imgタグはブロックレベル要素の子要素にして扱うということを知っておいてください。
HTMLの配置ルールではブロックレベル要素の中にインライン要素を配置するという考え方があるのでそれに則り、imgタグはブロックレベル要素の中に配置していきます。imgタグの親要素は何タグにするべき？
HTMLは文脈を意識してマークアップする必要があるので、その画像がどのような扱われ方をしているかに注目します。
と言われましても。。。という方は少なくないはず。
まずはimgタグの親になるタグを知っておく必要があります。
以下の三種類がimgの親になることが多いです。
- p
- figure
- div どのよう時にpタグ、figureタグ、divタグを使いわかればいいのか次で紹介します。
pタグ
- imgタグにalt属性がある時
- 画像がないとその文脈が分からない時
figureタグ
- 文脈が画像を参照している時
divタグ
- pタグ、figureタグどちらにも当てはまらない時
- 見た目だけを整えたい時
テンプレートを作る
style.cssimg { max-width: 100%; }もしくはこちらでも大丈夫です。
style.cssimg{ width: 100%; }imgのheightは初期値がautoなので、わざわざ
height: auto;を書かなくても大丈夫です。テンプレートを使用した例
今回は見た目だけ整えたかったのでimgタグの親にはdivタグを用いています。
異なるwidthでもちゃんと比率を保持してくれるようになっています。
See the Pen
responsive-lecture by Daichi Nabeshima (@nabeshi)
on CodePen.
参考サイト
- 投稿日：2020-11-24T10:17:18+09:00
お問い合わせフォーム、jsでバリデーション
contact.jswindow.addEventListener('DOMContentLoaded', () => { // 「送信」ボタンの要素を取得 const submit = document.querySelector('#contact-submit'); // エラーメッセージと赤枠の削除 function reset(input_infomation, error_message){ const input_info = document.querySelector(input_infomation); const err_message = document.querySelector(error_message); err_message.textContent =''; input_info.classList.remove('input-invalid'); }; // 「お名前」入力欄の空欄チェック関数 function invalitName(input_target, error_target, error_message){ const name = document.querySelector(input_target); const errMsgName = document.querySelector(error_target); if(!name.value){ errMsgName.classList.add('form-invalid'); errMsgName.textContent = error_message; name.focus(); name.classList.add('input-invalid'); // 動作を止める return false; }; // 動作を進める return true; }; // 「ふりがな」入力欄の空欄チェック関数 function invalitHurigana(input_target, error_target, error_message){ const hurigana = document.querySelector(input_target); const errMsgHurigana = document.querySelector(error_target); if(!hurigana.value){ errMsgHurigana.classList.add('form-invalid'); errMsgHurigana.textContent = error_message; hurigana.focus(); hurigana.classList.add('input-invalid'); // 動作を止める return false; }; // 動作を進める return true; }; // 「郵便番号」入力欄の空欄チェック関数 function invalitPostal(input_target, error_target, error_message){ const postal = document.querySelector(input_target); const errMsgPostal = document.querySelector(error_target); if(!postal.value){ errMsgPostal.classList.add('form-invalid'); errMsgPostal.textContent = error_message; postal.focus(); postal.classList.add('input-invalid'); // 動作を止める return false; }; // 動作を進める return true; }; // 「住所」入力欄の空欄チェック関数 function invalitAddress(input_target, error_target, error_message){ const address = document.querySelector(input_target); const errMsgAddress = document.querySelector(error_target); if(!address.value){ errMsgAddress.classList.add('form-invalid'); errMsgAddress.textContent = error_message; address.focus(); address.classList.add('input-invalid'); // 動作を止める return false; }; // 動作を進める return true; }; // 「電話番号」入力欄の空欄チェック関数 function invalitTel(input_target, error_target, error_message){ const tel = document.querySelector(input_target); const errMsgTel = document.querySelector(error_target); if(!tel.value){ errMsgTel.classList.add('form-invalid'); errMsgTel.textContent = error_message; tel.focus(); tel.classList.add('input-invalid'); // 動作を止める return false; }; // 動作を進める return true; }; // 「メールアドレス」入力欄の空欄チェック関数 function invalitEmail(input_target, error_target, error_message){ const email = document.querySelector(input_target); const errMsgEmail = document.querySelector(error_target); if(!email.value){ errMsgEmail.classList.add('form-invalid'); errMsgEmail.textContent = error_message; email.focus(); email.classList.add('input-invalid'); // 動作を止める return false; }; // 動作を進める return true; }; // 「会社名」入力欄の空欄チェック関数 function invalitCompany(input_target, error_target, error_message){ const company = document.querySelector(input_target); const errMsgCompany = document.querySelector(error_target); if(!company.value){ errMsgCompany.classList.add('form-invalid'); errMsgCompany.textContent = error_message; company.focus(); company.classList.add('input-invalid'); // 動作を止める return false; }; // 動作を進める return true; }; // 「お問い合わせ内容」入力欄の空欄チェック関数 function invalitContent(input_target, error_target, error_message){ const content = document.querySelector(input_target); const errMsgContent = document.querySelector(error_target); if(!content.value){ errMsgContent.classList.add('form-invalid'); errMsgContent.textContent = error_message; content.focus(); content.classList.add('input-invalid'); // 動作を止める return false; }; // 動作を進める return true; }; // 「送信」ボタンの要素にクリックイベントを設定する submit.addEventListener('click', (e) => { // デフォルトアクションをキャンセル e.preventDefault(); reset('#name-js', '#err-msg-name'); reset('#hurigana-js', '#err-msg-hurigana'); reset('#postal-js', '#err-msg-postal'); reset('#address-js', '#err-msg-address'); reset('#tel-js', '#err-msg-tel'); reset('#email-js', '#err-msg-email'); reset('#company-js', '#err-msg-company'); reset('#content-js', '#err-msg-content'); const focus = () => document.querySelector('#name-js').focus(); // 「お名前」入力欄の空欄チェック if(invalitName('#name-js', '#err-msg-name', 'お名前が入力されていません')===false){ return; }; // 「ふりがな」入力欄の空欄チェック if(invalitHurigana('#hurigana-js', '#err-msg-hurigana', '入力必須です')===false){ return; }; // ひらがなチェック const hurigana = document.querySelector("#hurigana-js"); const errMsgHurigana = document.querySelector("#err-msg-hurigana"); const huriganaCheck = /[^ぁ-んー ]/u; if(hurigana.value.match(huriganaCheck)){ errMsgHurigana.classList.add('form-invalid'); errMsgHurigana.textContent = 'ひらがなで入力してください'; hurigana.focus(); hurigana.classList.add('input-invalid'); return; }else{ errMsgHurigana.textContent =''; hurigana.classList.remove('input-invalid'); hurigana.blur(); }; // 「郵便番号」入力欄の空欄チェック if(invalitPostal('#postal-js', '#err-msg-postal', '入力必須です')===false){ return; }; // 郵便番号形式チェック const postal = document.querySelector("#postal-js"); const errMsgPostal = document.querySelector("#err-msg-postal"); const postalCheck = /([0-9]{7})$/; // const postalCheck = /^\d{7}$/; if(postal.value.match(postalCheck)){ errMsgPostal.textContent =''; postal.classList.remove('input-invalid'); postal.blur(); }else{ errMsgPostal.classList.add('form-invalid'); errMsgPostal.textContent = '郵便番号の形式が違います'; postal.focus(); postal.classList.add('input-invalid'); return; }; // 「住所」入力欄の空欄チェック if(invalitAddress('#address-js', '#err-msg-address', '入力必須です')===false){ return; }; // 「電話番号」入力欄の空欄チェック if(invalitTel('#tel-js', '#err-msg-tel', '入力必須です')===false){ return; }; //電話番号形式チェック const tel = document.querySelector("#tel-js"); const errMsgTel = document.querySelector("#err-msg-tel"); const telCheck = /0\d{1,4}\d{1,4}\d{4}/; if(tel.value.match(telCheck)){ errMsgTel.textContent =''; tel.classList.remove('input-invalid'); tel.blur(); }else{ errMsgTel.classList.add('form-invalid'); errMsgTel.textContent = '電話番号の形式が違います'; tel.focus(); tel.classList.add('input-invalid'); return; }; // 「メールアドレス」入力欄の空欄チェック if(invalitEmail('#email-js', '#err-msg-email', '入力必須です')===false){ return; }; // Email形式チェック const email = document.querySelector("#email-js"); const errMsgEmail = document.querySelector("#err-msg-email"); const emailCheck = /^[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+(\.[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)|(docomo\ezweb\softbank)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i; if(email.value.match(emailCheck)){ errMsgEmail.textContent =''; email.classList.remove('input-invalid'); email.blur(); }else{ errMsgEmail.classList.add('form-invalid'); errMsgEmail.textContent = 'Emailの形式で入力してください'; email.focus(); email.classList.add('input-invalid'); return; }; // 「会社名」入力欄の空欄チェック if(invalitCompany('#company-js', '#err-msg-company', '入力必須です')===false){ return; }; // 「お問い合わせ内容」入力欄の空欄チェック if(invalitContent('#content-js', '#err-msg-content', '入力必須です')===false){ return; }; document.customerinfo.submit(); }, false); }, false);contact.php<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="./contact.css"> <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> </head> <body> <?php // require "header.php"; ?> <main> <section class="container container-ornament" id="contact"> <h2 class="container-title"><span>お問い合わせ</span></h2> <div class="container-body"> <div class="container-required"> <p class="Required-title"><span class="Required">※</span>は入力必須項目になります。</p> </div> <form action="contact_db_connect.php" class="form form-m h-adr" method="post" name="customerinfo"> <!-- <form action="" class="form form-m h-adr" method="post" name="customerinfo"> --> <table> <tr> <th class="th"><span class="Required">※</span>お名前</th> <td class="td"> <span class="err_msg" id="err-msg-name"><?php if(!empty($err_msg['name'])) echo $err_msg['name']; ?></span> <input class="input input-l" id="name-js" name="name" type="text" placeholder="例）神戸 太郎" value="<?php if(!empty($_POST['name'])) echo $_POST['name']; ?>" > </td> </tr> <tr> <th class="th"><span class="Required">※</span>ふりがな</th> <td class="td"> <span class="err_msg" id="err-msg-hurigana"><?php if(!empty($err_msg['kana'])) echo $err_msg['kana']; ?></span> <input class="input input-l" id="hurigana-js" name="kana" type="text" placeholder="例）こうべ たろう" value="<?php if(!empty($_POST['kana'])) echo $_POST['kana']; ?>" > </td> </tr> <span class="p-country-name" style="display:none;">Japan</span> <tr> <th class="th"><span class="Required">※</span>郵便番号</th> <td class="td"> <span class="err_msg" id="err-msg-postal"><?php if(!empty($err_msg['zip'])) echo $err_msg['zip']; ?></span> <input type="text" class="input input-l p-postal-code" id="postal-js" name="zip" size="8" maxlength="8" placeholder="ハイフン無し" value="<?php if(!empty($_POST['zip'])) echo $_POST['zip']; ?>" > </td> </tr> <tr> <th class="th"><span class="Required">※</span>住所</th> <td class="td"> <span class="err_msg" id="err-msg-address"><?php if(!empty($err_msg['addr'])) echo $err_msg['addr']; ?></span> <input type="text" class="input input-l p-region p-locality p-street-address p-extended-address" id="address-js" name="addr" placeholder="住所" value="<?php if(!empty($_POST['addr'])) echo $_POST['addr']; ?>" > </td> </tr> <tr> <th class="th"><span class="Required">※</span>電話番号</th> <td class="td"> <span class="err_msg" id="err-msg-tel"><?php if(!empty($err_msg['tel'])) echo $err_msg['tel']; ?></span> <input class="input input-l" id="tel-js" name="tel" type="tel" placeholder="例）09012345678 半角 ハイフンなし" maxlength="13" value="<?php if(!empty($_POST['tel'])) echo $_POST['tel']; ?>" > </td> </tr> <tr> <th class="th sp-br"><span class="Required">※</span>メール<br>アドレス</th> <td class="td"> <span class="err_msg" id="err-msg-email"><?php if(!empty($err_msg['email'])) echo $err_msg['email']; ?></span> <input class="input input-l" id="email-js" name="email" type="email" placeholder="例）example@.com" value="<?php if(!empty($_POST['email'])) echo $_POST['email']; ?>" > </td> </tr> <tr> <th class="th"><span class="Required">※</span>会社名</th> <td class="td"> <span class="err_msg" id="err-msg-company"><?php if(!empty($err_msg['company'])) echo $err_msg['company']; ?></span> <input type="text" class="input input-l" id="company-js" name="company" placeholder="例）〇〇〇〇株式会社" value="<?php if(!empty($_POST['company'])) echo $_POST['company']; ?>" > </td> </tr> <tr> <th class="th">部署名</th> <td class="td"> <input type="text" class="input input-l" name="department" placeholder="" value="<?php if(!empty($_POST['company'])) echo $_POST['company']; ?>" > </td> </tr> <tr> <th class="th"><span class="Required">※</span>お問い合わせ内容</th> <td class="td"> <span class="err_msg" id="err-msg-content"><?php if(!empty($err_msg['text'])) echo $err_msg['text']; ?></span> <textarea class="input input-l input-textarea mb-xxl" id="content-js" name="text" placeholder="お問い合わせ内容" value="<?php if(!empty($_POST['text'])) echo $_POST['name']; ?>" ></textarea> </td> </tr> </table> <button class="btn btn-corp btn-l" id="contact-submit">送信</button> </form> </div> </section> </main> <footer class="footer"> </footer> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="./app.js"></script> <script src="./contact.js"></script> </body> </html>
- 投稿日：2020-11-24T09:23:15+09:00
overflow hiddenについて
overflowとは
CSSのプロパティの１つで、
要素のボックスからはみ出た部分をどう扱うかを指定する。
visible：初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden：はみ出た部分が隠れる。
scroll：はみ出た部分が隠れてスクロールできる状態になる。
auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）。hidden
要素のボックスからはみ出てしまった部分を非表示にする。<!-- html --> <p class="menu">あいうえおあいうえおあいうえお</p> /* css */ .menu { width: 50px; height: 50px; overflow: hidden; background: rgb(242, 173, 173); }
- 投稿日：2020-11-24T09:21:52+09:00
overflow visibleについて
overflowとは
CSSのプロパティの１つで、
要素のボックスからはみ出た部分をどう扱うかを指定する。
visible：初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
hidden：はみ出た部分が隠れる。
scroll：はみ出た部分が隠れてスクロールできる状態になる。
auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）。visible
<!-- html --> <p class="menu">あいうえおあいうえお</p> /* css */ .menu { width: 50px; height: 50px; /* heightを指定しなければはみ出ない。 */ overflow: visible; /* visibleは初期値の為、書かれていなくても同じ表示になる。 */ background: rgb(242, 173, 173); }
・
white-space: nowrap;heightを指定せずに、
white-space: nowrap;を指定することで、横にはみ出るようになる。
white-space=行の折り返しを決めるプロパティ
nowrap=自動的に改行しない
normal=右端で折り返す<!-- html --> <p class="menu">あいうえおあいうえお</p> /* css */ .menu { white-space: nowrap; width: 50px; overflow: visible; /* visibleは初期値の為、書かれていなくても同じ表示になる。 */ background: rgb(242, 173, 173); }
- 投稿日：2020-11-24T08:05:22+09:00
【HTML・CSS】ゲーミングな文字を作ります
ゲーミングPCが欲しい・・・でも高すぎる・・・そんな風に考えたことはありませんか？
雰囲気だけでもゲーミング感を味わいたい・・・そんな私のために、HTMLとCSSでゲーミング風＝虹色に光る文字を作ります。
実用性はあまりないので、ネタとしてご覧ください。作り方
作り方としては、大きく分けて2段階あります。
- 背景を文字で切り抜く
- 背景に虹色を適用する
以上の順で、作成していきます。
背景を文字で切り抜く
背景を文字で切り取るには、CSSの
background-clipを使います。
これは背景を適用する範囲を決めるプロパティです。（参考）
使用できる値には以下があります。
border-box: 境界の外側の辺まで背景を表示するpadding-box： パディングの外側の辺まで背景を表示するcontent-box： コンテンツのみ背景を表示するtext： テキスト部分のみ背景を表示するこのうち、
textを使うことで、背景を文字にすることができるようになります。
また、文字の色を透明にすることを忘れないようにしましょう。切り取った背景が文字で見えなくなってしまいます。style.css.gaming{ color: transparent; /*文字を透明にする*/ background-clip: text; /*背景を文字で切り抜く*/ background-image : hogehoge /*文字にしたい背景を入れる*/ }背景に虹色を適用する
背景を虹色にするにはグラデーションを使います。（参考）
background-imageプロパティにlinear-gradientを使うことでグラデーションを作ることができます。
ここで注意しないといけないのが、backgroundでも背景をグラデーションにできます。
が、background-clipはbackgroundで指定した背景を切り取ることができません。必ずbackground-imageプロパティに指定しましょう。style.css.gaming{ color: transparent; /*文字を透明にする*/ background-clip: text; /*背景を文字で切り抜く*/ background-image : linear-gradient(45deg, red, orange, yellow, green, aqua, blue, purple); }これで文字が虹色になりました。
さらにアニメーションをつけてゲーミング感をアップさせます。
animationプロパティで、アニメーションをつけることができます。
詳細はこちらを参照してください。
下の例では、4秒で左右に無限回往復移動するアニメーションになっています。style.css.gaming{ font-size: 36px; color: transparent; /*文字を透明にする*/ background-clip: text; /*背景を文字で切り抜く*/ background-image: linear-gradient(45deg, red, orange, yellow, green, aqua, blue, purple); background-size: 1200%; animation: 4s linear 0s infinite alternate slide; /* slideアニメーションを4秒で往復の線形移動を無限回行う */ } @keyframes slide { from { background-position: 0% 0%; } to { background-position: 100% 0%; } /* 右から左へ移動するアニメーション */ }これで、
gamingクラスを適用した箇所が、色が変わりながら光る文字ようになります。
ぜひ試してみてください。