CSS｜インコの技術メモ

CSS

2008年4月 5日 22:53 ～

■ padding 込みの幅
box-sizing: border-box;

■ リストのカスタマイズ

<style>
ul {
  list-style: none;  /* アイコン削除 */
  margin: 0;
  padding: 0;
}
li { /* 改行時に頭を合わせるとき */
  text-indent: -1rem;
  padding-left: 1rem;
}
li:before {
  content: ""; /* 空要素 */
  width: 10px;
  height: 10px;
  display: inline-block; /* インラインブロック */
  background-color: #0090ff;
  border-radius: 30%;
  position: relative;  /* 位置調整 */
  top: 1px;
  margin-right: 5px; /* 右余白 */
}
</style>
html
<ul>
  <li>水面斬り</li>
  <li>流流舞い</li>
</ul>

↓

水面斬り
流流舞い

■ 上下左右中央

左右
上下
向き（横: [raw, row-reverse]; 縦:[column, column-reverse]）
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* 無くてもいいかも */

■ animation の使い方
以下のようにあらかじめ設定したものを普通の CSS から呼び出します。
/** 普通のCSS */
.slide {
  animation: f_slide 0.5s 1;
}
/** 呼び出される設定 */
@keyframes f_slide {
    0% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}
アニメが終了すると元に戻ります。
（終了時点の状態で固まるのではない）

■ animation の設定項目
animation-name 名前。なんでも良い。
animation-duration １回の時間。（def 0）１秒は 1s
animation-timing-function イージングの種類。（def ease）※
animation-delay 開始を遅らせる時間。（def 0）
animation-iteration-count 繰り返す回数。（def 1）無限は infinite 。
animation-direction 交互に反転再生。（def normal）※

※
　ease 開始と完了を滑らかにする
　linear 一定
　ease-in ゆっくり始まる
　ease-out ゆっくり終わる
　ease-in-out ゆっくり始まってゆっくり終わる
　cubic-bezier(数値, 数値, 数値, 数値)
　　3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
※
　値にalternateを指定すると、奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返します。

animation にスペース区切りで上記を左から順番に書くことができます。
animation: f_slide 0.5s 1;
何が省略されているかは単位の有無によって判別してくれるようです。
上記の場合は、イージングとディレイが省略されていると認識してくれます。

■ animation の種類
scale 拡大縮小
translate 移動
rotate 回転
skew ゆがみ

例）
右に 100px 移動
    0% { transform: translateX(0px); }
  100% { transform: translateX(100px); }

何もないとことから現れて通常の大きさになる。
    0% { transform: scale(0, 0); }
  100% { transform: scale(1, 1); }

右に１回転。
    0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }

上が左に、下が右に、横ゆがみ
    0% { transform: skew(0deg, 0deg); }
  100% { transform: skew(20deg, 0deg); }

■ animation の再発火
アニメーションを設定した CSS を追加して、アニメが終わったら削除。

$(document).ready(function(){ 
  // 機能追加
  $.fn.animateCallback = function(callback){
    var alias = 'webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd';
      return this.each(function() {
        $(this).bind(alias, function(){
        $(this).unbind(alias);
        return callback.call(this)
      });
    });
  };
  // 例）
  $('#btn').click(function(){
      $('#target').animateCallback(function(){
          $('#target').removeClass('c_scale')
      }).addClass('c_scale')
  });
});

■ animation の再発火（繰り返し）
ただ繰り返すだけなら以下のように丸ごと書き換えるのもありです。

// CSS で .effect にアニメーションを設定して置く。
var count = 0; // ループ抜ける素
function loop(){
  count++;
  $('#hogeid').html('<div class="effect">x</div>'); // 0.5秒毎にアニメーション
  var countLimit = setTimeout(loop, 500); // 再帰的に呼び出し
  if (count > 4) { clearTimeout(countLimit); } // ループ抜ける
}
loop(); // スタート

というか javascript のコーナーに書くべきか。

■ A から F までの単語の背景色

abc

ace
エース

bad
悪い

bcc
ブラインドカーボンコピー

beaded
ビーズ［玉］になった、ビーズ［玉］のような、ビーズ［玉］で飾った、数珠状をなした

bed
ベッド

bee
ハチ

cab
〈米〉タクシー

cad
下劣な男、育ちの悪い男

efface
【他動-1】〔絵・文字・痕跡などを〕こすって消す、削除する【他動-2】〔記憶などを〕消す、拭い去る

fad
【名-1】一時的流行、～熱、流行のもの・The fad had passed. ブームは過ぎ去った。【名-2】気難しさ、気まぐれ

fee
【名-1】〔サービスに対する〕料金、手数料、謝礼

■ 子供が float していても親が囲む
・親に overflow: hidden; や overflow: auto;
・子供の最後にクリア要素。

■ 角丸
<html><title>www</title><head></head>
<style type="text/css">
div{
border: 1px red solid;
-webkit-border-radius: 10px; /* for Safari and Chrome */
-moz-border-radius: 10px; /* for Firefox */
-o-border-radius: 10px; /* when Opera Presto 2.3 or later is released */
-khtml-border-radius:10px; /* Linux browsers */
border-radius: 10px; /* CSS3 */
behavior: url(border-radius.htc); /* for IE */
width: 300px;
padding: 10px;
}
</style>
<body>
<div>
www<br />www
</div>
</body></html>

border-radius.htc はcssと同ディレクトリに置きます。

■ 選択した時の背景色の変更
::selection {
background:#d40210; /* Safari */
color: #fed723;
}
::-moz-selection {
background:#d40210; /* Firefox */
color: #fed723;
}

■ 横スクロールで背景が切れる
中央寄せしているとサイトの幅＞ブラウザの横幅の状態で横スクロールすると背景が切れます。
このときは body に min-width を指定します。
ex.
body {
  background: #93c400 url("../images/body_bg.gif") repeat-x;
  min-width:1040px;
}
.wrapper {
  background: #93c400 url("../images/wapper_bg.gif") repeat-x;
  margin: 0 auto;
  width: 1040px;
}
IE6は↓。
body{
  width: expression(document.body.clientWidth < 300? "300px" : "auto");
}

■ 折り返し、折返
white-space:normal;　　標準（初期値）
white-space:nowrap;　　自動的な折り返しを禁止する
white-space:pre;　　　　　記述した通りの形で表示する

■ IE8で印刷時に2ページ以上またいだあとのフッター
[ヘッダー]
[左][　右　]
[フッター]
みたいにCSSで段組みしているものをIE8で印刷しようとしたら、
ページがまたがるとフッターが崩れるんです。
divで挟んだりいろいろしたけどだめで最終的にtableで挟むこととす。
クライアントは「リントチェック？は？」みたいな感じでIEで印刷できることが至上だそうなので、まあいいか。

/* ie印刷用 */
#printtable{margin:0; padding:0; border:0; width:100%;}

[ヘッダー]
[左][　右　]
<table id="printtable">
[フッター]
</table>

■ IE8でリンクが途切れる
aタグをボックス化してバックグラウンドをマウスオーバーとかで切り替えるリンクを作る。
IE8で効かない部分が出てきた。(-_-;
どうもdivが縦横入り組んでいるところでだけダメなので線を表示して確認してみる。

/* 確認用*/
div {border: 1px #f00 solid;}

別におかしくはない、というかなぜかリンクが治る。

/* 確認用
div {border: 1px #f00 solid;}*/

もとにもどすとリンクが途切れる。(-_-;
なんでかわからないけど以下のようにして解決。なんじゃこりゃ。

/* 確認用*/
div {border: 0px #fff solid;}

■ IEを含む切り分け
IE6以下にのみ適用
* html body
IE7にのみ適用
*+html body
IE7を含む全てのIEにのみ適用
*+html body, * html body
IE7を含むモダンブラウザにのみ適用（IE6以下を除外）
html>body
IE7を除くモダンブラウザにのみ適用
html>/**/body

/** */

■ text-align EI6
box要素までセンタリングされる。

■ margin EI6
float と同じ方向の margin は２倍になる。
左右の auto は効かない。

■ EIでの中央寄せ
上記２つのバグで相殺します。
<DIV style="text-align:center">
<DIV style="text-align:left">
コンテンツ
</DIV>
</DIV>

■ padding FireFox1.5
内側に指定した分が全体のサイズにプラスされる。
EI はされない。

■ というわけで
サイズを指定しているところでは padding を指定しない。
float を使用しているところでは margin を指定しない。

■ しかしながら
margin や padding に関しては他にタグによって色々違う時があるので臨機応変に対処してください。

■ aタグ内で line-height が効かない。EI6
先頭に画像でもおいて、img タグに margin とか指定して下げてやると後ろのテキストも
付いてくる。ので、空gifでも使うかな。

■ リスト
<dl>
<dt>単語</dt>
<dd>ここに単語の説明などを入れて使います</dd>
<dt>省略
<dd>終了タグを省略しています
</dl>
単語
ここに単語の説明などを入れて使います
省略
終了タグを省略しています

<ol>
<li>項目をここに書きます</li>
<li>終了タグを省略しています
<li>終了タグを省略しています
</ol>
1. 項目をここに書きます
2. 終了タグを省略しています
3. 終了タグを省略しています

■ フォント関係
font-size:14px;
font-weight:bold;
line-height:140%;
font-family :"ヒラギノ角ゴ Pro W3", Osaka, "ＭＳＰゴシック", Kochi Gothic;
color:#000;

■ 余白
ブロック要素の外側
margin:0px 0px 0px 0px;
ブロック要素の内側
padding:0px 0px 0px 0px;
※widthを指定している場合、paddingの値が合計されるので差し引く。

■ 横にならべる、解除
float:left;
clear:both;

■ 全称セレクタ
全ての要素に適用されるように、セレクタにワイルドカード "*" が使えます。
{margin: 0; padding: 0;}
全ての要素のマージンとパディングを 0

■ 高さの最大最小
max-height:999px;
min-height:999px;

■ HEADの雛形
<HTML>
<HEAD>
<META http-equiv="Content-Language" content="ja">
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<META name="Discription" content="ここに文章の要約を記述">
<META name="KeyWords" content="ここに検索用キーワードを記述半角スペース区切り">
<META name="author" content="ここに作者を記述">
<TITLE>ここにタイトルを入れる</TITLE>
</HRAD>
<BODY>
ここに表示する内容をHTMLで記述
</BODY>
</HTML>

■ HEADの文字コード
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

■ キャッシュを無効にする場合
以下を書き足します。
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Expires" content="0">

■ DIVとSPAN
divもspanも無意味のタグですがCSSを反映する為だけに良く使用します。
divはブロック要素。改行します。
spanはインライン要素。改行しません。ブロック要素の中にある。

■ クラスとＩＤ
classが . idが #
idは同ページに１つしかあっては駄目。
.color1{color:#f00;}
#colorA

■ 外部ファイルに書く場合
index.htmlに以下の分を書く。
<LINK rel="stylesheet" type="text/css" href="syosiki.css">
同ディレクトリにsyosiki.cssを置く。
その中身の例。
BODY{
font-size :12pt;
background :#ffffff;
margin :0px;
padding :0px;
font-family :"ヒラギノ角ゴ Pro W3", Osaka, "ＭＳゴシック", Kochi Gothic;
color :#440044;
background-image :url(img/back.gif) top repeat-y;
}
A:link {color:#0000ff; text-decoration:none;}
A:visited {color:#aa00ff; text-decoration:none;}
A:active {color:#ffaa00; text-decoration:none;}
A:hover {color:#ffaa00; text-decoration:none;}

■ ファイルの中に書く場合
<style type="text/css">

</style>

■ タグの中に書く場合
<div style="border: 2px #0ff solid;">何かしらのコンテンツ</div>

CSS

About

Category

Elsewhere