アクセス制限で検索エンジンのみ許可する.htaccessです。SetEnvIf Referer "^http://google" chk_urlSetEnvIf Referer "^https://google" chk_urlSetEnvIf User-Agent "Google-Site-Verification" allowbotSetEnvIf User-Agent "Googlebot" allowbotSetEnvIf User-Agent "Slurp" allowbotSetEnvIf User-Agent "bingbot" allowbot※ Google、MSN、Bing、Yahoo!のbotのみを許可。※ 上...

windowsとmac両方で丸ゴシックを表示させるCSSです。font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";

特定のURLの時のみIDにclassを付与するjsです。<script type="text/javascript">hideClass = location.href.indexOf("xxxxxxx"); if ( hideClass !== -1 ) { document.getElementById("btn").className = "active";}</script>※URLに「xxxxxxx」がある時のみ、id="btn"にactiveというclassを付与。

スマホの場合のみtelリンクを有効にするjsです。if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) { $(function() { $('.tel_link').each(function() { var str = $(this).html(); if ($(this).children().is('img')) { $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).a...

要素それぞれの色を変えたい時など、特定のクラスに連番でidを振るjQueryです。もちろん、jQuery本体は読み込んだ状態で書いてくださいね。<script>$(function(){    $('.example').each(function(i){       $(this).attr('id','category' + (i+1));    });});</script>※ li class="example"にid="category1"から連番で付与。クラス名、id名は自由に変えてください。

hover時にふわっと変化すると、一気にオシャレな印象になります。（僕だけですか？）対象のaタグに以下を記述するだけ。transition-property: all;transition: 0.3s linear;0.3sはスピードの設定なのでお好みで変えてください。

擬似クラスのcontentに直接画像を設定してしまうとサイズ変更が出来ない為、不便ですよね。そこで、擬似クラスの背景として画像を入れることでbackground-sizeでサイズ変更を出来るようにします。そうすることでレスポンシブデザインにも柔軟に対応できます。↓をコピペでwidth、height、background-imageの指定を変えるだけでOK。（場合によっては場所指定も変えてくださいね）a:before { content: ''; display: inline-block; width: 00000px; height: 00000px; background-ima...

cssだけで三角や四角を描写する、中級者向けのテクニック。この、要素にposition:relativeを付けてbeforeとafterを使う手法は色んな描写に応用できますよね。色や大きさは任意ですので、自由に変更してください。/*下向き三角*/p{position:relative;}p:before{content: "";width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #000;}/*頭に四角*/p{position:relative;}p:bef...

※を使った注意事項など、2行目から1文字下げたい時に使うCSSです。p {padding-left: 1em;text-indent: -1em;}

マウスがhoverした時に透過させるcssです。本当によく使うのでコピペ用。a:hover{    opacity: 0.8;    -moz-opacity: 0.8;    filter: alpha(opacity=80);    zoom: 1;    -ms-filter: "alpha(opacity=80)";    }IE対策も施してあります。