refirio.org

Web制作

Web制作に関するあれこれメモ。

情報デザインとコーディング

■情報デザインの基本 以下を常に意識する。（HTMLコーディングを何度かしてもらってから、の方が実体験が伴っていいかもしれない。） ・情報はグループ化する。 ・揃えるところは揃える。 ・余白を意識する。 ・原色は基本的に使わない。 ・見出しは大きく太字に、本文は見出しよりは小さく。など。 ・行間は詰めすぎない。 伝わるデザイン｜研究発表のユニバーサルデザイン https://tsutawarudesign.com/ 以下はスライド資料の作り方に関するものだが、デザインの基本として参考になる。 伝わりやすいスライド資料の作り方。資料作成の流れからデザインのコツ、初心者さんにおすすめの本まで紹介｜fuyuna blog｜デザインとライフスタイル、キャリアをアップデートし続けるデザイナーのブログ https://fuyuna.net/making-slide-document 以下についても意識する。 ・企業ロゴの取扱いは慎重に。 歪めたり色を変えたりはNG。最小サイズや周囲に置いていい色が指定されているなど、諸々のルールが決められている場合もある。 ・トンマナを意識する。 何かしらパーツを作成するときなど、他ページを参考にしてトーン＆マナーを合わせる。 トンマナの意味とは？トンマナを作成する方法や事例を分かりやすく解説 | 株式会社パンタグラフ https://pantograph.co.jp/blog/uiux/tone-manner.html 以下も具体例として参考にできそう。 なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita https://qiita.com/mskmiki/items/544149987475719e417b ただし案件によってはAさんの画面が求められる可能性もあるので、同意を取りつつ進めるのは必須。 今回のAさんBさんの比較は、ターゲットが異なるシステムを無理矢理比較しているとは言えるのは注意。 （今回の場合は「フィットネストレーナーが使うアプリ」とあるので、Bさんデザインの方が好ましいとは思う。） デザインはアートと異なり、「誰が何のために提供したい内容なのか」が重要となる。 また特に業務システムでは、Bさん手順の「まずはどう使われるかをじっくり考える」がとても難しい。 誰も全体像を把握していないこともあるので、最適化したつもりが必要な項目を削ってしまう可能性はある。 ■HTMLコーディング ・書籍をもとに基本的なコーディングを習得。 ・課題をこなして実践に備える。 ・下層ページのコーディングを何度かこなしてもらう。 ・ある程度できるようになったら、トップページのコーディングも含めて対応してもらう。 とするか。 以下は練習に良さそう。 最初は「【入門編】ウォーミングアップ用の模写サイト」を進めるのがいいか。 ただしHTMLの基本が解った上での内容なので、それは別途書籍などで学んでおく必要がある。 「【中級編?】少し複雑な2カラムの模写サイト」をすんなり組めるなら、ちょっとした仕事はできるかもしれない。 これを、ページ自体は渡さずに素材だけ渡して。 ・1枚画像からコーディングしてみてください。 ・作業時間も意識して「これくらいのページなら〇時間でできます」を言えるようにしてください。 とするのがいいか。 【模写コーディング】おすすめの練習サイト【入門編〜上級編】 | Codestep（コードステップ） https://code-step.com/coding-recommend/ 以下も練習に良さそう。 上記ページよりも難易度は高そう。 無料コーディング練習所 https://webdesigner-go.com/coding-practice/ ■＋αのHTML, CSS, JavaScriptコーディング。 http://refirio.org/memos/study/20170210_html_css_javascript/slide/ 追加メモ。 ・テキストが増えたとき、減ったとき、無いときのデザインが判るように。 ・要素が増えたとき、減ったとき、無いときのデザインが判るように。 ・状態が複数あるときのデザインが判るように。 ・下層ページの場合、p ul li table form など、基本的な要素はひととおり定義済みになっているとありがたい。 どんな順番で追加してもレイアウトが破綻しないとありがたい。後付ではなく、最初に考慮されているとスムーズ。 つまり、汎用的な下層ページが作れるものだといい。 ・フォームを組み込むときはformタグも書く。（formタグなしにinputタグなどが配置されていることがある。） フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note https://note.mu/pittan/n/n5789d09c5575 ■BEM（Block Element Modifier・ベム）による命名規則 【命名規則】BEMを使った書き方についてまとめてみた【CSS】 - Qiita https://qiita.com/takahirocook/items/01fd723b934e3b38cbbc なぜBEMはアンダースコア__、またはハイフン--と2個必要なのか│Design Note https://desnote.com/block__element-modifier/ SASS(SCSS)とBEMのお話 - Qiita https://qiita.com/pe-ta/items/67d0e3a72f30e9dda59c BEMとSassの「&__Element」記法を使わない派に転向した理由 | oshin.tokyo https://oshin.tokyo/entry/2020-bem-ampersand ■HTMLコーディングの諸々 基本HTMLの例。 HTML Starter Template - A Basic HTML5 Boilerplate for index.html https://www.freecodecamp.org/news/html-starter-template-a-basic-html5-boilerplate-for-index-html/ 以下にGoogleのコーディング規約があるので、HTMLコーディングに慣れてきたら参考にするといい。 ただしあくまでもGoogleの独自ルールなので、必ずしもこれに従う必要は無い。（例えば「インデントは半角2スペースではなく、半角4スペースにする」など。） また、制作会社によっては独自にコーディング規約が定められているので、コーディングの仕事で指定されればそちらを優先する。 Google HTML/CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html 現在のGoogleのHTML・CSSガイドに沿ったコーディング規約/日本語訳 - FUERU https://fueru.info/design/html-css/google-styleguide/ マークアップ全般。 HTMLのタグちゃんと使おう https://zenn.dev/team_delta/articles/a54d642ca3c6be HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA https://ics.media/entry/230622/ 【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita https://qiita.com/degudegu2510/items/6d5d53ca9833aef7ec83 古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset | コリス https://coliss.com/articles/build-websites/operation/css/a-more-modern-css-reset.html いいこと聞いた！ CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ | コリス https://coliss.com/articles/build-websites/operation/css/sensible-defaults-for-img-elements.html ヘッダの記述内容。 2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ | コリス https://coliss.com/articles/build-websites/operation/work/html-head-elements.html スクロール時にヘッダサイズを縮小。 スクロールするとヘッダーサイズが変わるアニメーションを実装する方法 | Webサイト制作会社・ホームページ制作会社 | 株式会社296 | 川崎・横浜 https://296.co.jp/article/37481620193001693 ボタンの配置場所。 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | 「HTML5(HTML)」カテゴリー | Design 0 http://design0.w4c.work/status/287 メディアクエリでの分岐は flexbox と grid に置き換わろうとしているみたい。 CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ | コリス https://coliss.com/articles/build-websites/operation/css/media-queries-probably-dont-need.html FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ | コリス https://coliss.com/articles/build-websites/operation/css/grid-for-layout-flexbox-for-components.html CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose... flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita https://qiita.com/hashrock/items/189db03021b0f565ae27 CSS Subgridが遂に全ブラウザ対応。新時代のグリッドデザインを学ぼう - Speaker Deck https://speakerdeck.com/tonkotsuboy_com/css-subgridgasui-niquan-burauzadui-ying-xin-shi-dai-noguritu... 以前は画像やJavaScriptを使わなければならなかったようなことも、CSSだけで対応できるようになってきている。 2022年のモダンCSS改 - Speaker Deck https://speakerdeck.com/tonkotsuboy_com/2022nian-falsemodancssgai 【CSS】CSSの擬似クラス :toggle()を使ってToggle Switchを作る - Qiita https://qiita.com/degudegu2510/items/78c0fd5976f62f6ddcea CSSで文字詰めができる【font-feature-settings】を使用してサイトの見栄えを良くしよう！ | ウェブカツBLOG https://webukatu.com/wordpress/blog/14713/ font-feature-settingsが効かない時の確認点 - Qiita https://qiita.com/kakuta_yu/items/97b86353582f444fb47f 2023年モダンCSSの最新トレンド - Speaker Deck https://speakerdeck.com/tonkotsuboy_com/2023nian-modancssnozui-xin-torendo あっ、そうだ！モダンCSSをまとめておこう https://zenn.dev/hiraoku/articles/926cbb8bc35eaa ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る! - Speaker Deck https://speakerdeck.com/myzkyy/koko1-2nian-kuraide-shi-eruyouninatuta-zhu-yao-burauzanozui-xin-ban-g... そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています | コリス https://coliss.com/articles/build-websites/operation/css/goodbye-sass-welcome-back-native-css.html 令和のHTML / CSS / JavaScriptの書き方50選 https://zenn.dev/necscat/articles/bc9bba54babaf5 コンテナ。 全ブラウザ対応した container queryは何がスゴイのか？ - Speaker Deck https://speakerdeck.com/tonkotsuboy_com/quan-burauzadui-ying-sita-container-queryhahe-gasugoinoka テキスト。 CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ | コリス https://coliss.com/articles/build-websites/operation/css/css-4-features-for-i18n.html 下線。 CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで - ICS MEDIA https://ics.media/entry/230123/ リンク。 【CSS】まだホバー時のスタイルを :hover だけで指定してるの？ https://zenn.dev/kagan/articles/css-hover-style <a href="tel:">のリンクをPC表示時に無効にするCSSの書き方 | 福岡のホームページ制作会社 | シンス株式会社 https://since-inc.jp/blog/4481 全画面表示。 なぜYouTubeでは動画を全画面表示しながらスクロールが可能なのか？ https://zenn.dev/popopon/articles/scrollable-fullscreen-video IEは2022年6月15日に終了されるので、IE対応のために使えなかったCSSが使えるようになる 詳細は後述の「Internet Explorer 11（IE11）への対応」を参照 【CSS】IE環境では使うの躊躇していた、便利なCSS。 - Qiita https://qiita.com/degudegu2510/items/2939294031cdf6fc23b5 IEよ、さようなら IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ | コリス https://coliss.com/articles/build-websites/operation/css/css-properties-ie-is-not-supported.html IEサポートやめます！で使えるようになったもの https://zenn.dev/vava/articles/0c49c99f0e7b03 【第5弾】少しのコードで実装可能な10のCSS小技集 | Webクリエイターボックス https://www.webcreatorbox.com/tech/css-tips-5 以下は公式の終了告知。 Internet Explorer 11 はサポートを終了しました。長年のご愛顧ありがとうございました。 - Windows Blog for Japan https://blogs.windows.com/japan/2022/06/15/internet-explorer-11-is-no-longer-supported/ ■ブラウザの訪問済みリンクの色 【Chrome135】訪問済のリンクが訪問済になったりならなかったりする #CSS - Qiita https://qiita.com/rana_kualu/items/b74b7160389b9c8f3928 Chromeで「:visited」のリンク色が変化しない問題 / 訪問済のリンク色 | PersonWriter′s Room https://ameblo.jp/personwritep/entry-12891705761.html 訪問済みリンクの色が変わらない - Google Chrome コミュニティ https://support.google.com/chrome/thread/328803210/%E8%A8%AA%E5%95%8F%E6%B8%88%E3%81%BF%E3%83%AA%E3%... Googleで、訪問済みリンクの色が、翌日または起動時にリセットされて... - Yahoo!知恵袋 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10294206045 ■ブラウザ依存対策 昔ほどでは無いが、今もブラウザごとの挙動の違いには悩まされる。 Safari･Chrome･Firefoxでありがちなバグの対処法について(主にCSS) | Blog | 株式会社イロコト | アニメ･ゲームなどのエンタメ系Web制作&運用会社 https://irokoto.co.jp/blog/20201228/post-17 【2021年】Chromeで画像がぼやける場合のCSS対処法 | Sho-log https://sho-log.com/chrome-image-blurred/ レスポンシブ対応でコーディングする場合、「box-sizing: border-box;」を指定しておくといいみたい。 コーディングの際に検討したい。 【CSS】box-sizing:border-boxの使い方｜効かない時は？ https://saruwakakun.com/html-css/reference/box-sizing 【CSS】box-sizingの意味は？スマホ対応に必須の理由を解説 | ZeroPlus Media https://zero-plus.io/media/box-sizing/ 特定ブラウザでの表示は、以下のツールが使えそう。 Browserling - Online cross-browser testing https://www.browserling.com/ ■HTML Living Standard HTML5は2021年の1月に廃止された。 これからは HTML Living Standard が標準となるが、HTML5と仕様が大きく変わるわけでは無い。 HTML Standard 日本語訳 https://momdo.github.io/html/ HTML Living Standard - とほほのWWW入門 https://www.tohoho-web.com/html/memo/htmlls.htm どうしてHTML5が廃止されたのか | フューチャー技術ブログ https://future-architect.github.io/articles/20210621a/ ■Internet Explorer 11（IE11）への対応 2022年3月時点でのメモ。 ・Windows11では、すでにIE11を起動することはできない。 ・Windows10では起動するが、2022年6月15日以降は起動できなくなるとされている。 ・Windows8.1は、OS本体と同じく2023年1月10日でIEのサポートが終了する。 ・Windows8は、OS自体のサポートが終了しており、IEもサポートが終了している。 ・Windows7は、OS自体のサポートが終了しており、IEもサポートが終了している。 いよいよ完全終了へ。Internet Explorer（IE）サポート終了スケジュール：Tech TIPS - ＠IT https://atmarkit.itmedia.co.jp/ait/articles/1503/11/news134.html ヤフーのIE11 サポート終了の進め方 - Yahoo! JAPAN Tech Blog https://techblog.yahoo.co.jp/entry/2022021630265506/ 「IE 11」デスクトップアプリ、サポートが継続されるOSも - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1415886.html 2022年6月15日以降にIE11をサポートしたければ、Windows8.1のパソコンを入手する必要がありそう。 Edgeの「IEモード」で、どこまでIE11が再現されているかは要検証。 「Windows8.1上のIE11でしか再現しない現象」などが無いとは言い切れないので、対応するならWindows8.1を用意しておく必要がありそう。 Edgeの「IEモード」を、サポートが終了するIE代わりに使う方法：Tech TIPS - ＠IT https://atmarkit.itmedia.co.jp/ait/articles/2009/02/news022.html 2023年2月のパッチで完全無効化されるらしい。 Internet Explorerよ永遠に（眠れ） 〜2023年2月の完全無効化を前に「Microsoft Edge」とともに振り返る【特集・集中企画】 - 窓の杜 https://forest.watch.impress.co.jp/docs/special/1452848.html

SEO

SEO = Search Engine Optimization 「検索エンジン最適化」の略語で、Webページを検索上位に表示させる手法のこと。 SEOまるわかり大全集 https://tcd-theme.com/introduction-seo SEO効果がいちばん高くなるHTMLの書き方・タグの使い方を教えてください | JADEのSEOプロフェッショナル相談室 | Web担当者Forum https://webtan.impress.co.jp/e/2021/06/01/39673 【2021年最新】SEOとは？SEO対策の仕組み、技術対策、コンテンツ制作まで解説 | ナイルのマーケティング相談室 https://www.seohacks.net/blog/1066/ グーグルが公式SEOチェックツールを公開【SEO記事11本まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum https://webtan.impress.co.jp/e/2018/02/09/28277 Googleの検索アルゴリズムの内部資料が漏洩か？「SEO業界で長年疑われていたものが明らかに」 - Togetter https://togetter.com/li/2374632 2024年7月5日以降、スマートフォン用のページしかクロールされなくなるらしい。 通常は何も影響が無いらしいが…。 Google、パソコン用 Googlebot によるクロールを完全に終了。 2024年7月5日以降 https://www.suzukikenichi.com/blog/google-will-stop-crawling-and-indexing-by-desktop-googlebot/ ■検索エンジンのアクセスを制御する robots.txt とは？ http://www.tohoho-web.com/wwwxx079.htm 以下は /feed/ 内をクロールさせない設定の例。 ■AMP AMP = Accelerated Mobile Pages モバイルページを高速に表示させるための手法だったが、GoogleはAMPページの優遇を終了した。 それに伴い、AMP対応を終了する動きがある。 【AMP】Googleが推進するAMPとは？概要と対応方法まとめ https://digitalidentity.co.jp/blog/seo/amp/what-is-amp.html Googleの「AMP優遇」がまもなく終了 - GIGAZINE https://gigazine.net/news/20210519-google-amp-no-longer-preferential-treatment/ アメブロのAMPを終了します | CyberAgent SEO Information　　(サイバーエージェントSEO情報ブログ) https://ameblo.jp/ca-seo/entry-12709719452.html ■その他参考 Google推奨の動画SEO: 各動画に専用ページを作成する | 海外SEO情報ブログ https://www.suzukikenichi.com/blog/google-recommends-creating-a-dedicated-page-for-each-video/

Cookie

■Cookieとは 基礎知識　Cookieの仕組み https://www.soumu.go.jp/main_sosiki/joho_tsusin/security_previous/kiso/k01_cookie.htm クッキー（Cookie）とは？削除方法や「Cookieを有効にする」方法など解説 | BtoBマーケティングラボ https://www.onemarketing.jp/knowledge/word/cookie 初心者でもわかる『Cookie（クッキー）』講座 危険性やスマホでの設定方法もズバリ解説｜TIME＆SPACE by KDDI https://time-space.kddi.com/ict-keywords/20180726/2392 Cookie | PHP Labo https://www.php-labo.net/tutorial/php/cookie.html ■Cookieの利用制限 1st Party Cookie（＝自サイトで発行したCookieを自サイトで扱う）は問題無いが、 3rd Party Cookie（＝他サイトが発行したCookieを扱う）は、プライバシーの理由で規制される流れなっている。 2022年最新｜Cookie規制とは？日本の状況・影響・対策方法まで解説 | アドエビス（AD EBiS） 広告効果測定プラットフォーム https://www.ebis.ne.jp/column/cookie/ 【2021年最新版】Cookie規制とは？影響と対策を徹底解説 https://service.aainc.co.jp/product/letro/article/what-is-cookie サードパーティクッキーとは？概要から今後の行方まで徹底解説 https://digitalidentity.co.jp/blog/ad/3rd-party-cookie.html 3rd party Cookie いただきます | TECHSCORE BLOG https://www.techscore.com/blog/2016/06/24/3rd-party-cookie/ 作って学ぶファーストパーティー製クッキー https://zenn.dev/bun913/articles/f872c2a846fe6a サードパーティクッキーの使い方・使い分けまとめメモ - とりあえずphpとか https://kimagureneet.hatenablog.com/entry/2016/02/11/104614 Cookie受け入れ確認の仕組みを実装する場合、以下が参考になりそう。（未検証。） 【Cookie実装】JavaScriptでCookieの利用同意と拒否のFooterバナーを作る | GDPR対策・合法 - No Change No Life I/O https://masanyon.com/javascript-cookie-popup/ ただし2024年7月時点で、上記「サードパーティクッキーの規制」は無くなるかもしれないこととなった。 Google、サードパーティークッキー廃止方針を撤回 - 日本経済新聞 https://www.nikkei.com/article/DGXZQOGN2305Y0T20C24A7000000/ Google、サードパーティCookie廃止方針を変更　新たなユーザー選択肢を導入へ - ITmedia NEWS https://www.itmedia.co.jp/news/articles/2407/23/news082.html グーグル、「サードパーティーCookie廃止」方針を転換へ - ケータイ Watch https://k-tai.watch.impress.co.jp/docs/news/1610423.html 「サードパーティークッキーの廃止の撤回」ってどういうこと？ | IIJ Engineers Blog https://eng-blog.iij.ad.jp/archives/26923

アクセス解析

Google Analyticsが定番だが、Cookieと同じくプライバシーが問題視されるようになってきた。 また、複数の端末で色々なサイト・アプリなどがされるため、従来の方法では解析が難しくなってきた。 その対策に、GA4としてアップデートされた。 Googleアナリティクスのユニバーサルアナリティクス廃止とGA4への移行がなぜ話題なのかを説明します | さくらのホームページ教室 https://rs.sakura.ad.jp/column/rs/ga4-transfer/ 「GAのUA終了ってまだ先でしょ」がヤバい理由と、早め対応に役立つ完全マニュアル【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum https://webtan.impress.co.jp/e/2022/05/06/42722

OGP

OGP = Open Graph protocol FacebookやTwitterなどのSNSでシェアされた際に、 そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組み。 Facebook・TwitterのOGP設定方法まとめ｜ferret https://ferret-plus.com/610 OGPを設定しよう！SNSでシェアされやすい設定方法とは？ https://digitalidentity.co.jp/blog/seo/ogp-share-setting.html OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ https://rakko.tools/tools/9/ 2021年版：OGPの正しい設定方法まとめ。確認方法や画像サイズも | Web Design Trends https://webdesign-trends.net/entry/12993 ■Facebook（2014年に調べたときのメモ） 内容が反映されない場合、キャッシュを削除するといい。 FacebookのOGPキャッシュ問題に終止符。キャッシュクリアボタン実装！ | Sunday In The Park https://snowadays.jp/2014/08/2979 Basic認証をかけている場合、Facebookのクローラを除外するといい。 BASIC認証やIP制限をかけているサイトのOGPをFacebookで表示する（FacebookのIPアドレスリスト） https://snowadays.jp/2013/09/2204 具体的には このようなBasic認証を指定していた場合、この直後に以下を追加すれば大丈夫だった。

jQuery

jQuery https://jquery.com/ jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発 − Publickey https://www.publickey1.jp/blog/21/jquery_uijquery_mobilejquery.html 以下は jQuery UI では無いらしい。 jQueryのdatetimepickerの使い方とは？datetimepickerを正しく使いこなそう！ | .NETコラム https://www.fenet.jp/dotnet/column/language/6933/ 【jQuery】datetimepicerプラグイン - Qiita https://qiita.com/kazu56/items/b6b00cad9c2d3e30a118 ■jQueryの基本操作 よく調べる内容をメモ。 ■selectのoptionを一部非表示にする Safariでselectのoptionを一部非表示にするのは意外と難しい。 $(this).show() と $(this).hide() で制御できるように見えるが、Safariでは機能しない。 optionに対して $(this).wrap('<span style="display:none;">') とすることで対応できる。 【jQuery】Safariでselect要素のoptionをCSSで非表示にするお手軽な方法 | ねたまめ.com https://netamame.com/safari-select-option_display-none/ jQuery：他の要素の値を元にselect要素のoptionを非表示にする | ｗ２ソリューション株式会社 TECH Media https://www.w2solution.co.jp/tech/2021/07/29/eg_ns_ns_jqueryselectoption/

Bootstrap

Bootstrap - 世界で最も人気のあるフロントエンドフレームワーク https://getbootstrap.jp/ はじめに - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/getting-started/introduction/ Examples - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/examples/ サンプル - Bootstrap 4.3 - 日本語リファレンス https://getbootstrap.jp/docs/4.3/examples/ Bootstrap Themes Built & Curated by the Bootstrap Team. https://themes.getbootstrap.com/ 一般的な企業サイト、デザイン重視のサイトには向かいかもしれないが、 整然としたサイトや、管理画面などの作成に使うのは有効。 最初に公式ドキュメントの内容をざっと確認し、何ができるのかを把握しておくと作業がスムーズ。 ■基本 Webデザイン初心者でもできる、Bootstrapの使い方超入門（1/4 ページ） - ＠IT https://www.atmarkit.co.jp/ait/articles/1403/19/news034.html デザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademyマガジン https://techacademy.jp/magazine/6270 Bootstrapのよく使うクラスまとめておいた！！！！ - Qiita https://qiita.com/nakanishi03/items/c80a16b9b9796c25f890 v5では左指定がl（left）からs（start）に、右指定がr（right）からe（end）に変更されているので注意。 Spacing(スペーシング) - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/utilities/spacing/ デバイス毎に表示・非表示を切り替え「d-*-block」「d-*-none」 | Qumeruマガジン https://qumeru.com/magazine/356 Flexユーティリティ〜Bootstrap5設置ガイド https://bootstrap-guide.com/utilities/flex Flex (フレックス) - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/utilities/flex/ Images (イメージ) - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/content/images/ ■アイコン イラストレーション・アイコン素材｜デジタル庁 https://www.digital.go.jp/policies/servicedesign/designsystem/Illustration_Icons/ 400点超の無料イラスト素材、デジ庁が配布　商用利用OK　自治体や企業のWeb・アプリ開発向け - ITmedia NEWS https://www.itmedia.co.jp/news/articles/2306/27/news179.html Bootstrap Icons - Bootstrap 向けのオープンソース SVG アイコンライブラリ https://icons.getbootstrap.jp/ Bootstrapアイコン〜Bootstrap5設置ガイド https://bootstrap-guide.com/extend/icons/bootstrap-icons アイコン - とほほのBootstrap 5入門 https://www.tohoho-web.com/bootstrap5/icons.html 【初心者の方向け】Bootstrap Iconsの使い方 - くりぷろメディア-クリエイター・プログラマーを目指している人のためのメディア https://crepro-media.com/pickup/bootstrapicon/ アイコンを表示するには、外部ファイルの bootstrap-icons.css を読み込み、class でアイコンを指定して読み込む。 具体的には以下のようにしてCSSファイルを読み込んでおき、 以下のようにしてアイコンを呼び出す。 ただしこの場合、都度外部ネットワークから素材を読み込むことになる。 ローカル開発時に表示できない可能性があるし、表示速度にも影響がある。 これが問題になるようなら、以下に記載する別の方法で表示する。 あらかじめSVGファイルとしてダウンロードし、img タグで表示する方法もある。 ただしこの場合、SVGファイルの色を指定することができない。（JavaScriptなどから制御する方法はあるみたい。） あらかじめSVGのコードを含めておき、必要なものをIDで呼び出す方法もある。 ただしこの場合、使用したいアイコンが大量にあると、無駄に表示が重くなる可能性はある。 ■タブ Bootstrap 5入門 - タブUIの作り方 - ICS MEDIA https://ics.media/entry/190826/ ■メニュー Bootstrapのハンバーガーメニューをカスタマイズする方法！ | Qumeruマガジン https://qumeru.com/magazine/562 Bootstrap 5入門 - タブUIの作り方 - ICS MEDIA https://ics.media/entry/190826/ ■ダイアログ ※未検証。 Modal - Bootstrap 4.2 - 日本語リファレンス https://getbootstrap.jp/docs/4.2/components/modal/ とほほのBootstrap 4入門 - モーダル - とほほのWWW入門 http://www.tohoho-web.com/bootstrap/modal.html

Tailwind CSS

※未検証。 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. https://tailwindcss.com/ Bootstrapと同じく、一般的な企業サイト、デザイン重視のサイトには向かいないと思われる。 インラインスタイルと大差なくてメンテナンス性に難があるのでは…については、VueやReactを用いてコンポーネント化する前提ではあるらしい。 TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社 https://fixel.co.jp/blog/tailwindcss/ TailWindCSSを始めようとしている人へ https://zenn.dev/nbr41to/articles/276f40041ad9fe Tailwind CSSが私には合わなかった理由 | コリス https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html TailwindCSSって何？なんで流行ってるの？｜F Lab｜Fixel株式会社 https://fixel.co.jp/blog/tailwindcss/

favicon

favicon（ファビコン）の代表的なサイズと基本的な作成方法 | 株式会社LIG https://liginc.co.jp/web/design/material/16853 2022年のファビコン設置方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要 | コリス https://coliss.com/articles/build-websites/operation/work/how-to-favicon.html

WebP

WebP - Wikipedia https://ja.wikipedia.org/wiki/WebP そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends https://webdesign-trends.net/entry/13745 次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA https://ics.media/entry/201001/ WEBP変換ツール (jpg、pngとwebpを相互変換) https://lab.syncer.jp/Tool/Webp-Converter/ 以下ファイルの「環境によってWebP画像を表示」も参照 Dropbox\サーバ\Etcetera.txt

写真

売上アップにつながる写真の撮り方ガイド。 https://www.jfc.go.jp/n/findings/kokumin_publications.html https://www.jfc.go.jp/n/findings/pdf/phototech_guide_restaurant.pdf

フォント

デバイスフォント・WEBフォント大解剖　〜新人デザイナーのテキストフォント選び〜 | WebNAUT https://webnaut.jp/design/1180.html 2024年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ 今さら聞けないWebフォントの基礎知識 | 株式会社LIG https://liginc.co.jp/547818 Webサイトで使用される定番フォント9選！　フォントの選び方や良いフォントの特徴も解説！ | 株式会社PLAN-B https://www.plan-b.co.jp/blog/creative/53344/ 【css】Webフォント、ローカルフォントの指定方法 at softelメモ https://www.softel.co.jp/blogs/tech/archives/3676 Google Fontsの使い方とWebフォントにおすすめの日本語フォント紹介！ https://www.unprinted.design/articles/google-fonts/ ウェブサイト制作では、游ゴシックはおすすめしない理由 | クリエイターズ・シナジーカフェ https://community.creators-synergy-cafe.com/blogs/711fed11c7fb ■実例 以下は実際にWebフォントを使用してみたもの。 ふい字Ｐ https://refirio.org/memos/font/huifont/ ■ファイル形式について Webフォントには「woff」「woff2」「ttf」といった種類がある。 IEを無視して良ければ「woff2」を、IEを考慮しておくなら「woff」「ttf」を使用すると良さそう。 自社サーバーにフォントをアップロードして、Webフォントを使用する方法｜株式会社ゼロワンアース https://01earth.jp/web-create/coding/web-font/ TTF WOFF2 変換 フリー、 ttfをwoff2に変換 オンライン https://miconv.com/ja/ttf-o-woff2/ ■TrueTypeフォントとOpenTypeフォントについて OpenTypeで表示できるなら、そちらを使うと良さそう。 OpenTypeフォントとは？ - Home https://mp-support.morisawa.co.jp/hc/ja/articles/28443707966105-OpenType%E3%83%95%E3%82%A9%E3%83%B3%... TrueTypeフォントとOpenTypeフォントの違いを教えて下さい。 | フォント・書体の開発及び販売 ｜ ダイナコムウェア株式会社 https://www.dynacw.co.jp/support/support_faq_detail.aspx?qid=501&fcid=200 TrueTypeとOpenType、どう選べばいい？｜デザインポケット[design pocket] https://note.com/design_pocket/n/nf7b637cb501b ■CJKについて 「C(Chinese)、J(Japanese）、K(Korean)の全てが入っているフォントで、その中でJapaneseを優先的に表示するようになっている」らしい。 Geeko Blog > Noto Sans CJK JPと、Noto Sans JPの違い https://blog.geeko.jp/syuta-hashimoto/2446 ■利用できそうなフォント 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス https://coliss.com/articles/freebies/japanese-free-fonts.html 日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです | コリス https://coliss.com/articles/freebies/google-fonts-for-japanese.html フォントが大好物な人に朗報 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ！！ | コリス https://coliss.com/articles/build-websites/operation/work/googlefonts-morisawa-biz-ud-gothic-and-min... これはかなりいい！ Helveticaに似たオープンソースの無料フォント -Overused Grotesk（異世界のHelvetica） | コリス https://coliss.com/articles/freebies/overused-grotesk-helvetica-in-an-alternative-universe.html LINE Seed https://seed.line.me/index_jp.html ■Google Fonts Browse Fonts - Google Fonts https://fonts.google.com/ Google Fonts + Japanese - Google Fonts + 日本語 https://googlefonts.github.io/japanese/ Google Fontsの使い方とWebフォントにおすすめの日本語フォント紹介！ https://www.unprinted.design/articles/google-fonts/ 数字で見るGoogleフォントベスト15 2024 年版（使い方のヒント付き） https://kinsta.com/jp/blog/best-google-fonts/ ■Noto Sans CJK 以下のフォントは、中国語・日本語・韓国語に対応しているらしい。 公式によると 「Noto Sans CJK は、繁体字中国語、簡体字中国語、日本語、韓国語を完全にカバーするグリフのバリエーションを備えています。」 とのこと。 GitHub - notofonts/noto-cjk: Noto CJK fonts https://github.com/notofonts/noto-cjk Google Developers Japan: オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。 https://developers-jp.googleblog.com/2014/07/noto.html ■アイコンフォント Font Awesome https://fontawesome.com/ 【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう https://saruwakakun.com/html-css/basic/font-awesome Font Awesome アイコンフォント一覧 [Free (フリー) のみ] | JOHOBASE https://johobase.com/font-awesome-icon-font-list-free/ ■コーディング用フォント プログラミング向けフォント「0xProto」の紹介 #開発環境 - Qiita https://qiita.com/usamik26/items/2ab0c4b88bf7c00845dd 日本人プログラマー向けコーディングフォント「Bizin Gothic」が無償公開 - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1596755.html 日本人プログラマー向けカスタムフォント「UDEV Gothic」が約2年半ぶりのメジャー更新 - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1617092.html 日本人プログラマ向け、プログラミングに適した「フォント」まとめ。2024年版 − Publickey https://www.publickey1.jp/blog/24/2024_1.html ■デバイスフォントとデザイン ・デバイスフォント＝パソコンで本文とかに使う、ディスプレイでの文字の読みやすさを考えて作られたフォント。派手な見た目のことは考えていない。 ・デザイン重視のサイトで、タイトルなど目立つ箇所にデバイスフォントを使うのは、（まともなデザイナーなら）原則としてあり得ない。 ・タイトルなどでデバイスフォントが使われていたら、フォントが無いために意図したデザインを確認できていない可能性を考える。 ・正解のデザインを知っておく（PNG画像として書き出したものを送ってもらうなど）。

文字コード

(プログラマのための) いまさら聞けない標準規格の話 第1回 文字コード概要編 | オブジェクトの広場 https://www.ogis-ri.co.jp/otc/hiroba/technical/program_standards/part1.html (プログラマのための)いまさら聞けない標準規格の話 第2回 文字コード実践編 | オブジェクトの広場 https://www.ogis-ri.co.jp/otc/hiroba/technical/program_standards/part2.html

URL

e コマースサイトの URL 構造を設計する | Google 検索セントラル | Google Developers https://developers.google.com/search/docs/advanced/ecommerce/designing-a-url-structure-for-ecommerce...

PDF

■PDFとは 僕「PDFとは何か知りたい」 - Qiita https://qiita.com/zawawahoge/items/4312649f8d56f8983ffb プログラマーから見たPDFファイル - アンテナハウス PDF資料室 https://www.antenna.co.jp/pdf/reference/pdftext.html PDFってこうなってる? 実践でPDFの内部構造を学ぼう Part 1：PDFを理解するための第一歩 - 株式会社インターワーク https://www.intwk.co.jp/2024/03/26/%E5%AE%9F%E8%B7%B5%E3%81%A7pdf%E3%81%AE%E5%86%85%E9%83%A8%E6%A7%8... PDF に謎の漢字が含まれるとき https://gist.github.com/xl1/940d653451fd96a06618a6df08d5df84 ■PDFの作成（ソフトウェア） Adobe Acrobat 9 Pro をダウンロード https://helpx.adobe.com/jp/acrobat/kb/acrobat-8-9-product-downloads.html CS5のライセンスで認証。 未検証だが、以下のソフトもある。 無料 PDF 結合・分割ソフト CubePDF Page - CubeSoft https://www.cube-soft.jp/cubepdfpage/ 無料のPDF編集ソフト「CubePDF Utility」、v3.0.0に - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1581841.html ■PDFの作成（PDFの結合方法） ツールバーの「結合 → ファイルを単一のPDFに結合」をクリックする。 ドラッグ＆ドロップでPDFを追加する。 必要に応じて順番を入れ替える。 「ファイルを結合」をクリックする。 ■PDFの作成（しおり付きPDFの作成方法） 結合済みファイルを開く。 しおりを設定する。 デフォルトでしおりを表示させる http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12105211992 ■PDFの表示 PDF.js - Home https://mozilla.github.io/pdf.js/ PDF.jsを使用してWebブラウザでPDFファイルを表示する | MESCIUS.devlog - メシウス株式会社 https://devlog.mescius.jp/javascript-pdf-viewer-pdfjs/ 「PDF.js」に任意コード実行の脆弱性 〜多くのWebサイト・アプリに影響 - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1593338.html PDF.jsのページめくりアニメーション - 電脳情報局 https://www.omakase.net/blog/2021/09/pdfjs-page.html pdf.jsを使って日本語ファイルを表示する #JavaScript - Qiita https://qiita.com/ReiTsukikazu/items/2d6627b3987535526814 WebページにPDFを1ページだけ表示する場合、以下のようなコードで対応できる。 ページの前後移動もできるようにする場合、以下のようなコードで対応できる。 ■PDFとPostScript PostScript - Wikipedia https://ja.wikipedia.org/wiki/PostScript PostScriptはAdobeが開発した文章記述言語。 ベクトルベースで高繊細な描画が可能。 以下のとおりプログラミング言語としての特性を持ち、チューリング完全となっている。 ・条件分岐。（if, ifelse） ・ループ。（for, repeat, loop） ・再帰的な関数定義が可能。 ・スタック操作を通じたデータ操作。 Portable Document Format - Wikipedia https://ja.wikipedia.org/wiki/Portable_Document_Format PDFはPostScriptをもとにAdobeが開発した文章フォーマット。 PostScriptの持つグラフィック能力やフォント処理能力を引き継いだうえで、表示面や操作面で改良が行なわれている。 またPDFは上に記載したプログラミング言語としての特性は削除されているので、安全性が向上している。 Ghostscript - Wikipedia https://ja.wikipedia.org/wiki/Ghostscript PostScriptを書くための環境 | Studio Fruit Jam Blog https://blog.studiofruitjam.com/2017/01/02/programing-env/ PostScript言語を触ってみる https://zenn.dev/kaityo256/articles/ghostscript_sample PDFを無料で圧縮できるオフライン方法！GhostscriptとPDFelementを解説 https://pdf.wondershare.jp/pdf-tips/pdf-compress-ghostscript.html ImageMagickとPHPを用いてPDFを画像変換する (GhostScript) | iret.media https://iret.media/10187 Ghostscriptをインストールすれば、コマンドでPostScriptやPDFを扱うことができる。

正規表現

regex101: build, test, and debug regex https://regex101.com/

画像の遅延読み込み

■loading="lazy" 画像遅延読み込みは、現時点では loading が使える。 2022年から使ってゆくHTML 〜loading 属性〜 ++ Gaji-Laboブログ https://www.gaji.jp/blog/2022/03/23/9358/ loading 属性と lazysizes の使い方（画像の遅延読み込み） https://www.webdesignleaves.com/pr/plugins/lazysizes.html 具体的には のようにしていたところを のようにするだけ。 手元で試したところ、実際に遅延読み込みされることも確認できた。 注意点としては ・ファーストビューに表示される画像には指定しない。 ・画面の結構下の方の画像で無いと遅延読み込み対象にはならないみたい。 つまり「画面の少し外」くらいなら最初に読み込まれる。 くらいか。 ■decoding="async" ※未検証。 「decoding="async"」という指定もあるらしい。 loading とは、ブラウザがどのように画像を読み込む（ダウンロード）かを示す属性で、 decoding とは、ダウンロードした画像をどのようにデコードするかを示すらしい。 画像の遅延読み込みで表示高速化！loading=”lazy”とdecoding=”async” | ウェブスペ https://webspe.net/lazy-loading/ decoding="async" について詳しく調べてみる https://zenn.dev/ixkaito/articles/deep-dive-into-decoding

クリッカブルマップ

レスポンシブ対応のクリッカブルマップを作成しよう | yanagi's memo https://ponsyon.com/archives/6352 クリッカブルマップのレスポンシブ対応はjQuery非依存の「image-map-resizer」が良い感じだった | ma-ya's CREATE / WEB DESIGN https://myscreate.com/image-map-resizer/ 以下は、上記を参考にして実装したクリッカブルマップのサンプル。 https://refirio.org/memos/html/clickablemap/

法律

以下にまとめている。 Dropbox\法律 ライセンスについては、以下にまとめている。 Dropbox\法律\ライセンス.txt

メール

■仕様 「RFC違反」アドレスのドコモメール、iOS14で送信不可に - ITmedia NEWS https://www.itmedia.co.jp/news/articles/2011/12/news103.html ■迷惑メール対策 メールアドレス暗号化(メール暗号化ツール) https://www.luft.co.jp/cgi/coding.php ホームページにはメールアドレスを掲載してはいけない！？その理由と対策方法 | AndHA Blog https://and-ha.com/coding/no-spam/ 上記はメールアドレスを都度入力し、暗号化されたコードを取得する必要がある。 データベース内のメールアドレスに対して、もっと簡易に対応を行うなら以下のようにするか。 （加えて、シーザー暗号などを行っておけば一定の効果はありそうな。）

ユーザビリティ

これだけは押さえよう！住所フォームの作り方 - ケンオールブログ https://blog.kenall.jp/entry/address-form-best-practice label で input[type="file"] を装飾するな https://zenn.dev/dqn/articles/7505cfa1bed278

認証

■Basic認証 ベーシック認証（Basic認証）とは？設定方法と注意点・エラーになる原因を解説 | Webmedia https://www.itra.co.jp/webmedia/basic_authentication.html ■OAuth 一番分かりやすい OAuth の説明 - Qiita https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be

セキュリティ

Dropbox\技術\Security.txt

サーバ

サーバの基礎知識。 Dropbox\サーバ\未整理\サーバの基礎知識.txt SSL証明書。 Dropbox\サーバ\Certificate.txt サーバへの攻撃。 Dropbox\サーバ\Attack.txt また「ドメイン＆サーバ移管.txt」について、内容を整理してまとめておきたい。

静的ページホスティング

※未検証。 ■GitHub Pages 自分で作ったWebページをインターネット上に公開しよう！ | プログラミングの入門なら基礎から学べるProgate[プロゲート] https://prog-8.com/docs/github-pages GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた ｜ Tips Note by TAM https://www.tam-tam.co.jp/tipsnote/html_css/post11245.html GitHub PagesでカスタムドメインでもHTTPS化がサポートされた https://rcmdnk.com/blog/2018/05/02/blog-octopress-github/ ■Vercel NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO https://dev.classmethod.jp/articles/vercel/ ■Netlify Netlifyで静的サイトのホスティングをする - Qiita https://qiita.com/sugo/items/2ee64887d682b0dae635 Netlify CMSを試してみた | DevelopersIO https://dev.classmethod.jp/articles/try-netlify-cms/

CDN（Content Delivery Network）

※未検証。 CDN（Content Delivery Network）で、日本語にするならコンテンツ配信サービス。 AWS提供のCDNとしてCloudFrontがある。 第１回 ＣＤＮ の 仕組み （CDNはどんな技術で何が出来るのか） | REDBOX Labo https://blog.redbox.ne.jp/what-is-cdn.html 今すぐ使える！CDN ~はじめてのCloudFlare（クラウドフレア）導入~ | ブログ | SINAP - 株式会社シナップ https://sinap.jp/blog/2011/06/cdn-cloudflare.html 無料でサイトを大幅に高速化! CDNを知らない人のためのCloudFlare入門 | 株式会社LIG https://liginc.co.jp/362476

Notification API + Service Worker API でプッシュ通知

※未検証。 ※Notification API を使うことでプッシュ通知を行うことができるみたい。 さらに Service Worker API も使うことで訪問中でないユーザにもプッシュ通知を行うことができるみたい。 ※Push.js を使うことで、容易に利用できるみたい。 Webプッシュ通知で変わるダイレクトマーケティングとマーケティングオートメーション｜デジタルマーケティングラボ https://dmlab.jp/web/new_web/web160401_1.html 意外とカンタン！流行のWebプッシュ通知はJavaScriptでサクッと実装できる - WPJ https://www.webprofessional.jp/browser-notification-api/ ブラウザでプッシュ通知を実装してみた | キャスレーコンサルティング株式会社 https://www.casleyconsulting.co.jp/blog/engineer/293/ Webブラウザのプッシュ通知を簡単に実装！「Push.js」の使い方を徹底解説｜ferret https://ferret-plus.com/6035 [RFC]WebPush実装まとめ（Chrome/Firefox/Android/Edge） - adiary開発日誌 https://adiary.adiary.jp/0391 Webプッシュ通知、人気サイト以外では9割が拒否反応という無惨な統計データ【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ | Web担当者Forum https://webtan.impress.co.jp/e/2020/02/28/35406 Progressive Web Apps (PWA) 学習者のメモ その2 (プッシュ通知とFCM) - Qiita https://qiita.com/TakeshiNickOsanai/items/cbb0247cd9a893dc0a6b

PWA（Progressive Web Apps）

※未検証。 ※iOSではプッシュ通知が利用できないなど、現状制限もあるみたい。 ※Push API ではなく Notification API を使えば通知できるかなどは要検証。 ※AMPは消えつつある（名前が3文字で混同してしまうことがあるので、一応ここにもメモしておく。） これからはじめる PWA 2021 https://zenn.dev/mi_/articles/498a82a0efa0ff PWA(Progressive Web Apps)対応サイトの作り方・実装方法まとめ − AWS上で学習したPWA導入例とLighthouse Report Viewerの使い方 - NRIネットコムBlog https://tech.nri-net.com/entry/learn_pwa_on_aws_serverless_static_website_hosting ネイティブアプリ風Webアプリ「PWA」を実現する3つの技術 | さくらのナレッジ https://knowledge.sakura.ad.jp/23201/ HTML5でiPhone用Webアプリをオフライン対応に：iPhoneで動かす業務用Webアプリ開発入門（5）（1/2 ページ） - ＠IT https://atmarkit.itmedia.co.jp/ait/articles/1104/18/news132.html HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた − Publickey https://www.publickey1.jp/blog/11/html5ipodiphone.html ChromeのPWAインストール要件が変更に、オフライン対応必須。Chrome 89で警告 | 海外SEO情報ブログ https://www.suzukikenichi.com/blog/pwa-installability-criteria-changes/ PWA（Progressive Web Apps）とは？PWAの機能と導入するメリットを解説 | ナイルのマーケティング相談室 https://www.seohacks.net/blog/2809/ 日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa - Speaker Deck https://speakerdeck.com/sisidovski/nikkei-high-performance-pwa PWA は iOS（ Safari ）にも対応しているか？【 iOS 15以降の機能も解説】 | CHIYOBLOG https://chiyo-blog.com/pwa-ios/ Progressive Web Apps (PWA) 学習者のメモ その2 (プッシュ通知とFCM) - Qiita https://qiita.com/TakeshiNickOsanai/items/cbb0247cd9a893dc0a6b

Git

Dropbox\技術\Git.txt

データ

郵便番号、祝日、駅などのデータ。 Dropbox\技術\Data.txt