CSS
CSS フレームワーク Materialize でセレクトボックスの表示を動的に変更する方法
Materialize(https://materializecss.com/)は、名前のとおり、「マテリアル・デザイン」に特化したCSSフレームワークです。 モバイル向けにも使えて便利なのですが、時々、公式ドキュメント […]
マテリアルデザイン・CSSフレームワーク「Materialize」のモーダルでスタックオーバーフローが発生する件
おしゃれで見やすいマテリアル・デザインができるフレームワーク「Materialize」。 Twitter Bootstrap を使ってきた方なら、すぐに導入することができますが、最初のバージョンが出た当初は、JSのバグが […]
IE8で border: hidden にした時、勝手に黒い線が出るバグ
通常、テーブルの線を隠すときは border: none を使いますが hidden を使っても良いようです。 ただ、IE8において、table、tr、th、td、 全ての要素に指定しているにも関わらず 1px幅の黒い線 […]
レスポンシブレイアウトデザインのためのCSSテンプレート
よく使いそうなので備忘録としてまとめます。 最初に小さい画面から設定するのがコツです。 /* スマホ用① 幅320px */ /* スマホ用② */ @media only screen and (min-width: […]
IE6・7・8で使えるIE用のFirebug
ホームページの解析に欠かせない Firebug。 IE8からは開発者ツールが備わっていますが、Firefox派だと 使い慣れた Firebug の方がいいでしょう。 機能はFirefox版ほど充実しているわけではありませ […]
構文チェックサービスのまとめ
Eclipse のようなIDEの良いところは、構文チェッカが付いていて 間違いがあれば、その場で表示されることだと思います。 エディタでは、構文チェッカがほとんどありません。 色々調べると、Notepad++ では、PH […]
IE8以下でもCSS3の一部機能を使える「PIE.htc」の落とし穴と解決法
結論から言うと、 「角丸、グラデーション、ドロップシャドゥとエフェクトを 重ねると効かない」ということらしいです。 CSS3はブラウザによって書き方が異なるので、 ウェブサービスのジェネレイターを使ったり、 エディタのプ […]
テーブルの折り返しがきかなくなった場合
IE6からIE8へ変更した時など。 tdタグに幅を設定してある(width=”180″)のに セルの中身が長い文字列だったりすると、 折り返しがきかず、レイアウトが崩れることが あります。 一番簡 […]
ULやLIの入れ子になっているリストの問題
例えば、IE6時代の古いブラウザで見ていた時は 自動的にインデントが付いて、 ツリー状になっていたのが、 IE8をはじめ、モダンブラウザで見ると、 インデントが消えて、左端でまっすぐに そろってしまっていることがあります […]
CSSでINPUTのTYPE属性がTEXTの要素を設定する場合 -属性セレクタの使い方
表題のとおりです。 属性セレクタを使うと、 ピンポイントで設定ができて便利です。 気になるIEの対応ですが、 IE6では無効。 IE7以降なら使えるものの、互換表示時はダメみたいです。 よくあるのは、INPUT要素のマー […]
リンク(aタグ）の擬似クラス
リンク(aタグ）の設定は複数あります。 未訪問(:link), 訪問済(:visited), マウスオーバー時(:hover), 押している間(:active)の設定です。 使いこなせば、メニューも作れるようになります。 […]
chromeのﾌｫﾝﾄ自動調整機能をOFFにする
/* フォントサイズを指定したあと、以下を記述する chromeはフォントが小さい(8px以下)と自動的に見やすい大きさにしてしまう */ -webkit-text-size-adjust: none;
CSSスプライトの使い方
CSSスプライトとは 簡単に言うと、サイトで使用するボタンや背景画像などの部品を、 ひとつの画像にまとめてしまう技法です。 ひとつの画像にして、使用する要素ごとに、 どの位置のどの範囲を表示するかをスタイルシートで指定し […]
よく使うCSS3・角丸/ドロップシャドゥ
角丸 -moz-border-radius: 10px; border-radius: 10px; テキストのドロップシャドゥ text-shadow: 横方向のずれ(px) 下方向のずれ(px) ぼかし具合(px) # […]
スタイルシート 文字列を指定した幅を超えたら折り返させる
pre { width: 120px; white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line […]
スタイルシート 要素を半透明にするプロパティ
要素を半透明にするプロパティです。 IE6～ FireFox、Chrome、Safariで使えます。 img { filter: alpha(opacity=50); /* 0-100 */ zoom:1; -moz-o […]
スタイルシート よく使う書体のまとめ
よく使う書体 よく使うfont-familyをまとめました。 とっさにコピペで使えるように…。 PCにインストールされていないフォントを指定しても無効になるので、 ここでは標準で入っているフォントを指定しています。 シス […]
スタイルシート 要素の重なりについて
絶対配置・相対配置を使いこなすと 独自のダイアログやツールチップを作ることができます。 要素を重ね合わせるには 考え方は以下のとおり。 (1) 規準となるボックスまたはbodyを「position: relative;」 […]
IE6の対策まとめ
もうIE6は過去の遺物…と思っていたのですが、 役所などはまだ使っているようで驚きました。 サポート切れてるのに…。 出先で簡単に確認できるよう、まとめておきます。 IE6だけに適用 * html{ } / […]
ファイルアップロード用のタグ type=”file” をデザインする方法
ファイルアップロード用のタグ (input type=”file”) は、 スタイルシートでは装飾することができません。 でも、近頃のウェブサイトではかっこよくデザインしているものも たくさん見かけます。 どうするのかな […]
Notepad++で次世代Zen-codingのEmmetが使えます！
※2013年4月更新 Notepad++の最新バージョンでは、 標準プラグイン「Plugin Manager」より Emmetが簡単にインストールできるようになりました。 旧バージョンを使い続けたい方は、以下の記事を ご […]
テキストボックスをdisabledにすると送信されない
上記のようにしていると、内容が送信されません。 盲点…。 書き込みできないので、規定値を表示して確認だけ…という 使い方は出来ないようです。 参考URL： ・テキストボックスを無効にすると値が取得できない http:// […]
みどりの初期化スタイルシートを公開
長年、仕事で使っている初期化用のスタイルシートを公開します。 （2011年10月22日時点で、ベストと考えている状態のもの） つっこみ大歓迎です。 海外の無料テンプレートなどでは、全称セレクタ（*）を使って 一気にマージ […]
