Category / css
メイリオはCSSでイタリック（斜体）が効かない
2017-02-20 問題 CSSで文字が斜体になりません！ 答え メイリオではならないそうです。 https://www.microsoft.com/typography/fonts/family.aspx?FID=323 font-sty […]
【CSS】背景だけ斜めにする
2015-12-13 問題 スタイルシートで、背景だけ斜めにできますか？ 斜めに2色で区切ったりできますか？ 答え スタイルシートで回転させたりゆがめたりは可能。 transform の skew や rotate を使う。 要素全体を10度 […]
【CSS】Google+のボタンだけ位置がずれる
2015-12-08 問題 他のSNSボタンと一緒に並べると、Google Plus（G+）のボタンだけ上下位置がずれるのですが、なぜ？ 答え Google Plus のボタンは、以下のようなHTMLになっており、「vertical-alig […]
【CSS3】疑似否定クラス E:not(s)
2015-11-10 問題 諸事情で、.hogeのpre要素 <pre class="hoge">...</pre> はあるスタイルシートを適用して、class属性のない素のpre要素 <pre>...&l […]
【CSS3】画像を白黒写真にする（グレースケール、モノクロ、セピア調…）
2015-06-16 問題 画像をCSSでモノクロ写真にできますか？ 答え IEでfilterのサポートがなくなってうまくいかない。 FirefoxはurlでSVGを指定したらCSSで対応できる。Webkit系は簡単な記述で対応できる。 .g […]
【CSS3】くるくる回る星
2015-06-15 問題 くるくる回る星ください！ 答え 星は、文字、Webフォント、画像……、何らかの手段でご用意ください。 ★ Bootstrapベースのページなら、以下のHTMLでBootstrapのアイコンが使えます。 <sp […]
【CSS3】くるくる回る星（マウスオーバーで）
2015-06-14 問題 くるくる回る星ください！マウスオーバーで！ 答え 星は、文字、Webフォント、画像……、何らかの手段でご用意ください。 ★ Bootstrapベースのページなら、以下のHTMLでBootstrapのアイコンが使えま […]
【CSS】背景だけ半透明にしたい
2015-06-06 問題 opacityで半透明にすると、半透明にした要素の中身全部が半透明になっちゃう。 文字などは半透明にしないで、背景だけ半透明にしたい。 答え background-colorをrgba指定するとこんな感じになる。 […]
twitter bootstrap 3 で横幅をめいっぱい広げたいとき
2014-01-05 問題 bootstrapって、Extra small devices Phones (
twitter bootstrap3 を とにかく手軽に始められる雛形
2013-12-25 問題 twitter bootstrap3 やってみたいんですけど。 twitter bootstrap3 都度都度ダウンロードしてくるのめんどくさい。 twitter bootstrap3 もうちょっとサクッと使えない […]
【HTML】IE10のinput要素のxボタンを消す
2013-06-19 問題 IE10になって、フォームのテキスト入力欄に「×」ボタンや、パスワード入力欄に目のマークが出るようになったんだけど、これ消せますか。 答え CSSで消せる（-msプレフィックス付き）。 「×」マーク（クリアボタン） […]
【css】リンクをクリックしたときの点線を消す
2013-05-31 問題 このaタグにフォーカスがあたっているときに付く点線って消せない？ 答え これで消える(古いIE以外）。 a { outline: none; } もしくはこう。 a:focus, *:focus { outline […]
【CSS】ふわふわゆらゆらさせる
2013-05-15 問題 目立たせたいものがあるので、バナーや文字をちょっと動かしてみようと思う。 やっぱJavaScript？jQuery？ CSSで動かせるの？ 答え まだベンダープレフィックスが必要みたいだけど、こんな感じ。（IEでは […]
【css】いろんな形をスタイルシートで
2013-05-07 四角 .square { width:100px; height:100px; border:1px solid #000; background:yellow; } 平行四辺形 .parallelogram { wid […]
ページ分け関連スタイルシート（Paged media向け）
2013-05-01 問題 スタイルシートで印刷時の改ページを調整する page-break-afterプロパティなんかは、割と知られていると思うんだけど、他にも変わったスタイルシートある？ 答え 印刷関連のスタイルシートといったら、このあた […]
【CSS】改行を含むテキストの表示をスタイルシートで？
2013-04-18 問題 以下のような改行を含むテキストがあって、ブラウザの画面に表示したいんだけど、こういうときはphpのnl2br()を使うんだっけ？ 改行を含むテキスト あいうえおかきくけこ 本日は晴天なり ↓ nl2br($str) […]
【CSS3】メディアクエリをIE7、IE8でも使えるようにする
2013-04-12 問題 あら？IE8はメディアクエリ（cssの@media何々）使えないんでしたっけ？ 答え IE9からはメディアクエリが使えるけど、IE6、IE7、IE8は使えない。 こちらのスクリプトを使うと、何とかなるでしょう。 & […]
tableで、しましましたい
2013-04-03 問題 よくある表の表示で偶数行がグレー、奇数行が白みたいな、縞々の表示がしたいけど、どうするのがよい？ 答え 10年前なら、サーバー側で見た目のことも考慮して、あとは表示するだけのHTMLを出力したものですが、 < […]
twitter bootstrap を とにかく手軽に始められる雛形
2013-03-23 問題 twitter bootstrap やってみたいんですけど。 twitter bootstrap 都度都度ダウンロードしてくるのめんどくさい。 twitter bootstrap もうちょっとサクッと使えない？ そ […]
要素の間に線を引く為の３つの方法
2013-03-06 問題 リストの間に線を引きたいけど、最初と最後は線を引いて欲しくない。 こうすると一番上のリストの上にも線が引かれてしまう。 .example > li {border-top:1px solid red;} リス […]