CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
CSSのtext-shadowでシャドウをつけるときにハイライトを加えると、よりリアルで美しいシャドウが実装できます
イラストを描くときや写真のシャドウではハイライトが非常に重要ですが、CSSのシャドウでこの発想は抜けていました。 テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャドウになる実装テクニックを紹介します。 まずは、デモで実際のシャドウをご覧ください。 上部に2pxのハイライトを設定しています。 See the Pen highlight compliment to a text-shadow effect by coliss (@coliss) on CodePen. シャドウとハイライトのCSSは、下記の通りです。 カラーがoklch()で設定されていますが、hex値でも大丈夫です。ポイントは通常のシャドウと一緒にハイライト用のtext-shadowを上部に設定することです。 .highlighted-text-shadow { :r
Windows 10ミニTips(495) PCゲームやアプリの動作が妙に遅い？
「Windows 10ミニTips」は各回の作成時点で最新のWindows 10環境を使用しています。 「グラフィックの設定」を確認する GPUを使用するPCゲームやアプリが妙に遅いことがある。端的にいえばFPS（フレームレート: 1秒間に描画する数）が遅いケースだ。デスクトップPCでPCゲームなどを楽しんでいる方であれば、NVIDIA製やAMD製GPUカードを増設していることだろう。もっとも近年はノートPCでもGPU機能を強化するeGPU（外部GPU）対応デバイスも増えてきたが。 さて、冒頭で述べた問題は、内蔵GPUを使っていることが原因である可能性が高い。下図はUWP版Minecraftのスタート画面だが、ベータ版のため上部に使用するGPUやFPSを示している。画面では少々見にくいものの、このケースではIntel HD Graphicsを使用しており、FPSは「60.2」だ。 UWP版
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
