Category / css
【CSS3】画像を白黒写真にする（グレースケール、モノクロ、セピア調…）
2015-06-16 問題 画像をCSSでモノクロ写真にできますか？ 答え IEでfilterのサポートがなくなってうまくいかない。 FirefoxはurlでSVGを指定したらCSSで対応できる。Webkit系は簡単な記述で対応できる。 .g […]
【CSS3】くるくる回る星
2015-06-15 問題 くるくる回る星ください！ 答え 星は、文字、Webフォント、画像……、何らかの手段でご用意ください。 Bootstrapベースのページなら、以下のHTMLでBootstrapのアイコンが使えます。 <span […]
【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;} リス […]
【CSS】ある属性が特定の値を持つ要素にのみスタイルシートを適用する
2013-02-24 問題 a要素の、target=”_blank” の指定のある場合だけ、あるスタイルシートを適用したいです。 答え 以下の書き方で、ある属性を持っている要素や、ある属性が特定の値を持つ要素などにスタ […]
【CSS】印刷するとリンクの後ろにURLが勝手に表示される
2013-01-20 問題 あるWebページを印刷すると、リンクの後ろにURLが表示されました。 ぜんぜん見た目どおりでなくて、ちょっと困るのですが。。。 印刷すると→ 答え 以下のようなCSSが組み込まれていると、a要素でhref属性がある […]
Webフォントでアイコン
2012-12-29 問題 イラストフォントをWebの画面で使いたいなあ。 特にアイコンとかに。 答え イラストフォントをWebフォントとして使って、アイコンの表示に使える。 文字なので、色はcolorで指定可能。大きさも font-size […]
【css】Webフォント、ローカルフォントの指定方法
2012-10-09 Webフォントやローカルにあるフォントファイルを使ってテキストを表示したいときは、以下のような書き方になる。 @font-face { font-family: 'MyFont'; src: url(/location/ […]