- 投稿日：2021-09-06T23:20:50+09:00
jQueryプラグイン【Multiple Select】を使って複数選択可能なselectタグを生成してみよう
最近、業務でjQueryプラグインでselectタグをカスタマイズする機会がありました。 調べる中で、Qiita内に記事が見られなかった為、 せっかくの機会なのでアウトプットを兼ねて記事を作成してみました！ ※随時内容を追記予定です。 作成例 selectタグさえあれば、以下の様なプルダウンを簡単に作成可能です。 コード 公式のサンプルを少し弄ったものになります。 最低限利用するために必要なのは ・各種JS,CSSのインポート ・selectタグ内にmultiple="multiple"の指定 ・初期化処理の$('select').multipleSelect() と、非常にシンプルです。 index.html <!doctype html> <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css"> <title>複数選択できるselectタグ</title> </head> <body> <select multiple="multiple"> <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> <script> $(function () { $('select').multipleSelect({ width: 200, formatSelectAll: function() { return 'すべて'; }, formatAllSelected: function() { return '全て選択されています'; } }); }); </script> </body> </html> 解説 $('select').multipleSelect()内に、オプションを指定する形となっています。 今回は以下の3つのオプションを指定してあります。 width: 200, formatSelectAll: function() { return 'すべて'; }, formatAllSelected: function() { return '全て選択されています'; } width: 200 Multipe Selectのオプションの一つです。 生成時の$('select').multipleSelect()内に記載する事で、 生成された選択エリアにstyle="width: 200px"の指定をしてくれます。 formatSelectAll／formatAllSelected 公式ドキュメントにはローカライズ用APIとして紹介されています。 formatSelectAllは【すべて選択】チェックボックスで、 formatAllSelectedは【すべて選択】時の表示メッセージです。 formatSelectAllの初期値は[Select all]、 formatAllSelectedの初期値は[All selected]ですが、 return の値を任意の値に変更する事で、表示させたい値を変更できます。 最後に リッチなUIを簡単に実現できるので、非常に便利だなと思います。 参考文献 Multiple Select公式サイト https://multiple-select.wenzhixin.net.cn/
- 投稿日：2021-09-06T21:32:06+09:00
VSCodeでAngularのデバッグ
これまでVSCodeを利用したTypeScript(AngularプロジェクトでもOKだった)のデバッグには拡張機能であるDebugger for Chromeの利用が主流でしたが、つい最近この拡張機能が廃止されました。 理由はVSCode自体にデバッガが取り込まれたためです。 これまでは「VSCode」と「ブラウザ」を交互に切り替えながらデバッグ作業をしていたのですが、VSCodeにデバッガ機能が内蔵されたことで思いのほか便利になったので、VSCodeへの導入に関する備忘録を残します。 デバッグ手順 既にWebPack等で開発対象が起動しているとします(Angularならば、ng startコマンドでサーバー起動済みの状態) デバッグ起動設定を追加 コマンドパネルを使用して上記で起動しているサーバーにアクセスする方法がお手軽ですが、開発中に何度もデバッガを実行するのでアクセス先のURL入力の手間も省くためにlaunch.jsonにデバッガ起動用の設定を記述します。 内蔵デバッガが使用できるブラウザは、今のところGoogleChromeかMicrosoftEdge(多分Chromium版のみ)となっています。 下記の設定例ではMicrosoftEdgeを使用しています。 { "version": "0.2.0", "configurations": [ { "name": "Launch Microsoft Edge and open the Edge DevTools", "type": "pwa-msedge", "request": "launch", "url": "http://localhost:4200", "webRoot": "${workspaceFolder}" } ] } type要素に使用したいブラウザのタイプを指定することで切り替えることができます。 typeの内容 ブラウザ pwa-chrome GoogleChrome pwa-msedge MicrosoftEdge ブレイクポイントを設定する たったこれだけでブレイクポイントを設定した箇所でプログラムを停止させることができます。 Edgeを使えばもっと便利になるかも VSCodeの拡張機能Microsoft Edge Tools for VS Codeを導入しておくともっと便利になるかもしれません。 この拡張機能を導入した状態でデバッガを起動すると、デバッガツールが上記のように変化します。 このアイコンを選択することで、デバッグ対象のブラウザで表示している内容をVSCode内のEdge開発者ツールで表示することができます。 もちろんインスペクタも使用可能です。また、スクリーンキャストを実行することでVSCode内にブラウザが表示している内容そのものを投影することができ、スクリーンキャスト内から実際のブラウザ画面へのマウス操作も行うことができます。 下記はブレイクポイントでWebアプリを停止させつつ、スクリーンキャストでブラウザの表示内容を映しスクリーンキャスト内でインスペクタを使ってHTML要素を参照している時の画面です。 参照 参考にしたWebサイト様。 VSCodeでJavaScriptのデバッグが容易になったらしい Easier browser debugging with Developer Tools integration in Visual Studio Code - Microsoft Edge Blog
- 投稿日：2021-09-06T20:55:30+09:00
【CSS】ブロックボックスとインラインボックス ~divとspanの違い~
はじめに divとspanの使い分けがあやふやだったのでまとめました。 ブロックボックスとインラインボックスについて <div>: ブロックボックス <span>: インラインボックス MDN ドキュメントブロック要素 MDN インライン要素 それぞれの違いは？ 改行されるかどうか ブロックボックスは改行される インラインボックスは改行されない width、heightプロパティの挙動 ブロックボックスは適用される インラインボックスは適用されない padding、margin、borderの挙動 ブロックボックスは適用される インラインボックスはpadding、margin、borderがきたとき他の要素は無視される html <!DOCTYPE html> <html lang="ja"> <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>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body style="margin: 0"> <div>私はブロックです</div><div>私はブロックです</div><div>私はブロックです</div> <hr /> <span>私はインラインです</span><span>私はインラインです</span><span>私はインラインです</span> </body> </html> display: 無理やりインラインボックスとブロックボックスを変更する displayを使うことでインラインボックスとブロックボックスを変更する事ができる ブロックボックスをインラインボックスへ変更する css div { display: inline; } インラインボックスをブロックボックスへ変更する css span { display: block; } inline-block: インラインボックスとブロックボックス両方の性質を持つ display: inline-block;を使うことで両方の性質をもたせることができる html <!DOCTYPE html> <html lang="ja"> <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>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body style="margin: 0"> <div>ブロック内の<span>インライン</span>です。インラインの場合は、margin,padding,borderがきたときに他の要素のことを考えません。</div> </body> </html> css span{ background-color: yellow; margin: 20px; border: 1px solid black; padding: 20px; display: inline-block; } 下の画像のようにインラインで表示されているが、padding、margin、borderが効いているのがわかる。
- 投稿日：2021-09-06T20:09:59+09:00
display:none;を指定した要素にもアニメーションしたい
はじめに メニューをホバーしたら、サブメニューが表示させるヘッダーを制作していたときの話。メニューをホバーしたらdisplay: none;で指定していたサブメニューをdisplay: block;に変更させるとき、transitionが効かなかった。（フワッと表示されない） なので解決策をまとめてみました。 解決法 keyframesとjQueryを使う 任意のタイミング（例ではhoverイベント時）にクラスを付与する（例の場合、show） index.html <ul class="header_menu"> <li>About</li> <li>News</li> <li> <p class="main_menu">Category</p> <ul class="sub_menu"> <li>Head</li> <li>Body</li> <li>Hand</li> </ul> </li> <li>Contact</li> </ul> style.css .sub_menu { display: none; transition: 0.5s; } .sub_menu.show { display: block; animation: show 1s linear 0s; } index.js $('.main_menu').hover( function() { //マウスカーソルが重なった時の処理 $('this').next('.sub_menu').addClass('show'); }, function() { $('this').next('.sub_menu').removeClass('show'); } ); おわりに display: none;を指定している要素をフワッと表示させるにはkeyframsとjQueryの処理が必要。 HTMLとCSSで完結させたい場合は、opacityプロパティとvisibilityプロパティで実現させるもいい。
- 投稿日：2021-09-06T20:09:59+09:00
display:none;を指定したDOMにアニメーション
はじめに メニューをホバーしたら、サブメニューが表示させるヘッダーを制作していたときの話。メニューをホバーしたらdisplay: none;で指定していたサブメニューをdisplay: block;に変更させるとき、transitionが効かなかった。（フワッと表示されない） なので解決策をまとめてみました。 解決法 keyframesとjQueryを使う 任意のタイミング（例ではhoverイベント時）にクラスを付与する（例の場合、show） index.html <ul class="header_menu"> <li>About</li> <li>News</li> <li> <p class="main_menu">Category</p> <ul class="sub_menu"> <li>Head</li> <li>Body</li> <li>Hand</li> </ul> </li> <li>Contact</li> </ul> style.css .sub_menu { display: none; transition: 0.5s; } .sub_menu.show { display: block; animation: show 1s linear 0s; } index.js $('.main_menu').hover( function() { //マウスカーソルが重なった時の処理 $('this').next('.sub_menu').addClass('show'); }, function() { $('this').next('.sub_menu').removeClass('show'); } ); おわりに display: none;を指定している要素をフワッと表示させるにはkeyframsとjQueryの処理が必要。 HTMLとCSSで完結させたい場合は、opacityプロパティとvisibilityプロパティで実現させるもいい。
- 投稿日：2021-09-06T19:01:14+09:00
【Web制作】架空のカフェのホームページを作ってみた
目次 1.はじめに 2.最終目標 3.HTMLでのマークアップ 4.コーディング 5.スタイリング 6.レスポンシブ対応 7.画像の設定 8.メタデータの設定 9.おわりに 1. はじめに 本記事では、今まで記事にしてきたHTML・CSSの技術を踏まえ、 カフェのWebサイトを作成していく。(架空です) 作成にあたっての前提条件 1.サーバーサイド側に関しては一切触れない(HTML・CSSのマークアップのトレーニングのため) 2.コーディングの仕様としては、以下の条件で進めていく。 ・HTML5,CSS3 ・文字コード:UTF-8 ・Mac、WindowsのGoogle Chrome最新版 2. 最終目標 完成品としては、以下のようなものを目指していく。 3. HTMLでのマークアップ 画像素材 今回の画像素材は、全てPixabayより借用。 バナー1 バナー2 カフェ全景 カフェ ロゴ 下準備 sample_cafe.txt ウェブサイトの文言をテキスト化した、sample_cafe.txtを事前に用意する。 事前にテキスト化することにより、作業効率を向上させる。 sample_cafe.txtの内容 HTML5 Reset Stylesheet HTML5 Reset Stylesheetというものがある。これは、CSSリセットをするためのCSSである。 ブラウザがデフォルトのCSSを持っている場合があるので、それをリセットしてレイアウトへの影響を減らすためのもの。 補足をすると、ブラウザがよきに計らってCSSを設定している場合がある。例えば、h1要素の文字サイズが大きく設定されているなど裏で動いている可能性があるので、それらの挙動が発生しないような役目がある。 html5reset-1.6.1.cssのソースコード なお、index.htmlファイル内の記述は現時点で以下の通りとなる。 index.html <!DOCTYPE html> <html lang="ja"> <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>Sample Cafe</title> <link rel="stylesheet" href="css/html5reset-1.6.1.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> </body> </html> html5reset-1.6.1.cssは、style.cssよりも先に記述しないと正しく動作しないので、先に記述すること。 (CSSは原則、ファイルの上から下へ向かって解釈されるため) 4. コーディング HTMLによるマークアップ sample_cafe.txt内に記述された文字を、index.htmlファイルのbodyタグ内にコピー&ペーストする。 index.html <!DOCTYPE html> <html lang="ja"> <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>Sample Cafe</title> <link rel="stylesheet" href="css/html5reset-1.6.1.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> Sample Cafe Home Menu Access お知らせ 2021/7/01 リニューアルオープンしました。 2021/7/15 4/27（金）は設備メンテナンスのため休業いたします。 2021/7/22 4連休2020/6/20 こだわりのパンに合わせたスペシャルデザートが登場 2020/8/10 営業時間の一部変更について キャンペーン情報 日頃の感謝を込めて、パスタ全品がいつもよりお得に！ 平日11時から14時までお得なランチタイムを実施中。 バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。 夏限定のスペシャルフルーツサンドを楽しもう！ 季節のおすすめ商品はこちら コーヒー豆の豆知識 ホーム 商品情報 店舗紹介 アクセス 会社情報 お問い合わせ (c) 2021 Sample Cafe </body> </html> HTMLの要素や、CSSでのスタイリングを施していないためブラウザ上では文字が並んでいるだけとなっている。 これから実際に要素をあてがっていく。 ヘッダー部分のコーディング ボリューム過多のため、コードを分解しながら解説していく。 index.html <body id="home"> <header id="top"> <解説> ・bodyタグにid="home"を割り振る。 今回は1ページしか作らないが、ページごとにidを振っておいた方がスタイルを当てやすい。 ・headerにid="top"を割り振る。 headerにはロゴ、ナビゲーション、メインビジュアル、バナーという風に表示したい。 headerロゴとナビゲーション index.html <div class="header_content wrapper"> <h1> <img class="header_log" src="https://via.placeholder.com/100x90" alt="Sample Cafe" /> </h1> <nav> <ul> <li class="current"><a href="index.html">Home</a></li> <li><a href="#">Menu</a></li> <li><a href="#">Access</a></li> </ul> </nav> </div> と記述する。 <解説> ・divタグのクラスに"header_content wrapper"とあるが、これはコンテンツを包むものの意味。(クラス名に特段意味はない。任意で記述できる。) ・見出しにカフェのロゴを置きたいので、imgタグで配置。 ・imgタグのsrcにplaceholderのURLとあるが、これはダミー画像を配置させている。素材の作成待ちなどが非効率なので、画像が揃うまではダミー画像を配置させる習慣があるのだとか。 ↓ PLACEHOLDER.COM 今回のダミー画像は100x90で配置。 ・navタグ内にul>liタグを配置している。後でCSSを用いて横向きに表示させる。 メインビジュアル メインビジュアルに関しては、header終了タグの上に記述する。 index.html <div id="main_image"></div> </header> 画像の設定は後々CSSの方で記述するので後回しにする。 【現時点でのコード】 【現時点でのブラウザ表示】 コンテンツ部分 メイン index.html <div class="contents wrapper"> <main id="content"> <section id="info"> <h2>お知らせ</h2> <dl> <dt>2021/7/01</dt> <dd>リニューアルオープンしました。</dd> <dt>2021/7/15</dt> <dd>7/15（木）は設備メンテナンスのため休業いたします。</dd> <dt>2021/7/22</dt> <dd>4連休</dd> <dt>2021/8/1</dt> <dd>こだわりのパンに合わせたスペシャルデザートが登場</dd> <dt>2021/8/10</dt> <dd>営業時間の一部変更について</dd> </dl> </section> <section id="campaign"> <h2>キャンペーン情報</h2> <ul> <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li> <li>平日11時から14時までお得なランチタイムを実施中。</li> <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li> <li>夏限定のスペシャルフルーツサンドを楽しもう！</li> </ul> </section> </main> <解説> ・メイン部分に関しては、divタグで囲う。 ・お知らせとキャンペーン情報は、それぞれsectionタグで囲う。 ・mainタグのidはinfo、お知らせはinfo、キャンペーン情報はcampaignとする。 ・上記お知らせとキャンペーン情報の情報内容に関しては、以前記載した説明リストにを参照。お知らせ内の説明リストのEmmet省略記号はdl>(dt+dd)*5で記載し、それぞれdtとddの内容を埋めていく。 ・キャンペーン情報のulタグ内に「・」の記載が無いのだが、理由としてHTML5 Reset Stylesheetが働いているため非表示となっている。 バナー index.html <aside id="sidebar"> <ul> <li> <a href="#"><img src="https://via.placeholder.com/250x150" alt="季節のおすすめ商品はこちら"/></a> </li> <li> <a href="#"><img src="https://via.placeholder.com/250x150" alt="コーヒー豆の豆知識"/></a> </li> </ul> </aside> </div> <解説> ・asideタグは、広告表記などに用いられる。id="sidebar"とする。 ・バナー画像の並びはulタグとliタグで表記する。また、バナー画像はplaceholderを用いる。(サイズ:250x50) ・バナー画像のリンク先はそれぞれダミーで表記する。 【現時点でのコード】 【現時点でのブラウザ表示】 フッター index.html <footer> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">商品情報</a></li> <li><a href="#">店舗紹介</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">会社情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> <small>© 2021 Sample Cafe </small> </footer> </body> <解説> ・ページ下部に表示したい項目をfooterタグで囲い、リスト化する。また、リスト化した項目にaタグでそれぞれリンクを付与する。(ホームはindex.htmlで、その他はダミー) 【現時点でのコード】 【現時点でのブラウザ表示】 5. スタイリング 共通部分のスタイリング 文字コード設定 styles.css @charset "utf-8"; <解説> ・＠charsetは、スタイルシートで使う文字エンコーディングを定義する。 ・今回で言うと、このページの文字コードはUTF-8で記述することを定義している。 ページ全体のフォントサイズ styles.css html { font-size: 100%; } <解説> ・ユーザーが指定した文字サイズを正しく反映させるために、html要素に文字サイズを100％に設定している。 ページ内のフォント設定 styles.css body { font-family: 'Hiragino Kaku Gothic proN', 'メイリオ', sans-serif; color: #555; line-height: 1.5; } <解説> ・line-heightを設定することにより、行の高さを付けて行間にゆとりを持たせるのが狙い。 ヘッダーロゴ styles.css img { width: 100%; } <解説> ・画像を横幅いっぱいに表示したいので100％で表記する。 <適用前> <適用後> コンテンツの横幅・マージン・パディング styles.css .wrapper { max-width: 940px; margin: 0 auto; padding: 0 10px; } <解説> ・max-width: 940pxは、コンテンツの最大の横幅の数値。 ・横幅を縮小するとコンテンツの横幅も縮小する。 ・横幅を広げても940px以上は広がらないようになる。 ・コンテンツは中央揃えにするため左右のmarginはauto、上下は0。 ・左右のpaddingを設定しているのは、スマートフォン表示にした際にスペースを与えたかったから。 ※paddingをわかりやすくするため、一時的に背景色を付けている。 【共通部分のコード】 【現時点でのブラウザ表示】 ヘッダー部分のスタイリング ヘッダー最上部 styles.css header { border-top: 8px solid #8c6239; } <解説> ・ヘッダー上部に太さ8pxで茶色の実線を配置。 ヘッダーロゴの幅 styles.css .header_logo { width: 90px; } <解説> ・ヘッダロゴ画像の幅の設定 ヘッダーのナビゲーション styles.css .header_content { display: flex; align-items: center; justify-content: space-between; margin: 10px auto; } <解説> ・ヘッダーのロゴ画像とナビゲーション部分display: flexで横並びに設定する。 ・align-items: centerで、垂直配置の配置位置を中央に指定する。 ※align-itemsの詳細記述 ・justify-content: space-betweenで、アイテムの間にスペースを均等に割り付ける。 ・marginで、上下10px、左右autoのマージンを設定する。 ナビゲーションリストの横並び styles.css header nav ul { display: flex; } <解説> ・ナビゲーション部分を横並びに設定する。 ナビゲーションのリスト間隔 styles.css header nav ul li { margin-left: 30px; } <解説> ・ナビゲーション内のリストの間隔を空ける。 リンクの_の打ち消しと文字色 styles.css header nav ul li a { text-decoration: none; color: #555; } <解説> ・aタグの下線を、text-decoration: none;で消す。 ・文字色を灰色に設定する。 ナビゲーションリストのマウスカーソルの挙動 styles.css header nav ul li a:hover, header nav ul li a:active, header nav ul li.current a { color: #8c6239; } <解説> ・マウスカーソルをホバーしたときやクリックしたとき、そしてcurrentクラスを付与したHomeの文字色をデフォルトで茶色に設定する。 メインビジュアル画像 styles.css #main_image { width: 100%; height: 50vh; background-image: url(https://via.placeholder.com/3000x2500); background-repeat: no-repeat; background-position: center; background-size: cover; } <解説> ・横幅は画面いっぱいの100%表記。 ・height: 50vh;は、画面表示の50%という意味。 ※vhとは、viewport heightの略で、viewportの高さによる割合のこと。 ・background-imageは、PLACEHOLDERより、ダミー画像を配置。 ・画像を繰り返し表示しないのでbackground-repeat: no-repeat;を設置。 ・背景画像の表示開始位置を、background-position: center;で指定。 ・背景画像のサイズを指定するので、background-size: cover;で指定。 ※coverは、縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する。 【header部分のコード】 【現時点でのブラウザ表示】 コンテンツ部分 コンテンツ部分の横並び設定 styles.css .contents { display: flex; justify-content: space-between; margin-top: 30px; } <解説> ・contentsクラスを横並びに表示させるためにdisplay: flex;を指定。 ・justify-content: space-between;で、dt要素とdd要素の間にスペースを空ける。 main_contentの幅 styles.css #main_content { width: 65%; } sidebarの幅 styles.css #sidebar { width: 75%; } コンテンツ部分の見出しのスタイリング styles.css #home h2 { margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid #8c6239; font-size: 1.2rem; } <解説> ・font-size: 1.2remのremは、「root em」の略で、html要素の文字サイズに影響されない。 ・ styles.css #info dl { display: flex; flex-wrap: wrap; margin-bottom: 50px; } <解説> ・flex-wrap: wrap;フレックスコンテナ内のアイテムの折り返し方法を指定する際に使用する。 dt要素の幅 styles.css #info dt { width: 7em; } <解説> ・emは、ブラウザの表示領域や他の要素サイズとの関係で算出される相対的なサイズ指定。remと混同しないこと。 関数を用いた説明リストの幅設定 styles.css #info dd { width: calc(100% - 7em); } <解説> ・calc()とはCSSで使用する関数のこと。今回の場合は、幅100%から7emを引いたもので、ブラウザの大きさや文字サイズに影響されないという狙いがある。 説明リストのマージン設定 styles.css #info dt, #info dd { margin-bottom: 10px; } キャンペーン情報のリスト設定 styles.css #campaign ul li { margin-bottom: 10px; list-style-type: none; } バナーのマージン設定 styles.css #sidebar ul li { margin-bottom: 20px; list-style-type: none; } 【コンテンツ部分のコード】 【現時点でのブラウザ表示】 フッター部分 フッター部分の余白・色設定 styles.css footer{ margin-top: 100px; padding: 30px; text-align: center; color: #fff; background-color: #a67c52; } 【デベロッパーツール参照】 【デベロッパーツール参照】 適用箇所:オレンジ色でハイライトされている リストの横並び styles.css footer ul li{ display: inline-block; margin: 5px; } <解説> ・displayプロパティのflexとinline-blockの違いは、flexは親要素の下の子要素の高さなどを統一することができるのに対し、inline-blockはブロック要素（divタグなど）を横並びに表示することができる。 フッター内の文字色 styles.css footer ul li a{ color: #fff; } リスト内のaタグのアンダーライン消去 styles.css footer ul li a:link{ text-decoration: none; } a要素にマウスホバーした際の挙動 styles.css footer ul li a:hover, footer ul li a:active{ opacity: .7; } <解説> ・opacityプロパティは、要素の透明度を指定する際に使用する。 ※画面収録が出来なかったので、GIF画像は割愛。 smallタグの文字の大きさの調整 styles.css small { font-size: 0.7rem; } 【footerのコード】 【現時点でのブラウザ表示】 6. レスポンシブ対応 トップページのレスポンシブ対応を実施する。 →端末のサイズによって見やすい表示に切り替え。 上記画像は、作成したトップページをデベロッパーツールで検証し、かつ端末サイズをiPhone 6/7/8のサイズで検証したものであるが、画面が小さくなっているのにPC用の画面で評されているので、文字やバナーのサイズが小さいので、端末のサイズにより見やすいようにする必要がある。 metaタグでのviewport設定 index.html <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Visual Studio Codeだと、shift+!でHTMLの雛形を呼び出した際に自動で出力されるので特に覚える必要はない。 参考:MDN meta要素 メディアクエリの設定 ・メディアクエリ:CSSの機能の一つで、表示する画面の環境に応じで適用するスタイルを切り替える機能のこと。 styles.css @media (max-width: 600px) { html { font-size: 87.5%; } } <解説> ・この構文の意味は、画面幅が最大600pxになったら、ページ全体の文字サイズが87.5%になるということ。以下画像で比較。 ヘッダーのナビゲーションを見てもらうと、600pxの方が文字が小さくなっている。 ロゴ画像の調整 styles.css @media (max-width: 600px) { html { font-size: 87.5%; } .header_logo { width: 60px; } } コンテンツ部分とサイドバーの縦並び設定 styles.css @media (max-width: 600px) { html { font-size: 87.5%; } .header_logo { width: 60px; } .contents { flex-direction: column; margin-top: 10px; } } <解説> ・flex-directionプロパティは、フレックスコンテナ内のアイテムの配置方向を指定する際に使用する。columnとすることで、フレックスコンテナの主軸は上から下になる。 <flex-direction適用前> <flex-direction適用後> <現状のウェブページ> 最大幅600pxにした際に、メインコンテンツとサイドバーの余白が大きいところが気になる。 メインコンテンツとサイドバーの幅 styles.css @media (max-width: 600px) { html { font-size: 87.5%; } .header_logo { width: 60px; } .contents { flex-direction: column; margin-top: 10px; } #main_content, #sidebar { width: 100%; } } <適用後> 7. 画像の設定 ロゴ画像 index.html <h1> <img class="header_logo" src="https://via.placeholder.com/100x90" alt="Sample Cafe" /> </h1> ⇓実際にダミー画像から画像をロゴ画像へ差し替え⇓ index.html <h1> <img class="header_logo" src="img/cafe_sample_logo.png" alt="Sample Cafe" /> </h1> メイン画像 styles.css #main_image { width: 100%; height: 50vh; background-image: url(https://via.placeholder.com/3000x2500); background-repeat: no-repeat; background-position: center; background-size: cover; } ⇓実際にダミー画像からメイン画像へ差し替え⇓ styles.css #main_image { width: 100%; height: 50vh; background-image: url(../img/cafe_sample_cafe.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } ※/imgの前の「..」とは、1つ上の階層に行く際に使用する。 バナ(sidebar)ー画像 index.html <aside id="sidebar"> <ul> <li> <a href="#"><img src="https://via.placeholder.com/250x150" alt="季節のおすすめ商品はこちら" /></a> </li> <li> <a href="#"><img src="https://via.placeholder.com/250x150" alt="コーヒー豆の豆知識" /></a> </li> </ul> </aside> ⇓実際にダミー画像からバナー画像へ差し替え⇓ index.html <aside id="sidebar"> <ul> <li> <a href="#"><img src="img/cafe_sample_banner1.jpg" alt="季節のおすすめ商品はこちら" /></a> </li> <li> <a href="#"><img src="img/cafe_sample_banner2.jpg" alt="コーヒー豆の豆知識" /></a> </li> </ul> </aside> 【現時点でのブラウザ表示】 8. メタデータの設定 メタデータとは？ ・ページの付加的なデータ。 ・description:コンテンツに関する、簡潔で正確な概要。 →SEO(Search Engine Optimization):検索エンジン最適化の観点より、検索されたいページに入れるようにする。 (例)Yahoo! JAPAN index.html <meta name="description" content="Sample Cafeの公式ウェブサイトです。商品情報、店舗紹介、アクセス、会社情報など"> ※headタグ内のviewport情報の下に記述すること。 【デベロッパーツール参照】 9. おわりに 実際にウェブページを作成してみて、今まで学習したことを振り返りながら作成できたのですごく良い復習になった。 再度作成する機会があったら、もう一回振り返りという意味でこの記事に戻ってきたいと思う。 最後に、完成形のコードをかけへ格納したので、気になった方はこちらからどうぞ。 Sample Cafe本番データ 長々とご覧いただき、ありがとうございました。
- 投稿日：2021-09-06T11:20:30+09:00
JavaScriptでアプリを作成しました【7】【パックマン】
はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。 Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。 【仕様】 参考サイト バニラJavaScript、HTML、CSSでパックマンを構築する|アニア・クボウ
- 投稿日：2021-09-06T11:20:30+09:00
JavaScriptでアプリを作成しました【7】【Space Invaders】
はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。 Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Space Invaders</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="results">0</h1> <div class="grid"></div> <script src="main.js"></script> </body> </html> styles.css .grid { width: 300px; height: 300px; border: solid black 1px; display: flex; flex-wrap: wrap; } .grid div{ width: 20px; height: 20px; } .invader { background-color: purple; border-radius: 10px; } .shooter { background-color: green; } .laser { background-color: orange; } .boom { background-color: red; } main.js //gridを取得 const grid = document.querySelector(".grid"); const resultsDisplay = document.querySelector(".results"); let currentShooterIndex = 202; let width = 15; let direction = 1; let invadersId; let goingRight = true; let aliensRemoved = []; let results = 0; //forループを使用して正方形を作成 for (let i = 0; i < 225; i++) { //forループを実行し、ループするたび正方形を作成する const square = document.createElement("div"); grid.appendChild(square); } //全ての正方形を取得 const squares = Array.from(document.querySelectorAll(".grid div")); //エイリアンを取得 配列を使用 const alienInvaders = [ 0,1,2,3,4,5,6,7,8,9, 15,16,17,18,19,20,21, 22,23,24,30,31,32,33, 34,35,36,37,38,39, ]; //インヴェーダーを正方形の中に配置する function draw() { for (let i = 0; i < alienInvaders.length; i++) { if (!aliensRemoved.includes(i)) { squares[alienInvaders[i]].classList.add("invader"); } } } draw(); //削除したインベーダーを作成する function remove() { for (let i = 0; i < alienInvaders.length; i++) { squares[alienInvaders[i]].classList.remove("invader"); } } squares[currentShooterIndex].classList.add("shooter"); //シューターを動かす function moveShooter(e) { squares[currentShooterIndex].classList.remove("shooter"); //キーボタンを押したら左右に１マスずつ移動する switch (e.key) { case "ArrowLeft": if (currentShooterIndex % width !== 0) currentShooterIndex -= 1; break; case "ArrowRight": if (currentShooterIndex % width < width - 1) currentShooterIndex += 1; break; } squares[currentShooterIndex].classList.add("shooter"); } document.addEventListener("keydown", moveShooter); //インベーダーが移動する function moveInvaders() { const leftEdge = alienInvaders[0] % width === 0; const rightEdge = alienInvaders[alienInvaders.length - 1] % width === width - 1; remove(); //最後のインベーダーが右端にいたら一段下げる if (rightEdge && goingRight) { //iを0にするためには、各インベーダーをループさせる。 for (let i = 0; i < alienInvaders.length; i++) { alienInvaders[i] += width + 1; direction = -1; goingRight = false; } } //最後のインベーダーが左端にいたら一段下げる if (leftEdge && !goingRight) { for (let i = 0; i < alienInvaders.length; i++) { alienInvaders[i] += width - 1; direction = 1; goingRight = true; } } for (let i = 0; i < alienInvaders.length; i++) { alienInvaders[i] += direction; } draw(); //シューターがインベーダーに当たったら、GAME OVER if (squares[currentShooterIndex].classList.contains("invader", "shooter")) { resultsDisplay.innerHTML = "GAME OVER"; clearInterval(invadersId); } //インべーダーが底に当たったら、GAME OVER for (let i = 0; i < alienInvaders.length; i++) { if (alienInvaders[i] > squares.length + 100) { // console.log("squares.length", squares.length); resultsDisplay.innerHTML = "GAME OVER"; clearInterval(invadersId); } } if (aliensRemoved.length === alienInvaders.length) { resultsDisplay.innerHTML = "YOU WIN! WIN!"; clearInterval(invadersId); } } invadersId = setInterval(moveInvaders, 300); //インベーダーを射撃する function shoot(e) { let laserId; let currentLaserIndex = currentShooterIndex; function moveLaser() { squares[currentLaserIndex].classList.remove("laser"); currentLaserIndex -= width; squares[currentLaserIndex].classList.add("laser"); //インベーダーにレーザーが当たると削除される if (squares[currentLaserIndex].classList.contains("invader")) { squares[currentLaserIndex].classList.remove("laser"); squares[currentLaserIndex].classList.remove("invader"); squares[currentLaserIndex].classList.add("boom"); //レーザーによる爆発が起きたら、300ミリ秒後に削除される setTimeout(() => squares[currentLaserIndex].classList.remove("boom"), 300); clearInterval(laserId); //インベーダーにレーザーが当たっても再描画されているので、レーザーが当たると削除される const alienRemoved = alienInvaders.indexOf(currentLaserIndex); aliensRemoved.push(alienRemoved); //スコアを追加 results++; //結果を表示する resultsDisplay.innerHTML = results; console.log(aliensRemoved); } } //キーの上を押すと射撃する switch (e.key) { case "ArrowUp": laserId = setInterval(moveLaser, 100); } } document.addEventListener("keydown", shoot); 参考サイト Space Invaders in JavaScript (no-nonsense version!)
- 投稿日：2021-09-06T11:15:13+09:00
JavaScriptでアプリを作成しました【7】【パックマン】
はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。 Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。 【仕様】