よく使うHTML・CSS

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
 
  よく使うHTML・CSS

よく使うHTML・CSS

アニメーション

-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 表示  

コンテンツ

タイトルデザインCSS

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;

 

[vc_row][vc_column width=”1/1″][mk_blockquote style=”quote-style” font_family=”none” text_size=”12″ align=”left”]

.test { color: #FFF; font-size: 50px; font-weight: bold; text-shadow: 2px 2px 1px #00F, -2px 2px 1px #00F, 2px -2px 1px #00F, -2px -2px 1px #00F; }

[/mk_blockquote][/vc_column][/vc_row]

 

明朝フォント1234

font-family‘Hiragino Mincho ProN’, serif;

font-family:  ‘ヒラギノ明朝ProN’,’Hiragino Mincho ProN’,’游明朝’,’Yu Mincho’,’Takao P明朝’,’TakaoPMincho’,’IPA P明朝’,’IPAPMincho’,’IPA 明朝’,’IPAMincho’,’MS 明朝’,’MS Mincho’,’メイリオ’,’Meiryo’;

ゴシックフォント1234

font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’, Meiryo, sans-serif; 行間 line-height:蛍光ペン マーカー ① お電話にてお問い合わせ 

<span style=”color: #9056a9; background: linear-gradient(transparent 60%, #ff9 40%);”> ① お電話にてお問い合わせ </span>

 

横ナビCSS

/* ——————————————————– subnav ———————————————————– */ #subnav ul{ list-style: none; } #subnav li{ display: inline; padding: 0; margin: 0; float: left; border-radius: 10px; } #subnav li a{ display: block; border: 1px solid #666; background-color: #fffce0; padding: 3px 10px 3px 10px; text-decoration: none; color: #333; margin: 1px; text-align: center; font-size: 14px; } #subnav li a:hover{ background-color: #e95513; color: #fff; } ul#subnav { margin-top:-50px; margin-left: 60px; }    

横ナビHTML

<ul> <ul> <li id=”subnavi3″><a href=”http://#”>タイトル</a></li> </ul> </ul> &nbsp; <ul> <li id=”subnavi4″><a href=”http://#”>タイトル</a></li> </ul> &nbsp; &nbsp; <ul> <li id=”subnavi5″><a href=”http://#”>タイトル</a></li> </ul>

 

電話リンクHTML

<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

アニメーション付き画像使用ボタンHTML

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

CSS

#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

margin0 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);
}

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報

記事はありません

お探しの記事は見つかりませんでした。

東京・千葉の中国語教室

中国語教室