現在のCSSのトレンドが分かるサイト
こちらのThe State of CSS 2021では、2021年のCSSのトレンドが分かりやすくまとめられています。
例えばこちらのページでは、レイアウトをするときに使用されるいくつかの機能について、知らない・知っている ...
Chrome 97 の DevTools でWebブラウザの操作を記録・再実行できるように
来年1月リリース予定のChrome97で、DevToolsからWebブラウザ上の操作を記録・再実行できるようになるらしいです。
こちら
加えて、Puppeteer スクリプトへのエクスポートなどもできるようなの ...
Styled Components の &(アンパサンド)について
Styled Components で & を使うと、自身のコンポーネントを参照します。
具体的な動きは、公式ドキュメントにわかりやすいサンプルが載っているのでご覧ください。
特に面白いのは&& ...
HTML aタグでtarget=”_blank”を指定するときのセキュリティ的リスク
aタグにtarget=”_blank”を指定すると、遷移先のページで遷移元のページのwindowsオブジェクトを操作できてしまう、というリスクがあります。
これを防ぐには、rel=”no ...
CSSBattleで自分のCSSスキルを試せる
CSSBattleというサービスでは、表示されているいくつかのデザインから選択して、そのデザインを以下に少ないCSSコードでかけるかを競うサービスのようです。
20210305時点で13のデザインがあるみたいですね。
display flex で子要素の高さを揃えない方法
display flex を使った場合、デフォルトでは以下のようにAAAとCCCも、BBBの高さに揃います。
高さを揃えたくない場合は、align-items: baseline; を指定します。
<div s ...
JavaScript HTMLの子要素に対してループ処理をしたい時の注意点
以下のようなHTMLがあり、id=”parent”の子要素のdivのtextをすべてつなげた文字列を取得したいとします。
<div id="parent"> <div ...
プログラミング入門 CSSを微調整したいときのテクニック
例えば以下のようなHTML/CSSがあり、topとleftを使って黄色の四角をいい感じの位置に移動させたいとします。
<!DOCTYPE html><html lang="ja">&l ...
フロントエンドエンジニアになる場合に学んでおきたいこと
今回はフロントエンドエンジニアを目指す場合に、是非学んでおきたいことをご紹介します。
HTML/CSSまずはHTML/CSSです。これができないと始まらないので、しっかり学習してやりたいことをできるようにしておきましょう。 ...
HTML/CSS入門 10分で時計盤をつくってみよう
HTML/CSSで以下のような時計盤をつくってみます。
タスク一覧円を描く円の縁を描く
12を描く
1を描く
2から11を描く
円を描く
divで正方形を作り、border-radius: 5 ...