昨今のWEB事情お勉強

備忘録、noteでOGPタグが読み込めなかった！

運用しているサイトのURLをノートに貼ったところ、でOGPタグが読み込まれず、トラブル。
原因は、海外からのサーバーのアクセスを遮断してた事によるもの。
OGPタグはクローラーで読みにくるものなので、アクセスを遮断してると読み込みがされなくなってしまう。
解決方法としては、.htaccessに海外アクセスを除外する設定を書き込んでいたので、そこに『notebot』からのアクセスを許可する記述『SetEnvIf User-Agent "notebot" allowbot』を追記したらいけた。

前後の設定の流れがあるから留意！

#########  海外IPを許可しないための設定  #########

	### 検索エンジンをまとめて許可するためにenv化する (Must)
	SetEnvIf User-Agent "Googlebot" allowbot
	SetEnvIf User-Agent "msnbot" allowbot
	SetEnvIf User-Agent "bingbot" allowbot
	SetEnvIf User-Agent "Slurp" allowbot
	SetEnvIf User-Agent "notebot" allowbot

	### いったん全てを拒否する (Must)
	order deny,allow
	deny from all

	### 検索エンジンからのアクセスを許可 (Must)
	allow from env=allowbot

	### SearchConsoleのプロパティが確認出来るためにの対策 (使っていなければ不要)
	### https://support.google.com/webmasters/answer/80553?hl=ja
	allow from googlebot.com
	allow from google.com


	order deny,allow
	deny from all

	allow from 1.0.16.0/20
	........
	

世界

日本の数値、PC解像度

1920x1080

24.85%

一般的なPCディスプレイ

1536x864

8.1%

これはおそらく『1920x1080』を125%で見てる人の画面サイズ

2560x1440

6%

WQHDっていうカテゴリ、『1920x1080』より一回り大きめなサイズ

1366x768

4.9%

ノートPCとか？

1280x720

3.66%

一昔前のディスプレイサイズ

日本の数値、スマホ解像度

375x812

15.08%

iPhone XとかiPhone11相当？

390x844

14.9%

iPhone 12、Pro関係～iPhone 14

393x852

10.63%

iPhone 16

414x896

8.55%

iPhone 11 Pro Max

375x667

5.74%

iPhone 11 Pro、iPhone X

412x915

4.75%

???

スマホ375と390が横並びトップ的な？ただ、他とのバランスを考えると、375～415位でしっかり表示させる感じで作るのがよろしいかと？リキッドリキッド

日本の数値、PC、スマホ総合、割合編

Desktop

49.79%

Mobile

48.92%

Tablet

1.28%

日本の数値、PC、スマホ総合解像度編

1920x1080

13.15%

375x812

6.92%

390x844

6.76%

393x852

4.81%

1536x864

4.25%

414x896

3.87%

割合から見ると、どちらを優先するともなくPC、スマホ両方のシェアが同等なので同様に対応すべきっぽいように見えるが、自分が作るサイトを見る人の属性を考えて対応すべき。

これがcssでできちゃう…

hoge {
	  hagu {
	    margin-bottom: 0;
	    margin-top: 15px;
	    &:first-child {
	      margin-top: 0;
	    }
	  }
	  fuga {
	    margin-bottom: 0;
	    &:before {
	      content: 'ー';
	      color: #ccc;
	      padding-right: 0.2em;
	    }
	  }
	}
	

各モダンブラウザは対応済

いわゆるモダンブラウザでは全部対応できてるので心配なく使って良さそうだ。

参考リンク：https://caniuse.com/css-nesting

参考記事：https://coliss.com/articles/build-websites/operation/css/css-nesting.html

変数の宣言

※スコープがあるよ

/* どこでも使用可能 */
	:root {
	  --text-color: #444;
	}
	/* セレクタ内で使用可能 */
	.hoge {
	  --hoge-color: red;
	}

変数のコール

/* どこでも使用可能 */
	:root {
	  --text-color: #444;
	  --margin: margin;
	}
	.hoge {
	  color: var(--text-color);
	}
	/* プロパティ名を変数にすることはできない */
	.fuga {
	  var(--margin): 30px;
	}

css変数の中でcss変数を定義

:root {
	  --gradient-start-color: #e66465;
	  --gradient-end-color: #9198e5;
	  --bg-gradient: linear-gradient(var(--gradient-start-color), var(--gradient-end-color));
	}
	.hoge {
	  background: var(--bg-gradient);
	}

jsで変数の名前を指定して読んだり、設定しに行く事も可能

const hogeStyleVal = hogeStyle.getPropertyValue('--text-color');
	console.log(hogeStyleVal);

グリッドレイアウトって？

縦横でグリット状のレイアウトが作れちゃうよ～ってやつ、そのまんま言ってるだけやん。

試しに使ってみよう

	.css_test.test251212_01 {
		.section {
		  overflow-x: auto;
		  scroll-snap-type: x mandatory;
		  -webkit-overflow-scrolling: touch;
		  scroll-padding: 1rem;
		  white-space: nowrap;
		}
		 
		.section__item {
			display: inline-block;
			width: 400px;
		  height: 150px;
		  margin-right: 15px;
		  scroll-snap-align: center;
		  background-color: #ccc;
		}
	}
	<div class="css_test test251212_01">
		<div class="section">
		  <div class="section__item">Item 1</div>
		  <div class="section__item">Item 2</div>
		  <div class="section__item">Item 3</div>
		  <div class="section__item">Item 4</div>
		  <div class="section__item">Item 5</div>
		</div>
	</div><!-- .css_test -->
				

おお…、ピタピタと動く…、すごい…

ゲロくっそ長いけど実例！

<style>
	.css_test.test251212_02 {
		/* 基本スタイル */
		dialog {
		  padding: 0;
		  width: 300px;
		  height: 300px;
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  margin-left: -150px;
		  margin-top: -150px;
		}

		/* ここから本番 */

		/* トランジションと透過を設定 */
		dialog#test251212_02_modal02 {
			transition: opacity 1s;
		}

		/* 開始時のopacityを定義、これでdisplay: none;からblockに変わった時の値が定義できる */
		@starting-style {
			dialog#test251212_02_modal02 {
			  opacity: 0;
			}
		}

		/* 
		この時、表示される時には効くけど、消えるときには効かない。
		なので、次に使うのが「transition-behavior」の「allow-discrete」。
		displayやoverlay等の「離散プロパティ(?)」に対してトランジションを効かせる
		*/
		dialog#test251212_02_modal03 {
			/* 初期状態のopacityを定義しておかないとtransitionした時に
			戻って来る値がないので正常動作しない */
			opacity: 0;
			transition: 
				/* 各transitionにallow-discreteを効かせる
				「overlay」はTop Layerに表示されているか否かを示すプロパティ、
				これもスタイルを付けておかないと、closeし始めた瞬間にTop Layerじゃ
				なくなるのでtransitionし始めた時に他の要素の裏に隠れたりする。 */
				opacity 1s allow-discrete, 
				overlay 1s allow-discrete,
				display 1s allow-discrete;
		}

		dialog#test251212_02_modal03[open] {
			/* transitionした先のスタイル */
			opacity: 1;
		}

		@starting-style {
			dialog#test251212_02_modal03[open] {
				/* openになった瞬間に適用される@starting-style */
			  opacity: 0;
			}
		}


		/* 「::backdrop」にも同様にスタイルを付けておくと、
		背景の薄黒いのも綺麗に表示/非表示するよ */
	}

	</style>

	<dialog id="test251212_02_modal">
		<p>なしパターン</p>
	</dialog>
	<button id="test251212_02_btn" type="button">なしパターン</button>
	<script>
	/* aパターン */
	const modal = document.querySelector('#test251212_02_modal');
	const modalBtn = document.querySelector('#test251212_02_btn');
	modalBtn.addEventListener('click', (event) => {
		modal.showModal();
	});
	modal.addEventListener('click', (event) => {
		modal.close();
	});
	</script>


	<dialog id="test251212_02_modal02">
		<p>ありパターン1</p>
	</dialog>
	<button id="test251212_02_btn02" type="button">ありパターン2</button>
	<script>
	/* bパターン */
	const modal02 = document.querySelector('#test251212_02_modal02');
	const modalBtn02 = document.querySelector('#test251212_02_btn02');
	modalBtn02.addEventListener('click', (event) => {
		modal02.showModal();
	});
	modal02.addEventListener('click', (event) => {
		modal02.close();
	});
	</script>


	<dialog id="test251212_02_modal03">
		<p>ありパターン3</p>
	</dialog>
	<button id="test251212_02_btn03" type="button">ありパターン3</button>
	<script>
	/* cパターン */
	const modal03 = document.querySelector('#test251212_02_modal03');
	const modalBtn03 = document.querySelector('#test251212_02_btn03');
	modalBtn03.addEventListener('click', (event) => {
		modal03.showModal();
	});
	modal03.addEventListener('click', (event) => {
		modal03.close();
	});
	</script>
	

cssの設計法

OOCSSの基本

「Object Oriented CSS」の略、セクション単位で定義してたスタイルをパーツごと、モジュールごとに分けて作って管理をしようという思想

• パーツが何処に配置されてもレイアウトに影響を与えないし、影響も受けない
• 同じ形でも、classを付け替えることで自由に装飾を変更することが出来る

中身のスタイルが親要素・子要素の状態に左右されない
さっくりと理解をするに辺り、下記のリンクが理解に易かった。
これだけ理解してれば「OOCSS？まぁ知ってますよ」て言えるハズよね