Fillo Design - WEBデザイン好きコミュのCSSに関するTips

CSSって奥が深いよね。
使いこなせばどんどんWEBデザインが楽しくなります。

コメント(18)

最初
全て
最新の40件

【リンクの色を設定する】
基礎なのに毎度忘れてしまう文字列

a:link{text-decoration:none;color: #008000;}
a:visited{text-decoration:none;color:#806080;}
a:active{text-decoration:none;color:#40d040;}
a:hover{text-decoration:underline;color:#40d040;}

link ：標準リンク
visited　：既読リンク
active　：選択リンク
hover　：カーソルが重なっているリンク

[2] mixiユーザー 08月21日 00:31

【ボーダーのスタイル一覧】
上の５つ以下はほとんど使わない無駄知識

none,(無し)
solid,(実線)
dashed,(破線)
double,(二重線)
dotted,(点線)
outset,(飛び出し)
ridge,(出っ張り)
inset,(引っ込み)
groove,(溝)

[3] mixiユーザー 08月21日 00:38

【スクロールバーの色を変える】
BODY {
scrollbar-base-color: #ffffff;
scrollbar-arrow-color: #ccccff;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #ccccff;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #ffffff;
}

参考サイト：
http://www.tagindex.com/stylesheet/page/scrollbar_color.html

参考サイト（スクロールバーの色設定）：
http://homepage2.nifty.com/sakura_k/index_j.htm

[4] mixiユーザー 08月21日 00:39

【横向き(縦向き)のスクロールバーを強制的に消す】
ただしIEのみ(´・ω・｀)
縦は　overflow-x

<html style="overflow-y:hidden;">

[5] mixiユーザー 08月21日 00:40

【数箇所のタグに反映させるCSS記述】

body,td,th {
font-size: 12px;
color: #333333;
line-height:20px;
}

[6] mixiユーザー 08月21日 00:41

【背景画像を繰り返さず、固定する】

BODY {
background-image : url"(ground.jpg");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}

fixed　：固定
position　：左上から計算する

[7] mixiユーザー 08月21日 00:42

【テーブル内に含まれる要素に使用可能なスタイル】
大昔、誰かに教わったのだが。。。

■テーブルタグで使用可能なスタイル

color 文字色
background 背景スタイル一括指定
background-color 背景色
background-image 背景画像
background-repeat 背景画像繰り返し表示方法
line-height 行の高さ
text-align 行揃え
font-style 文字形状
text-decoration 文字装飾
font-weight 文字の太さ
font-size 文字の大きさ
font-family 書体名
letter-spacing 文字間隔
word-spacing 単語間隔
width 横幅
height 縦幅
border 枠形式一括指定
border-width 枠線幅一括指定
border-top-width 上枠線幅
border-bottom-width 下枠線幅
border-left-width 左枠線幅
border-right-width 右枠線幅
border-color 枠色一括指定
border-style 枠形状一括指定
word-break 禁則処理
word-wrap 日本語禁則処理
text-underline-position 下線表示位置
writing-mode 表示方向指定

■テーブル内に含まれる要素に使用可能なスタイル

color 文字色
line-height 行の高さ
font-style 文字形状
text-decoration 文字装飾
font-weight 文字の太さ
font-size 文字の大きさ
font-family 書体名
letter-spacing 文字間隔
word-break 禁則処理
text-underline-position 下線表示位置
writing-mode 表示方向指定

■使用例

background-color:#000000

background-image:url(アドレス)

background-repeat:repeat

repeat （通常の繰り返し）
├repeat-x （左右にパターンを繰り返す）
├repeat-y （上下にパターンを繰り返す）
└no-repeat （繰り返さない）

font-weight:normal（数字でも可。100～900の100刻みで数字を指定可能）

normal （通常のまま）
├bold （太字）
├bolder （より太く）
└lighter （より細く）

font-style:normal

normal （通常）
├italic （イタリック体）
└oblique （斜線）

text-decoration:underline （リンクの下線消すのに使える）

underline （下線表示）
└none （なし）

[8] mixiユーザー 08月21日 00:43

【リストで横並びメニューを作る(応用)】
これを使うとソースがとっても綺麗。
ただ、解読に時間がかかる。

<div align="center">
<ul id="menu">
<li id="ground1"><a href="#">テキスト</a></li>
<li id="ground2"><a href="#">テキスト</a></li>
<li id="ground3"><a href="#">テキスト</a></li>
<li id="ground4"><a href="#">テキスト</a></li>
<li id="ground5"><a href="#">テキスト</a></li>
</ul>
</div>

CSSに以下を記述：
ul#menu {
height: 22px;
width: 500px;
top: 200px;
background-image: url(images/menu0.jpg);
background-repeat: no-repeat;
}
ul#menu li {
float:left;
list-style-type:none;
}
ul#menu li a:hover{
background-image:none;
}
li#ground1 a {
background-image: url(images/menu1.jpg);
background-repeat: no-repeat top left;
height: 22px;
width: 100px;
display: block;
text-indent: -40000em;
}
li#ground2 a {
background-image: url(images/menu2.jpg);
background-repeat: no-repeat top left;
height: 22px;
width: 100px;
display:block;
text-indent: -40000em;
}
li#ground3 a {
background-image: url(images/menu3.jpg);
background-repeat: no-repeat top left;
height: 22px;
width: 100px;
display:block;
text-indent: -40000em;
}
li#ground4 a {
background-image: url(images/menu4.jpg);
background-repeat: no-repeat top left;
height: 22px;
width: 100px;
display:block;
text-indent: -40000em;
}
li#ground5 a {
background-image: url(images/menu5.jpg);
background-repeat: no-repeat top left;
height: 22px;
width: 100px;
display:block;
text-indent: -40000em;
}

[9] mixiユーザー 08月31日 13:02

【padding、border、marginの関係】

paddingは内側ってことで。背景をCSSで指定している場合、
ネットスケープではmarginでとった余白に背景が反映されなかったような。

[10] mixiユーザー 09月20日 17:33

【text-indent謎のライン】

text-indentを利用してテキストを移動させた場合、
リンクを張るとNetscapeのみ謎のラインが表示されてしまう問題。

単純に、リンクのアンダーラインだったんだけどｗ

というわけで、text-decoration:none;を記述すると消える。
同時に、Firefoxへ対応させるために

outline: none;
overflow: hidden;

を設定するとGood

[11] mixiユーザー 10月04日 17:42

【CSSでインラインフレームの代用をする】

HTMLに
<body>
<div id="main" align="left">

<div id="content" align="left">
<strong>CSSでインラインフレームの代用。</strong><br /><br />
Dreamweaverでレイアウトが崩れてしまうのが難点。<br />
<br />
テキストエリアと違ってタグ使えるから、
document.writeか何かで読み込んだりできるんじゃないかい。
面倒くさい臭いがするので試していないけれどｗ
<br />
<br />
ちょっとしたメッセージならHTML増やさないで便利かも。<br />
<br />
スクロールバーが表示されるくらいのテキストをここに入力
<br />
</div>

</div>

</body>

CSSに
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
margin:0px auto;
}
#main{
position:relative;
}
#content {
position:absolute;
width:200px;
height:200px;
overflow:auto;
padding:2px;
left: 63px;
top: 59px;
font-size:12px;
background-color:#FFFFCC;
}

[12] mixiユーザー 10月17日 16:44

【letter-spacingでIEのみ改行されないバグ】

参考：
http://cssbug.at.infoseek.co.jp/detail/winie/b022.html

CSSにletter-spacingがあるとき、
IEのみ改行が反映されないという、鬱陶しいバグ。

br要素に letter-spacing: 0; と指定することで回避できます。

[13] mixiユーザー 10月23日 14:44

【flort:left;で失った高さを取り戻す】

基礎の基礎だと思うのだけど
今まで全く気づかなかったTips...ｗ

ボックス内に入れられたボックスにflort:left;がかかると
親ボックスの高さが0になってしまう罠。
高さを指定すれば取り戻せるのだけど、
内容によって上下する場合ものすごく不便。

ということで、解決策は・・・

clear:both;

これだけかYO！(´д｀；)
<br clear="all" />でもOKです。

left　=　左側
right　=　右側
both　=　全て
inherit =　親要素を継承する

[14] mixiユーザー 05月24日 16:00

【CSSからJavaScriptを呼び出す】
.htc　の拡張子

http://css.eweb-design.com/0814_bhb.html

JS自体は本来のものと同じ。
IE5以上じゃないと動作しない。
CSSのID 属性を使用してオブジェクトとしてスクリプトからアクセスできる...らしい。
使ったことがありません。他のブラウザへの対応が気になるところ。

[15] mixiユーザー 05月19日 00:16

HTMLでは<div>の中の<div>にも中央寄せが効いたのですが、
XHTMLではどうも効かないようで。
以下のように記入します。

#main {
text-align:center;
}
#content {
text-align:left;
margin-left: auto;
margin-right: auto;
}

<div id="main">
<div id="content"></div>
</div>

[16] mixiユーザー 09月12日 12:20

【IE6・7を利用している時の「letter-spacing」バグを回避する】
IE6・7でletter-spacingを利用すると<br>が正しく認識されないバグ。

以前にHTML側にclearを入れて回避する方法を書いたかもしれないけど、
ああ、単純にこうなんだ・・・って思ったのでメモっておきます。

br {
letter-spacing:0;
}

なんで今まで気づかなかったんだろうｗ

[17] mixiユーザー 01月16日 16:37

【プルダウンメニュー・展開メニュー応用】

ほんとに今更ですが。。。

よく参考にするサイトにはCSSのみと書かれていますが
実際はmoseoverで判定を行うのでJavaScript絡みです。

ともあれ、HTMLのみでどのブラウザ上でも動作するので
覚えておくと可能性は無限大(´∀｀*)

今回はプルダウンですが、
メニューでなくても応用でテキストを表示させたり
画像を入れ替えたりできそうですね。

ソース書くと長くなるので、ポイントを。
CSSもHTML側に入れておくので、勝手に盗んでくださいです。

▼サンプル
http://fillo-design.com/websample/pulldown.html

ありがちなプルダウンメニューですが
positionと組み合わせるとかなり応用できます。

ポイントはJavaScriptの「onmouseover」と
「onmouseout」を使ったCSSの切り替えです。

デフォルトではプルダウンメニューを隠す
→マウスオーバーでメニューを表示
→マウスアウトでメニューを隠す

という動作命令を、
メニューを囲んだdiv要素に指定しています。

幅はulに一括指定。
liとその中のaタグは「width:100%で」ulの幅を引き継いでいます。
aタグに「display:block」するのは
メニューボタンの基本ですね(´・ω・｀)b

positionの指定をしない場合（position:static）、
onmouseoverではなくonclickで動作させると
下のコンテンツが押されるので展開メニューになります。

それとは別に、position:absoluteで絶対配置させると
下に続く要素に関係なくプルダウンメニューが開きます。

ただ、深度の問題でプルダウンが隠れる事があるから
すぐ下にコンテンツが続く場合はちょっと難しいな。
無理やりHTMLの最後に記述して「position:fixed;」すれば
コンテンツにかからないメニューになるのかも？
「z-index」はブラウザによっては効果がないし。
その辺はもうちょっと考えないとだね。

onclickのスクリプトは私が即興で殴り書きしたので
正しいかどうかｗｗ
一応動いてるらしい。

onclick="if(this.className=='over'){this.className='out'} else {this.className='over'}"

動作の命令は
「if(もし)class名＝overの場合、class名をoutにする。
else(そうではない場合＝class名がoutの場合)、class名をoverにする。」
ですね。

更に応用で背景に画像入れてもいいし。
画像をロールオーバーさせる場合は
「liにロールオーバー後の背景→aにデフォルトの背景」
と重ねて、a:hoverで背景をnoneにすると
読み込み時間にラグのないロールオーバー画像の完成です(´∀｀*)

また面白い使い方があったら教えてねｖ

[18] mixiユーザー 01月15日 22:08

【floatでなくなった高さを取得する】
子にfloatをかけると、clearされない限り親の高さが取得できないという問題。

親boxに「overflow:hidden」を入れると、ほとんどの場合で解決できます。
（できない事があったのですが、原因究明中。。）
clear:both　のために空タグを入れなくても良いので、htmlがすっきりして便利です。

確か他にもclearfixというｃｓｓを設定する方法が、本に載っていました。
少しややこしいので、私はまだ覚えられないのだけど・・・
この方法だと、ほとんどのブラウザで問題が解決できるようです。

.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

ログインすると、みんなのコメントがもっと見れるよ