新しく覚えた（使った）cssまとめ - 2020年春・夏

調べてその場で納得して終わりのケースが多いcss。いつでも振り返られるようにメモしました。

floatの解除に display: flow-root

【2017年最新】clearfix一番短い書き方は親要素にdisplay:flow-root;を書き加えるだけ - 自動化厨のプログラミングメモブログ│CODE-LIFE

最近あまり使う機会が減った float を使ったときに解除をどうしようかな、と思って調べました。
親要素に clearfix をかけるように、display: flow-root とするだけです。 結論、display: flow-root は2020年4月時点でIE11非対応なので、使用は断念しました（迷いどころ）。

現在：
Can I use... Support tables for HTML5, CSS3, etc

ちなみに、親要素に overflow: hidden をかける方法は非推奨と言われることが多いそうです。
本来の使い方（はみ出たら隠す）とは違うからでしょうか。

clearfix も時代を経て設定が少しずつ変わっているのですね。

最新のcleafix（2020年4月）

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

それにしても display はいろいろな値がありますね。
html5の概念からおさらいして grid や list-item は覚えておきたいなと思いました。

flotのおさらい：
CSSの【float】についてちょっと本気出して説明してみた。 | たねっぱ！

「clearプロパティを与えた要素にはmargin-topが効かない」
（※端折った表現です）

そうでしたか！

imgを指定の大きさに配置できる object-fit: cover

【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー | WEBDESIGNDAY

このプロパティは、WordPressなどで画像を投稿してもらう際に、いろいろなサイズの画像を揃えて表示させるのに便利です。

ざっくりいうと object-fit: cover は背景画像の background-size: cover の普通の画像版です。
忘れそうになりますが、直接画像や動画要素に指定します。

また object-position では、画像の配置を指定することができます（初期値は上下左右中央）。

現在：
Can I use... Support tables for HTML5, CSS3, etc

flexコンテナの子要素、フレックスアイテムに直接指定できる align-self

align-selfプロパティの意味と使い方 | CSS | できるネット

どんな状況でこのプロパティを知ったのかもう忘れてしまいましたが、このようにボタンを下に配置したカードを横に並べたら揃ってきれいかもしれません！？

...と思ったのにalign-self 使っていません...。
イメージではボタン要素に align-self: flex-end かな、と思ったのですが、そうすると、高さの指定のない他の要素が justify-content: space-around の縦方向版みたいに等間隔の隙間を持つように配置されてしまいました。

ポイントはボックスの下に配置したい要素を margin-top: auto とすることです。

横並びレイアウトの中の一番下のボタンの位置をCSSでそろえる方法｜トピックス｜STEP UP WEB｜大阪のホームページ制作・作成サービス

原理はどういうことなのだろう...。
ちなみに、

align-selfプロパティは、フレックスアイテムのクロス軸方向の揃え位置を指定します。

ということなので、 flex-direction: column でフレックスアイテムの並びを縦方向にすると、 align-self はクロスした、フレックスアイテムの左右の位置調整ができることになります。

そしてもしかしたらと思ったら、やはり justify-self というものがありました。

【CSS】flexboxにjustify-selfは効かない - Qiita

こちらも解決策は margin: auto みたいです。なんと...。

角の取れた四角

というか、「四角から角の取れた図形」です。

cssで少しデザインしたくなって、四角形から2つの角が取れた図形を作りました。
自力ではお手上げだったので、具体的なコードはこちらを参考にしました。

角の欠けた枠。つくるよ。 | パンスールブログ | 株式会社Penseur パンスール｜東京・大阪のデザイン会社

border 絡みの図形はいつも図におこさないと混乱します。
cssの書き方は正確ではないのですが、ざっくりとしたメモの図です。

border-color: transparent というのはしっかり色（透明）を指定している、ということです。borderの太さとスタイルを合わせて指定すれば透明な枠線です。隣り合う他の線と色が違えば、その境目は斜めに区切られます。

幅があって高さが0の疑似要素、というのも、今後いろいろ応用ができそうです。

a要素の疑似クラスの指定順をそろそろ覚える

毎回調べているのですが、今度こそ理屈まで覚えようと思います。

:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp

覚え方は「LOVE and HATE」が有名みたいです。
以下の順で書くと、状態ごとに異なるスタイルのa要素にできます。

擬似クラス	状態
link	未訪問のリンク
visited	訪問済みのリンク
hover	要素にカーソルが重なっている
active	要素がクリックされている押し始めから離す時まで

☆ :hover と :active はa要素に限らず指定できます。

図にしたら腑に落ちました！

• ちなみに、link と visited は打ち消しあうことがないので順番はどっちでも OK
• :hover 擬似クラスと:active 擬似クラスは一連の動作である

これらがポイントだと思いました。
そしてcssでは下に書いたものが優先されることを考えて...。

• 未訪問
• 未訪問で要素にマウスカーソルを合わせている
• 未訪問で要素をクリックしている
• 訪問済み
• 訪問済みで要素にマウスカーソルを合わせている
• 訪問済みで要素をクリックしている

これら6つの状態のうち、より限定的であるクリックしている状態の :active が最後にきます。

:focus の扱い（PCの場合）

a要素に指定できる擬似クラスでもう一つ、 :focus があります。 :focus は主にform関連の要素に指定できます。
a要素もPCではtabキーを押すとフォーカスしますし、クリックしてもフォーカスします。
（returnキーでリンク先に遷移できますが、キーを押すことは、:active の対象ではないみたいです）

状態は、他の要素にフォーカスが移る（他の要素をクリックする）までの間です。
ただ、a要素に :focus を設定しても、クリック後、ほどなくしてページ遷移する事が多いため、フォーカスの状態は一瞬です。

ページ遷移の話はさておき、フォーカスできるある要素に
マウスを合わせる→クリック→他の要素をクリック
という操作をした場合、こんなイメージになるかと思います。

そう考えると、a要素で :focus を指定したい場合は、
:hover と :active の間
が適当かなと思います。

:active と :focus どちらを先に指定したらいいか、下記でも試してみました。

a要素、form関連要素以外で要素をフォーカスさせる方法

フォーカスさせたい要素にtabindex 属性を指定します。

aタグ以外にもキーボードフォーカスをあてる方法 - Qiita

↑のCodepenでも検証してみました。

このクリック関連、今回はPCを想定してまとめています。
スマホの場合はマウスカーソルを要素に合わせる、という操作がないので、:hover や :action、：focus の扱いがまた違ってきます。

PCとスマホでクリック時のスタイルを揃えたいときなどにまた掘り下げようと思います。

最後に

あといくつかありましたが、a要素の擬似クラスの話が膨らんでしまい、ここで一度おしまいにします。 またまとまったらcssの記事書こうと思います！

コンパイルとcssを考える

ソースマップの記事を書いていたら「コンパイル」が気になってしまいました。

scss→cssはコンパイルなの？

過去の記事でも混乱していました（笑）
調べているとコンパイラ言語からプログラムの実行をする過程の中でコンパイルが出てくるので図にしました。

図は正確にはあってないと思います。
コンパイルによってできたオブジェクトファイルというのは中間語なのか、機械語なのか。このあたりはいろいろな記事があってうまくまとめられませんでした。
C言語を勉強してみようか...。

コンパイラとは

コンパイラ - Wikipedia

コンピュータ・プログラミング言語の処理系（言語処理系）の一種で、高水準言語によるソースコードから、機械語あるいは元のプログラムよりも低い水準のコードに変換（コンパイル）するプログラムである。

なんとオブジェクトコードに変換する以外にも広い意味で「変換」するということなんですね！
そう考えれば、scssファイルからプログラミング言語ではない、スタイルシート言語のcssへの変換も「コンパイル」と言えると。
そう解釈しないとこの一度モヤモヤした気持ちはどうすればいいのか...。

CSSプリプロセッサ

そんなときプリプロセッサという存在を知りました。

プリプロセッサとは

プリプロセッサ（プリコンパイラ）とは - IT用語辞典 e-Words

プリプロセッサとは、ソフトウェアの役割による分類の一つで、ある中心的な処理を行うプログラムに対して、その前処理（preprocess）を行うプログラムのこと。プログラミング言語のコンパイラの前処理を行うものが非常に有名。一方、メインの処理に対する後処理を行うものは「ポストプロセッサ」（postprosessor）という。

「ビルド」機能とは？仕組みやコンパイルとの違いを解説 | サービス | プロエンジニア

コンパイルまでには静的解析とプリプロセッサの処理が行われます。

プリプロセッサの別名は「プリコンパイラ」のようなので、そこからscss→cssを「コンパイル」と呼ばれるようになったのではないかと思いました。

CSSプリプロセッサの種類

CSSプリプロセッサにはいくつかあります。

• Sass (Syntactically Awesome Style Sheets)
• Scss (Sassy CSS)
• Less (The Dynamic Stylesheet Language)
• Stylus
• PostCSS

プリプロセッサはプログラムのことを指したり、言語のことを指したり（これらはメタ言語）、どちらもあるようです。
混乱しそうですが、「Sass（言語）を使うにはSass（プログラム）をインストールする必要があります」という解釈でいいかなと思いました。

おまけ

いろいろ脱線したので、副産物の中からある程度まとめられた部分をメモします。

スクリプト言語とインタプリタ言語の違い

ここでもどうしても「〜言語」がよく出てくるので調べました。
コンパイラ言語（型）とインタプリタ言語（型）は対義語的だなと理解しましたがスクリプト言語というのもあるとは。

スクリプト言語とは？インタプリタ型言語との違いは？ | じゃぱざむ

今まで「スクリプト言語」だと思っていたものは「インタプリタ言語」でした。

図にしようと思いましたが、雰囲気で覚えておこうと諦めました。

コンパイラ言語でかつスクリプト言語であるというjavaを勉強してみようか...。

ブラウザでのレンダリングについて考える

今度は"コンパイル後"のcssファイルがどのようにブラウザで使われているか調べました。

ブラウザでは最初にDOM ツリー、CSSOM ツリーを構築する

オブジェクト モデルの構築  |  Web  |  Google Developers

CSSはHTML同様、CSSOM ツリーという、ツリー構造のオブジェクトモデルを構築します。

CSS のバイトが文字、トークン、ノードへと変換されていき、最終的に「CSS オブジェクト モデル」（CSSOM）というツリー構造にリンクされます。

とあるので、ソースを読み込んだ後に「バイト」になっているようです。 ↑のページの図を見ると3C 62 6F...とあります。

これはいわゆる機械語です。0と1だけのもののみを指すのかと思いきや、16進数で表されるものも機械語というのですね。

この後、DOM ツリー、CSSOM ツリーができて、
→ DOM と CSSOM を組み合わせてレンダリング ツリーを作る → Layout → Paint...

と続きます。この後の処理については別の機会に学びます。

フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ | LeapIn

HTMLの書き方を見直し

W3CのMarkup Validation Service（マークアップバリデーションサービス）でウェブページを確認する機会がありました。
これって警告・エラーなんだ！という新しい発見がありましたのでメモします。

※2020年7月現在の内容です。

コメントの中にハイフン2つが出てくると警告

<!-- --←これがよくない -->

です。
BEMで書いているとクラス名に「--」がでてきて、その要素をコメントアウトしていたので警告を受けていました。

正しいコメントを書こう

見出しタグ（h2など）はsectionタグ内では孫要素とかでも良い

<!-- NG -->
<section>
  <div>
    <p>見出しテキスト</p>
  </div>
</section>

<!-- OK -->
<section>
  <h2>見出しテキスト</h2>
  <div>
    <p>テキスト</p>
  </div>
</section>

<!-- これもOK -->
<section>
  <div>
    <h2>見出しテキスト</h2>
  </div>
</section>

section要素のすぐの子要素でなければならないと思っていました。divを使いたいことがよくあるので一安心です。

iframe要素の廃止された属性をつかうとエラー

• frameborder
• scrolling
• marginheight
• marginwidth

これらは代わりにcssで設定するように、と書かれていました。

しかし、エラーを受けている該当のコード、yahooの!タグマネージャーの部分なんですよね...。

<noscript>
<iframe src="//b.yjtag.jp/iframe?c=XXXXXXX" width="1" height="1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</noscript>

公式に配布されているコードって弄りづらいのでこのままにしています。

ところでjavascripが無効のときに表示する <noscript> 。
どういう動きをするのか確認されている記事がありました。

HTML、noscriptタグの挙動について。（非表示なのか未解釈なのか）｜マコトのおもちゃ箱 ～ぼへぼへ自営業者の技術メモ～

Unicode正規化フォームCでないとエラー

Unicode（ユニコード）とは「符号化文字集合」というもので、UTF-8などの「文字符号化方式」とは別ものです。

分かりやすい記事です！
https://wa3.i-3-i.info/word11422.html

上記を踏まえて「正規化形式C」とは合成済み文字（例：が）のことをいいます。
結合文字列は文字列を結合したもの（例：か゛←「か」+「゛」)です。

「Text run is not in Unicode Normalization Form C.」というHTML Validation Serviceの警告について: 小粋空間

「正規化フォーム（形式）C」を使わないとエラーになるんですね。
これはどこでそう決定されるのでしょうか...。

ユーザーが画面拡大できないビューポートの設定だと警告

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

これで

Consider avoiding viewport values that prevent users from resizing documents.

という警告が出ました。
content属性の値から、 maximum-scale=1.0 と user-scalable=no を削除すると、ユーザーが画面サイズを変更することができます。

ビューポートもコピペで済ませている部分があるので、ちゃんと理解しないとと思います。

番外：CSSの警告・エラー

cssもチェックしたので少し載せます。

background-color と border-color は同じ色です

警告です。
同じ色だと同化してしまって背景と枠線がわからないですよ、と教えてくれているそうです。
ありがた迷惑のような気もしますが、優しさと受け取ってスルーします。

-webkit-animation is an unknown vendor extension

「-webkit-animationは不明なベンダー拡張です（Google翻訳）」という警告です。
ベンダープレフィックス関連の警告は多い印象です。
ブラウザのバージョンアップとともに -webkit- がいらなくなったりなど、刻々と変化しそうな部分なので、Autoprefixerを使っていきたいです。

CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入 - Qiita

異なる環境でも同じ表示（クロスブラウザ）と正しいcss、どちらを取るか天秤にかけたら、前者かなぁと思います。

最後に

なかなかちゃんとhtml、cssの文法と向き合うことはないのでよかったです。
でもエラーチェック・対応はたまにがいいですね。

黄色のSourceMapのコンソールエラー - コンパイルについても

今回のエラーはChromeのデベロッパーツールのコンソールエラーを調べていて気になったもののうちの1つです。
（もう一つはCookieのエラーです）

 DevTools failed to load SourceMap: Could not load content for （Chromeの拡張機能のjsのソースマップ）: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

似たエラーで

DevTools failed to load SourceMap: ...

というのも見掛けました。

Chromeの拡張機能のjsのソースマップファイルが読み込めない（load）か、解析できない（parse）の違いです。
（load → parseの順で処理されます）

js.map や css.map という、map拡張子の「ソースマップ」に遭遇することは今までなかったので、せっかくなので調べました。

SourceMap（ソースマップ）とは

コンパイル前後のjsやcssファイルを紐付けるファイルです。
ソースマップファイルがあるとデバックのときにコンパイル前の、元のファイルをたどることができて便利です。

ソースマップファイルはコンパイル時に作られることもあるそうです（後述）。

ソースマップファイルの中身

Tools for Web Developers の記事からソースを拝借しました。

styles.scss

%$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;
h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

（最初の% 何でしょうか...？）

コンパイルされたcss
styles.css

h2 {
  font-size: 26px;
  color: red;
  background-color: whitesmoke;
}
/*# sourceMappingURL=styles.css.map */　

# sourceMappingURL=styles.css.map はsourceMappingURL アノテーション といいます。
ソースマップファイルの位置を示します。
コンパイル時にアノテーションが付きます。

続いてソースマップファイル。
中身はJSON形式で書かれています。

styles.css.map

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK"
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

version：ソースマップの仕様のバージョン
mappings：マッピング情報
sources：コンパイル元のファイル。複数入ることもあります
file：コンパイルによる生成ファイル
他には
names：コードに出てくる変数名、関数名（←要確認）

もっと色々あるようです。

mappingsの値については、Base64というものを使っているそうですが、難しそうです。

Safx: JavaScriptのSource Mapの内部表現について

エラーの解消方法

肝心の、どうエラーを解決するかですが、

• ソースマップを使わない → cssファイルに書かれている sourceMappingURL アノテーションを削除する
• ソースマップを使わない → sourceMappingURL アノテーション通りにソースマップファイルを配置、さらにscssやlessファイルを配置する

のどちらかです。

ソースマップの使い方

ソースマップファイルを使おうとすると、サーバーにmapファイルだけではなく、コンパイル前のscss、lessファイルも置かなくてはならないのでしょうか。
しかし、デバックすることが目的なので、サイト管理者のローカル環境にファイルが置いてあってもソースマップを利用することができるようです。

Source Map に関する情報 – ラボラジアン

ソースマップファイルの作り方（コンパイルの方法）

便利なソースマップ。作り方にはいくつか方法があります。
ここではscss、lessファイルからcssファイルをコンパイルする場合を調べました。

SassとLESS

まずこの2つの言語をさらっと調べました。
その前にどちらもCSSのメタ言語、プリプロセッサです。
（単語がどういう意味なのかはおいおい）

Sass・・・「Syntactically Awesome StyleSheet」。Rubyで実装されているオープンソースソフトウェア
LESS・・・「Leaner CSS」。JavaScriptで実装されているオープンソースソフトウェア。

パターン1：Sass、Lessをインストールして実行する

コマンドラインでインストールします。

Sassの場合

Sassはその前にRubyをインストールする必要があります。
その他にもgemやbundler、compassをインストールすると便利とのことですが、ちょっと...Rubyをやることがあればまた勉強しようと思います。

sassをインストール

gem install sass

scssファイルのコンパイル

sass style.scss:style.css

これでコンパイルとともにソースマップファイルも作られます。

CSSのメタ言語Sass(SCSS)、LESSの完全入門 - Qiita

☆Nodeでもsassのモジュールがあるみたいです。

LESSの場合

一方でLESSは事前にnode.jsをインストールする必要があります。

lessをインストール

npm install -g less

lessファイルのコンパイル

lessc styles.less > styles.css

同じくコンパイルとともにソースマップファイルも作られるはずです。

lessとはNodeでいう「モジュール」ですね。イコール「オープンソースソフトウェア」のことだと解釈しました。（Rubyではsassなどを「gem」というっぽい）

Nodeを使う場合は、タスクランナーであるgulpなどを使うと、他の処理と合わせてコンパイルできて便利です。

LESSでCSSを簡単に！LESSの使い方と便利な機能 - Qiita

パターン2：（LESSのみ）クライアント側でコンパイラを使う

lessファイルを読み込んだ後でless.jsというコンパイラを読み込みます。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

less.jsはダウンロードして使う方法もあればCDNでもあります。

第1回 LESSのメリットと導入方法：LESSで3倍ラクするスマートフォンコーディング｜gihyo.jp … 技術評論社

ただこの方法だとソースマップファイルが作られるのか分かりませんでした...。

パターン3：GUIツールを利用する

GUIコンパイラと呼ばれるツールです。WindowsでSassをコンパイルしたいときにも、GUIコンパイラを使えばRubyをインストールすることなくできます。
「Prepros」、「koala」が有名なGUIコンパイラです。

コンパイルの設定でソースマップファイルを作ることができます。

パターン4：エディタの拡張機能を使う

VSCodeでは「Easy Sass」、「Easy LESS」といったものが検索で出てきました。
ファイルを保存するとコンパイル処理が走る、といった感じらしいです。

こちらもオプションでソースマップファイルが作れそうです。
（要確認）

やっぱりコンパイルが気になる

ここまでコンパイルコンパイル書いていると疑問がふつふつと再燃してきました。
ソースマップから完全に脱線しています。

☆別で記事にしました！こちら。

実はソースマップで一番知りたかったことは、importしたscssファイルまでソースマップでたどることができるのか、なのですが、また今度確認してみます。

その他の参考

ソースマップについてコンソールに警告（DevTools failed to parse SourceMap）【Chromeデベロッパーツール】 | まろりか

ソースマップの自作は割とコワくない。 - Qiita

黄色のCookieのコンソールエラー

Chromeのデベロッパーツールの「Console」で出てくる黄色のエラー（警告）に対処したのでメモします。

Cookieのエラー

A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

＜URL＞にはyahooのURL（http://yahoo.co.jp/）やGoogleのURL（https://www.google.com/、http://.google.com/、http://.google.co.jp/）など、https/http違いのURLが入っていました。

このエラー、いろいろなサイトで見られます。しかも多いと何十個とまとめて出ています。
目を瞑りたいではありますが、調べてみるといろいろ出てきました。

まさに翻訳されている記事。詳しい！ありがとうございます。

Chrome で SameSite=None に関する Cookieについての警告が表示される | ラボラジアン

【ポイントだけ翻訳】
http://example.com/ に存在するクロスサイトなリソースに関連付けられたクッキーは、SameSite 属性がついていません。今後の Chrome のリリースでは、クロスサイトなリクエストに付属させるクッキーは、SameSite=None と Secure 属性がついている場合のみ送信します。

http://example.com/ は前述の＜URL＞にあたります。

「yahooやGoogleのURLに存在するクロスサイトなリソース」というのは、どういうことなのでしょうか？

...結局答えが見つけられず。
おそらく知らず知らずのうちにyahooやGoogleへリクエストを送っていて、その際のCookieにSameSite=NoneとSecure属性が付いていないですよ、という警告なんだろうと思います。

Cookieについて図にまとめる

忘れそうなので調べたことを図にしてみました。

※間違っている部分を発見したら修正します！

SameSite とは

SameSite 属性の目的は、
今開いているページのドメインから、別のドメインにリクエストを送る際に、クッキーをセットするかどうか
を制御することです。

HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies) | ラボラジアン

上の図では、あるページ内に別サイトの広告の表示をリクエストしている例ですが、サイトAからサイトBへページ遷移する際も、現在のドメインとは別のドメインへリクエストを送ることになります。

Secure属性とは

SSLというURLがHTTPSという暗号化された通信下でのみ読み取れるCookieの指定となります。

いまさら聞けないSameSite CookieとGoogle Chrome 80 | ecbeing

また、Cookieを発行するときに "secure" と指定されたクッキーのことをセキュアクッキーといいます。

別ドメインでもCookieを送れるようにしますが、せめてSSL通信にしてください、というのが今回の警告です。

エラーの対処方法

そしてサイト運営側としてはどう対処すればいいのかというと、

自サイトに埋め込んだウィジェットや広告などから外部のドメインに送られるクッキーに関しては、こちらでコントロールできるものではないので何もすることはない。

最初に外部のサーバーからセットされたCookie（これがサードパーティCookie？）に対してはクライアントからは何もできない、SameSite=Noneの指定はできません、ということでしょうか。

ひとまずエラーに対しては一件落着です（具体的な対処は何もやっていない）。

余談

Cookieについて調べていたらあれこれ気になったのでメモします。

SameSite=NoneとSecure属性の警告は、CSRF対策のため？

クロスサイトリクエストフォージェリ（CSRF）：
ユーザーのCookieを利用して、あたかもユーザーが行ったかのような個人情報の設定などの処理をさせてしまう攻撃です。
攻撃者は罠を仕込んだ画像をユーザーに読み込ませたり、POSTでデータを送信させて攻撃します。 「forgery：偽造」という意味です。
リクエストの偽造ですね。

SameSite=NoneとSecureと規定すれば、HTTP通信の怪しい画像などの読み込み時のCookieの送信は防げる、ということでしょうか。

POST送信におけるCSRF対策について

Chrome 80が密かに呼び寄せる地獄 ～ SameSite属性のデフォルト変更を調べてみた - Qiita

SameSiteの設定値によって対策効果が変わってきます。
急に難しく感じました。

また、世間はプライバシーの侵害にもあたるサードパーティCookieを廃止しようという流れらしいです。

GoogleのChromeがサードパーティCookieを廃止。Webサイトへの影響は？ | Webmedia

Cookieの確認方法

PCのChromeでは、アドレスバーにchrome://settings/siteData?search=Cookie と入れてアクセスすると「すべての Cookie とサイトデータ」という、ブラウザに保存されているCookieがサイトごとに確認できます。

結構な数があります。「ad」と付いているものは広告っぽいです。
そして結構どこにでも「_ga」と、AnalyticsのCookieがセットされています。

さらに！Chromeのデベロッパーツールの Application > Storage > Cookies では、のページでセットされたCookieの一覧が送信先別で見れます（よく見たらアイコンがチョコチップのクッキーみたいですね）。
Secure指定があるかどうかも確認できます。

Google AnalyticsはファーストパーティCookieを利用している

どういうこと？？と思いましたが、ga.js やgif画像をうまいことやり取りしているようです。

コラム - GoogleAnalyticsのCookieは、なぜサードパーティCookieではなく、ファーストパーティCookieなのか？ | Nexal

AnalyticsはGoogleのサービスなので、どうなっても使えなくなることはなさそうですね。

最後に

Cookieをセットする方法まで調べたかったですが、来たる時が来るまでとっておきます。

本当はもう一つの黄色いエラーについても書こうと思っていました。
クッキーがここまで膨らむとは！

JavaScriptのコールバック関数について

JavaScript第一号の記事です。
JavaScriptを飛ばしてJSONの記事はあります。

こんな動きを実装しました！と堂々と記事にする以前の段階なので、そうなれるようにがんばります。

下積み記事第一弾はコールバック関数です。
やりたいことがあっても、うまくいかないときは大体コールバック関数に阻まれていることが多いです。
お勉強できる教材がないか探しました。

エンジニアYouTuberがすごい

YouTubeでプログラミングの学習ができます。
動画なので感覚的にはドットインストールみたいです。
加えて、教えてくださる方が映っています。

私が見たのは
しまぶーのIT大学
【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
です。

とてもわかりやすかったです！これが無料！

動画内でも「コールバック関数は初心者がつまづきやすいところ」と言われており、コメント欄を見ると、同じくコールバック関数と戦う方たちの声がたくさん。 励みになります。

このしまぶーさんという方以外にもたくさんの方がプログラミング関係の動画を上げてくださっているのですね。
結局、有用な記事を探し出して読むのと同じなので、自分に合ったYouTuberを探してみるのもいいなと思いました。

『たった3分でプログラミングを学習できる！？』知らないと損をする教育系Youtuber3選！【在宅ワークの方必見】 | キカガク公式ブログ

関数いろいろ

まずはいろいろある関数を挙げます。

関数宣言と関数式

どちらも関数の宣言をする文法です。

関数宣言

function hello() {
  console.log('こんにちは');
}

関数式

let hello = function() {
  console.log('こんにちは');
};

名前のない関数、匿名関数を変数helloに入れています。 function() {} 部分は関数リテラルという「値」で変数に代入しているため、後ろに ; を付けます。
（文末の ; はjavascriptで自動挿入されるそうなのでなくても大丈夫ですが、「入れるもの」だということは抑えておきたいです）

これら書き方が2つあって混乱します。「文字列の扱い "" と '' 」のようにどちらを使えばいいのか...！

関数式と関数宣言の違いについて：
関数式

基本は関数の呼び出しの前後どちらに書いてもOKな関数宣言を使って、スコープを意識するときは関数式の方がいいのかなと思いました。

アロー関数

さらに関数リテラルをアロー関数を使ってシンプルに書くこともできます。

let hello = () => { 
  console.log('こんにちは');
};

// 処理が一文のときは {} を省略できる
let hello = () => console.log('こんにちは');

// 引数が一つのときは()を省略できる
let hello = name => console.log('こんにちは' + name);

アロー関数の基本

アロー関数と普通の書き方では何が違うかというと、this の解釈だそうです。

【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita

アロー関数、目がまだ慣れません...！

即時関数

関数を定義すると同時に実行される関数です。

(function () {
    //処理
}());

JavaScriptで即時関数を使う理由 - Qiita

即時関数を使う理由は、スコープの汚染を防ぐため。
もっと積極的に使っていかなくてはならない関数であることは分かりました。
おいおい復習したいです。

高階関数

引数が関数（＝コールバック関数）の関数。高階関数の中で関数を実行します。

function 高階関数名(コールバック関数) {
  // 処理
  コールバック関数();
}

☆「高階関数名」はなくても、匿名関数でもOKです。

匿名関数、無名関数

名前がなくても関数として動かすことができる関数。
function(){} という、今までさんざん出てきたやつです。

コールバック関数

ここでようやくコールバック関数についてです。
「引数として渡されている関数」のことをいいます。

コールバック関数を使った文法

引数になっている関数なんだ、ということを落ち着いて考えればコードも読めそうです。

言葉にすると、コールバック関数の書き方は

• あらかじめ宣言した名前のある関数を入れるのか
• 匿名関数をそのまま入れるのか

です。

コールバック関数をあらかじめ宣言しておく場合

// 高階関数
function kokai(fn)  {
  // 処理
  fn();  // コールバック関数の処理←よく「fn」と書かれる。
}

// コールバック関数になる関数の定義
function callback1(param) {
  // 処理
}
function callback2(param) {
  // 処理
}

// 高階関数（kokai()）の実行
kokai(callback1);

コールバック関数に引数を渡す場合

高階関数の引数にコールバック関数の引数を定義します。
引数の順番は決まっていなさそうです。

function kokai(fn, param)  {
  // 処理
  fn(param);  // コールバック関数の処理
}

kokai(callback2, コールバック関数の引数);

コールバック関数が匿名関数の場合

関数式の変数部分を入れるのと、代入部分である匿名関数を入れるのは同じ、と考えれば納得です。

// 高階関数
function kokai(fn)  {
  // 処理
  fn(); 
}

// コールバック関数になる関数の宣言（関数式）
let callback3 = function(param) {
  // 処理
}

// 高階関数（kokai()）の実行
kokai(callback3);  // コールバック関数が変数

kokai(function(param) {    // コールバック関数が匿名関数
  // 処理
});

これはよく見掛けます。
1回限りしか使わないコールバック関数なら、わざわざ関数宣言しなくてもまるごと引数に入れてしまおうということです。

コールバック関数に引数を渡す

高階関数の処理内容を、引数であるコールバック関数の引数として渡す場合です。

 // 高階関数の宣言
function kokai(fn) {
  const input = 'hoge';
   fn(input);    // コールバック関数に引数を渡す、という定義
}

// 高階関数の実行
kokai(function(input) {
  // inputを使った処理
});

アロー関数の高階関数

ぎりぎり分かりそうなコードです。

// 通常
const calc = function(x, y, fn) {
  return fn(x, y);
};
 
console.log(calc(2, 4, function(a, b) {
 return  a + b;
}));  // 6
console.log(calc(2, 4, function(a, b) {
  return a * b;
}));  // 8


// アロー関数
calc = (x, y, cb) => {
  return cb(x, y)
}

console.log(calc(2, 4, (a, b) => a + b))  // 6
console.log(calc(2, 4, (a, b) => a * b))  // 8

アロー関数では、(a, b) => a + b 部分がコールバック関数です。匿名関数です。
そしてアロー関数では return が省略できます。
とても短く書けます。

アロー関数については今深入りすると大混乱なので、このへんにします。

まだまだ奥が深い

関数の種類も、他に純粋関数や再帰関数、あと分からない単語ではクロージャー、カリー化などがありました。

まずはコールバック関数を意識しながらコードを見て目を慣らします！

それにしても具体的でないコードはこうも分かりにくいのか、と思いました。 （動画のコードまんま書くのはは良くないと思い...。）
オリジナルないい例が思いついたら直したいです。

おしまい。

CGIにふれる

WordPressインストール時にまたしてもつまづいたのでメモです。
（こちらにもつまづいた事例を書きました）

WordPressをサーバーに入れて、インストールしようとアクセスすると、phpのエラーが出ました。
require がうまくできない、といったエラーでした。

よくよく見るとマジック定数である__DIR__ が使えないようでした。
( echo __DIR__ としてもそのまま「__DIR__」と出てきてしまう)

参考：マジック定数について
PHPの__FILE__とか__DIR__とかのマジック定数まとめ | PisukeCode - Web開発まとめ

__DIR__ はPHP5.3 から使えるのですね。 使おうとしているサーバーは5.2だったのです...！

ということで、解決策は「サーバーでPHPをCGIモードにする」でした。

モジュールモードとCGIモード

使っているのはさくらサーバーです。
ざっくり調べたところ、サーバーの仕様には モジュールモードとCGIモード があることが分かりました。
他のサーバー会社でも同じ感じらしいです。

モジュールモードでは、PHPをApacheのモジュールとして使うため高速になる。
CGIモードでは、Apacheからではなく、CGIファイルを通してPHPへのパスを通している。

といった違いです。

よく「モジュールモードは高速」と見掛けるので時代に逆行している感じはあります。
しかし共用サーバーなので、メンテナンス上個別にPHPのバージョンを上げる必要があり、CGIモードにする変更することになりました。

さくらサーバーでモジュールモードからCGIモードへ変更する

以下教えていただいた方法です。

1. .htaccessを作る

Action myphp-script /php.cgi
AddHandler myphp-script .php

と書きます。
次に作る php.cgi を見に行くよう指示する記述です。（おまじない状態...）
ルートディレクトリに置きます。

2. php.cgi を作る

#!/bin/sh
#exec /usr/local/bin/php-cgi
#exec /usr/local/php/5.6/bin/php-cgi
#exec /usr/local/php/7.2/bin/php-cgi
exec /usr/local/php/7.3/bin/php-cgi

# が付いている行はコメントアウトされているので、動いているのは最後の行のみです。
この記述でPHP7.3へパスを通しているようです（おまじない...）。
こちらもルートディレクトリに置きます。

これでPHP7.3が使えるようになったので、__DIR__ も使えるようになりました。

注意点

php.cgi のアクセス権に注意です。実行ファイルなのでパーミッション755で動きます。

さいごに

少しCGIについてかじってみようかと思いましたが、まだ早かったみたいです。
Perlという言語で書かれているけど拡張子は.cgiなのですかね...。

今回は触れる程度にしておきます。