CSS liefde - CSSの使える!と思えるテクニックを紹介。

メニューの:active時に凹ませているように影をつける

fukuchi — Sat, 28 May 2011 01:00:42 +0000

よく見かけるマウスでクリックしたときに起きる(:active)の影をCSS3でやってみようということです。

対応ブラウザ◯ Google Chrome / Firefox / Opera× Safari / InternetExplorer

HTML source


  menu1
  menu2
  menu3
  menu4
  menu5

この場合は、簡単にul>li>aという感じにソースを書きます

CSS source

ul {
	width: 800px;
	margin: 20px auto;
	border: 2px solid #FF0;
	box-shadow: 0 0 3px #ccc;
	border-radius: 3px;
	overflow: hidden;
	font-family: 'Arvo', arial, serif;
}

ul li {
	float: left;
}
ul li a {
	display:block;
	width: 158px;
	border-right: #F96 1px solid;
	border-left: #FF0 1px solid;
	background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.36, rgb(255,196,0)),  color-stop(0.84, rgb(255,217,0)) );
	background-image: -moz-linear-gradient(  center bottom,  rgb(255,196,0) 36%,  rgb(255,217,0) 84% );
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	line-height: 55px;
	text-align: center
}

今回は画像を使わずにグラデーションで背景を表示しています

ul li a:hover, ul li a:active {
	background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.36, rgb(255,128,0)),  color-stop(0.84, rgb(207,86,0)) );
	background-image: -moz-linear-gradient(  center bottom,  rgb(255,128,0) 36%,  rgb(207,86,0) 84% );
	box-shadow: 0px 0px 3px #888 inset;
	color: #fff;
}

こちらもグラデーションを使っています。

ul li a:active {
	box-shadow: 0px 0px 6px #444 inset
}

こちらが押している感じにするCSSです。
CSS3のbox-shadowを記述し、最後のところにinsetを入力してあげると内側への影がつきます。ただしinsetと付けないものとは併用できません

ボックスをスクロールしても固定する（IE6対応）

fukuchi — Mon, 19 Apr 2010 14:10:40 +0000

下にフッターを固定したり、右下などにページトップボタンを固定したりできます。
IE7からは、position:fixedに対応していますがIE6では対応していないので少し違うやり方でやります。

対応ブラウザ◯ Google Chrome / Safari / Firefox / Opera / InternetExplorer

HTML

固定部分

 Title:
ボックスをスクロールしても固定する（IE6対応）

◯ Google Chrome / Safari / Firefox / Opera / InternetExplorer




Copyright © 2009 CSS liefde All Rights Reserved.

コンテンツを入れる部分（スクロールする部分）を#wrap
固定したい部分は、

固定部分

としています。

CSS

body {
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important
}
#wrap {
	position:absolute;
	width: 100%;
	height: 100%;
	overflow:auto;
	z-index: 1;
	margin: 0 !important;
	padding: 0 !important
}
.fixed {
	position:absolute;
	width: 200px;
	line-height: 80px;
	text-align:center;
	top: 30px;
	left: 50px;
	z-index: 11;
	background-color:#000;
	color: #ccc
}
.footer {
	position:absolute;
	width: 500px;
	line-height: 80px;
	text-align:center;
	bottom: 10px;
	left: 10px;
	z-index: 11;
}
.tit {
	margin-top: 100px;
}
.aa {
	margin-left: 100px;
}

bodyは、MarginとPaddingを０にして、Overflow:hiddenにしてスクロールしないようにします。
#wrapにPosition:absoluteとWidth/Heightを100%にします。Z-index:1を指定します。Overflow:autoでスクロールが出てくるようにします。
.fixedには、#wrapと同じようにPosition:absoluteを指定。固定したいサイズを指定して、Z-index:11にします。そしてLeft:XXpxなどで場所をしいています。

CSS3でやる！マルチカラム

fukuchi — Fri, 02 Apr 2010 12:14:42 +0000

float:leftでふつうはカラムを使ってやりますが、CSS3からは簡単にマルチカラムを作ることができます。

対応ブラウザ◯ Google Chrome / Safari / Firefox×Opera / InternetExplorer

HTML

3カラム
あああああああああああああああああああああ
略
 あああああああああああああ...略
column-width
あああああああああああああああああああああ
略
 あああああああああああああ...略
column-gap
>あああああああああああああああああああああ
略
 あああああああああああああ...略
column-rule
あああああああああああああああああああああ
略
 あああああああああああああ...略

CSS

.columns {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	background-color:#FFF;
	padding: 10px;
}
.column {
	background-color:#FFF;
	padding: 10px;
}
.width {
	-moz-column-width: 145px;
	-webkit-column-width: 145px;
	width: 1
}
.gap {
	-webkit-column-gap: 5em;
	-moz-column-gap: 5em;
}
.rule {
	-webkit-column-rule: 4px solid pink;
	-moz-column-rule: 4px solid pink;
}
p {
	margin: 5px;
	padding: 5px;
	background-color:#ffd2ff;
}

.columnsは　column-count: カラム数; Firefox様に-moz- Webkit用に-webkit-をつけます。
.columnは column-width を指定してサイズを決めます。CSSのWidthと殆ど同じです。-moz-/-webkit-/が必要
.gapは column-gap を指定してカラムの間の余白をつけることができます。Padding: x ここと同様; -moz-/-webkit-/が必要
.ruleは column-rule を指定してカラムの間のボーダーを表示します。指定方法はCSSのBorderと同様です。 -moz-/-webkit-/が必要

半透明ボックス(CSS3/CSS)

fukuchi — Fri, 02 Apr 2010 08:53:55 +0000

背景を透過したい時に使うのが opacity です。
これは、IE/Firefox/Opera/Safari/Google Choromeなどに対応しています。
CSS3では、背景にRGBaが使えるようになったのでこちらも紹介します。

対応ブラウザ◯Google Chrome / Safari / Firefox / Opera
▲ InternetExplorer

HTML

   IE用
   もじもじ文字もじもじ文字もじもじ文字もじもじ文字
   Firefox
   もじもじ文字もじもじ文字もじもじ文字もじもじ文字
   Webkit
   もじもじ文字もじもじ文字もじもじ文字もじもじ文字
   CSS3
   もじもじ文字もじもじ文字もじもじ文字もじもじ文字

ここではわかりやすい様にブラウザごとに分けています。

CSS

.background {
	background-image:url(http://art30.photozou.jp/pub/994/306994/photo/35227130.jpg);
	width: 400px;
	height: 250px;
	padding: 25px;
}
.background p {
	padding: 55px 10px;
	text-align: center;
	font-size: 1.6em;
	color: #000;
	height: 50px
}
.css p {
	background-color:#FFF;
}
.ie p {filter: alpha(opacity=50)}
.fx p {-moz-opacity:0.5;}
.wk p {opacity:0.5;}
.css3 p {
	background-color: rgba(255,255,255,0.5)
}

.backgroundは、画像背景をしています。
IEは filter:alpha(opacity:数値) 0が透明になり、100が100％の背景色にります。IEはheightを指定しないとならないので指定しましょう。
FXは -moz-opacity:数値 0が透明になり、1が100％の背景色になります。 35％の場合は、0.35となります。
Webkitは、 opacity:数値　となります。Fxと同じ数値で指定できます。
CSS3ではRGBaが使えるようになったのでそれで指定します。赤緑青　透明度を指定します。

IE6/7ではRGBaが使えないのでRGBaのみ使用する場合ハック等を使って background-color: #fff などを指定して filterを使い半透明にすることができます。
RGBaをつかう利点としてOpacity指定だと文字も半透明にならなくなるという利点があります。

文章をはみ出さずに折り返す

fukuchi — Mon, 29 Mar 2010 04:18:14 +0000

PREやコメント欄でURLや改行をしてない長い文章などがあると、欄のWidthを無視してはみ出してしまうということがおきます。

対応ブラウザ◯Google Chrome / Safari / Firefox / Opera/ InternetExplorer

HTML

テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト文字テスト

CSS

	pre {
	width: 300px;
	margin: 20px 30px;
	background-color:#d8d1cd;
	border: 3px solid #c0c0c0;
	padding: 5px;
}
.wrap {
	/* Mozilla */
	white-space: -moz-pre-wrap;
	/* CSS3 */
	white-space: pre-wrap;
	/* IE 5.5+ */
	word-wrap: break-word;
}

PREにはWidthを指定
折り返したい物にはClassをつけて、Fx用CSS3用IE用と指定します。

1つのCSSファイルで複数のCSSファイルを読み込ませる

fukuchi — Mon, 29 Mar 2010 02:16:51 +0000

Head部分に

複数のCSSファイルを呼び出していますが、コードの見栄えや読み込みの事を考えると1つのファイルに纏めるのが見やすく管理しやすいのでおすすめです。

読み込み方は簡単でCSSファイル(ここではimport.css)にCSSファイルを記述するだけです。

@import url(" *.css ");
@import url(" *.css ");
@import url(" *.css ");

これを記述して保存しHeadにimport.cssを読み込ませるだけです。

img(画像)を正方形に切り取って表示させる

fukuchi — Mon, 29 Mar 2010 02:06:47 +0000

普通の長方形の画像を表示させるのではなく、正方形にｷﾘﾄﾘ（overflow:hiddenを使って)します。(16:9の縦長には未対応)

対応ブラウザ◯Google Chrome / Safari / Firefox / Opera/ InternetExplorer

HTML

   正方形に切り取る(w:h=100px)

切り取るためのSpanの中に画像を入れます。
SpanとImgには別のClassをしておきます。

CSS

.cut {
	position:relative;
	float: left;
	overflow: hidden; /*不要部分ｷﾘﾄﾘ*/
	height: 100px; /*正方形にしたいサイズ*/
	width: 100px; /*正方形にしたいサイズ*/
	display: block; /*SPANなのでブロック要素に*/
}
.cut_image /*縦・横の画像でも一応見れるように微妙に調整されています*/ {
	display: block;
	height: 160px;
	position: absolute;
	left: -65px;
	top: -25px;
}

Span(.cut)はブロック要素にしてからサイズを決めます。並べたかったのでFloat:leftを指定しました。
重要なものはOverflow:hiddenです。これによりTopやLeftではみ出た物を見えなくしてくれます。
Img(.cut_image)は、w/h:100pxにしたいときはheightを160pxにして、Leftに-65pxとTopに-25pxぐらいを切り取っています。
これくらいで丁度中央になると思います。Top/Leftを有効にするためにPosition:absoluteを指定。

imgで全画面にして背景にする

fukuchi — Sat, 20 Mar 2010 09:14:30 +0000

Flashだと、画面のサイズが変わっても背景の画像がきちんとぴったし表示されますが（例：YUI-NET)、CSSではできません。
そこで、を使って画像いっぱいに表示されるCSSの紹介。

対応ブラウザ◯ Google Chrome / Safari / Firefox / Opera
/ InternetExplorer

HTML






imgで全画面にして背景にする
簡単にできますが、ファイルサイズが大きいので注意です。

また、Internet Explorer6はブラウザ上での画像縮小がとても汚いので

あまりおすすめしません。
写真はこちらからお借りしました。

CSS

body,td,th {
	font-family: Meiryo, ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	color: #ccc
}
body {
	background-image: url(content-images/css_all_background_small.jpg); /*回線が遅い人用の低画質画像*/
	background-position: center center;
}
/*画像を切り取る*/
#img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	overflow: hidden;
}
/*横幅のみ100%*/
#img .image {
	width: 100%;
}
/*コンテンツ*/
#content {
	height: 300px;
	width: 600px;
	margin-top: -150px;
	margin-left: -300px;
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #000;
	border: 1px solid #000000;
	filter:alpha(opacity=95);
	opacity:0.5
}
#content h1 {
	text-align: center;
	margin: 0px;
	padding: 50px;
	font-size: 25px;
	letter-spacing: .1em;
}
#content p {
	line-height: 2em;
	margin: 0px;
	padding: 20px;
	letter-spacing: .1em;
}

bodyに、サイズの小さい画像(css_all_background_small.jpg)を元々設定しています。なかなかimgの画像が表示されないときにこれが表示されるはずです。サイズは1440ぐらいにしています。
#imgにはwidthとheightで全画面にするようして、overflow: hidden;は中のimgがはみ出てもスクロールバーが出ない用にする
.imageはwidthを100%にするだけ。
#contentに関しては、left,topとネガティブマージンを使って上下中央にしています。

実際に使ってよさそうなCSS3

fukuchi — Sat, 20 Mar 2010 05:51:31 +0000

CSS3を実装するサイトもすこしずつ増えてきていますが、やはり問題は対応しているブラウザでみているかです。
非対応なら、何も変化が起きないのでアニメーションなど使っている場合は「なんだろうこれは・・・」となってしまうかと思います。
しかし、飾り程度のCSS3なら非対応のブラウザで見てもほとんど支障がない筈です。
Menu

Border-radius
Text-shadow
Box Shadow
Web Fonts
Gradient

対応ブラウザ◯ Google Chrome / Safari / Firefox
▲ Opera
× InternetExplorer

1.Border-radius

できることボックスの角を丸くできる – IEで表示しても、見た目のみ変わる
border-radius: サイズを指定; また上下左右に指定したい場合は、border-上下(top/bottom)-左右(left/right)-radius: サイズ;を指定すると上下左右で違うものができる。（Fx -moz-border-radius-場所 / Webkit -webkit-border-上か下-左か右-radius)

-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px;  /* Safari */
border-radius: 10px; /* CSS3 */

上下左右変える場合

/*firefox*/
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
/*Webkit*/
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;

2.Text-shadow

できること文字に影をつけることができる – IEで表示しても、通常の文字になるだけです。　横へのオフセット縦へのオフセットぼかしの大きさ　と成っています。

text-shadow: 1px 1px 2px #000;

3.Box-Shadow

できることボックス（DIV要素)などに影をつけることができる。 – IEで表示しても、影がない普通の要素になるだけです。　　横へのオフセット縦へのオフセットぼかしの大きさ　と成っています。

-webkit-box-shadow: 1px 1px 5px #ddd;  /* safari */
-moz-box-shadow: 1px 1px 5px #ddd;   /* firefox */
box-shadow: 1px 1px 5px #ddd;  /* CSS3 */

4.Web Fonts

できることパソコンにインストールされていないフォントがサイトで表示できる – IEで表示しても、font-family: Webfont,メイリオな具合だったらメイリオが表示される – 注意！日本語のフォントは読み込みに時間がかかるのであまり使わない方がいいかもしれません。

@font-face {
	font-family: フォント名;
	src: url(TTFファイル) format("truetype");
}
body {
        font-family: フォント名;
}
フォントを呼び出してから、フォントを指定します

5.Gradient

できること画像を使わずにグラデーションが実現可能 – IEで表示しても、background-color: #000;としていたら、黒くなる

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#333)); /* Safari */
background: -moz-linear-gradient(top, #111,#333); /* FireFox */

FirefoxとSafariのソースが異なります。
それほどレイアウトが崩れないものをピックアップしてみました。 IEは本当に何も対応していないので、アクセス解析などでIEの利用者さんが多いサイトなどはまだ使わない方がいいかもしれません。