CSS

送信ボタンのCSS

Posted on by ishiya
フォームを作る際の送信ボタンですが、画像にしたい場合、 inputタイプをimageとするかbuttonタイプをsubmitとする方法があります。 後者の場合、デフォルトではボタン画像がデフォルトで用意されたボタンの中に入ってしまいます。 これはとてもかっこ悪い。。 以下のCSSを指定することで それを避けることができます。 button { width: auto;...
続きを読む

cssのid、class名について

Posted on by kano
cssレイアウトをする際に必要になってくるidやclassの名前。 あまり変な名前を付けると後で見た時に何を意味しているわからず、ごちゃごちゃになってしまいます。 またjavascriptなどが関わってくるとネーミングはとても重要なものとになります。 名前の付け方はこれが正解というものはないですが、誰が見ても何があるか分かりやすいものがいいですね。 今回はそんなidやclass名の一般...
続きを読む

iphoneやipadでFLASHが表示できない時は画像を表示させる2

Posted on by kano
以前も取り上げましたが、iphoneやipadなどFLASHが表示できない端末でアクセスしてきた時に画像を表示させる方法です。 ■以前の方法↓ http://www.cyberbrain.co.jp/tecblog/?p=295 今回はたまたま違う方法を発見したのでご紹介！ やり方は以前より簡単です。 まずFLASHの外側にdivでエリアを作成し囲みます。 次にその...
続きを読む

CSS positionについて

Posted on by kano
CSSレイアウトでサイト作成をしていても意外と使わないのがこのpositionプロパティ。 いざ使うときになって、あれどうやるんだったけ？という事があります。 と言うわけで、忘れないようにもう一度おさらい。 ■positionプロパティの値と種類 static（静止） 特に配置方法を指定しません。 この値のときには、top、bottom、left、rightは適用されません。 ...
続きを読む

CSSのちょっとしたテクニック

Posted on by kano
CSSの記述方法には色々な方法があります。 ちょっとした事で、とても見やすくスッキリします。 日頃から意識して書いてるつもりですが、後から見直すと、自分で作ったものなのに「何だこりゃ！」って事もあります。 そんな、本当に些細なことですが日頃から心がけておきたいですね。 ■プロパティの値をまとめて書く .sample{ margin-top:5px; margin-bott...
続きを読む

CSSハックについて

Posted on by kano
たまに検証などで古いブラウザを使ったときに、 昔作ったサイトを見てみると、ちゃんと表示されていない事があります。 これはIE6などでよく見られブラウザのバグがほとんどの原因です。 いくつか例をあげますと、 ・floatプロパティに指定した値と同じ方向にmarginプロパティの指定をするとmarginが2倍になってしまう。 ・ボックスの幅や高さを算出するときにpaddingやborde...
続きを読む

重なるmarginの値について

Posted on by korenaga
<div>などでボックスを作って縦でも横でも並べることがコーディング時に多々あると思いますが、その際、並べた両方のボックスで四辺にmarginを指定した場合、隣り合った部分のmarginが片方だけしか反映されません。 例えば、縦に2つ<div>を並べ、その両方にmargin:5px;と指定した場合、上のdivの下辺と下のdivの上辺が隣り合わせになりますが、何も知らず...
続きを読む