TOP  >  CSS・スタイルシートTIPS

2017年01月27日 12:31

CSS3を使いマウスオーバーで下線ボーダーをニョキッと伸ばす

CSS3を使い、マウスオーバーでボーダーを左から右にニョキッと伸ばす方法です。

:after擬似要素を使って、
マウスオーバー後に要素が伸びるようにします。

2011年12月05日 17:48

Firefoxで長い半角文字列が折り返されない(改行されない)現象の回避法

IEで長い半角文字列の文章を折り返したい場合、
「word-break:break-all」
を指定して折り返すようにしますが、
Firefoxの場合は対応していなかったので、
JSを使ったりという対応をしていました。

ですが以下のコードで、
Firefoxで長い半角文字列が折り返されない(改行されない)現象を
回避することができます。


word-wrap: break-word;

2011年11月16日 12:43

IEでもmedia queriesに対応させる方法

mediaqueries.png


CSS3のmedia queriesを使ってスタイルシートを振り分ける場合、
IEではCSS3がサポートされていないので使用できませんが、
以下のjavascriptを読み込むことで、
IEでもmedia queriesを使用することが可能になります。


css3-mediaqueries.js

2011年09月21日 21:39

【iPhone・iPad】縦向きと横向きでCSSを分けて読み込む


iPhone・iPadなどを縦向き、横向きにした場合でレイアウトを替えたい場合、
一つのCSSで縦横の変化に合わせたものにせず、
CSSを分けて読み込むことが可能です。

2011年08月20日 15:31

tableにborder-radiusを指定しても効かない?角丸をtableをCSS3で実装する際の注意点

tableを角丸のデザインにしたい場合、
画像やCSSの背景画像を使って―というやり方が一般的(?)でしたが、
CSS3のborder-radiusを使って、
簡単に角丸のデザインのtableを実装することができるようになりました。

単純にtableにborder-radiusを指定するだけなのですが、
1点だけ注意が必要です。

それは、
「border-collapseでcollapseを指定すると角丸が効かない」
ということです。

2011年06月23日 16:45

CSS3 PIE(pie.htc)使用時にIEで正しく印刷ができない

IEレイアウト崩れの表示例

CSS3のプロパティをIE8でも反映させて使うことができる、
とても便利なbehaviorスクリプトCSS3 PIE(pie.htc)。

http://css3pie.com/

角丸やドロップシャドウの処理は、
画像よりCSS3でやる方がスマートなので使っていたのですが、
IEで印刷した時にレイアウトが大きく崩れるという現象にハマってしまいました。

2011年02月04日 00:05

CSS3でボックスにドロップシャドウ

CSS3を使ってボックスにドロップシャドウをかけたい場合、
基本的には以下のような記述になります。
W3C CSS3準拠のwebkit系(Safari, Chrome)とMozzilea系(Firefox)に分けての記述です。

Safari3など用のwebkit(W3C CSS3準拠)に対する記述
-webkit-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;
FirefoxなどMozilla系ブラウザに対する記述
-moz-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;
CSS3の記述
box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

表示例は次のようになります。

HTML5&CSS3辞典

2011年01月05日 13:54

記述する順番を考慮したCSSの書き方

CSSのプロパティを書いていく際、
なんとなく思いついた順番、ルールで記述していってもちゃんと表示すれば良いのですが、
書く順番をきちんとルール付けしておくことで、
見た目にきれいなCSSになり、
複数人で編集する際も間違いを防ぐことができます。

2010年09月08日 14:51

IEでCSS3のグラデーションを反映させるハックの書き方

CSSで背景をグラデーションにしたい場合、
CSS3を使って背景をグラデーションにしますが、
その際にはCSS3に対応していないIEではそのまま書いても反映されません。

IEは無視する、behaviorスクリプトを読み込んで反映させるなどの対応がありますが、
この他にIEの独自仕様である「filter(画像・テキストにフィルタ効果を与える)」プロパティを使って、
CSS3と同じように表示させることができる方法があります。

2010年08月20日 16:42

CSS3PIE(PIE.htc)が効かないと思ったら

IEをCSS3対応にしたい場合に使われる、
CSS3 PIE_ CSS3 decorations for IEなどの,
javascript(.htcファイル)を使った方法ですが、
使う場合に注意する点があります。

2010年05月25日 17:58

CSS3グラデーション背景の書き方

CSSでグラデーション背景を指定する場合の書き方には2種類あり、
W3C CSS3準拠のwebkit系(Safari, Chrome)とMozzilea系(Firefox)を
それぞれ指定します。(角丸の場合と同じ)
基礎的な書き方としては以下のような書き方になります。

Safari3など用のwebkit(W3C CSS3準拠)に対する記述
-webkit-gradient(linear, 開始する位置, 終了する位置, from(開始する色), to(#ff0)終了する色));
FirefoxなどMozilla系ブラウザに対する記述
-moz-linear-gradient(方向, 開始する色, 終了する色);

指定できる要素は『background』と『background-image』です。

2010年05月09日 01:33

CSS3で角丸

CSS3以前は要素に背景画像を引き何かとちょっとしたところで使いたくても面倒だった角丸の処理ですが、
CSS3簡単な記述で表示が可能です。


Safari3など用のwebkit(W3C CSS3準拠)に対する記述

-webkit-border-radius: ○px;

FirefoxなどMozilla系ブラウザに対する記述

-moz-border-radius: ○px;


上記を記述、○pxで角丸のサイズを指定すれば完成です。

角丸のサイズによって以下の表示例一覧のように見え方が変わります。

2010年05月08日 01:03

CSS3でIEでも角丸にする方法

CSS3で要素の角丸を実現する機会も増えてきていますが、
IEでも表示できるようにするには、
Google Codeで配布されているhtcファイルを利用します。

2009年08月06日 11:15

opacityを使ってCSSだけで画像をマウスオーバーでハイライト処理する

マウスオーバーした時に画像置換しなくても光るように見せる方法。

pacityはCSS3で追加される予定のプロパティです。

2009年06月21日 22:54

CSS3コード確認(CSS3.Info)

css3info.jpg

CSS3に関する情報サイトで、
コードの一覧などが見やすくまとめられています。

2009年06月16日 01:13

display : inline-blockで横並びのボックスの高さを合わせる

CSS 2.1 で定義されている display プロパティの値の一つ

display : inline-block

この指定をすることでfloat:left等で指定した横並びのボックスの行の高さを、
一番高さが高いボックスの高さに揃えることができます。

2009年06月14日 00:31

CSS3とは

Cascading Style Sheets, level 3 (CSS3)
CSS3では全体がモジュール化され、ユーザーエージェントがどのモジュールに対応し、どのモジュールに対応しないか自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。現在、どのモジュールも勧告には至っていない。

2009年06月11日 23:37

フォントサイズ %指定

Yahoo! User Interface Library(通称「YUI」)というJavaScriptのライブラリ内で利用されているfonts.cssの中のフォントサイズチャートを参考にしたCSSのフォントサイズ %指定の記述です。

2009年06月01日 01:34

Firefox、Safariでdivの背景が正しく表示されない現象の回避法

FirefoxやSafariで、
『親要素に背景画像や背景色を指定して子要素でfloatが行われている場合
親要素の背景画像や背景色はfloatが行われない子要素までにしか反映されない』
という挙動の回避法です。

TOP  >  CSS・スタイルシートTIPS




正当なCSSです!