CSS | みどりのウェブ開発日記

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日時点で、ベストと考えている状態のもの) つっこみ大歓迎です。 海外の無料テンプレートなどでは、全称セレクタ(*)を使って 一気にマージ […]



トップに戻る