フロントエンド– category –

【初心者向け】JavaScriptでbackground-positionを指定する方法｜CSSとの違いと実例コード CSSでよく使う background-position は、JavaScriptからも指定できます。本記事では、キーワード（left, center など）や数値（px, %, em）による指定方法、X/Y個...

画像の透過（透明にする）方法を初心者向けに解説！画像の透過には「画像の一部を透過する方法」と「全体を透過する方法」の2種類があります。目的に応じてCSSや画像編集ツール（Photoshopなど）を使い分けましょう！ CSSを使って画像全体を透過する 画像...

⒈ this が指すものを見分ける4つのポイント ⒉ this の基本ルール ⒊ どの this が使われるか判断するコツ ⒋　this を迷わないための対策 ⒌　まとめ this が指すものを見分ける4つのポイント JavaScriptで this が何を指すのかを決めるルールは、大きく分け...

画像をリピート（繰り返し表示）する方法 CSSの background-repeat を使うと、画像を繰り返し表示できます。デフォルトでは、背景画像はタイル状に繰り返される仕様になっています。 background-repeat の基本 ・画像を縦横に繰り返す（デフォルト） ・結...

疑似要素（Pseudo-elements）は、HTMLの要素に対して疑似的な内容や装飾を追加するためのCSSの機能です。特に ::before や ::after がよく使われ、要素の前後にコンテンツを追加できます。 ::before と ::after の基本 ・要素の前（::before）または後（::...

z-index の基本的な使い方 z-index はCSSのpositionプロパティ（absolute, relative, fixed, stickyのいすれか）が適用された要素の重なり順を制御するプロパティです。数値が大きいほど上に表示され、小さいほど下に表示されます。 z-index の基本 ・z-in...

フレックスボックス（Flexbox)は、要素を柔軟にレイアウトできるCSSのレイアウトモデルです。親要素に display: flex; を設定すると、子要素の配置やサイズ調整が簡単にできます。 基本的な使い方 ・水平に並べる ・結果display: flex;にすると、itemが横...

< DOCTYPE html > は、「これからHTML5の文書が始まりますよ！」とブラウザに伝えるための合図です。なので、とりあえず最初の1行目に必ず書く！これをDOC宣言と言います ブラウザへのお知らせ この1行がないと、ブラウザは「このページは古い形式の...

初心者の頃にmarginを使いすぎてデザインが崩れた経験がある方も多いのではないのでしょうか。今回はmarginの相殺について解説していきたいと思います。 marginの相殺とは HTMLとCSSにおけるmarginの相殺は、CSSレイアウトにおいて発生する特定の現象で、...

今回はmarginの使い方について説明をしていきたいと思います。 marginとは？　　　　　　　　　　 　要素の外側のスペース（余白）を指定するためのプロパティです。　要素とその周囲の他の要素との間に余白を設けることで、レイアウトやデザインを調整す...