HTML/CSS

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

こちら

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

HTML/CSS

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

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

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

HTML/CSS

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

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

HTML/CSS

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

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

HTML/CSS, プログラミング入門

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

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

<div s ...

HTML/CSS, JavaScript, プログラミング入門

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

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

HTML/CSS, プログラミング入門

例えば以下のようなHTML/CSSがあり、topとleftを使って黄色の四角をいい感じの位置に移動させたいとします。

<!DOCTYPE html><html lang="ja">&l ...

HTML/CSS, JavaScript, プログラミング入門

今回はフロントエンドエンジニアを目指す場合に、是非学んでおきたいことをご紹介します。

HTML/CSS

まずはHTML/CSSです。これができないと始まらないので、しっかり学習してやりたいことをできるようにしておきましょう。 ...

HTML/CSS, プログラミング入門

HTML/CSSで以下のような時計盤をつくってみます。

タスク一覧円を描く
円の縁を描く
12を描く
1を描く
２から11を描く
円を描く

divで正方形を作り、border-radius: 5 ...

HTML/CSS, JavaScript

今回はSVGを使って以下のようなタイマーを作ります。


流れ

以下が作成の流れです。

SVGを使って円を描く
JavaScriptを使って徐々にメーターを減らす表現をする
SVGを使って円を描く

...