‘CSS’ カテゴリーのアーカイブ
角丸～かどまる～
こんばんは。
会社にひとり居残りするのが怖くてw、家から更新という禁じ手をやってしまいました。
しかも、日付かわってますが、目をつぶってやってくださいね～。
さて、本日のお題は角丸。
角丸といっても、web上でそれを表現するには、いろいろな方法があります。
古は、テーブルの四隅に円を１／４に分割したものを置くというのを普通にやってましたが（今思うとしちめんどくさいし、あり得ない。）、最近ではCSS3のプロパティ「border-radius」で画像を使わずに角丸を表示するという、画期的な方法も世にでてきています。
(続きを読む…)
主要ブラウザの特定のもののみにのみに適用させるCSSハック
制作メモ。LABELでユーザビリティーを向上
どうも、ベイベーです。
フォーム作成の際、小さなラジオボタンにチェックを入れるのが困難な方のために、
ラジオボタンとテキストを label で関連付けて、テキストをクリックしても
ラジオボタンにチェックが入るように・・・というのは、よくやりますが・・・。
↑ ボタン近くのテキスト上にマウスオーバーすると、ラジオボタンにチェックが入る。
ただ、人によっては、それだけでは認識しにくい可能性もある。
それよりも、そのテキスト部分にマウスオーバーするとカーソルが「指カーソル」に
変わった方がより理解しやすいのでは？
そこで、LABEL部分のカーソル自体を「指カーソル」に変えてしまう方法。
これはいたって簡単で、LABELタグに対して、cursor:pointer; と指定するだけ。
label{
cursor:pointer;
}
ただでさえ、ストレスを感じることも多いフォーム入力時のイライラを、これで少し
緩和することができるかも！？
ささやかだけれど、役に立つこと その壱
はじめまして、エルツースタッフのベイベーです。
「ささやかだけれど、役に立つこと（←本のタイトルのパクリです）」を発信していければいいな～と思い、本日のお題はこんな感じに。
・・・というわけで、非常に唐突ですが・・・。
・・・ホントに無理やり感がありますが・・・。
本題に入ります。
floatをclearする。
よくやるのが、
<div id=”wrapper”>
<div id=”content”>
<p>左</p>
</div>
<div id=”menu”>
<p>右</p>
</div>
<div class=”clear”></div>
</div>
↑ こんなの。
「clearfix」を使ってみる。
.clearfix は、<div class=”clear”></div>という要素自体をCSSであらわしたもの
↓ ↓ ↓
.clearfix:after {
content: “.”;
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
ソースは、こんな感じに ↓
<div id=”wrapper” class=”clearfix”>
<div id=”content”>
<p>左</p>
</div>
<div id=”menu”>
<p>右</p>
</div>
</div>
*—-*—–*—–
以上、こんなメモでお茶を濁しておきますた。
みなさん、本日も一日お疲れ様でした。
どうぞ、よい週末を～！
