株式会社プロネット

 

WEBシステム開発、ITコンサルティング、自社サービス、教育事業 - これからのビジネスへのIT活用ソリューションをご提案致します。

記事一覧

CSSで表示領域で表示しきれない文字を省略表示できるtext-overflow

表示領域からはみ出してしまう文字を省略表示したい、という場合の小ネタです。 横幅が足りずに文字がはみ出してしまう場合、「あいうえおかきくけこさし…」のように省略表示をするにはCSSのみで実現可能です。 使用す[…]

CSS:opacityで透過したエリアは文字も半透明になってしまう

背景を透過する場合、よく使われるのがCSSのopacityです。 個人的にも、Ajax処理中のLoading表示などで結構使います。   しかし、opacityで透過した要素の中で文字を表示すると文字ま[…]

CSS3で丸を描画する

CSS3のみで丸を描画する方法をご紹介します。   環境 IE9+ Chrome FireFox   DIVタグにクラスを指定します。 CSSは下記のように設定。 […]

【CSS】input要素の位置がずれるとき

こんばんは。 随分さぼってしまいました。 今日はCSSのお話しです。 先日input要素を横並びにした単純なフォームを作っていました。 ですがIEで見ると問題ないのに、ChromeとFireFoxでは位置がず[…]

【CSS】IE7でoverflow:scroll; が効かないとき

こんばんは。 IE7対応のお話しです。 CSSでoverflow:scrollとすれば通常はいい感じに動いてくれますが、 IE7の場合ある条件下で要素を突き抜けてスクロールされません。 それを解決したときの方[…]

【CSS】印刷時のみに適用させるCSS

こんばんは。 印刷機能付きのWEBサイトを作成する場合、印刷のときはこのボタンいらない!とかあると思います。 そんなときの方法です。 環境 IE Chrome FireFox 方法 メディ[…]

【CSS】imgタグを囲ったblock要素の下に余白ができたとき【chrome】

こんばんは。 DIVの中にIMGタグをぽんとひとつ置いた構成のとき、 Chromeだと下に5pxくらいのの余白が生まれます。 これを解消する方法を紹介します。 環境 GoogleChrome […]

【CSS】FireFoxにだけ効くhack

こんばんは。 FireFox用のハックを紹介します。 環境 FF 3 CSS Mozillaのベンダープレフィックスを使います。 @-moz-document url-prefix(“http[…]

【CSS】IE9にだけ効くhack

こんばんは。 あんまりハックは使いたくないのですが。 IE8、IE7あたりは動かないCSSが多いので別ファイルにまとめてもよいかと思うのですが、 ごくたまにIE9もOUTなときがありまして、そんなときはハックで対応[…]

【CSS】CSSだけで三角形を描画する

小ネタですが。 CSSでborderをうまく使うと、画像を使わずとも三角形が描画できます。   環境 IE6~11 Chrome FireFox Safari   C[…]