技術ブログ

プログラミング、IT関連の記事中心

CSS

HTMLヘッダーにスタイルを設定する方法

目次 HTMLヘッダーにスタイルを設定する方法 基本的な構造 <style> タグの使用 まとめ HTMLヘッダーにスタイルを設定する方法 HTMLドキュメントの見た目をカスタマイズするためには、CSS(カスケーディングスタイルシート)を使用します。この記事では、HTMLのヘッ…

CSSの`position`プロパティ:`absolute` vs `fixed`

CSS

目次 CSSのpositionプロパティ:absolute vs fixed position: absolute 例 position: fixed 例 結論 CSSのpositionプロパティ:absolute vs fixed CSSにおけるpositionプロパティは、Webページ上の要素の位置を制御するために重要です。特にposition: absolu…

CSSのOpacityプロパティについて

CSS

目次 CSSのOpacityプロパティについて opacityの基本 子要素への影響 まとめ CSSのOpacityプロパティについて CSSのopacityプロパティは、要素の透明度を制御するのに非常に便利なツールです。この記事では、opacityの基本的な使い方と、その特性について解…

HTMLとCSSを使用してpタグ内のテキストを縦方向に中央揃えする方法

目次 HTMLとCSSを使用してpタグ内のテキストを縦方向に中央揃えする方法 CSSを使用した縦方向の中央揃え 結論 HTMLとCSSを使用してpタグ内のテキストを縦方向に中央揃えする方法 この記事では、HTMLとCSSを使ってpタグ内のテキストを高さ400pxのボックス内で…

flex-shrinkプロパティの使い方 CSS

CSS

目次 CSSのflex-shrinkを理解しよう flex-shrinkとは何ですか? flex-shrinkの使い方 flex-shrinkの注意点 まとめ CSSのflex-shrinkを理解しよう flex-shrinkは、Flexboxレイアウトで使用されるCSSプロパティです。 Flexboxは、コンテナ内のアイテムのレイア…

CSSで変数を使用する方法

目次 変数を使用する方法 サンプル 変数を使用する方法 以下の様に変数定義を行います。 ※「:root」はお作法だと思ってください。(実際は擬似クラスというものですが、詳しくは割愛します) :root { --sample-color: red; } 上記で用意した変数は以下の様に…

HTML/CSSで入力項目のプレースホルダーの文字色を変更する方法

目次 プレースホルダーの色を変える方法 特定のテキストフィールドのプレースホルダーの文字色を変更する方法 プレースホルダーの色を変える方法 以下のようにCSSを定義する事でプレースホルダーの色を変える事ができます。 ::placeholder { color: orange; …

React(TypeScript) WebPackでCSSの環境定数

目次 はじめに 環境毎のWebPackを修正する 環境毎のCSSを作成する 定義したCSS定数を読み込む CSS定数を使用する方法 はじめに 以下の記事を参考に、環境定数を用意してください。 https://reigle.info/entry/2022/08/20/100000reigle.info 環境毎のWebPack…

HTMLとJavaScriptとCSSでローディングを作成する方法(SpinKit)

目次 はじめに ローディングのJavaScriptの準備 ローディングのCSSの準備 ローディングを使用するHTMLの準備 ローディングの止め方 ソースコードの全量 はじめに 本記事では、SpinKitを使用したローディングの実装方法を記載します。 複数の画面で使用出来る…

CSSでメディアクエリを使用する方法

CSS

目次 メディアクエリとは 事前準備 スマホにのみCSSを設定する方法 タブレットにのみCSSを設定する方法 PCにのみCSSを設定する方法 問題点 まとめ メディアクエリとは 表示された画面環境に応じて適用するスタイルを切り替える機能。 一つのページで複数の異…