HTML/CSS

これまでにこんな経験はないでしょうか。

Webサイトのアクセスしてリンクをクリックしようとしたら、直前で広告の画像が表示されてしまい、リンクの位置が下にずれて、間違って広告をクリックしてしまった。

このようなこ ...

Lighthouseとは

Lighthouse は Google 公式の、WebサイトのSEOやパフォーマンスを計測するツールです。

導入方法

Chromeの拡張としてインストールするのが簡単です。

こちらのページ ...

スライダーは input タグの type=”range” です。

デフォルトの値を value に、最大値を max に、 最小値を min に設定できます。

以下はスライダーの値を変 ...

こちらのThe State of CSS 2021では、2021年のCSSのトレンドが分かりやすくまとめられています。

例えばこちらのページでは、レイアウトをするときに使用されるいくつかの機能について、知らない・知っている ...

来年1月リリース予定のChrome97で、DevToolsからWebブラウザ上の操作を記録・再実行できるようになるらしいです。

こちら

加えて、Puppeteer スクリプトへのエクスポートなどもできるようなの ...

Styled Components で & を使うと、自身のコンポーネントを参照します。

具体的な動きは、公式ドキュメントにわかりやすいサンプルが載っているのでご覧ください。

特に面白いのは&& ...

aタグにtarget=”_blank”を指定すると、遷移先のページで遷移元のページのwindowsオブジェクトを操作できてしまう、というリスクがあります。

これを防ぐには、rel=”no ...

CSSBattleというサービスでは、表示されているいくつかのデザインから選択して、そのデザインを以下に少ないCSSコードでかけるかを競うサービスのようです。

20210305時点で13のデザインがあるみたいですね。

display flex を使った場合、デフォルトでは以下のようにAAAとCCCも、BBBの高さに揃います。

高さを揃えたくない場合は、align-items: baseline; を指定します。

<div s ...

以下のようなHTMLがあり、id=”parent”の子要素のdivのtextをすべてつなげた文字列を取得したいとします。

<div id="parent"> <div ...