CSSが得意な渋谷のウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

効かないCSSあるあるまとめ

table にCSSで指定したwidthが効かない

table か td に以下のコード

table-layout:fixed;
参照 [テーブルのセルの幅を指定したにもかかわらず、意図したセル幅にならない]

z-indexが効かない

positionを指定せよ

横並びのメニューを3等分、7等分、何等分でもうまく収めるCSSテク

課題:このようなメニューを横並びにする。レスポンシブデザインにしたいので横幅の固定はできない。

<ul>
	<li><a href="#">RED</a></li>
	<li><a href="#">GREEN</a></li>
	<li><a href="#">BLUE</a></li>
</ul> 

答え

li{
	display: table-cell;
	width: 1%;
}

最小限のリセットCSS

body{margin:0;font:normal 14px/1.6em Meiryo;color:#333;}
ul,li{margin:0;padding:0;list-style:none;}
a{color:#f00;}

table をスマホ対応CSS

スマホサイトでよく使う

th,td{
   box-sizing: border-box;
    display: block;
    width: 100%;
}

参照 [CSSで出来るレスポンシブ対応を考えた table レイアウト]

はみ出す文字を...で省略するCSS

スマホサイトでよく使う

p{
  width: 100px;/*幅を固定*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
参照 [CSSだけで幅を超えた文字列を...で省略する]

CSSでラジオボタンをスマホブラウザでiPhoneっぽいボタンに

ラジオボタンをiPhoneのボタンっぽく!スマホのウェブブラウザでちゃんと動くように。そこが肝心!


HTML

<ul>
    <li>
        <input type="radio" id="male" name="sex" value="男性" />
	<label for="male">男性</label>
    </li>
    <li>
        <input type="radio" id="female" name="sex" value="女性" />
        <label for="female">女性</label>
    </li>
</ul>

CSS

原理はラジオボタンの選択範囲を広げ透明にする。最低限必要なものは以下のコード。

li{
    float: left;
    position: relative;
    width: 70px;
}
li input {
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

このやり方ではじめてスマートフォンでも動く。

チェックが入ったらlabelの背景色を変える。デザインはお好みで。

li input + label{
    color:#333;
    display:block;
    text-align:center;
    padding:5px 0;
    border: 1px solid #ddd;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#F9F9F9),to(#EEEEEE));
    background:-moz-linear-gradient(#F9F9F9,#EEEEEE);
}
li:first-child input + label{
    border-radius:4px 0 0 4px;
}
li:last-child input + label{
    border-radius:0 4px 4px 0;
    border-left:none;
}
li input:checked + label{
    background-image:-webkit-gradient(linear,left top,left bottom,from(#5393C5),to(#6FACD5));
    background: -moz-linear-gradient(#5393C5, #6FACD5);
    border: 1px solid #2373A5;
    color:#fff;
}

jQuery不要 CSS3でトグルTOGGLE

原理:通常時はheight:0; overflow: hidden;でコンテンツを隠しチェックボックスにチェックが入った時にスタイルでコンテンツを表示。 機能だけをシンプルにデモを作りました。スタイルはお好みで。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML

<input id="toggle" type="checkbox" name="whatever" />
<label for="toggle">CLICK HERE TO TOGGLE</label>
<p>ここにコンテンツ </p>

デフォルトで開示状態にしたい場合はname="whatever"を削除

CSS

input {
display: none;
}
input:checked + label {//チェックボックス選択時
color:red;
}
label{
cursor: pointer;
display: block;
}
input:checked + label + p{//チェックボックス選択時のコンテンツ
height:55px;
}
p{
height:0;
overflow: hidden;
-moz-transition: height 0.5s ease-in-out 0s;
}

背景画像を使わないマウスオーバーで画像入れ替えリンク

cssを変更するのが面倒な仕様のサイトには便利なやり方。
用意する画像はメインとなるものと半透明にしたpng画像。
##
html:画像のタグは改行しないで続けてかくこと
<a href="#">
  <img src="jpg" alt="メイン画像" /><img src="png" class="imghover" alt="オーバー時用" />
</a>
css:平常時に二つ目の画像が隠れて上にかぶさっているのがマウスオーバー時にあらわれる仕組み。CSSでTooltipやプルダウンメニューを作る時と同じ要領。
img.imghover{
margin-left:-560px;/*画像の幅*/
margin-top:-300px;/*画像の高さ レイアウトによって不要の場合あり*/
display:none;
}
a:hover img.imghover{
display:inline;
}

マウスオーバーで拡大しても文章レイアウトを崩さないスタイル

カーソルを合わせたときにpadding を大きくしその分marginをマイナスで調節。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a:hover{
-moz-transform:scale(1.25);
background:black;
color:white;
margin:-0.25em -0.5em;
padding:0.25em 0.5em;
}

クリック時の点線枠を消す Firefox対策

スタイルを書ける前のリンクbefore。クリックした瞬間に点線がでます。テキストリンクだけでなく画像やブロック要素リンクにも点線がでる。
スタイルを書けた後のリンクafter。IEはサポートしていません。
クリックをした瞬間のactive時に出る外枠の点線を消す方法はいくつかあります
* focus{
outline: none;
}
a:focus{
outline: none;
}
a{
-moz-outline-style: none;
}

input, textarea 選択時に使える css

フォーム内を選択で色が変化
input:focus{
background: #f4caff;
}
対応ブラウザ
Firefox, opera, safari, chrome, internet explorer 8

テキスト選択時帯の色を変える selection

文字選択時の帯色を変えるスタイル。safari,chromeとfirefoxのみ対応
::selection {/* Safari and Chrome*/
background: #99CC00;
color:white;
}
::-moz-selection { /* Firefox */
background: #99CC00;
color:white;
}