ウェブ制作ノウハウ CSS：半透明の黒背景を「opacity」で実装すると上手くいかない
こんにちは、さち です。
上の画像のように、コンテンツの上に半透明の黒い背景をかけて、さらにその上に別のコンテンツを表示する。こんなデザインをよく見かけると思います。
このようなデザインを CSS の opacity を使っ...
CSS
ウェブ制作ノウハウ ウェブ制作ノウハウ CSS：ウィンドウが大きい時だけフッターを下部に追従させる
こんにちは、さち です。
今回は、ウェブサイトを作る時に、CSS だけで「フッター」をウィンドウの下部に追従する（貼り付くようにする）方法について書いていきます。
常に追従するのは簡単です。しかし、ウィンドウのサイズが大...
ウェブ制作ノウハウ Firefox：現在のウィンドウサイズをリアルタイムで確認したい
こんにちは、さち です。
先日、レスポンシブデザイン（ブラウザのウィンドウサイズによって表示が適切に切り替わる）サイトの編集をしていました。
デザイン（CSS）の切り替えが正常に行われるか、ブラウザのウィンドウサイズと比...
無料ですごいソフトウェア HTML, CSSの文字コードを一括変換する
こんにちは、さち です。
サイトをいくつか運営しているんですが、むかし作ったサイトは「文字コード」が「EUC-JP」になっています。いまサイトを作るなら「UTF-8」一択です。でも、当時はあまり普及していなくて EUC-JP が主...
ウェブ制作ノウハウ CSS： body の height を100％にしても上下に広がらない
こんにちは、さち です。
先日、サイト（ディスプレイ ドット抜けテスト）を作っているときに
ページを画面いっぱいに広げようとしていました。
そこで、body の height を100％にしました。
しかし、思った通...
Firefox（たまにニコ動） 拡張機能「Stylish（CSS）」を使ってサイトのテキストを書き換える
こんにちは、さち です。
普段、Firefox でサイトのテキストを書き換えたい時には
拡張機能「Greasemonkey」を使い JavaScript で行なっています。
しかし、ふと思ったんです。
ほんの少し...
ウェブ制作ノウハウ CSS： widthなどの数値を自動計算してくれる神機能「calc」
こんにちは、さち です。
CSS には「margin」「padding」「width」「height」など
数値を指定するプロパティがたくさんあります。
ただ、サイトの構造が複雑になると
固定の数値を指定するだけでは...
ウェブ制作ノウハウ IEだけに適用されるHTML「条件付きコメント」の使い方
こんにちは、さち です。
ウェブサイト制作の経験がある人には有名な話なんですが
旧バージョンの Internet Explorer（以下：IE） は
ウェブ表示に関する 特殊な挙動，未実装の問題 が目立ち
サイト制作時に...
ウェブ制作ノウハウ サイトに載せるHTML, CSS, JS のコードを自動で色分け
こんにちは、さち です。
ブログを書くときに
HTML, CSS, JavaScript などのコードを載せることがあります。
普段、コードは対応エディタを使って書くので
「タグ」などが自動で色分け（ハイライト）され...