SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

Category / css

【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 もうちょっとサクッと使えない? そ […]

要素の間に線を引く為の3つの方法

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/ […]

bootstrap系UIフレームワーク

2012-07-21 そう呼んでよいのか分からないけど、bootstrap系UIフレームワーク、古くからあるものから、最近特に人気のものまで。見つけたものをメモっていきます。 Twitter bootstrap http://twitter. […]

【CSS】スタイルシートで三角形が描ける

2012-04-20 問題 三角形って、スタイルシートで描けないよね? 画像いるよね? 答え 普通の三角形なら描ける(こういうの▲)。 デモ ほら。 仕組み 境界線(ボーダー)を利用する。 50px * 50px のボックスの周りにいろんな幅 […]

【CSS】font-family について

2012-04-12 問題 font-family ってヒラギノとか MS ゴシック みたいな、とっても特定のフォントを表す名前じゃなくて、なんと言うか、汎用的なフォント名ってないの?ゴシック体とか明朝体みたいなフォント名。 問題 仕様書のf […]

【CSS】floatの解除

2012-03-28 問題 回り込み(float)を解除するとき、よくこうやるよね? style=”float:left; width:60%;” style=”float:right; width:30% […]

【CSS】ルールが4095個を超えるとIEで無視される

2012-03-06 問題 IEでスタイルシートが効かなくなっちゃったんだけど。 それも中途半端に。 あれれれれ? 答え IEにはこんな仕様があるそうだ。 Internet Explorer 6 to 9.(IE6から9) A sheet m […]

IE8で画像が表示されない!(twitter bootstarp のときなど)

2012-02-29 問題 twitter bootstarp を使って、.thumbnails でサムネイル画像を並べていました。 こんな風にして、ほとんどのブラウザで大丈夫なのに、 IE8のときだけ、こうなるんです。IE7は大丈夫なのに、 […]