Flexboxで枠の幅をコンテンツの幅に合わせたサイズにするコードを紹介します。概要Flexboxで枠の幅をコンテンツの幅に合わせたサイズにする場合には、flex:0; を指定します。書式flex:0;実装例コード以下のHTML、CSSファ
align-items と align-content の違いを紹介します。概要align-items プロパティはFlexbox行内での整列方法を設定します。一方、align-content プロパティは内部の枠全体を整列する方法を設定し
Flexbox の内部の枠の行の枠の高さは揃えた状態で、内部の枠の縦方向の整列方法を変更するコードを紹介します。概要Flexbox を利用して枠を段組みして、枠の折り返しも発生する場合に、枠の行の高さは揃えた状態で、縦方向の整列方法を変更す
Flexbox の内部枠の縦方向の配置を変更するコードを紹介します。概要Flexbox を利用して枠を段組みした場合に、枠の縦方向の配置を変更するにはalign-items プロパティを利用します。縦方向のアライメント枠の横方向のアライメン
Flexbox の枠で一番右の枠を1つだけ右側に配置するコードを紹介します。概要Flexboxの枠で、一つの枠だけ右に配置する場合、Flexboxの枠にwidthプロパティを設定し、margin-leftプロパティにautoを設定します。例
Flexbox の枠で一番左の枠を1つだけ左側に配置するコードを紹介します。概要Flexboxの枠で、一つの枠だけ左に配置する場合、Flexboxの枠にwidthプロパティを設定し、margin-rightプロパティにautoを設定します。
HTMLページで要素の上にマウスポインタが重なるとポップアップウィンドウを表示する動作 - ToolTips(ツールチップ) を作成するコードを紹介します。概要Windows アプリケーションではツールバーのボタンなどにマウスポインタが重な
ブレンドモードを設定した box-shadow の影を表現するコードと表示結果を紹介します。概要こちらの記事ではCSSの box-shadow プロパティを利用して枠に影を描画するコードを紹介しました。box-shadow の影にブレンドモ
CSSでHTML要素のブレンド(合成)モードを設定するコードを紹介します。概要CSSでHTML要素のブレンドモードを設定するには mix-blend-mode プロパティを利用します。書式mix-blend-mode:(合成モード)合成モー
CSSで枠に影(ドロップシャドウ)をつけるコードと表示結果を紹介します。概要CSSを利用してブロック要素にドロップシャドウをつける場合は、box-shadow プロパティを利用する方法とfilter: drop-shadow()を利用する方
ポップアップ領域を表示するコードを紹介します。概要ポップアップ領域を表示する場合、CSSのpositionプロパティで absolute を指定し、visibility プロパティを "hidden" に設定します。ポップアップ領域を表示す
CSS変数のスコープの範囲を紹介します。クラス内で宣言した変数のスコープ下記のHTMLファイルとCSSファイルを準備します。ScopeVariable.html<!DOCTYPE html><html><hea
CSSで変数を宣言し値の代入、変数の参照をするコードを紹介します。概要CSSで枠の幅や線の太さ、色の設定などの値を変数で設定して複数の項目を1か所で設定できるようにしたい場合があります。この記事ではCSSで変数を利用する方法を紹介します。書
scaleされた要素の位置がずれる現象について紹介します。現象の確認下記のHTMLファイルとCSSファイルを作成します。position-scale.html<!DOCTYPE html><html><head
Transition プロパティを利用してCSSで要素を拡大、縮小させるアニメーションを作成します。概要Transition プロパティを利用すると、クラスが設定された際の変化を時間をかけて徐々に変更できます。この機能を利用して要素に対する
CSS等を利用してクリックでピックアップされてズーム表示される枠を作成します。概要一つの枠(エリア)内に複数のコンテンツ枠があり、クリックをして選択するとズームされ枠全体に表示する動作を実現します。完成イメージ一つの枠に複数の枠(この例では
画像と同じサイズのレスポンシブ枠を作成し、画像を枠に合わせて表示するコードを紹介します。概要画像と同じサイズのレスポンシブ枠を作成して、画像を枠に合わせて表示します。ウィンドウ幅が広がると、レスポンシブ枠の幅が広がり画像の大きさも合わせて拡
親要素のpositionプロパティの設定の違いによる position:absolute の動作の違いを紹介します。概要要素の子要素にposition:absoluteを指定した要素がある場合、親要素のpositionプロパティの設定により
CSSで正方形のレスポンシブ枠を表現するコードを紹介します。概要ページ内に正方形のレスポンシブ枠を表示したい場合があります。正方形の枠を表示する場合には、aspect-ratio プロパティを利用して縦横幅を固定して表示する方法が実現が容易
縦横比(アスペクト比)が固定されたレスポンシブ枠を作成するCSS, HTMLのコードを紹介します。概要レスポンシブに対応したページで、枠の大きさをあらかじめ決定したい場合があります。高さを固定する場合はwidthプロパティ等に高さを設定すれ
CSS中にUnicode文字を記述するコードと表示結果を紹介します。補足HTMLにUnicode文字列を記述する場合はこちらの記事を参照してください。概要CSSのcontentプロパティにUnicodeの文字を記述する場合の書式を紹介します
ブロック要素に指定したいが、ブロック要素を改行させたくない場合のすらいる記述方法を紹介します。概要ブロック要素に設定した場合、ブロック要素の終了で改行されてしまいます。ブロック要素に設定はしたいがブロック要素の終了で改行させたくない場合はd
CSSを利用して、Webページでスクロールできないようにする方法を紹介します。概要こちらの記事では、スクロールやタッチ、キーダウンイベントをキャンセルすることでスクロールできないようにする方法を紹介しました。この記事では別の方法として、CS
Webページでドロワーメニュー (Drawer Menu) を実装するコードを紹介します。概要スマートフォン向けのページなどでハンバーガーメニューアイコンをタップすると右側や左側にメニュー (ドロワーメニュー)が表示されるページがあります。
CSSでリンクを無効にするコードを紹介します。概要HTMLのページではAタグでリンクが表示されてる状況で、CSSでリンクを無効にしたい場合があります。CSSでリンクを無効にするには pointer-events プロパティを利用します。書式
CSSのキーフレームアニメーションを利用して、要素をフェードアウトするコードを紹介します。概要こちらの記事では transition プロパティを利用してフェードイン、フェードアウトの実装をしましたが、この記事ではキーフレームアニメーション
CSS アニメーションの変化の種類 (イージング)について紹介します。概要アニメーションの変化のタイミングを指定するための関数をイージングと呼びます。CSSアニメーションでは用意されているイージングがあり、変化させたいタイミングに応じてイー
CSS キーフレームによるアニメーションのコードを紹介します。書式以下の書式を利用します。animation: (キーフレーム名) (アニメーション時間) (イージング) ();animation: (キーフレーム名) (アニメーション時間
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更するコードを紹介します。概要Microsft EdgeやGogle Chromeではテキストボックスにフォーカスが入り編集状態になるとテキストボックスの外枠が太く表示されます
テキストボックスにマウスカーソルが重なったときに、テキストボックスの枠を変更するコードを紹介します。概要テキストボックスにマウスカーソルが入って重なった際にテキストボックスのスタイルを変更するには、hover疑似クラスにスタイルを記述します
Microsoft EdgeやGoogle Chromeでフォーカスされたテキストボックスの太い線の外枠を表示しないようにするコードを紹介します。デフォルトの動作コードデフォルトの動作を確認します。下記のHTMLファイルを作成します。<
OSのカラー設定がダークモードの場合にダークモード対応したWebページを表示し、手動でカラーモードを変えられるようにするコードを紹介します。概要こちらの記事でOSのカラー設定に応じてWebページのカラーを変えるコードを紹介しました。また、こ
JavaScriptを利用して、ページのカラーテーマをページ表示中に変更できるようにするコードを紹介します。概要こちらの記事では、prefers-color-scheme を利用して、OSのカラー設定がダークモードの場合にダークモードに対応
OSやWebブラウザのカラー設定がダークモードの場合に、ダークカラーやダークモードに対応したスタイルでWebページを表示するコードを紹介します。概要2018年以降OSのカラー設定で画面の背景を黒系のカラーに設定する「ダークモード」が利用でき
CSSで親要素の幅やページの幅の比率で幅のサイズを指定するコードを紹介します。概要CSSで親要素の幅の比率で幅を指定する場合は % 単位を利用します。例 : ページ(bodyタグ)の直下の要素の場合下記のHTMLファイルを作成します。<
CSSで画像を角丸長方形、角丸正方形 にマスクするコードを紹介します。概要こちらの記事ではCSSを利用して円形にクリッピングするコードを紹介しました。この記事では、CSSを利用して画像を角丸にしてクリッピングするコードを紹介します。基本はb
