プログラムメモ
Category
cssスタイルシート
AI
TypeScript
PHPプログラムメモ
PHPフレームワークLaravel
Stripe / Laravel Cashier
JavaScript
jQuery
Node.js / Bun
WEB制作（html, css)
cssスタイルシート
Tailwind CSS
Bootstrap
サーバ構築・管理
Mac / Linux / FreeBSD シェルコマンドメモ
KUSANAGI
Pleskサーバ管理
Amazon AWS クラウド
Mac OSX おすすめフリーソフト
Karabiner-Elements
Auto Hot Key
MySQL
SQL Server（MS-SQL）
React
Vue3
Next.js
Vue.js
postgreSQL
Go
gulp(タスク自動化ツール)
デザイン関連（Photoshop・Illustrator）
Figma / Adobe XD / Sketch
フリー素材（写真、アイコン、フォント）
iPhone / iPad
WEBサービス / API
SQLite
エディタ・WEB開発環境 / Cursor / Web Storm / VS Code
Windows WEB開発（ASP.NET Core / C#）
Visual Studio for Mac (Xamarin.Mac)
WEBアクセシビリティ / Google Lighthouse / W3C Markup Validation
クラウド/VPS/レンタルサーバ/専用サーバ
リッチテキストエディタ / TinyMCE / Summer note
git
PHPフレームワークCodeIgniter
Go
最近のメモ
ブラウザで実際にレンダリングされたフォント名を知る
Google Chrome の ブラウザAIによる要約 Summarizer API
ターミナルで複数ウィンドウを管理する tmux
Mac で MAMP を利用する
Claude Code のはじめ方
Laravel で ソースコードの自動整形を行う pint
Google Cloud OAuth
読みやすい日本語フォントのcssカーニング - font-feature-settingsと文字詰めの調整について
Macで現在のローカルIP / グローバルIP アドレスを知るターミナルコマンド
git の「bareリポジトリ」を作って git worktree のフォルダを全て同じ階層にする
Laravelで一時的にメンテナンスモードに入る
Vite で react-app を初期化した後の eslint@8 , prettier インストール方法
Next.js の App Router ざっくりまとめ
重複のない状態を担保した配列に Set を使う
MacのコマンドラインでPNG画像を圧縮する方法8選
git worktree とは
Laravel で 全文検索機能（TNTSearch + Laravel Scout TNTSearch Driver ）
next.js instrumentation.ts
next.js のビルドサイズを解析する
vanilla jsでモーダルウィンドウ
Google PageSpeed Insights の速度アップ修正に対応する
cssの文章折り返しのデフォルト
margin: 0 auto; から左に 10px だけずらす
nginx で Laravel でのアクセスが 503 になるので調査した
検索
cssスタイルシート
トップに戻る
新規投稿
tags
クイックリンク
ブラウザで実際にレンダリングされたフォント名を知る
cssの文章折り返しのデフォルト
margin: 0 auto; から左に 10px だけずらす
flexboxでテキストに押し出されて要素が小さくなるのを防ぐ
先頭の 「 の隙間をなくす
読みやすい日本語フォントのcssカーニング - font-feature-settingsと文字詰めの調整について
flex で幅を比率で設定する
cssで改行コードをそのまま表示する
div を比率を決めて 100% 表示とする
cssで下のレイヤーの要素にスクロールを伝播しない方法
cssで親要素（親 div）のサイズ幅でレスポンシブ
新しいメディアクエリの書き方
「親DIVの横幅が300px以内の場合...」を実現するコンテナクエリ
css で長いテキストを ... で表示する。マウスオーバーで全て表示する。
英語テキスト（連続したアルファベット）の折り返し（divをはみ出る）の対応
cssのカスケードレイヤー(@layer)の書き方
widthの指定だけで レスポンシブな正方形を作成するcss
Google Map を css でモノクロ（白黒）にする
css の scrollでスクロールが発生している時のみスクロールバーを表示させる方法
「ある要素を内包する要素」の css セレクタ has()
CSSによるハンバーガーのアニメーション
css grid の header , footer , nav , main のよく使う例
css animation 終了状態で止める
css の min() max() minmax() clamp()
display: none → block でアニメーション
横並びにしたdivを「1つだけ自動伸縮」にし「残りは固定」にして「全体も自動伸縮」にする
css で 親子、兄弟のセレクタ
svg アイコンの線や背景の色をcssで変更する
cssファイル自身のlazyload (preload)
cssで position : fixed な要素を中央に配置する（上下左右センタリング）
flex で フッターの画面下固定
高さが半分の br
Pico.css を使用する
印刷用CSSで任意の位置で改行を送信する
table ヘッダ 固定のcss
css shadow のサンプル
css ul li 改行を揃える
cssの display:flex で 右端にそろえる / 両端に揃える
css transition ページ読み込み時 オフ
css で 最後の要素以外または最初の要素以外（2番目以降）のセレクタ
Mac OS Catalina （10.15）のフォント問題に対応する
css「複数行または1行のテキスト」を縦センタリング する
背景画像を複数指定する
cssで背景画像をスマホサイズに合わせて自動でサイズ変更させる
css3だけでグローバルメニューに使えるシンプルなドロップダウンメニューを作成する
cssで position : absolute な要素を中央に配置する（上下左右センタリング）
ブラウザで実際にレンダリングされたフォント名を知る
ブラウザで実際にレンダリングされたフォント名を知る方法1
ブラウザで実際にレンダリングされたフォント名を知る方法2
computed から以下を見ます
添付ファイル1
chrome-01.png
( 23.6 KBytes )
ダウンロード
添付ファイル2
chrome-02.png
( 99.6 KBytes )
ダウンロード
No.2622
07/02 11:42
edit
edit
delete
添付ファイル
){kind=link}
){kind=link}