よく使うＨＴＭＬ・ＣＳＳ

アニメーション

-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

 かっこいいライン

border-bottom: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,1);

border-bottom: 1px solid rgba(0,0,0,1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1);

ちょっとだけ文字を立体的にする

 text-shadow: -1px 1px 0 rgba(255,255,255,1);

text-shadow: -1px 1px 0 rgba(255,255,255,0.2);

標示非表示

visibility: hidden;　非表示 標準は　　visible　表示  

タイトルデザインＣＳＳ

http://matome.naver.jp/odai/2137456240016565401

  テキスト選択時の色変更

/*テキスト選択色変更*/ ::selection { background-color: #9effe2; color: #000; } /* Firefox */ ::-moz-selection { background-color: #9effe2; color: #000;

  文字に縁取り

filter:dropshadow(color=#000000,offX= 0,offY=-1)
dropshadow(color=#000000,offX= 1,offY= 0)
dropshadow(color=#000000,offX= 0,offY= 1)
dropshadow(color=#000000,offX=-1,offY= 0);
 
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
 
text-shadow: black 1px 1px 0px, black -1px 1px 0px,
             black 1px -1px 0px, black -1px -1px 0px;

<a href=”tel:00000000000″>00000000000</a>  

メールリンクHTML

<a href=”mailto:info@example.com?subject=問い合わせ&amp;body=ご記入ください”>メールはこちらへ</a> ? … メールアドレスとその後に続く情報を ? マークで区切ります subject= … メールの件名を記述します body= … メールの本文を記述します & … 件名と本文を & マークで区切ります（文字参照で & と記述します） 参照：http://www.tagindex.com/html_tag/link/a_mailto_sub.html  

スパムメール対策　　@ は &#64;　と記述。 メールアドレスなどをエンティティコードに変換　　http://uguisu.skr.jp/html/spam.html

アニメーション付き画像使用ボタンＨＴＭＬ

<a id=”aibutton” class=”oneti” href=”/greeting/”>画像使用ボタン</a>

ＣＳＳ

#aibutton { position: relative; z-index: 2; color: #333; display: inline-block; width: 301px; height: 203px; text-decoration: none; outline: none; line-height: 20px; overflow: hidden; padding: 100px 110px 30px 30px; font-size: 14px; } #aibutton::before, #aibutton::after { position: absolute; z-index: -1; display: block; content: ”; } #aibutton, #aibutton::before, #aibutton::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } #aibutton:hover { color: #fff; text-shadow: 1px 1px 1px #000; } #aibutton::after { top: 0%; left: -100%; width: 100%; height: 100%; } #aibutton:hover::after { left: 0; background: url(“http://q-clinic.jp/wp/wp-content/uploads/2014/07/bg5point.png”); } .anti { background: url(“http://q-clinic.jp/wp/wp-content/uploads/2014/07/bcc79c408d770aa2255d804d9f9f8bd9.jpg”); } .oneti { background: url(“http://q-clinic.jp/wp/wp-content/uploads/2014/07/11.jpg”); } .sinyati { background: url(“http://q-clinic.jp/wp/wp-content/uploads/2014/07/21.jpg”); } .kekkati { background: url(“http://q-clinic.jp/wp/wp-content/uploads/2014/07/41.jpg”); } .houmonti { background: url(“http://q-clinic.jp/wp/wp-content/uploads/2014/07/houmon.jpg”); }  

要素の直前・直後にマークを挿入する

:before擬似要素　:after擬似要素　を使用する

使用例CSS

h2:before{content:”★”;} strong:before{content:”『”;} strong:after{content:”』”;}   ホバーで画像を半透明にする .linkimg:hover { opacity: 0.7; }  

中央ぞろえCSS

margin: 0 auto; 中央ぞろえ(縦） vertical-align: middle;  

検索に引っかからないようにする

<meta name=”robots” content=”noindex,nofollow”>  

ボックスからはみ出したときの指定

overflow:visible　初期値　表示する overflow:hidden;　　表示しない overflow:scroll;　スクロールを表示  

高さをそろえる

<script> window.onload = function(){ heightSetting($(“.servise1 > div”), $(“.servise1 > div”)); } // 高さを調べて一番高いものに統一 function heightSetting(searchTarget, setTarget) { var maxHeight = 0; searchTarget.each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } }); setTarget.height(maxHeight); } </script> 画像や文字をぼやかす

.blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
}