日本国内であまり言及のない CSS 設計手法である ITCSS（Inverted Triangle CSS）について基本情報を記述する。
<h2>TL;DR</h2>
<ul>
<li>CSS を実装上の問題点</li>
<li>ITCSS とはどういうアーキテクチャなのか</li>
<li>ITCSS が CSS 実装への課題へどういうアプローチをしているか</li>
</ul>
<hr>
<h2>CSS の問題</h2>
CSS の仕様（グローバルスコープや詳細度）により、スタイル定義は複雑化しやすく破綻しやすい。
<ul>
<li>カスケードと継承</li>
<li>ソースの順番に大きく依存する</li>
<li>詳細度</li>
</ul>
CSS の定義において、ソースの記述順と詳細度は非常に重要である。これらの関係性が複雑になっていくと、既存定義を上書きするためにまた新しい定義をしていく必要がでてきてしまい、多くの無駄や冗長性が発生し、破綻してしまう。
<h3>詳細度の解決方法</h3>
── CSS を詳細度順で書く。
コードの記述順をいきあたりばったりで記述していくとする。そうすると、下記の図のように詳細度（山なりになっている箇所）が意図しない部分で現れていき、あとから対応をしていく度にコードの複雑さが増してしまう。複雑性が増したコードの場合、コードの末端で上書きしたつもりでもコードの先頭部分での定義の詳細度が強いケースなどもあり得る。
<img src="https://user-images.githubusercontent.com/3617124/115998030-529b3600-a620-11eb-8d13-df770b06e925.png" alt="悪い記述順">
対して、コードを詳細度を意識した順番で記述していくとする。そうすると、下記のように当然詳細度は徐々に上がっていく形になる。あとから対応が必要な場合、別の場所の詳細度に影響を受けずに後述していけば良くなり、コードの見通しも良くなる。
<img src="https://user-images.githubusercontent.com/3617124/115998026-5038dc00-a620-11eb-8c94-4992dfd09717.png" alt="良い記述順">
大まかにいえば、ITCSS はこの詳細度での記述順を可視化するための枠組みである。
<h2>ITCSS</h2>
<a href="https://itcss.io/" target="_blank" rel="nofollow noopener">ITCSS</a>は、CSS のための健全でスケーラブルに管理されたアーキテクチャである。
<h3>ITCSS とは何か</h3>
<ul>
<li>逆三角形の CSS アーキテクチャ</li>
<li>健全でスケーラブルな管理されたアーキテクチャ</li>
<li>ライブラリではなく、考え方の流儀</li>
<li>メタフレームワークであり、フレームワークのためのフレームワーク 
信じられないほどシンプル</li>
</ul>
<img src="https://user-images.githubusercontent.com/3617124/116028973-41d7d800-a693-11eb-8dd3-779f5bca4102.png" alt="ITCSS 逆三角形">
CSS のスタイル定義を詳細度の広い順に記述（階層化）することを提唱している。その記述が逆三角形として視覚化されるため、この呼び名となっている。
<h3>レイヤー</h3>
ITCSS には、デフォルトで下記の 7 つの種別（レイヤー）で分類する。
<ol>
<li>Settings</li>
<li>Tools</li>
<li>Generic</li>
<li>Base</li>
<li>Objects</li>
<li>Components</li>
<li>Trumps</li>
</ol>
<img src="https://user-images.githubusercontent.com/3617124/116067628-48327800-a6c4-11eb-8663-a91e44f49a5b.png" alt="ITCSSの構造">
必要に応じてレイヤーを追加や削除ができる。
<ul>
<li>CSS プリプロセッサを利用していない場合、<code>Settings</code>や<code>Tools</code>などのレイヤーを削除しても良い</li>
<li>OOCSS を使用していなければ<code>Objects</code>レイヤーを削除しても良い</li>
<li>テーマ性が必要であれば<code>Theme</code>レイヤーを追加しても良い</li>
</ul>
レイヤーの原則として、上位レイヤーを下位レイヤーが上書きできるような実装になっていなければ良い。そのため、プロジェクトに応じて必要なレイヤーを継ぎ足しすることも問題ない。
<h4>Settings</h4>
プリプロセッサなどで利用するグローバル変数や全体の設定を置く（SASS 変数や CSS Variables の定義）。
<pre><code class="hljs language-scss">$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
 "Segoe UI Symbol", "Noto Color Emoji" !default;

$color-ui: #bada55;
$spacing-unit: 10px;
</code></pre>
<h4>Tools</h4>
プリプロセッサで利用する<code>mixin</code>や<code>function</code>などの定義を置く。
<pre><code class="hljs language-scss">@function str-replace($string, $search, $replace: "") {
 $index: str-index($string, $search);

 @if $index {
 @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index +
 str-length($search)), $search, $replace);
 }

 @return $string;
}

@mixin font-brand() {
 font-family: "UI Font", sans-serif;
 font-weight: 400;
}
</code></pre>
<h4>Generic</h4>
リセットスタイル（normalize.css など）や固有のリセットスタイル定義を置く。低詳細度、広範囲に当たる初期のスタイルを定義する。
<pre><code class="hljs language-scss">@import "~normalize.css/normalize.css";

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
</code></pre>
<h4>Base</h4>
素の HTML 要素（a, h1…6, ul…li など）のスタイルを定義する。クラスセレクターなどは使用せず、要素セレクターのみで定義する。
<pre><code class="hljs language-scss">ul {
 list-style: square outside;
}
</code></pre>
※ Base ではなく Elements という記述の資料もあるが、提唱者の資料をみると Base のようであった
<h4>Objects</h4>
OOCSS（Object Oriented CSS）の概念に基づいた定義をする。装飾を持たないレイアウトを定義する。
<pre><code class="hljs language-scss">.ui-list {
 margin: 0;
 padding: 0;
 list-style: none;
}

.ui-list__item {
 padding: $spacing-unit;
}
</code></pre>
<h4>Components</h4>
名前の付けられた明確なコンポーネント（UI パーツ）を定義する。
<pre><code class="hljs language-scss">.products-list {
 @include font-brand();
 border-top: 1px solid $color-ui;
}

.products-list__item {
 border-bottom: 1px solid $color-ui;
}
</code></pre>
<h4>Trumps</h4>
ヘルパー・ユーティリティ系のスタイルを定義する。1 つの DOM にのみ影響するものに焦点を置いて定義する。明示的なスタイル定義（テキストの中央寄せ等）などスコープがもっとも狭い定義になる。
<pre><code class="hljs language-scss">.one-half {
 width: 50% !important;
}
</code></pre>
最下層のレイヤーであるため、 ID セレクターや<code>!important</code>の定義が許容される。
<h3>レイヤーの特徴</h3>
<ul>
<li>詳細度はレイヤーが下位へいくごとに増す</li>
<li>一度に DOM のより小さな部分に影響を与えていきます</li>
<li>下のレイヤーを上のレイヤーが上書きすることはしない</li>
</ul>
<h3>ITCSS の成果</h3>
<ul>
<li>すべてのコードを置く場所がある</li>
<li>人々は、どこを見ればどんな種類のルールがあるか分かる</li>
<li>健全なソースの順序</li>
<li>無駄を省き、冗長性を高める</li>
<li>スケーラビリティの向上</li>
<li>詳細度戦争が終わる</li>
</ul>
<h2>参考</h2>
<ul>
<li>Managing CSS Projects with ITCSS - speakerdeck 
<a href="https://speakerdeck.com/dafed/managing-css-projects-with-itcss" target="_blank" rel="nofollow noopener">https://speakerdeck.com/dafed/managing-css-projects-with-itcss</a></li>
<li>Harry Roberts - Managing CSS Projects with ITCSS 
<a href="https://www.youtube.com/watch?v=1OKZOV-iLj4" target="_blank" rel="nofollow noopener">https://www.youtube.com/watch?v=1OKZOV-iLj4</a></li>
<li>itcss/itcss-netmag 
<a href="https://github.com/itcss/itcss-netmag/" target="_blank" rel="nofollow noopener">https://github.com/itcss/itcss-netmag/</a></li>
</ul>

husky v4 から v6 へ移行する手順の覚書

[CSS設計] ITCSSとは

husky を v4.3.8 から v6.0.0 へアップグレードする。
※ v5 はライセンス問題があるため、MIT に戻った v6 へアップグレードする
<h2>環境</h2>
<ul>
<li>husky: 4.3.8 -> 6.0.0</li>
<li>lint-staged: 10.5.4</li>
</ul>
<h2>方法</h2>
husky のドキュメントにある<a href="https://typicode.github.io/husky/#/?id=migrate-from-v4-to-v6" target="_blank" rel="nofollow noopener">Migrate from v4 to v6</a>を参照した。
<h3>husky-4-to-6 CLI</h3>
<a href="https://github.com/typicode/husky-4-to-6" target="_blank" rel="nofollow noopener">husky-4-to-6 CLI</a> という CLI が用意されており、簡単に移行ができる模様。
npm で管理しているプロジェクトだったので、README の内容通り下記を実行した。
<pre><code>npm install husky@6 --save-dev \
 &#x26;&#x26; npx husky-init \
 &#x26;&#x26; npm exec -- github:typicode/husky-4-to-6 --remove-v4-config
</code></pre>
実行すると要所で<code>Ok to proceed? (y)</code>と訊かれるので<code>y</code>と続けていく。
<pre><code>removed 16 packages, changed 2 packages, and audited 950 packages in 4s

8 packages are looking for funding
 run `npm fund` for details

found 0 vulnerabilities
Need to install the following packages:
 husky-init
Ok to proceed? (y) y
husky-init updating package.json
 setting prepare script to command "husky install"
husky - Git hooks installed
husky - created .husky/pre-commit

please review changes in package.json
Need to install the following packages:
 github:typicode/husky-4-to-6
Ok to proceed? (y) y
husky - created .husky/pre-commit
husky - deleted husky field from package.json

⚠️ pre-commit hook may need to be manually updated to be run via package manager.

Examples:
 jest → npx --no-install jest
 → yarn jest

 jest &#x26;&#x26; eslint → npx --no-install jest &#x26;&#x26; npx --no-install eslint
 → yarn jest &#x26;&#x26; yarn eslint

 commitlint -E HUSKY_GIT_PARAMS → npx --no-install commitlint --edit $1
 → yarn commitlint --edit $1

See https://typicode.github.io/husky/#/?id=migrate-from-v4-to-v5
</code></pre>
処理後、以下のような差分が出る。
<ul>
<li>変更：
<ul>
<li>package.json</li>
<li>package-lock.json</li>
</ul>
</li>
<li>追加：
<ul>
<li>.husky/.gitignore</li>
<li>.husky/pre-commit</li>
</ul>
</li>
</ul>
<h4>package.json の差分</h4>
<pre><code class="hljs language-diff">+ "prepare": "husky install"
</code></pre>
<pre><code class="hljs language-diff">- "husky": "^4.3.8",
+ "husky": "^6.0.0",
</code></pre>
<pre><code class="hljs language-diff">- "husky": {
- "hooks": {
- "pre-commit": "lint-staged"
- }
- },
</code></pre>
<h3>.husky/pre-commit</h3>
CLI で移行されていた記述だと package.json に記述していた<code>"pre-commit": "lint-staged"</code>の<code>lint-staged</code>がそのまま記述されていた。これを実行できるように<code>npx</code>経由で実行できるように<code>npx lint-staged</code>を<code>.husky/pre-commit</code>に追加した。
<pre><code class="hljs language-sh">#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged
</code></pre>
これで pre-commit 時に lint-staged の設定のものが適応される。
参考: <a href="https://typicode.github.io/husky/#/?id=locally-installed-binaries" target="_blank" rel="nofollow noopener">https://typicode.github.io/husky/#/?id=locally-installed-binaries</a>
<h2>まとめ</h2>
<ul>
<li>移行は husky-4-to-6 CLI を実行するだけで良い</li>
<li>.husky/pre-commit に lint-staged を実行できるようにする
<ul>
<li>lint-staged の定義はそのままで良い</li>
</ul>
</li>
</ul>

[Next.js] Qiita と Zenn の 記事一覧（フィード）を取得する方法

<h2>やりたいこと</h2>
Next.js を使って、Qiita と Zenn で自分の投稿した記事を取得したい。
<h2>環境</h2>
<ul>
<li>next: 10.1.3</li>
<li>typescript: 4.2.3</li>
</ul>
<h2>フィードの仕様</h2>
<a href="https://qiita.com/" target="_blank" rel="nofollow noopener">Qiita</a> と <a href="https://zenn.dev/" target="_blank" rel="nofollow noopener">Zenn</a> が提供しているフィードを確認する。
<h3>Qiita</h3>
<pre><code>https://qiita.com/[UserID]/feed.atom
</code></pre>
サンプル: <a href="https://qiita.com/hiro0218/feed.atom" target="_blank" rel="nofollow noopener">https://qiita.com/hiro0218/feed.atom</a>
<h3>Zenn</h3>
<pre><code>https://zenn.dev/[UserID]/feed
</code></pre>
サンプル: <a href="https://zenn.dev/hiro/feed" target="_blank" rel="nofollow noopener">https://zenn.dev/hiro/feed</a>
<h2>実装</h2>
<h3>フィードをパースする</h3>
パースには<a href="https://www.npmjs.com/package/rss-parser" target="_blank" rel="nofollow noopener">rss-parser</a>を利用する。フィードのデータを Object として取り扱いができるようになる。
<pre><code>npm install --save rss-parser
</code></pre>
<pre><code class="hljs language-ts">import Parser from "rss-parser";

(async () => {
 const parser = new Parser();
 const feed = await parser.parseURL("https://zenn.dev/hiro/feed");
 console.log(feed.title);
})();
</code></pre>
こんな感じで簡単に取得できる。
<h3>実装する</h3>
<code>getStaticProps</code>内でフィードにアクセスする。
<pre><code class="hljs language-tsx">interface Feed {
 title: string;
 link: string;
 isoDate: string;
}

interface Props {
 qiitaPosts: Array&#x3C;Feed>;
 zennPosts: Array&#x3C;Feed>;
}

const Home = ({ qiitaPosts, zennPosts }: Props) => {
 return (
 &#x3C;>
 {qiitaPosts.map((post, index) => { /* */ })}
 {zennPosts.map((post, index) => { /* */ })}
 &#x3C;/>
 );
};

export default Home;

export const getStaticProps: GetStaticProps = async () => {
 const parser = new Parser();

 const feedQiita = await parser.parseURL('https://qiita.com/hiro0218/feed.atom');
 const feedZenn = await parser.parseURL('https://zenn.dev/hiro/feed');

 return {
 props: {
 qiitaPosts: feedQiita.items;,
 zennPosts: feedZenn.items,
 },
 };
};
</code></pre>

[Next.js] Google Adsenseを表示させる方法

<h2>環境</h2>
<ul>
<li>next: 10.1.2</li>
<li>typescript: 4.2.3</li>
</ul>
<h2>条件</h2>
ブログの記事に Adsense を表示したい。記事は次の記事、前の記事に遷移できるリンクがあるため、記事の読み込み毎に広告を再読み込みさせる。
<h2>方法</h2>
<h3>adsbygoogle.js を読み込む</h3>
<code>pages/_document.tsx</code> でスクリプトを読み込む。
<pre><code class="hljs language-tsx">// pages/_document.tsx
render() {
 return (
 &#x3C;Html>
 &#x3C;Head>
 &#x3C;script
 data-ad-client={GOOGLE_ADSENSE.CLIENT}
 async
 src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
 >&#x3C;/script>
 &#x3C;/Head>
 &#x3C;/Html>
 )
}
</code></pre>
<h3>adsbygoogle の型定義</h3>
<code>window</code>の adsbygoogle へアクセスをする必要が出てくるので型定義する。
<pre><code class="hljs language-ts">// next-env.d.ts
interface Window {
 adsbygoogle?: { [key: string]: unknown }[];
}
</code></pre>
ひとまず、<code>next-env.d.ts</code> に定義した。
<h3>Adsense コンポーネントを作成する</h3>
<pre><code class="hljs language-tsx">// components/Adsense.tsx
import { useRouter } from "next/router";
import React, { useEffect } from "react";

const Adsense = () => {
 const { asPath } = useRouter();

 useEffect(() => {
 try {
 (window.adsbygoogle = window.adsbygoogle || []).push({});
 } catch (err) {
 console.log(err);
 }
 }, [asPath]);

 return (
 &#x3C;div key={asPath}>
 &#x3C;ins
 className="adsbygoogle"
 style={{ display: "block", textAlign: "center" }}
 data-ad-layout="xxx"
 data-ad-format="xxx"
 data-ad-client="xxx"
 data-ad-slot="xxx"
 />
 &#x3C;/div>
 );
};
</code></pre>
<h4>adsbygoogle の再セット</h4>
<code>asPath</code>を<code>useEffect</code> に渡して、ページ遷移毎に <code>window.adsbygoogle.push({})</code> するようにする。
これを指定しておかないと遷移しても広告が再読み込みされない。
<h4>DOM の更新通知</h4>
<pre><code class="hljs language-html">&#x3C;div key={asPath}>&#x3C;/div>
</code></pre>
親要素に<code>key</code>を指定しておくことで、どの要素に変更があったかを通知する。今回は、ページ遷移毎に更新したいので、<code>useRouter().asPath</code>を渡しておく。
これを更新しておかないと既にイベントを適用している旨のエラーがでてしまう。
<pre><code>"adsbygoogle.push() error: All ins elements in the DOM with class=adsbygoogle already have ads in them."
</code></pre>

[HTML] meta keywords の記述は SEO として不要

2020 年も<code>&#x3C;meta name="keywords"></code>を散見する 1 年であった。
<h2>TL;DR</h2>
<ul>
<li>検索エンジン（Google, Yahoo!, Bing）は meta keywords 情報を利用しない</li>
<li>SEO として meta keywords の記述はプラスにはならないが、マイナスにもならない</li>
</ul>
<h2>meta keywords とは</h2>
下記のような要素を<code>&#x3C;head></code>要素内に記述する。
<pre><code class="hljs language-html">&#x3C;meta name="keywords" content="メタタグ, keywords, seo" />
</code></pre>
<code>name</code>には<code>keywords</code>、<code>content</code>に単語（キーワード）をカンマ区切りで列挙する。
<h2>meta keywords と SEO との関係性</h2>
以前は SEO として効果があった。
しかしながら、ブラックハット SEO での乱用の影響で現在は Google 検索から評価されることはなくなった。2009 年 9 月には、「Google は、ウェブ検索ランキングで"keywords"メタタグを使用していません」と公式的に声明を出している。
<blockquote>
At least for Google's web search results currently (September 2009), the answer is no. Google doesn't use the "keywords" meta tag in our web search ranking. This video explains more, or see the questions below.
<a href="https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag" target="_blank" rel="nofollow noopener">Google does not use the keywords meta tag in web ranking 
</a>
</blockquote>
<a href="https://developers.google.com/search/docs/advanced/crawling/special-tags?hl=ja&#x26;ref_topic=4617741&#x26;visit_id=637448893659733022-2818023169&#x26;rd=1" target="_blank" rel="nofollow noopener">Special tags that Google understands | Google 検索セントラル</a>にサポートしているメタタグの一覧があるが、「すべてではない」と但し書きがあるものの <code>&#x3C;meta name="keywords"></code> の記載はない。
<hr>
また、Yahoo! や Bing についてもほぼ同様の見解を示している。
<h2>meta keywords を記述したままで良いのか</h2>
ブラックハット SEO での乱用された背景があるが、「検索ランキングで使用していない」と言っているだけなので記述していても SEO に悪影響はない（記述のありなしで評価が変わることはなさそう）。ただし、今後 <code>&#x3C;meta name="keywords"></code> の記述をブラックハットの判定として使用する可能性も否定できない。逆に評価されるようになる可能性もあるが、その際はどうようのアルゴリズムを使われることはないと思うので、いずれにしても書き換えは必要なように思う。そのため、個人的には意味のない記述はせず、記述しているのであれば削除しておいた方が無難だと考える。
<h2>まとめ</h2>
記述するのは自由だが、現在主要となっている検索エンジンでは SEO として meta keywords の記述は評価されない。SEO 目的ではなく meta keywords をサポートするアプリケーション、また SEO として、サポートする新進気鋭の検索エンジンはあるだろう。
意味のない meta keywords に時間を使うより、コンテンツの良さを検索エンジンにヒットさせるようなコンテンツ作りをする方が有意義だろう。また、無意味な HTML を記述していることになるのでレスポンスのサイズも無駄である。
<h2>参考</h2>
<ul>
<li><a href="https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag" target="_blank" rel="nofollow noopener">Google does not use the keywords meta tag in web ranking bookmark_border</a></li>
<li><a href="https://searchengineland.com/yahoo-search-no-longer-uses-meta-keywords-tag-27303#" target="_blank" rel="nofollow noopener">Yahoo Search No Longer Uses Meta Keywords Tag</a></li>
<li><a href="https://blogs.bing.com/webmaster/2014/10/03/blame-the-meta-keyword-tag/" target="_blank" rel="nofollow noopener">Blame The Meta Keyword Tag</a></li>
</ul>

竈門炭治郎をCSSだけで再現する

受け手は気にする必要はありませんが、送り手としては、これらを必要に応じて使い分けられると良いかもしれません。

<div class="more js-separate"></div>

<h2>違い</h2>
<ul>
<li><code>&#x3C;b></code>は太字（スタイル）</li>
<li><code>&#x3C;strong></code>は重要性を意味する（セマンティック）</li>
</ul>
テキスト読み上げ
<h3>strong</h3>
入れ子にして重要性を変えることができる。
<pre><code class="hljs language-html">&#x3C;p>&#x3C;strong>Warning.&#x3C;/strong> This dungeon is dangerous.
&#x3C;strong>Avoid the ducks.&#x3C;/strong> Take any gold you find.
&#x3C;strong>&#x3C;strong>Do not take any of the diamonds&#x3C;/strong>,
they are explosive and &#x3C;strong>will destroy anything within
ten meters.&#x3C;/strong>&#x3C;/strong> You have been warned.&#x3C;/p>
</code></pre>
<h2>参考</h2>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element" target="_blank" rel="nofollow noopener">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element</a></li>
<li><a href="https://momdo.github.io/html/text-level-semantics.html#the-strong-element" target="_blank" rel="nofollow noopener">https://momdo.github.io/html/text-level-semantics.html#the-strong-element</a></li>
<li><a href="https://web.archive.org/web/20091124170143/http://lists.evolt.org/archive/Week-of-Mon-20010521/032901.html" target="_blank" rel="nofollow noopener">https://web.archive.org/web/20091124170143/http://lists.evolt.org/archive/Week-of-Mon-20010521/032901.html</a></li>
</ul>

[JavaScript] 簡単なlocalhostの判別方法

[Windows7] ファイルの関連付けを変更する方法

との違い

<h2>状況</h2>
手元に iPhone などの iOS 端末がなく、iOS 特有のバグ確認ができなかった為、シミュレータで検証を行うことにした。
<h2>確認した環境</h2>
<ul>
<li>macOS Sierra</li>
<li>macOS Catalina</li>
</ul>
<h2>方法</h2>
残念ながら Xcode のインストールをする必要がある。
<ol>
<li>Xcode をインストール</li>
</ol>
初回起動をしていない場合は起動しておく 
その時に<code>Installing components...</code>が走るが、それがないとシミュレーターが起動しない
<ol>
<li>Xcode.app を右クリック 
→ パッケージの内容を表示 
<img width="384" alt="Finder" src="https://user-images.githubusercontent.com/3617124/97997291-27cbe400-1e2c-11eb-89a2-993b0ed387a5.png"></li>
<li>以下のパスにあるので実行する</li>
</ol>
<code>/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app</code>
エイリアスを作って、「アプリケーション」ディレクトリに入れておくと Lanchpad からもアクセスできて便利。

[WordPress] プレビュー時のみテンプレートを切り替える方法

[Amazonビデオ] 視聴中にレンタル期間が終了するとどうなるのか

[macOS] iPhoneシミュレーターをインストールする方法

<div class="more js-separate"></div>

<h2>状況</h2>
以下のようなページネーションがある。
<pre><code class="hljs language-html">&#x3C;ul class="pagination">
 &#x3C;li class="frist">&#x3C;/li>
 &#x3C;li class="previous">&#x3C;/li>
 &#x3C;li>01&#x3C;/li>
 &#x3C;li>02&#x3C;/li>
 &#x3C;li>03&#x3C;/li>
 &#x3C;li class="active">&#x3C;/li>
 &#x3C;li>&#x3C;/li>
 &#x3C;li class="last">&#x3C;/li>
&#x3C;/ul>
</code></pre>
<code>frist</code> <code>previous</code> <code>active</code> <code>last</code>以外の要素にスタイルを適応したい。こういう場合、<code>:not()</code>セレクタを使って指定を除外するが、複数指定する場合も同様に<code>:not()</code>セレクタを使う。
<h2>使用方法</h2>
Selectors Level 3 では、<code>:not(.frist, previous)</code>ように続けて指定できない。 
以下のように<code>:not()</code>を繋げて指定する必要がある。
<pre><code class="hljs language-css">&#x26;:not(.frist):not(.next):not(.previous):not(.last):not(.active) {
 /* style */
}
</code></pre>
Selectors Level 4 では、リスト形式を入れ込むことが出来る。
<pre><code class="hljs language-css">&#x26;:not(.frist, .next, .previous, .last, .active) {
 /* style */
}
</code></pre>
<a href="https://drafts.csswg.org/selectors/#negation" target="_blank" rel="nofollow noopener">https://drafts.csswg.org/selectors/#negation</a>

Home

Recent Articles

[CSS設計] ITCSSとは

husky v4 から v6 へ移行する手順の覚書

[Next.js] Qiita と Zenn の記事一覧（フィード）を取得する方法

[Next.js] Google Adsenseを表示させる方法

[HTML] meta keywords の記述は SEO として不要

Updated Articles

[HTML] meta keywords の記述は SEO として不要

[CSS設計] ITCSSとは

<b>と<strong>の違い

[macOS] iPhoneシミュレーターをインストールする方法

[CSS] :not()セレクタを複数指定する方法

[CSS設計] ITCSSとは

husky v4 から v6 へ移行する手順の覚書

[Next.js] Qiita と Zenn の 記事一覧（フィード）を取得する方法

[Next.js] Google Adsenseを表示させる方法

[HTML] meta keywords の記述は SEO として不要

[HTML] meta keywords の記述は SEO として不要

[CSS設計] ITCSSとは

<b>と<strong>の違い

[macOS] iPhoneシミュレーターをインストールする方法

[CSS] :not()セレクタを複数指定する方法

[Next.js] Qiita と Zenn の記事一覧（フィード）を取得する方法