iOS16.7.xのSafariでネストされたgridレイアウトを使うと無限に再レンダリングが発生する問題に遭遇した
はじめに iOS16.7.xのSafariでネストされたgridレイアウトを使うと無限に再レンダリングが発生する問題に遭遇したので他に困っている人がいた時のために残しておきます。 注意 この記事ではSvelteで検証しているコードが出てきますが、自分の環境がたまたまS...
View Article【CSSの基本】
CSSの基本的な書き方。 セレクタにはデザイン変更の適用先を書く。プロパティのところには背景であったり、文字の大きさ等セレクタで指定された部分の何を変えるのかを決める。 値ではどのように見た目を変えるのかを書く。 セレクタ { プロパティ：値 } セレクタはa{〜}やdi...
View Article【placeholderに色をるける方法】
CSSの疑似要素::placeholderを使うと、やのプレースホルダーの色を変更することができる。 ＜SCC> .content::placeholder { color:red; } ＜HTML>
View ArticleTypeScriptだけで「なんちゃってOS」を作ってみた【コードあり】
はじめに ふと、「OSっぽいものって、TypeScriptだけで作れたりしないかな？」と思って、実際に作ってみました。 本物のOSとは違いますし、あくまでブラウザ上で動く なんちゃってOS です。 実行環境はあくまでブラウザですし、「OSって呼ぶには甘すぎる！」という...
View ArticleCSSのmin()・max()について
min(A, B) A と B のうち、小さい方の値を採用するので、最大値をとることができる。 min（calc(70vw / 3.9),70px） の場合、どんなに画面が大きくなっても、この要素は70pxより大きくならないということです。 言い換えると、 「ある...
View Articleflex-wrapで2列の横並びレイアウトを作る
概要 flex-wrapを使った2列の横並びレイアウトの作り方 marginを想定する場合、calc()を使う flex-wrapを使った2列の横並びレイアウト flex-wrapとは、CSS3におけるFlexboxのプロパティの一種である。アイテムがコンテナに収ま...
View ArticleHTML/CSS/JSでモダンなTODOアプリを開発！レスポンシブ対応・ダークモード・モジュール化まで徹底解説
こんにちは！今回は、Web開発の基本であるHTML/CSS/JavaScriptを使って、TODOアプリを開発し、さらにFirebaseで公開するまでの全工程を徹底解説します。 この記事でわかること この記事を読めば、ただTODOアプリを作るだけでなく、以下のような実践的...
View Article【WordPress × JavaScript】消費税減税シミュレーターを作ってリアルタイム計算とシェア機能を実装した話
はじめに 参議院選挙で話題の消費税減税。「実際どれくらい安くなるの？」という疑問を解決するために、消費税減税シミュレーターを開発しました。 この記事で分かること WordPressカスタムHTMLでのWebアプリ開発 JavaScript IME対応（iPhone日本語...
View ArticleJATS XML文書をHTMLに変換してVivliostyleでページ組版する
この記事の「サンプル」で扱ったJATS XML文書サンプルを、HTMLに変換してVivliostyleでページ組版してみます。(長い記事です…) JATS XMLやDITAをページ組版というと、XSLT1で変換してXSL-FO2やTeXやCSSで組んで…という解説を見...
View Article気になってた"HTMX"を使ってPHPファイルを改善し、処理の早さを検証しました！
シリーズ最後の記事です！ 5月（1話目）に作った、PHPの権限変更ファイルについて、6月（2話目）にデザインをしたので、今月は、そのデザインの実装とPHPファイルの改良をします。 また今回は、デザイン実装のみでなく、最近よく耳にするHTMXを使ってみたいので、今回の記事で...
View Article今になって daisyUI（Tailwind CSS プラグイン）に入門して少しだけ使ってみた
はじめに 以前見かけて気になっていた、Tailwind CSS のプラグインである「daisyUI」を少し試してみました。 ●daisyUI — Tailwind CSS Components ( version 5 update is here ) https://d...
View Articletext-autospaceの初期値をめぐる議論と現状
text-autospaceは、比較的新しいCSSのプロパティです。Safari 18.4でリリース済み、Google Chrome 140でリリース予定（記事執筆時点のChromeバージョンは138）です。 text-autospaceとは 簡単に言うと、これはCJK文...
View ArticleWeb基礎勉強用
はじめに この記事ではHTML・CSS・JavaScriptの基礎知識だけを書いています。 「実践する」より「理解する」ほうにフォーカスしていますので悪しからず。 この記事でわかること HTMLの基礎知識 CSSの基礎知識 JavaScriptの基礎知識 この記事...
View Article「MSゴシックファミリー」を指定しないでくれ！
1. 気でも狂ったのか！？ 何をとち狂ったのか、 「MSゴシックファミリー」を「最優先フォント」にしているサイトが、 少なからず存在する。 やめてくれ！ 文字がかすれて非常に見にくいのだ！ Chromeの標準フォント指定は無効化されて効かない！ 「MSゴシックファミリー」...
View Article# 【コピペでOK】Apple Vision Pro風デザインをあなたのサイトに！簡単JSライブラリ「Liquid Glass UI」の使い方
【コピペでOK】Apple Vision Pro風デザインをあなたのサイトに！簡単JSライブラリ「Liquid Glass UI」の使い方 こんにちは！Webサイト制作を楽しんでいる皆さん！ 「Apple Vision Proみたいな、ガラスの向こうが透けて見える、あのカ...
View Article【CSS】ありのままで〜幅、親に合わせて〜【Flexbox】【width: stretch】
この記事のように、width: stretch が一部のブラウザでリリースされたことで、「width: 100% ではなくてこちらを使うべき」という受け止め方がされています。 しかし、要素の横幅について、もっと気を付けておくべきこと が見過ごされています。 それは、...
View Articletailwindcss だけでハンバーガーメニューを実装してみる
この記事が解説すること tailwindcss だけでハンバーガーニューを実装する方法を解説します。 本気で tailwindcss だけしか使えない環境の方はそんなにいないと思うのですが、でも tailwindcss だけで済むのだったらそれが何よりという方はいると思っ...
View ArticleHTMLのインライン要素とブロック要素の違い
はじめに HTMLを書き始めたばかりの方にとって、「インライン要素」と「ブロック要素」という言葉は少し難しく感じるかもしれません。しかし、Webページを美しく・正しく作るためには、この2つの違いをしっかり理解することがとても重要です。今回は、それぞれの特徴や代表的なタグ、...
View Articleレスポンシブデザインでよく使う技
SPテクニック calcで要素を柔軟に調整する calc(Xvw / 3.9); vw(ビューポート幅) vw 単位は、ビューポート（ブラウザの表示領域）の幅に対して相対的にサイズを決定するため、要素をスケーリングするのに非常に強力。 /3.9 これはvwだ...
View ArticleHTMLの「インラインブロック要素」とは？~インラインでもブロックでもない存在~
はじめに HTMLやCSSを学んでいると、「インライン要素」「ブロック要素」と並んで「インラインブロック要素（inline-block）」という用語を耳にすることがあります。 でも、「インライン」と「ブロック」の違いはわかっても、「インラインブロックって何？」「どうやって...
View Article