- 投稿日：2021-05-13T22:30:49+09:00
【初心者でもわかる】効果が似ているHTML・CSSたち
どうも7noteです。似ているけど意味は違うHTML・CSSを紹介 HTMLとCSSの中には似ているようで違う意味を持つものがいくつかあります。 差がわかりにくいものもあるので、一つずつ比較しながら見ていきます。 似てるけど違うHTML 「ul」と「ol」 → 決定的な違い: 連番か否か どちらも複数のアイテム(リスト)を定義するのに使われますが、違いは連番かどうかです。 例) 持ち物リスト→「ul」 名簿順リスト→ 「ol」 「div」と「span」 → 決定的な違い: ブロック要素かインライン要素か どちらも柔軟にどこでも利用できる要素です。 divはブロック要素です。横幅を指定したり、高さを指定することができます。 一方spanはインライン要素です。文章中で使ってもspan以降の文字が段送りになることがなく、装飾を入れたりできます。 例) 1つの大きなブロック(塊)として装飾などを利用する→ 「div」 文中などの一部に対して装飾を入れる→ 「span」 「strong」と「em」 → 決定的な違い: strong > em どちらも強調を表すHTML要素ですが、strongの方がより強い強調を表します。 似てるけど違うCSS 「padding」と「margin」 → 決定的な違い: borderの内側の余白か、外側の余白か これは最初は識別か難しい難問かもしれません。ボックスモデルと呼ばれるものなので詳しくは「ボックスモデル css」とかで検索してもらうのがよいのですが、一言で違いを簡単に表すなら上の文の通りでしょう。 要素にborderを指定した場合、その内側に対して余白を取るのがpaddingです。逆に、そのborderより外側に対して余白を取るのがmarginになります。 例) 背景色の範囲を広げたり、borderと中の要素の間を広げたい→ 「padding」 要素同士の距離を広げたい→ 「margin」 「textalign: center;」と「margin: 0 auto;」（左右の中央寄せ） → 決定的な違い: インライン要素に対してか、ブロック要素に対してか インライン要素の左右中央寄せにはtextalign: center;を使います。(指定するのは中央揃えにしたい親要素に対して。) 逆にブロック要素の中央揃えにはmargin: 0 auto;が使われることが多いです。 ブロック要素、インライン要素でそれぞれ中央寄せにする方法が違うので注意が必要です。 まとめ 似ているものが多くあり覚えるのが大変ですが、一つ一つ違う意味がしっかり与えられているものしかありません。 ここで紹介したほとんどは頻出する重要なものが多いです。(strongとemは出番少なめ) しっかり違いを把握しておくことで崩れにくいレイアウトを組むことができますし、個々の特性を知ることで作成できる幅が大きく広げることができます！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-05-13T19:43:11+09:00
メンタル疾患症状管理、服薬管理Webシステム（書き込み結果、ファイル出力編)
メンタル疾患病状管理、服薬管理Webシステム（書き込み結果、ファイル出力編)のソースコードを公開いたします。 ファイル書き込み(result.php)のソースコードです。 <!-- result.php --> <!-- メンタル疾患、服薬管理の表示プログラム --> <!-- メンタル疾患、服薬管理システム --> <!-- 新規作成 2021/5/12 --> <!-- 作成者:乃木坂好きのITエンジニア --> <?php $message = 'OK'; $year = htmlspecialchars($_REQUEST['year']); $month = htmlspecialchars($_REQUEST['month']); $day = htmlspecialchars($_REQUEST['day']); $sleep = htmlspecialchars($_REQUEST['sleep']); $mental = htmlspecialchars($_REQUEST['mental']); $morning = htmlspecialchars($_REQUEST['morning']); $evening = htmlspecialchars($_REQUEST['evening']); $night = htmlspecialchars($_REQUEST['night']); $iraira = htmlspecialchars($_REQUEST['iraira']); $head_pain = htmlspecialchars($_REQUEST['head_pain']); $offence = htmlspecialchars($_REQUEST['offence']); $die = htmlspecialchars($_REQUEST['die']); $OD = htmlspecialchars($_REQUEST['OD']); $nothing = htmlspecialchars($_REQUEST['nothing']); $panik = htmlspecialchars($_REQUEST['panic']); $kanashibari = htmlspecialchars($_REQUEST['kanashibari']); $content = htmlspecialchars($_REQUEST['content']); $line = $year . $month . $day. "\n". "睡眠度:" . $sleep . "\n" . "気分の落ち込み度" . $mental . "\n" . "投薬管理： " . $morning . " " . $evening. " " . $night ."\n" . "あてはまる主な症状: " .$iraira . " " . $head_pain . " ". $offence . " " .$die . " " . $OD . " " .$nothing . " " .$panik . " " .$kanashibari. "\n" . "症状の詳細:" . $content . "\n" . PHP_EOL; file_put_contents(__DIR__ . '/articles.txt', $line, FILE_APPEND | LOCK_EX); require_once 'views/result.tpl.php'; 書き込み結果を表示するソースコードです。(result.tpl.php) <!-- result.tpl.php --> <!-- 結果表示ののテンプレートプログラム --> <!-- メンタル疾患、服薬管理システム --> <!-- 新規作成 2021/5/12 --> <!-- 作成者:乃木坂好きのITエンジニア --> <!DOCTYPE html> <html lang='ja'> <?php include('header.inc.php'); ?> <body> <h1>書き込みました</h1> <p><?= $message ?></p> <p> <?php if(isset($year)) { echo $year . ', '; } if(isset($month)) { echo $month . ', '; } if(isset($day)) { echo $day . ', '; } if(isset($sleep)) { echo $sleep . ', '; } if(isset($mental)) { echo $mental; } if(isset($morning)) { echo $morning; } if(isset($evening)) { echo $evening; } if(isset($night)) { echo $night; } if(isset($iraira)) { echo $iraira; } if(isset($head_pain)) { echo $head_pain; } if(isset($offence)) { echo $head_pain; } if(isset($die)) { echo $die; } if(isset($OD)) { echo $die; } if(isset($nothing)) { echo $nothing; } if(isset($panic)) { echo $nothing; } if(isset($kanashibari)) { echo $kanashibari; } if(isset($content)) { echo $content; } ?> </p> <form action='mental.php' method='get'> <button type='submit' id="submit">戻る</button> </form> <?php include('footer.inc.php'); ?> </body> </html>
- 投稿日：2021-05-13T19:36:02+09:00
メンタル疾患症状管理、服薬管理Webシステム（画面入力編)
メンタル疾患症状管理、服薬管理Webシステム（画面入力編）のソースコードを公開いたします。 メインとなるmental.phpのソースコードです。 <!-- mental.php --> <!-- ボディー部分のプログラム --> <!-- メンタル疾患、服薬管理システム --> <!-- 新規作成 2021/5/12 --> <!-- 作成者:乃木坂好きのITエンジニア --> <?php $message = 'メンタル疾患、投薬管理システム'; $lines = file(__DIR__ . '/articles.txt', FILE_IGNORE_NEW_LINES); require_once 'views/mental.tpl.php'; ヘッダー部分の部分のテンプレートソースコードです。 <!-- header.inc.php --> <!-- ヘッダー部分のテンプレートプログラム --> <!-- メンタル疾患、投薬管理システム --> <!-- 新規作成 2021/5/12 --> <!-- 作成者:乃木坂好きのITエンジニア --> <head> <meta charset='utf-8'> <title>メンタルチェックシステム</title> <style> body { background-color:bisque; padding: 10px; } p.header { font-size:20px; color:crimson; } h1 { font-size: 40px; color:blueviolet; } h2 { font-size: 20px; color:blue; } #submit { background-color:darkgreen; border: 1px solid aqua; padding 15px 90px; border-radius: 10px; font-size:15px; color: #fff; } #submit:hover { background-color:darkblue; } a{ display:inline-block; padding:10px 20px 10px 20px; color:white; background-color:green; font-size:18px; font-weight: bold; border:solid 3px pink; border-radius:8px; } a:hover { background-color:darkcyan; } .nogizaka{ font-size:8px; color:red; } </style> </head> ボディー部分のテンプレートソースコードです <!-- mental_tpl.php --> <!-- ボディー部分のテンプレートプログラム --> <!-- メンタルチェックシステム --> <!-- 新規作成 2021/5/12 --> <!-- 作成者:乃木坂好きのITエンジニア --> <!DOCTYPE html> <html lang='ja'> <?php include('header.inc.php'); ?> <script type="text/javascript"> <!-- function check(){ //変数の定義 const content = document.getElementById('content'); const submit = document.getElementById('submit'); if(content.value.replace(/\s+/, '').length === 0 ){ window.alert('詳細が入力されていません。'); return false; } else { if(window.confirm('送信してよろしいですか？')){ // 確認ダイアログを表示 return true; } else{ // 「キャンセル」時の処理 window.alert('キャンセルされました'); // 警告ダイアログを表示 return false; // 送信を中止 } } } // --> </script> <body> <h1>メンタル疾患、投薬管理</h1> <p class="header"><?= $message ?></p> <form action='result.php' method='post' onSubmit="return check()"> <dl> <label for='year'>年</label> <select name="year"> <option value="2021年">2021年</option> <option value="2022年">2022年</option> <option value="2023年">2023年</option> <option value="2024年">2024年</option> <option value="2025年">2025年</option> </select> <p></p> <label for='month'>月</label> <select name="month"> <option value="1月">1月</option> <option value="2月">2月</option> <option value="3月">3月</option> <option value="4月">4月</option> <option value="5月">5月</option> <option value="6月">6月</option> <option value="7月">7月</option> <option value="8月">8月</option> <option value="9月">9月</option> <option value="10月">10月</option> <option value="11月">11月</option> <option value="12月">12月</option> </select> <p></p> <label for='day'>日</label> <select name="day"> <option value="1日">1日</option> <option value="2日">2日</option> <option value="3日">3日</option> <option value="4日">4日</option> <option value="5日">5日</option> <option value="6日">6日</option> <option value="7日">7日</option> <option value="8日">8日</option> <option value="9日">9日</option> <option value="10日">10日</option> <option value="11日">11日</option> <option value="12日">12日</option> <option value="13日">13日</option> <option value="14日">14日</option> <option value="15日">15日</option> <option value="16日">16日</option> <option value="17日">17日</option> <option value="18日">18日</option> <option value="19日">19日</option> <option value="20日">20日</option> <option value="21日">21日</option> <option value="22日">22日</option> <option value="23日">23日</option> <option value="24日">24日</option> <option value="25日">25日</option> <option value="26日">26日</option> <option value="27日">27日</option> <option value="28日">28日</option> <option value="29日">29日</option> <option value="30日">30日</option> <option value="31日">31日</option> </select> <p></p> <dd>睡眠度を選んでください。 <select name="sleep"> <option value="よく眠れた">よく眠れた</option> <option value="眠れた">眠れた</option> <option value="普通">普通</option> <option value="あまり眠れなかった">あまり眠れなかった</option> <option value="全く眠れなかった">全く眠れなかった</option> </select></dd> <p></p> <dd>気分の落ち込み度 <select name="mental"> <option value="大きい"> 大きい <option value="やや大きい"> やや大きい <option value="普通"> 普通 <option value="やや小さい"> やや小さい <option value="小さい"> 小さい </select> </dd> <p></p> <dd>服薬管理 <input type="checkbox" name="morning" id="morning" value="朝食後">朝食後 <input type="checkbox" name="evening" id="evening" value="夕食後">夕方後 <input type="checkbox" name="night" id="night" value="寝る前">寝る前 </dd> <p></p> <dd>あてはまる主な症状をチェックしてください <br> <input type="checkbox" name="iraira" id ="iraira" value="イライラしている">イライラしている <input type="checkbox" name="head_pain" id="head_pain" value="頭痛がする">頭痛がする <input type="checkbox" name="offence" id="offence" value="攻撃的">攻撃的 <input type="checkbox" name="die" id="die" value="自殺願望">自殺願望 <input type="checkbox" name="OD" id="OD" value="大量に薬を飲みたい">OD <input type="checkbox" name="nothing" id="nothing" value="何もする気がない">何もする気がない <input type="checkbox" name="panik" id="panic" value="パニック状態">パニック状態 <input type="checkbox" name="kanashibari" id="kanashibari" value="金縛りにあった">金縛りにあった <br> </dd> <p></p> <dd>今日の様子を詳しく書いてください</dd> <dd><textarea name="content" id="content" rows="5" cols="100" ></textarea></dd> <p></p> </dl> <input type="submit" value="button" id="submit" onMouseOver="changeColor()" onMouseOut="revertColor()"> <script> function changeColor(){ document.getElementById('submit').style.backgroundColor = 'yellow'; } function revertColor(){ document.getElementById('submit').style.backgroundColor = null; } </script> <h2>投稿一覧</h2> <?php foreach ($lines as $line) { ?> <p><?= $line ?></p> <?php } ?> <?php include('footer.inc.php'); ?> <br> <a href="../index.html" id="menu">メニュー画面に戻る</a> フッターのソースコードです。 <!-- footer.tpl.php --> <!-- フッター部分のテンプレートプログラム --> <!-- メンタル疾患、服薬管理システム --> <!-- 新規作成 2021/5/12 --> <!-- 作成者:乃木坂好きのITエンジニア --> <hr> <footer class="nogizaka">by 乃木坂好きのITエンジニア</footer>
- 投稿日：2021-05-13T19:32:32+09:00
【jQueryメモ】ページ内スクロール
【ポイント】 ・ヘッダーが固定の場合はヘッダーの高さ分topから引く script.js //---------------- //ページ内スクロール //---------------- jQuery('a[href^="#"]').on('click', function () { var header = jQuery('.header').innerHeight(); var id = jQuery(this).attr('href'); var position = 0 if (id != '#') { position = jQuery(id).offset().top - header;//ヘッダー分の高さを引く } jQuery('html,body').animate({ scrollTop:position }, 300);//0,3秒かけて実行 }); //---------------------------- //トップに戻るボタンのスクロール表示 //----------------------------- jQuery(window).on('scroll', function () { if (150 < jQuery(this).scrollTop()) { jQuery('.to-top').addClass('is-show');//150px以上動かしたら表示 } else { jQuery('.to-top').removeClass('is-show');//それ以外は非表示 } });
- 投稿日：2021-05-13T17:57:03+09:00
CSSに書くインラインSVGをエスケープする
要約 データurlを使う 「"」と「'」を「\」でエスケープする 「#」をurlエンコード(%23)する 色指定はrgb()か色名を使って「#」を避ける </style>を<\/style>にエスケープする 背景 アイコンやロゴを表現するときIMGタグの代わりにCSSで書きたい場面はよくあると思う。 画像url.css .hoge::before{ content:" "; background-image: url("hoge.png"); width: 28px; height: 28px; display: block; background-repeat: no-repeat; } url()の中にはファイルのurlやデータurlが書ける。 データurl.css background-image: url("data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7"); background-image: url("data:image/gif;GIF89a%01%00%01%00%60%00%00%21%F9%04%01%0A%00%FF%00%2C%00%00%00%00%01%00%01%00%00%08%04%00%FF%05%04%00%3B"); エンコードはbase64かurlエンコードが多いと思う。 しかし、svgをエンコードせずにデータurlに含めようとしても上手く表示できない。 上手く表示できない.css background-image: url('data:image/svg+xml;utf8,<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.346 28.346"><defs><style>.cls-1{fill:#040000;}</style></defs><path class="cls-1" d="M10.973,2.568S4.033,25.954,4.179,25.936,26.436,14.243,26.436,14.243Z"/></svg>') これはデータurlを邪魔する文字をエスケープしてないからだけど、 データurl全体をbase64などでエンコードすると後で変更が大変なので必要な文字だけエスケープしたい。 そこで、どの文字をエスケープする必要があるか調べる。 方法 illustratorで適度なイラストを描いてsvgファイルを用意する。 「ファイル→書き出し→スクリーン用に書き出し」で出力形式をsvgにするとsvgファイルを出力できる。 出力した.svg <svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" width="10mm" height="10mm" viewBox="0 0 28.346 28.346"><defs><style>.cls-1{fill:#040000;}</style></defs><path class="cls-1" d="M10.973,2.568S4.033,25.954,4.179,25.936,26.436,14.243,26.436,14.243Z"/></svg> レイヤー名が役に立つ場面は無いと思うので削る。 width、heightはcssで指定したサイズが効かなくなるので削る。 修正した.svg <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.346 28.346"><defs><style>.cls-1{fill:#040000;}</style></defs><path class="cls-1" d="M10.973,2.568S4.033,25.954,4.179,25.936,26.436,14.243,26.436,14.243Z"/></svg> cssの中にデータurlを邪魔する文字を入れてどこでエラーが出るか調べる。 データurlのエスケープ.php <!DOCTYPE html><html><head><meta charset="utf-8"><title></title> <style> <?php $esc = array("'","#",'"');//エラーが起きた文字をエスケープする for($ascii = 32; $ascii <= 126; $ascii++){ if(in_array(chr($ascii),$esc,true)){ $str = urlencode(chr($ascii)); // $str = '\\'.(chr($ascii)); }else{ $str = chr($ascii); } echo '.ascii'.$ascii.'{display:flex;}'.PHP_EOL; echo '.ascii'.$ascii.'::before{ content:" "; background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><!-- '.$str.' --><defs><style>.cls-1{fill:rgb(0,0,0);}<\/style></defs><path class="cls-1" d="M10.973,2.568S4.033,25.954,4.179,25.936,26.436,14.243,26.436,14.243Z"/></svg>\'); width: 28px; display: block; height: 28px; background-repeat: no-repeat; ;}'.PHP_EOL; } ?> </style> </head> <body><?php for($ascii = 32; $ascii <= 126; $ascii++){ echo '<div class="ascii'.$ascii.'">'.chr($ascii).'</div>'.PHP_EOL; } ?> </body></html> 結果 「#」はurlエンコードでしか避けられないようだ。 「"」と「'」はurlエンコードでも「\」エスケープでも避けられた。 svgの中に「</style>」があるとhtmlの中の<style>タグが終わってしまうので「\」でエスケープする。 それ以外の文字はエスケープする必要は無いようだ。 余談 短いsvgならstyleを削って個別のpathにfill=""で色を指定しても良いと思う。
- 投稿日：2021-05-13T17:00:40+09:00
ほぼ初心者が作ったキャラ名、アイテム名、今日の一言を表示するプログラム
はじめに ほぼ初心者(前に少し調べた程度)が仕事に行く元気を出すために作ったものです。 ホラーゲーム「SIREN」シリーズのキャラ名、アイテム名、今日のひとことを表示するだけのプログラムです。 各シリーズのどれかに限定するか、全シリーズを対象にするか選ぶとボタンの文字が変わります。 とりあえずこんなの作りたーいみたいな雑な発想から、あの機能欲しいこんなのつけたいでごちゃごちゃ機能を足していったものです。 変遷まとめみたいなやつ 初めに作った機能 ・キャラ名、アイテム名、セリフを出す ・シリーズを限定できる(無印だけ出す、全シリーズ出すなどが選べる) 後々付け加えた機能 ・シリーズを限定するとボタンの文字が変わる 無印/全シリーズ、2のみ、NTのみで別々 ・全シリーズにしたとき、ランダムにキャッチコピーを表示する。 変更ボタンを押すとキャッチコピーがランダムに変わる 今後付けたい機能 ・ 前置きが長くなりましたがここからがコードです。 だいぶごちゃっとしてますが(Javascriptが)多めに見ていただけると幸いです。 ここから何とかもうちょっと短くしたい気持ちはあります。 コード まずはHTML onchangeやonclickを使ってJavascriptのfunctionを呼び出しています。 javascript.html <html lang="ja"> <head> <script type="text/javascript" src="javascript_imp.js"></script> <link rel="stylesheet" href="javascript_imp.css"> <title>練習</title> </head> <body class="box"> <p>SIREN占い</p> <form name="form1"> <select name="limited" id="limited" size=1 onchange="change_func()"> <option value="one_only">無印のみ</option> <option value="two_only">2のみ</option> <option value="nt_only">ntのみ</option> <option value="all">全シリーズ</option> </select><span id="reload"></span> <p></p> <label for="number">何回占いをしますか？(1～5の間で入れてください)</label> <input type="number" name="number" id="number" min="1" max="5" value="1"></input>回 <p><span id="caution"></span></p> </form> <p></p> <button id="button_click" onclick="click_func()">ジェノサイダー！</button> <p></p> <span class="change" id="change"></span> <p></p> <fotter> 参考資料:各種bot 実況者様の動画など </fotter> </body> </html> 次にJavaScriptです。 for文、if文、Random関数、配列、連想配列(dictionary)などを使ってキャラ名を選択したりキャラ説明を出しています。 セリフはセリフでfunctionにしてあるのは純粋に一つ一つの要素が長くて後で追加したり編集するときに絶対めんどくさくなりそうだと思ったからです。 キャラごとのセリフをそれぞれ配列にしてfunctionの最後で一つに結合。それをjsファイル全体で使える変数に入れ直してます。 javascript.js let series = ["one", "two", "nt"]; let character_one = ["須田恭也","神代美耶子","竹内多聞","安野依子","志村晃","宮田司郎","牧野慶","八尾比沙子","神代亜矢子","神代淳","高遠玲子","四方田春海","美浜奈保子","恩田理沙","前田知子","石田徹雄", "恩田美奈","志村晃一"]; let character_two = ["一樹守","木船郁子","矢倉市子","永井頼人","三沢岳明","阿部倉司","三上脩","岸田百合","多河柳子","藤田茂","喜代田章子","加奈江","太田ともえ","太田常雄","三上隆平","沖田宏"]; let character_nt = ["ハワード・ライト","美耶古","サム・モンロー","メリッサ・ゲイル","ベラ・モンロー","犀賀省悟","アマナ","ソル・ジャクソン","河辺幸江"]; let item_one = ["火掻き棒","ネイルハンマー","ラチェットスパナ","テレフォンカード","発煙筒","ヴェール","壊れたラジオ","拳銃","木製バット","ライター","笑い袋","ビーズ人形","焔薙","図書貸し出しカード","写真","宇理炎", "鎌"]; let item_two = ["壊れた朱石のブレスレット","壊れた碧石のブレスレット","釘バット","メダル","髪飾り","首輪","奇石","週刊アトランティス","TNT","釘","軍用スコップ","闇那其","ゴルフクラブ","空き缶",""]; let item_nt = ["一升瓶","アナログテレビ","改造散弾銃","案内板","ビデオカメラ","缶切り","携帯電話","杭","アンテナ","ブローチ","柄杓","宇理炎","つるはし","トロッコ","ハニュウダカブト",""]; let quotation_one = Quotation_One(); let quotation_two = Quotation_Two(); let quotation_nt = Quotation_Nt(); let character; let item; let quotation; let word; let c_series; let i_series; let q_series; let num_fortune; let array_character = []; let array_item = []; let array_quotation = []; let num_c, num_i, num_q; let moji; num_c = 0; num_i = 0; num_q = 0; //どのシリーズか限定する文言が変わったらボタンの文字も変更 function change_func(){ let limited = document.getElementById("limited").value; if(limited == "one_only"){ document.getElementById("reload").innerHTML = ""; document.getElementById("button_click").innerHTML = "ジェノサイダー！"; }else if(limited == "two_only"){ document.getElementById("reload").innerHTML = ""; document.getElementById("button_click").innerHTML = "神風見せてやるよ！"; }else if(limited == "all"){ random_tagline(); document.getElementById("reload").innerHTML = "<span id='random' onclick='random_tagline()'>変更</span>"; }else { document.getElementById("reload").innerHTML = ""; document.getElementById("button_click").innerHTML = "Go To Hell!"; } } //配列を綺麗にまっさらにする function array_clean(){ array_character.splice(0); array_character = array_character.filter(Boolean); array_item = array_item.filter(Boolean); array_quotation = array_quotation.filter(Boolean); } //ゲームのキャッチコピーのどれかをランダムに出す function random_tagline(){ //ランダムな数字を1-3で出す let zetubo = Math.floor(Math.random() * 3) + 1; if(zetubo == 1){ document.getElementById("button_click").innerHTML = "どうあがいても、絶望"; }else if(zetubo == 2){ document.getElementById("button_click").innerHTML = "逃げ場なんて、ないよ"; }else{ document.getElementById("button_click").innerHTML = "息をすることさえ、恐怖"; } } //ボタンをクリックしたときの動作 function click_func(moji) { let num_fortune = document.getElementById("number").value; array_character.length = 0; array_quotation.length = 0; array_item.length = 0; num_i = 0; num_c = 0; num_q = 0; //もし占い回数が1未満、もしくは5より大きかった場合は警告を出す if(num_fortune<1 || num_fortune>5){ document.getElementById("caution").innerHTML = "範囲外です。1～5のどれかを入れてください"; moji = ""; }else{//それ以外の場合(占い回数が範囲内の場合) document.getElementById("caution").innerHTML = ""; moji = ""; for(let i = 0; i < num_fortune; i++){ //シリーズが限定されているかを確認 let select = document.form1.limited.selectedIndex; if(select == 0){ c_series = "one"; i_series = "one"; q_series = "one"; }else if(select == 1){ c_series = "two"; i_series = "two"; q_series = "two"; }else if(select == 2){ c_series = "nt"; q_series = "nt"; i_series = "nt"; }else{ //キャラ、アイテム、セリフをそれぞれランダムに取得 c_series = series[Math.floor(Math.random() * series.length)]; q_series = series[Math.floor(Math.random() * series.length)]; i_series = series[Math.floor(Math.random() * series.length)]; } //キャラクターのシリーズをどれにするか if(c_series == "one"){ character = character_one[Math.floor(Math.random() * character_one.length)]; }else if(c_series == "two"){ character = character_two[Math.floor(Math.random() * character_two.length)]; }else if(c_series=="nt"){ character = character_nt[Math.floor(Math.random() * character_nt.length)]; } //アイテムのシリーズをどれにするか if(i_series == "one"){ item = item_one[Math.floor(Math.random() * item_one.length)]; }else if(i_series == "two"){ item = item_two[Math.floor(Math.random() * item_two.length)]; }else if(i_series=="nt"){ item = item_nt[Math.floor(Math.random() * item_nt.length)]; } //名言のシリーズをどれにするか if(q_series == "one"){ quotation = quotation_one[Math.floor(Math.random() * quotation_one.length)]; }else if(q_series == "two"){ quotation = quotation_two[Math.floor(Math.random() * quotation_two.length)]; }else if(q_series=="nt"){ quotation = quotation_nt[Math.floor(Math.random() * quotation_nt.length)]; } //要素を追加していく array_character[num_c] = character; array_item[num_i] = item; array_quotation[num_q] = quotation; //配列のempty要素を全削除 array_character = array_character.filter(Boolean); array_item = array_item.filter(Boolean); array_quotation = array_quotation.filter(Boolean); moji += add(character, item, quotation, i, num_fortune); num_c++; num_i++; num_q++; } } //HTMLを変更する document.getElementById("change").innerHTML = moji; } //説明を出すときの分岐用に文字を数字にそれぞれ変換する function henkan(suji){ if(suji == "one"){ return 1; }else if(suji == "two"){ return 2; }else{ return 3; } } //HTML作成用 function add(character, item, word, i, num_fortune){ return "<p>----------</p><span class='fortune-telling'><div class='explain' id='explain_" + i + "'></div><span class='character' id='character'>今日のあなたにぴったりなキャラクターは<div class='link' onclick='Explain_character(" + i + ", " + henkan(c_series) + ", " + num_fortune + ")'>" + character + "</div>です！</span><p></p><span class='item' id='item'>ラッキーアイテムは<div class='link' onclick='Explain_item(" + i + ", " + henkan(i_series) + ", " + num_fortune + ")'>"+item+"</div>です！</span><p></p><span class='quotation ' id='quotation'>今日の一言は「<div class='link' onclick='Explain_quotation(" + i + ", " + henkan(q_series) + ", " + num_fortune + ")'>"+word+"</div>」です！</span></span>"; } //無印の配列を生成して合成する奴 function Quotation_One(){ let kyoya = ["お前じゃなくて、須田恭也","悪いけど、美耶子との約束なんだ","そんで、この村からも逃げ出そう","お前らみたいなのがいる限り、俺は何度でも現れる"]; let miyako = ["恭也…ありがとう","ぐーず","ケルブじゃないとやっぱりだめ…","早く連れてけ！","私の目を使って"]; let jun = ["昨日のお返しだよ","美耶子、お前の役割はまだ終わってないだろう？","どうして亜矢子まで！","誰だ！"]; let ayako = ["違う…私は違う…！","あんたが生贄の羊になりなさいよ！","淳は、私の許嫁なんだから！"]; let yao = ["この水があなたの体内に入ったの…流した血の分だけ","あなたが実を盗んだのね！","もう、待つのは嫌…！"]; let makino = ["八尾さん…どこに行ったんだ？","私は…ただのみじめな道化だった","狂ってる…！","知子ちゃん！","きゅるってる！"]; let miyata = ["私も美奈さんを探していたんだ。とりあえず一緒に病院に","っ馬鹿な…！","それでも俺は、牧野さんになりたかった","煉獄の炎よ。俺の命と引き換えだ","あぁ…今行くよ", "本当にしつこい女だな"]; let risa = ["お姉ちゃん！お姉ちゃんなの！？","もしかして、宮田先生？私、恩田美奈の妹です！理沙です！","お姉ちゃんはどこなんですか！？お姉ちゃんは無事なんですか！？","そっくり！先生も双子？","お姉ちゃん男なんですか！？お姉ちゃん武士なんですか！？"]; let akira = ["お前が呼んだのか？","よそ者か…迷い込んだのか？","竹内か…","この村ももう終わりだ…","結局逃げきれないということか"]; let mihama = ["こっそりカメラ回してるんじゃないでしょうね！","永遠の若さ…永遠の若さ…"]; let tomoko = ["求導師様、どうしたんですか？","はーるみちゃんがほーしい","お父さん！お母さん！開けてよ！"]; let tamon = ["志村さん…なのか…？","車にいろと言ったはずだ","しかし、とんだ里帰りに君を巻き込んでしまったな","お父さん、お母さん…！"]; let yoriko = ["先生、家族ごっこしてる場合ですか！","無理やりついてきたのは私ですよ？","とりあえず村の人探しましょうよ。きっと大騒ぎですよ！","先生、それって…本物？"]; let takato = ["先生が絶対に助けてあげるからね…！","春海ちゃん！だめ…諦めたらだめ…！","春海ちゃん、どこぉ…？","めぐみ…お母さんを許して…","じゃあ、先生はお母さんになってあげる。春海ちゃんの"]; let harumi = ["お母さん…","先生、春海怖いよ…","うん…春海、待ってる","先生、助けて！先生！早く来て！"]; let ishida = ["無駄な抵抗は止めなさい","了解…射殺します"]; return kyoya.concat(miyako, jun, ayako, yao, makino, miyata, risa, akira, mihama, tomoko, tamon, yoriko, takato, harumi, ishida); } //2の配列を生成して合成する奴 function Quotation_Two(){ let ituki = ["クソ…俺は、だまされたのか？","化け物め…化け物め…化け物め…！","人にものを頼むときはお願いします、だろ？","やつの動きを止めるんだ！","俺という観測者が到達したとき、可能性は一つに収束する"]; let ikuko = ["もう一人の私…こんな思いしないのかな…？","結局この島に引き寄せられちゃったよ、お母さん…","先に…私たちが先にたどり着かないと！","そんな…化け物見るような眼で見ないでよ…","こんなところでかっこつけたって誰も見てないんだから！"]; let nagai = ["神風見せてやるよ！","沖田さん！死なないでください…沖田さん…！","人に助けてもらったときは何て言うんだっけ？"]; let misawa = ["士長、応戦だ","俺だけ先に目覚めちゃうけど…悪いな","久しぶりに最高の気分だ","あっち側もこっち側も関係ない","なーがいくん！一緒に遊びましょー！"]; let itiko = ["わからない…わからないよ…","お寝坊さんなお姉ちゃん","お前もずっと寂しかったんだろう？","違う…私、あの時死んだ！私は私じゃない！","みーつけた！"]; let kanae = ["脩…お姉ちゃんを許して…","脩、どこにいるの？","七つの門の七つの鍵を開けるの","お休み、脩"]; let yuri = ["あなたは、私を信じてくれる？","お母さんは鳩を飛ばし続けてたの","私を見て…"]; let shu = ["ツカサなのか…？これは、お前の…","お姉ちゃん！","お姉ちゃんもお外で遊べたらいいのにね","見える…見えるよ……"]; let abe = ["これ…純金じゃねぇのか？","クソすぎだろ！このままじゃよぉ…"]; let ryuko = ["あなた、お母さんと同じ気配…お母さん、目覚めようとしてるのね？","ごめんね…"]; let ryuhei = ["化け物なんかじゃないですよ","おーい、かくれんぼか？","学会に発表しなきゃなぁ"]; let hujita = ["やんなっちまうなぁ…","すまんなぁ、朝子","検挙するぞ！","始末書…始、末書"]; let kiyota = ["なんだか最悪の誕生日","あぁ…たくさんの強い念が…","私だってペーパーなんだから！","…分かった。信じる"]; let tomoe = ["髪飾り…お父様にもらった、髪飾り…","ここにいる！化け物女がここにいる！","誰か来て！誰かー！","虫けらのくせに！","髪飾り返してよ！","都会ってどんなところなのかなぁ"]; let tuneo = ["お前たち、やってくれるな？","藤田のバカ息子が…結局逃げかえってきたか"]; let okita = ["永井も随分と冷たいよなぁ","永井ぃ！俺だよ俺ぇ！","永井ー。根性出せよぉ"]; return ituki.concat(ikuko, nagai, misawa, itiko, kanae, yuri, shu, abe, ryuko, ryuhei, hujita, kiyota, tomoe, tuneo, okita); } //NTの配列を生成して合成する奴 function Quotation_Nt(){ let haward = ["Miyako, I promise.","ボクは、ハワード。君は？","ミヤコ、イッショ、ガンバル！"]; let saiga = ["運命に抗ってみますか？ご自由に","幸江…","俺はダンテではない。ベアトリーチェの導きは期待できない","もうあきらめろ。無駄だ。流れに身を任せろ","さすがに飽きた"]; let bella = ["Daddy said you can make bugs show up if you put something sweet on a tree...(ダディが言ってた 木に蜜を塗ったら虫が来るって)"]; let mellisa = ["When this thing died, the others did too.(こいつが死んだら…あいつらも死んだ？)"]; let yukie = ["先生は…私がいないと、だめなんだからぁ","先生ぇ…"]; let sam = ["Hey! Does that works? Maybe we can use it to call for help!(おい！その電話は使えないのか？その電話で助けを呼んでくれよ！)"]; let sol = ["Melissa,Bella...I hope you guys are okay.(メリッサ、ベラ…無事でいてくれよ…)"]; let amana = ["Perhaps we can set a trap.(罠を仕掛けられないでしょうか？)"]; let miyako = ["死にたくない！一緒に逃げたい！村の外を見てみたい、こんな村大嫌い…！","…早く連れてけ","いや！死ぬなんて絶対に嫌！","こんなことしかできない。…ごめんね、せっかく綺麗だったのに"]; return haward.concat(saiga, bella, mellisa, yukie, sam, sol, amana, miyako); } //どのシリーズのアイテムの説明を表示するかを判定 function Explain_item(item, series, num_fortune){ let id; document.getElementByClassName("link").style = ""; // colorのみ document.getElementByClassName("link").innerHTML = ""; let name = array_item[item]; if(series == 1){ ExplainItem_one(name, item); }else if(series == 2){ ExplainItem_two(name, item); }else{ ExplainItem_nt(name, item); } } //どのシリーズのキャラの説明を表示するかを判定 function Explain_character(character, series, num_fortune){ let id; for(let i = 0; i<num_fortune; i++){ id = "explain_" + i; document.getElementById(id).style = ""; // colorのみ document.getElementById(id).innerHTML = ""; } let name = array_character[character]; if(series == 1){ ExplainCharacter_one(name, character); }else if(series == 2){ ExplainCharacter_two(name, character); }else{ ExplainCharacter_nt(name, character); } } //無印キャラクター説明用 function ExplainCharacter_one(character, num){ let dictionary = {"須田恭也":"『SIREN』の主人公。16歳。通称『ジェノサイダー』。都市伝説について調べようと村を訪れ、異変に巻き込まれる。", "安野依子":"『SIREN』の登場人物。竹内多聞の車にこっそりと乗りこんで着いてきたために異変に巻き込まれる。明るくマイペースな性格。", "竹内多聞":"大学教授。村の伝わる怪しい儀式などの真相を知るために帰ってきて異変に巻き込まれる。なぜか拳銃を所持。こっそり着いてきた生徒の安野依子と行動を共にする。", "志村晃":"山の中に住んでいた老人。異変に巻き込まれた村をおかしく思い、山から下りてくる。", "宮田司郎":"宮田医院の医者。その裏では神代にとって不都合な人間を消すという役割を担っている。とある事情から山の中にいたところで異界に巻き込まれる。", "牧野慶":"求導師。気弱な性格をしている。儀式をしていたが異変に巻き込まれ、求導女を探して歩き回る。道中で前田知子を保護し、行動を共にする。", "八尾比沙子":"求導女。須田を導いたりと優しいように見えるが…？", "神代美耶子":"神の花嫁。儀式の生贄だったが、異変に巻き込まれた際に逃走。盲目の為、一人での行動がほぼ不可能。", "神代淳":"神代の次代当主として養子になった。その立場故か少し傲慢なところがある。儀式中に異変に巻き込まれる。", "神代亜矢子":"神代家次期当主、神代淳の許嫁。神代淳によく構われている妹の神代美耶子の事をよく思っていない。儀式中に異変に巻き込まれる。", "四方田春海":"小学生。高遠玲子、名越栄治と共に星を見る会に参加中に異変に巻き込まれる。教師である高遠玲子と共に行動する。", "高遠玲子":"教師。名越栄治、四方田春海と星を見る会に参加中に異変に巻き込まれる。生徒である四方田春海と行動を共にする。", "志村晃一":"志村晃の息子。27年前に行方不明となった。詳しくは羽生蛇村異聞参照。", "美浜奈保子":"グラビアアイドル。クルーたちと共に村に来たが、巻き込まれた際に離れ離れとなってしまう。一人で行動する。", "恩田理沙":"恩田美奈の双子の妹。姉に会いに村に戻ってきたが異変に巻き込まれる。一人で廃屋から脱出した後、宮田司郎と出会い行動を共にする。", "前田知子":"両親と喧嘩し、家出している最中に異変に巻き込まれてしまった少女。両親のもとへ戻るため求導師と共に行動する。", "石田徹雄":"警察官。須田の前に現れ、銃を向けてくる。", "恩田美奈":"宮田医院の看護師。異変に巻き込まれる前に死亡していた。"} let id = "explain_" + num; document.getElementById(id).innerHTML = dictionary[character]; document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ } //2キャラクター説明用 function ExplainCharacter_two(character, num){ let dictionary = {"一樹守":"『SIREN2』の主人公。オカルト雑誌、週刊アトランティスの記者。夜見島に伝わる都市伝説などを調査するために夜見島へ渡る。", "木船郁子":"感応視という能力を持っている。一樹たちを夜見島に送る船長の手伝いをしていた。", "矢倉市子":"記憶が一部ない少女。フェリーの中で目を覚まし、助けに来てくれた警察官の藤田茂と共に行動する。", "永井頼人":"夜見島に不時着した自衛隊の士長。尊敬する上官の沖田が着陸の際に自分を庇って亡くなってしまったため、同じく生存した三沢岳明と共に行動する。", "三沢岳明":"永井の上官。生き残った永井の指揮を執った。幻覚を見たりすることがあり、薬に頼っている。", "阿部倉司":"恋人が死んだと信じられず、探すために占い師の喜代田章子と共に夜見島へ来た。", "三上脩":"とある事柄によって弱視になってしまった青年。自らの過去の記憶を取り戻すべく生まれ故郷の夜見島へと向かった。", "岸田百合":"正体不明の少女。島の廃倉庫の中に倒れていたところを一樹によって保護される。", "多河柳子":"阿部の恋人。頭部を何度も殴打されて死亡している。", "藤田茂":"警察官。人のいないはずの夜見島で怪しい女を見たという通報を聞いて夜見島へと向かう。お人好しなところがあり、だまされやすい。", "喜代田章子":"占い師の少女。過去視という能力を持っている。阿部の無実を確実にするため、阿部と共に夜見島へと向かう。", "太田ともえ":"網元の娘。網元という自分の父親の仕事に対して誇りを持っており、自身も島を不浄から守るため尽力する。髪飾りは父親からのプレゼント。", "太田常雄":"網元。島を不浄なものから守るために尽力している。", "三上隆平":"三上脩の父親。SIRENの登場人物、竹内多聞の父親とは交流があった。妻を事故で亡くしている。", "沖田宏":"永井頼人の上官であり三沢岳明の部下。不時着の際に永井を庇って死亡。"} let id = "explain_" + num; document.getElementById(id).innerHTML = dictionary[character]; document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ } //NTキャラクター説明用 function ExplainCharacter_nt(character, num){ let dictionary = {"ハワード・ライト":"『SIREN:NT』の主人公。儀式の犠牲になろうとしていた少女を助け、異界に巻き込まれる。", "美耶古":"神の花嫁。儀式の際にハワードが止めに入った時に逃走。盲目ではない。", "サム・モンロー":"教授。娘と一緒に暮らしており、妻とは別れている。村の儀式を撮りに来たテレビクルーたちに同行している時に異界に巻き込まれる。", "メリッサ・ゲイル":"テレビクルーの一人。娘とは一緒に暮らしておらず、夫とは別れている。儀式を撮っている最中に異界に巻き込まれる。", "ベラ・モンロー":"サム・モンローとメリッサ・ゲイルの娘。父親と一緒に暮らしており、ベビーシッターが見つからなかったため", "犀賀省悟":"犀賀医院の院長。その裏ではアマナの不都合となる人間を消すという役割をしていた。", "アマナ":"求導女。怪我をしていたハワードの事を助け、共に行動する。", "ソル・ジャクソン":"テレビクルーのカメラマン。メリッサの事が好き。", "河辺幸江":"犀賀医院の看護師。異界に巻き込まれる前に死亡していた。"} let id = "explain_" + num; document.getElementById(id).innerHTML = dictionary[character]; document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ } 最後はCSSです。 体裁をいい感じに整えています。 javascript.css span{ display: inline-block; margin:10px 10px; } body{ display: inline-block; margin:10 auto; width:100vm; padding-bottom:10%; } #caution{ color:red; } .fortune-telling{ border:1px dashed blue; } form{ font-size:16px; } .change{ margin-left-10%; margin-right:auto; } .box{ border-right:solid 3px #66CCFF; border-left:solid 3px #66CCFF; border-top:solid 3px #9999CC; border-bottom:solid 3px #9999CC; text-align:center; width:80%; } .link{ color:#6699CC; } fotter{ color: #CCCCCC; font-size:13px; } #random{ border:solid 1px #99CCCC; user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select: none; /* Safari、Chromeなど */ -ms-user-select: none; /* IE10かららしい */ } というわけでコードはこんな感じでした。 まとめ 難しかったです。 予想しない挙動(キャラ名を押すと必ずすべての説明が一番上のキャラ名の上に表示されてしまうなど)が起きたりエラーが起きたり結構してました。 でも楽しかったのでこれからも改良していきたいですね。 追記 コメントでのご指摘で変数宣言にvarは古いとのことでjsコードを差し替えました。
- 投稿日：2021-05-13T16:33:01+09:00
ほぼ初心者が作ったランダムに好きなホラーゲームのキャラ名、セリフ、アイテムを表示するプログラム
個人的に大好きなホラーゲーム、SIREN。 朝仕事に行く前などに占いのような形式でキャラ名とアイテム名とセリフが出るプログラムが欲しいな！そうすれば仕事行く元気すごく出るよ！！ その思いが募った結果、手軽に作れるJavaScriptとHTML、CSSを使って好きなホラーゲームのキャラ名、アイテム名、セリフが出るプログラムを作ってみました。 JavaScriptに関しても初心者なので結構コードがぐちゃぐちゃになってしまったので今後改良出来たらしていきたいですね。 スマホアプリのjsanywhereを使って実行するのでデータベースなどは使用していません。 作ったもの ・好きなホラーゲーム、SIRENのキャラ名、アイテム名、セリフをランダムに表示する ・何回表示するかを1-5回までで選択できる。 ・シリーズを限定するか全シリーズにするかを選択できる。 ・シリーズを限定した場合は各主人公のセリフを表示、全シリーズにした場合はシリーズのキャッチコピーをランダムに表示する(変更というボタンをクリックすることでランダムにキャッチコピーを変更可能) ・キャラ名をクリックすると説明が見れる javascript_imp.html <html lang="ja"> <head> <script type="text/javascript" src="javascript_imp.js"></script> <link rel="stylesheet" href="javascript_imp.css"> <title>練習</title> </head> <body class="box"> <p>SIREN占い</p> <form name="form1"> <select name="limited" id="limited" size=1 onchange="change_func()"> <option value="one_only">無印のみ</option> <option value="two_only">2のみ</option> <option value="nt_only">ntのみ</option> <option value="all">全シリーズ</option> </select><span id="reload"></span> <p></p> <label for="number">何回占いをしますか？(1～5の間で入れてください)</label> <input type="number" name="number" id="number" min="1" max="5" value="1"></input>回 <p><span id="caution"></span></p> </form> <p></p> <button id="button_click" onclick="click_func()">ジェノサイダー！</button> <p></p> <span class="change" id="change"></span> <p></p> <fotter> 参考資料:各種bot 実況者様の動画など </fotter> </body> </html> 複数回結果を表示することもあるのでHTMLは結構シンプルになってます。 シリーズを選択すると文字が変わる、という風にしたかったのでonchangeを使ってjavascriptのfunctionを呼び出しています。 javascript_imp.js var series = ["one", "two", "nt"]; var character_one = ["須田恭也","神代美耶子","竹内多聞","安野依子","志村晃","宮田司郎","牧野慶","八尾比沙子","神代亜矢子","神代淳","高遠玲子","四方田春海","美浜奈保子","恩田理沙","前田知子","石田徹雄", "恩田美奈","志村晃一"]; var character_two = ["一樹守","木船郁子","矢倉市子","永井頼人","三沢岳明","阿部倉司","三上脩","岸田百合","多河柳子","藤田茂","喜代田章子","加奈江","太田ともえ","太田常雄","三上隆平","沖田宏"]; var character_nt = ["ハワード・ライト","美耶古","サム・モンロー","メリッサ・ゲイル","ベラ・モンロー","犀賀省悟","アマナ","ソル・ジャクソン","河辺幸江"]; var item_one = ["火掻き棒","ネイルハンマー","ラチェットスパナ","テレフォンカード","発煙筒","ヴェール","壊れたラジオ","拳銃","木製バット","ライター","笑い袋","ビーズ人形","焔薙","図書貸し出しカード","写真","宇理炎", "鎌"]; var item_two = ["壊れた朱石のブレスレット","壊れた碧石のブレスレット","釘バット","メダル","髪飾り","首輪","奇石","週刊アトランティス","TNT","釘","軍用スコップ","あんなき","ゴルフクラブ","空き缶",""]; var item_nt = ["一升瓶","アナログテレビ","改造散弾銃","案内板","ビデオカメラ","缶切り","携帯電話","杭","アンテナ","ブローチ","柄杓","宇理炎","つるはし","トロッコ","ハニュウダカブト",""]; var quotation_one = Quotation_One(); var quotation_two = Quotation_Two(); var quotation_nt = Quotation_Nt(); var character; var item; var quotation; var word; var c_series; var i_series; var q_series; var num_fortune; var array_character = []; var array_item = []; var array_quotation = []; var num_c, num_i, num_q; num_c = 0; num_i = 0; num_q = 0; //どのシリーズか限定する文言が変わったらボタンの文字も変更 function change_func(){ var limited = document.getElementById("limited").value; if(limited == "one_only"){ document.getElementById("reload").innerHTML = ""; document.getElementById("button_click").innerHTML = "ジェノサイダー！"; }else if(limited == "two_only"){ document.getElementById("reload").innerHTML = ""; document.getElementById("button_click").innerHTML = "神風見せてやるよ！"; }else if(limited == "all"){ random_tagline(); document.getElementById("reload").innerHTML = "<span id='random' onclick='random_tagline()'>変更</span>"; }else { document.getElementById("reload").innerHTML = ""; document.getElementById("button_click").innerHTML = "Go To Hell!"; } } //配列を綺麗にまっさらにする function array_clean(){ array_character.splice(0); array_character = array_character.filter(Boolean); array_item = array_item.filter(Boolean); array_quotation = array_quotation.filter(Boolean); } //ゲームのキャッチコピーのどれかをランダムに出す function random_tagline(){ //ランダムな数字を1-3で出す var zetubo = Math.floor(Math.random() * 3) + 1; if(zetubo == 1){ document.getElementById("button_click").innerHTML = "どうあがいても、絶望"; }else if(zetubo == 2){ document.getElementById("button_click").innerHTML = "逃げ場なんて、ないよ"; }else{ document.getElementById("button_click").innerHTML = "息をすることさえ、恐怖"; } } //ボタンをクリックしたときの動作 function click_func(moji) { var num_fortune = document.getElementById("number").value; array_character.length = 0; array_quotation.length = 0; array_item.length = 0; num_i = 0; num_c = 0; num_q = 0; //もし占い回数が1未満、もしくは5より大きかった場合は警告を出す if(num_fortune<1 || num_fortune>5){ document.getElementById("caution").innerHTML = "範囲外です。1～5のどれかを入れてください"; moji = ""; }else{//それ以外の場合(占い回数が範囲内の場合) document.getElementById("caution").innerHTML = ""; var moji = ""; for(var i = 0; i < num_fortune; i++){ //シリーズが限定されているかを確認 var select = document.form1.limited.selectedIndex; if(select == 0){ c_series = "one"; i_series = "one"; q_series = "one"; }else if(select == 1){ c_series = "two"; i_series = "two"; q_series = "two"; }else if(select == 2){ c_series = "nt"; q_series = "nt"; i_series = "nt"; }else{ //キャラ、アイテム、セリフをそれぞれランダムに取得 c_series = series[Math.floor(Math.random() * series.length)]; q_series = series[Math.floor(Math.random() * series.length)]; i_series = series[Math.floor(Math.random() * series.length)]; } //キャラクターのシリーズをどれにするか if(c_series == "one"){ character = character_one[Math.floor(Math.random() * character_one.length)]; }else if(c_series == "two"){ character = character_two[Math.floor(Math.random() * character_two.length)]; }else if(c_series=="nt"){ character = character_nt[Math.floor(Math.random() * character_nt.length)]; } //アイテムのシリーズをどれにするか if(i_series == "one"){ item = item_one[Math.floor(Math.random() * item_one.length)]; }else if(i_series == "two"){ item = item_two[Math.floor(Math.random() * item_two.length)]; }else if(i_series=="nt"){ item = item_nt[Math.floor(Math.random() * item_nt.length)]; } //名言のシリーズをどれにするか if(q_series == "one"){ quotation = quotation_one[Math.floor(Math.random() * quotation_one.length)]; }else if(q_series == "two"){ quotation = quotation_two[Math.floor(Math.random() * quotation_two.length)]; }else if(q_series=="nt"){ quotation = quotation_nt[Math.floor(Math.random() * quotation_nt.length)]; } //要素を追加していく array_character[num_c] = character; array_item[num_i] = item; array_quotation[num_q] = quotation; //配列のempty要素を全削除 array_character = array_character.filter(Boolean); array_item = array_item.filter(Boolean); array_quotation = array_quotation.filter(Boolean); moji += add(character, item, quotation, i, num_fortune); num_c++; num_i++; num_q++; } } //HTMLを変更する document.getElementById("change").innerHTML = moji; } //説明を出すときの分岐用に文字を数字にそれぞれ変換する function henkan(suji){ if(suji == "one"){ return 1; }else if(suji == "two"){ return 2; }else{ return 3; } } //HTML作成用 function add(character, item, word, i, num_fortune){ return "<p>----------</p><span class='fortune-telling'><div class='explain' id='explain_" + i + "'></div><span class='character' id='character'>今日のあなたにぴったりなキャラクターは<div class='link' onclick='Explain_character(" + i + ", " + henkan(c_series) + ", " + num_fortune + ")'>" + character + "</div>です！</span><p></p><span class='item' id='item'>ラッキーアイテムは<div class='link' onclick='Explain_item(" + i + ", " + henkan(i_series) + ", " + num_fortune + ")'>"+item+"</div>です！</span><p></p><span class='quotation ' id='quotation'>今日の一言は「<div class='link' onclick='Explain_quotation(" + i + ", " + henkan(q_series) + ", " + num_fortune + ")'>"+word+"</div>」です！</span></span>"; } //無印の配列を生成して合成する奴 function Quotation_One(){ var kyoya = ["お前じゃなくて、須田恭也","悪いけど、美耶子との約束なんだ","そんで、この村からも逃げ出そう","お前らみたいなのがいる限り、俺は何度でも現れる"]; var miyako = ["恭也…ありがとう","ぐーず","ケルブじゃないとやっぱりだめ…","早く連れてけ！","私の目を使って"]; var jun = ["昨日のお返しだよ","美耶子、お前の役割はまだ終わってないだろう？","どうして亜矢子まで！","誰だ！"]; var ayako = ["違う…私は違う…！","あんたが生贄の羊になりなさいよ！","淳は、私の許嫁なんだから！"]; var yao = ["この水があなたの体内に入ったの…流した血の分だけ","あなたが実を盗んだのね！","もう、待つのは嫌…！"]; var makino = ["八尾さん…どこに行ったんだ？","私は…ただのみじめな道化だった","狂ってる…！","知子ちゃん！","きゅるってる！"]; var miyata = ["私も美奈さんを探していたんだ。とりあえず一緒に病院に","っ馬鹿な…！","それでも俺は、牧野さんになりたかった","煉獄の炎よ。俺の命と引き換えだ","あぁ…今行くよ", "本当にしつこい女だな"]; var risa = ["お姉ちゃん！お姉ちゃんなの！？","もしかして、宮田先生？私、恩田美奈の妹です！理沙です！","お姉ちゃんはどこなんですか！？お姉ちゃんは無事なんですか！？","そっくり！先生も双子？","お姉ちゃん男なんですか！？お姉ちゃん武士なんですか！？"]; var akira = ["お前が呼んだのか？","よそ者か…迷い込んだのか？","竹内か…","この村ももう終わりだ…","結局逃げきれないということか"]; var mihama = ["こっそりカメラ回してるんじゃないでしょうね！","永遠の若さ…永遠の若さ…"]; var tomoko = ["求導師様、どうしたんですか？","はーるみちゃんがほーしい","お父さん！お母さん！開けてよ！"]; var tamon = ["志村さん…なのか…？","車にいろと言ったはずだ","しかし、とんだ里帰りに君を巻き込んでしまったな","お父さん、お母さん…！"]; var yoriko = ["先生、家族ごっこしてる場合ですか！","無理やりついてきたのは私ですよ？","とりあえず村の人探しましょうよ。きっと大騒ぎですよ！","先生、それって…本物？"]; var takato = ["先生が絶対に助けてあげるからね…！","春海ちゃん！だめ…諦めたらだめ…！","春海ちゃん、どこぉ…？","めぐみ…お母さんを許して…","じゃあ、先生はお母さんになってあげる。春海ちゃんの"]; var harumi = ["お母さん…","先生、春海怖いよ…","うん…春海、待ってる","先生、助けて！先生！早く来て！"]; var ishida = ["無駄な抵抗は止めなさい","了解…射殺します"]; return kyoya.concat(miyako, jun, ayako, yao, makino, miyata, risa, akira, mihama, tomoko, tamon, yoriko, takato, harumi, ishida); } //2の配列を生成して合成する奴 function Quotation_Two(){ var ituki = ["クソ…俺は、だまされたのか？","化け物め…化け物め…化け物め…！","人にものを頼むときはお願いします、だろ？","やつの動きを止めるんだ！","俺という観測者が到達したとき、可能性は一つに収束する"]; var ikuko = ["もう一人の私…こんな思いしないのかな…？","結局この島に引き寄せられちゃったよ、お母さん…","先に…私たちが先にたどり着かないと！","そんな…化け物見るような眼で見ないでよ…","こんなところでかっこつけたって誰も見てないんだから！"]; var nagai = ["神風見せてやるよ！","沖田さん！死なないでください…沖田さん…！","人に助けてもらったときは何て言うんだっけ？"]; var misawa = ["士長、応戦だ","俺だけ先に目覚めちゃうけど…悪いな","久しぶりに最高の気分だ","あっち側もこっち側も関係ない","なーがいくん！一緒に遊びましょー！"]; var itiko = ["わからない…わからないよ…","お寝坊さんなお姉ちゃん","お前もずっと寂しかったんだろう？","違う…私、あの時死んだ！私は私じゃない！","みーつけた！"]; var kanae = ["脩…お姉ちゃんを許して…","脩、どこにいるの？","七つの門の七つの鍵を開けるの","お休み、脩"]; var yuri = ["あなたは、私を信じてくれる？","お母さんは鳩を飛ばし続けてたの","私を見て…"]; var shu = ["ツカサなのか…？これは、お前の…","お姉ちゃん！","お姉ちゃんもお外で遊べたらいいのにね","見える…見えるよ……"]; var abe = ["これ…純金じゃねぇのか？","クソすぎだろ！このままじゃよぉ…"]; var ryuko = ["あなた、お母さんと同じ気配…お母さん、目覚めようとしてるのね？","ごめんね…"]; var ryuhei = ["化け物なんかじゃないですよ","おーい、かくれんぼか？","学会に発表しなきゃなぁ"]; var hujita = ["やんなっちまうなぁ…","すまんなぁ、朝子","検挙するぞ！","始末書…始、末書"]; var kiyota = ["なんだか最悪の誕生日","あぁ…たくさんの強い念が…","私だってペーパーなんだから！","…分かった。信じる"]; var tomoe = ["髪飾り…お父様にもらった、髪飾り…","ここにいる！化け物女がここにいる！","誰か来て！誰かー！","虫けらのくせに！","髪飾り返してよ！","都会ってどんなところなのかなぁ"]; var tuneo = ["お前たち、やってくれるな？","藤田のバカ息子が…結局逃げかえってきたか"]; var okita = ["永井も随分と冷たいよなぁ","永井ぃ！俺だよ俺ぇ！","永井ー。根性出せよぉ"]; return ituki.concat(ikuko, nagai, misawa, itiko, kanae, yuri, shu, abe, ryuko, ryuhei, hujita, kiyota, tomoe, tuneo, okita); } //NTの配列を生成して合成する奴 function Quotation_Nt(){ var haward = ["Miyako, I promise.","ボクは、ハワード。君は？","ミヤコ、イッショ、ガンバル！"]; var saiga = ["運命に抗ってみますか？ご自由に","幸江…","俺はダンテではない。ベアトリーチェの導きは期待できない","もうあきらめろ。無駄だ。流れに身を任せろ","さすがに飽きた"]; var bella = ["Daddy said you can make bugs show up if you put something sweet on a tree...(ダディが言ってた 木に蜜を塗ったら虫が来るって)"]; var mellisa = ["When this thing died, the others did too.(こいつが死んだら…あいつらも死んだ？)"]; var yukie = ["先生は…私がいないと、だめなんだからぁ","先生ぇ…"]; var sam = ["Hey! Does that works? Maybe we can use it to call for help!(おい！その電話は使えないのか？その電話で助けを呼んでくれよ！)"]; var sol = ["Melissa,Bella...I hope you guys are okay.(メリッサ、ベラ…無事でいてくれよ…)"]; var amana = ["Perhaps we can set a trap.(罠を仕掛けられないでしょうか？)"]; var miyako = ["死にたくない！一緒に逃げたい！村の外を見てみたい、こんな村大嫌い…！","…早く連れてけ","いや！死ぬなんて絶対に嫌！","こんなことしかできない。…ごめんね、せっかく綺麗だったのに"]; return haward.concat(saiga, bella, mellisa, yukie, sam, sol, amana, miyako); } //どのシリーズのアイテムの説明を表示するかを判定 function Explain_item(item, series, num_fortune){ var id; document.getElementByClassName("link").style = ""; // colorのみ document.getElementByClassName("link").innerHTML = ""; var name = array_item[item]; if(series == 1){ ExplainItem_one(name, item); }else if(series == 2){ ExplainItem_two(name, item); }else{ ExplainItem_nt(name, item); } } //どのシリーズのキャラの説明を表示するかを判定 function Explain_character(character, series, num_fortune){ var id; for(var i = 0; i<num_fortune; i++){ id = "explain_" + i; document.getElementById(id).style = ""; // colorのみ document.getElementById(id).innerHTML = ""; } var name = array_character[character]; if(series == 1){ ExplainCharacter_one(name, character); }else if(series == 2){ ExplainCharacter_two(name, character); }else{ ExplainCharacter_nt(name, character); } } //無印キャラクター説明用 function ExplainCharacter_one(character, num){ let dictionary = {"須田恭也":"『SIREN』の主人公。16歳。通称『ジェノサイダー』。都市伝説について調べようと村を訪れ、異変に巻き込まれる。", "安野依子":"『SIREN』の登場人物。竹内多聞の車にこっそりと乗りこんで着いてきたために異変に巻き込まれる。明るくマイペースな性格。", "竹内多聞":"大学教授。村の伝わる怪しい儀式などの真相を知るために帰ってきて異変に巻き込まれる。なぜか拳銃を所持。こっそり着いてきた生徒の安野依子と行動を共にする。", "志村晃":"山の中に住んでいた老人。異変に巻き込まれた村をおかしく思い、山から下りてくる。", "宮田司郎":"宮田医院の医者。その裏では神代にとって不都合な人間を消すという役割を担っている。とある事情から山の中にいたところで異界に巻き込まれる。", "牧野慶":"求導師。気弱な性格をしている。儀式をしていたが異変に巻き込まれ、求導女を探して歩き回る。道中で前田知子を保護し、行動を共にする。", "八尾比沙子":"求導女。須田を導いたりと優しいように見えるが…？", "神代美耶子":"神の花嫁。儀式の生贄だったが、異変に巻き込まれた際に逃走。盲目の為、一人での行動がほぼ不可能。", "神代淳":"神代の次代当主として養子になった。その立場故か少し傲慢なところがある。儀式中に異変に巻き込まれる。", "神代亜矢子":"神代家次期当主、神代淳の許嫁。神代淳によく構われている妹の神代美耶子の事をよく思っていない。儀式中に異変に巻き込まれる。", "四方田春海":"小学生。高遠玲子、名越栄治と共に星を見る会に参加中に異変に巻き込まれる。教師である高遠玲子と共に行動する。", "高遠玲子":"教師。名越栄治、四方田春海と星を見る会に参加中に異変に巻き込まれる。生徒である四方田春海と行動を共にする。", "志村晃一":"志村晃の息子。27年前に行方不明となった。詳しくは羽生蛇村異聞参照。", "美浜奈保子":"グラビアアイドル。クルーたちと共に村に来たが、巻き込まれた際に離れ離れとなってしまう。一人で行動する。", "恩田理沙":"恩田美奈の双子の妹。姉に会いに村に戻ってきたが異変に巻き込まれる。一人で廃屋から脱出した後、宮田司郎と出会い行動を共にする。", "前田知子":"両親と喧嘩し、家出している最中に異変に巻き込まれてしまった少女。両親のもとへ戻るため求導師と共に行動する。", "石田徹雄":"警察官。須田の前に現れ、銃を向けてくる。", "恩田美奈":"宮田医院の看護師。異変に巻き込まれる前に死亡していた。"} var id = "explain_" + num; document.getElementById(id).innerHTML = dictionary[character]; document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ } //2キャラクター説明用 function ExplainCharacter_two(character, num){ let dictionary = {"一樹守":"『SIREN2』の主人公。オカルト雑誌、週刊アトランティスの記者。夜見島に伝わる都市伝説などを調査するために夜見島へ渡る。", "木船郁子":"感応視という能力を持っている。一樹たちを夜見島に送る船長の手伝いをしていた。", "矢倉市子":"記憶が一部ない少女。フェリーの中で目を覚まし、助けに来てくれた警察官の藤田茂と共に行動する。", "永井頼人":"夜見島に不時着した自衛隊の士長。尊敬する上官の沖田が着陸の際に自分を庇って亡くなってしまったため、同じく生存した三沢岳明と共に行動する。", "三沢岳明":"永井の上官。生き残った永井の指揮を執った。幻覚を見たりすることがあり、薬に頼っている。", "阿部倉司":"恋人が死んだと信じられず、探すために占い師の喜代田章子と共に夜見島へ来た。", "三上脩":"とある事柄によって弱視になってしまった青年。自らの過去の記憶を取り戻すべく生まれ故郷の夜見島へと向かった。", "岸田百合":"正体不明の少女。島の廃倉庫の中に倒れていたところを一樹によって保護される。", "多河柳子":"阿部の恋人。頭部を何度も殴打されて死亡している。", "藤田茂":"警察官。人のいないはずの夜見島で怪しい女を見たという通報を聞いて夜見島へと向かう。お人好しなところがあり、だまされやすい。", "喜代田章子":"占い師の少女。過去視という能力を持っている。阿部の無実を確実にするため、阿部と共に夜見島へと向かう。", "太田ともえ":"網元の娘。網元という自分の父親の仕事に対して誇りを持っており、自身も島を不浄から守るため尽力する。髪飾りは父親からのプレゼント。", "太田常雄":"網元。島を不浄なものから守るために尽力している。", "三上隆平":"三上脩の父親。SIRENの登場人物、竹内多聞の父親とは交流があった。妻を事故で亡くしている。", "沖田宏":"永井頼人の上官であり三沢岳明の部下。不時着の際に永井を庇って死亡。"} var id = "explain_" + num; document.getElementById(id).innerHTML = dictionary[character]; document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ } //NTキャラクター説明用 function ExplainCharacter_nt(character, num){ let dictionary = {"ハワード・ライト":"『SIREN:NT』の主人公。儀式の犠牲になろうとしていた少女を助け、異界に巻き込まれる。", "美耶古":"神の花嫁。儀式の際にハワードが止めに入った時に逃走。盲目ではない。", "サム・モンロー":"教授。娘と一緒に暮らしており、妻とは別れている。村の儀式を撮りに来たテレビクルーたちに同行している時に異界に巻き込まれる。", "メリッサ・ゲイル":"テレビクルーの一人。娘とは一緒に暮らしておらず、夫とは別れている。儀式を撮っている最中に異界に巻き込まれる。", "ベラ・モンロー":"サム・モンローとメリッサ・ゲイルの娘。父親と一緒に暮らしており、ベビーシッターが見つからなかったため", "犀賀省悟":"犀賀医院の院長。その裏ではアマナの不都合となる人間を消すという役割をしていた。", "アマナ":"求導女。怪我をしていたハワードの事を助け、共に行動する。", "ソル・ジャクソン":"テレビクルーのカメラマン。メリッサの事が好き。", "河辺幸江":"犀賀医院の看護師。異界に巻き込まれる前に死亡していた。"} var id = "explain_" + num; document.getElementById(id).innerHTML = dictionary[character]; document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ } キャラ名、アイテム名はそれぞれ最初のところで配列に入れてます。 セリフは長くてごちゃごちゃしそうなので下の方のメソッドでキャラ名の配列をそれぞれ作成→合成して一つの配列にしてます。 ・配列作成と結合 ・ランダム関数 ・特定のIDの中身を書き換える ・CSSの作成 ・directory(辞書型) この辺りを使ってます。 最初は配列を削除していなかったため、結果を表示してから回数を増やして実行すると最初の方の結果が一つ前と全く一緒という事象が起きたり、キャラ名を押して表示する説明が押したキャラ名の上ではなく一番上のキャラ名の上に表示されたり(IDが全て同じだったために起きた事象)など予想外なことがたくさん起きました。 何とか検索して考えて最終的に出来たのがさっきのコードです。 CSSはこんな感じです。 javascript.css @charset "utf-8"; span{ display: inline-block; margin:10px 10px; } body{ display: inline-block; margin:10 auto; width:100vm; padding-bottom:10%; } #caution{ color:red; } .fortune-telling{ border:1px dashed blue; } form{ font-size:16px; } .change{ margin-left-10%; margin-right:auto; } .box{ border-right:solid 3px #66CCFF; border-left:solid 3px #66CCFF; border-top:solid 3px #9999CC; border-bottom:solid 3px #9999CC; text-align:center; width:80%; } .link{ color:#6699CC; } fotter{ color: #CCCCCC; font-size:13px; } #random{ border:solid 1px #99CCCC; user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select: none; /* Safari、Chromeなど */ -ms-user-select: none; /* IE10かららしい */ } これから改良したい点としては ・特定のキャラ名+アイテム名+セリフだった場合は文言を表示する。 ・血液型占いとかのように何かしらの要素で表示する このあたりですかね…。前者はまだしも後者は結構コード増えそうなので今のこの趣味の範囲では「実装(一生未定)」という感じではありますが。 というわけで初心者の頑張りでした。 メモ帳にばーっと書いたのをインデントを少し直しただけなのでおかしなところがあったらご指摘いただければ幸いです。 これからもJavaScriptで色々作っていきたいですね。
- 投稿日：2021-05-13T09:54:04+09:00
【HTML/CSS】モダン中央揃え３選
CSSを使ったモダンな要素の中央揃えの手法を３つ紹介します。 忙しい人の為に See the Pen zYNVRgQ by Yuki Ishii (@yukiishii) on CodePen. はじめに 中央揃えさせる要素は下記のHTMLのように親要素があり子要素が1つの場合です。 子要素が複数ある場合は予想と違う結果が出る可能性があります。 またテキストやボタンなど行のみを中央揃えしたい場合はまた別の手法が有効となります。 <h1>No centralized</h1> <div class="container"> <div class="child"> Child </div> </div> displary: grid; で中央揃え 一番コードが短くてすむ手法です。 .container { /* Following code makes centralizing */ display: grid; place-items: center; } .child {} display: flex; で中央揃え Gridを使用したものより1行コードが増えますが多用されている手法です。 .container { /* Following code makes centralizing */ display: flex; justify-content: center; align-items: center; } .child {} position: absolute; で中央揃え 先に紹介した手法とは別で子要素自体にスタイリングをしポジションを移動させます。 親要素をposition: relative;にする必要があります。 .container { /* Need parent a relative position */ position: relative; } .child { /* Following code makes centralizing */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 終わりに 今回手段のみを紹介しましたが、理由や仕組みなどは他の記事で紹介したいと思います。 今すぐ気になる方はご連絡ください。
- 投稿日：2021-05-13T09:04:41+09:00
アイコンフォントとしてMaterial Iconsの様々なスタイルを使うには
これは何 Material Iconsを使うにあたってデフォルト以外の4スタイルを使おうと思うと、意外と公式ドキュメントが分かりづらいです デフォルト以外の4スタイル = Outlined, Rounded, Sharp, Two tone これらを使う方法をまとめました ちなみに検証で使っていたコードはGitHubで公開しています 記事で公開するように体裁だけ整えました 結論 全てのスタイルを使おうと思うなら、以下のコードを書けばOKです。 このlinkをHTMLで読み込む <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone" rel="stylesheet" /> 何が困ったのか 2021年3月2日にアップデート（？）されて、Google FontsがMaterial Iconsを扱うようになりました。 ページ上部にDeveloper guideへのリンクがあるわけですが、Icon font for the webの章ではGoogle Fonts経由でアイコンとスタイルシートを読み込む方法が紹介されています。 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" > そして、Google Fonts上では使いたいアイコンを選択するとコードスニペットを表示してくれます。 例えばTwo toneなアイコンを選択するとクラス名にはmaterial-icons-two-toneを使いなさいとのことですが、このままコピペしても動きません。 どうすれば動くかというと、linkの中身をこのように変える必要があります。 公式のコード <link - href="https://fonts.googleapis.com/icon?family=Material+Icons" + href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet" > スタイルにあわせてhrefを変える必要があるのが、私が見る限りDeveloper guide内で明言されておりませんでした。 （もしどこかに記載があった場合はすみません。私の確認不足です。） それぞれのスタイルを使用するためのリンク Filled（デフォルト、ドキュメント内で紹介されているもの） <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" > Outlined <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" > Rounded <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" > Two tone <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone" rel="stylesheet" > 全てを使いたい場合 <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone" rel="stylesheet" /> 番外編：どのように発見したか 上手く表示できないため、本家のサイトでは一体どんなコードが書かれているんだろう……と思い開発ツールで確認してみました。 すると上の画像にあるように、material-icons-two-toneのクラスを指定しているファイルがcss2?family=Material+Icons+Two+Toneという名前なのが分かりました。 もしかしてと思いhrefもこれにあわせて書き換えたら上手く表示されたため、解決。
- 投稿日：2021-05-13T08:05:31+09:00
【Css】filterを試してみた
背景 Photoshopやinkscapeなどの画像編集ソフトを使わずに、cssで簡単に画像のグラフィック作業ができる方法が見つかったので学習した内容を記事にしました。 ※内容に間違いなどがある場合はご指摘をよろしくお願いします。 filterプロパティとは 要素をぼかしたり色を変化させたりすることができるプロパティ。背景はもちろん、urlを指定して画像を呼び出してその画像にグラフィック効果を適用することもできます。 使い方 構文は「filter: 適用する効果」でとてもシンプル。試しに使ってみることに。 効果を適用しない要素はクラス名をnoneにしました。filterの対象になる要素はクラス名をtargetにします。 <body> <div class="none"></div> <div class="target"></div> </body> ①要素をぼかす body { display: flex; } .none { width: 300px; height: 300px; margin: 100px auto; background-color: orange; } .target { width: 300px; height: 300px; margin: 100px auto; background-color: orange; filter: blur(5px); } ②明るくする .target { width: 300px; height: 300px; margin: 100px auto; background-color: orange; filter: brightness(130%); } ③影 .target { width: 300px; height: 300px; margin: 100px auto; background-color: orange; filter: brightness(130%); } ④色相を回転 .target { width: 300px; height: 300px; margin: 100px auto; background-color: orange; filter: hue-rotate(180deg); } ⑤反転 .target { width: 300px; height: 300px; margin: 100px auto; background-color: orange; filter: invert(80%); } 感想 画像ソフトを使わずに簡単に要素にグラフィック効果を適用できるので、javascriptなどを合わせて使うと動的に変化する背景やイメージなどができそうなので今度試してみたいと思いました。 https://code-kitchen.dev/css/filter/ https://developer.mozilla.org/ja/docs/Web/CSS/filter https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter
- 投稿日：2021-05-13T01:42:13+09:00
スクロール時にCSSでスナップを効かせる方法
画面スクロールをした時にセクションごとにストップさせる方法を見つけたので備忘録 親要素に以下 scroll-snap-type: x mandatory; 子要素に以下を追加することで実装できる scroll-snap-align: start; 実際のCSSコードはいか ```.section { display: flex; overflow-x: auto; height:100vh; scroll-snap-type: x mandatory; } .section__item { height:100vh; scroll-snap-align: start; }```