PHP

$langswitch =htmlspecialchars($_GET["lang"], ENT_QUOTES, 'UTF-8' );
if($langswitch===en){
echo '.lang-en{display:block;}';
echo '.lang-jp{display:none;}';
}else{
echo '.lang-en{display:none;}';
echo '.lang-jp{display:block;}';

wordpressのheader.php等に記述

HTML

<div class="lang-en">英語</div>
<div class="lang-jp">日本語</div>

サンプル

Get

GETで取得しhtmlspecialcharsで特殊文字を HTML エンティティに変換。
「===」厳密等価演算子で比較し一致したらCSSを出力します。

問題点

・ページの文字コードは変わらないため海外SEO的にはよくない
・言語が増えるとCSSの記述が増え冗長になる

使うときは簡単に英語切り替えしたい場合が想定されます。

ページ遷移しても言語を切り替えたままにする場合はjavascriptでlocalstorageを使用しパラメータを保存する等が考えられます。

トグルではなく、jqueryでclassを加えたり、外したり。
見た目はCSSでやるため用途はいろいろあります。

初歩的ですがシンプルにしました。（自分用に）

Jquery

$(function() {
$('.btn').click(function(){
if($('#area').hasClass('bold')){
	$('#area').removeClass('bold');
} else {
	$('#area').addClass('bold');
}
});
});

CSS

.bold span{
	background: -webkit-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: -o-linear-gradient(transparent 60%, #ff1493 60%)!important;
	background: linear-gradient(transparent 60%, #ff1493 60%)!important;
	font-weight:bold;
}

HTML

<button class="btn">PUSH</button>
<section id="area">jqueryの<span>addClass(),removeClass(),hasClass()</span>を使用した切替スイッチ。見た目はCSSで制御するため用途は色々。</section>

サンプル

http://promenade.in/run/adclass.html

Jquery

$(function() {
	$('.overbtn').click(function() {
		$(".overlay").fadeToggle();
		});
	$('.overlay').click(function() {
		$(".overlay").fadeToggle();
		});
});

CSS

.overlay {
	position: fixed;
	top: 0;
	z-index: 3;
	display: none;
	width: 96%;
	padding: 2%;
	height: 100vh;
	background-color: rgba(0,0,0,10.8);
}

HTML

<div class="overlay"></div>
<button class="overbtn">PUSH</button>

サンプル

EFO（Entry Form Optimization） すなわちメールフォーム最適化。

MFOだったかEMOだったか覚えられないことがたびたびあります・・。

説明はLIG先生にゆずり・・・

入力してくれる時に吹き出しがでると楽しいですよね！！（？） 真面目なフォームだけじゃつまらない！

ということで吹き出しがでるうざいメールフォームを制作してみました。

吹き出しっぽいものがでるメールフォーム　サンプル

Jquery

$(document).ready(function(){
    $(".formcheck div").hide();
  });

$(function() {
	$("#a").focus(function(){
	if($("#a").val() == ""){
         $("#fa").fadeIn("slow");
				}
    })
    .blur(function(){
         $("#fa").hide();
    })
  });
～～以下くりかえし～～

CSS

.formcheck input{
	display:block;
	margin-bottom:10px;
}

.formcheck label{
	padding: 5px;
	border-radius:5px;
	background-color: #F99;
	font-size: 11px;
	margin:0px;
}

.formcheck div{position: absolute;}

HTML

<div><form class="formcheck"><input id="a" type="text" value="" /> 
<div id="fa"><label>入力してね</label></div> 
</form></div>

アコーディオン型リスト サンプル

ういーんって開くヤツにしてよとか頼まれたり、ブログの項目が増えてくるとやりたくなる時ってあるあるですよね。
スマートフォンサイト全盛のいまならなおさら。

いつのころからかアコーディオン型リストと呼んでいます。

プログラムは人によっていろいろなやり方があると思いますが、できるだけシンプルなのをメモメモ。

jquery読み込み呼び出しで隠してから、.slideToggleを使ってみてます。 普通の.toggleも以前は使われていましたが、jQuery 1.9にて削除されてしまったようです。

他にもトグル系イベントとしては.slideToggleのほかに.fadeToggle、toggleClassもあります。

Jquery

  $(document).ready(function(){
    $(".list").hide();
    $("h3").click(function () {
      $(".list").slideToggle();
    });
  });

※もちろんJqueryが必要です。呼んでください。

HTML

<div class="slidetoggle">
<h3>アコーディオン</h3>
<ul class="list">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</div>

ついでにリストのシマシマCSS

.list li:nth-child(even) {background-color:#ddd;}
.list li:nth-child(odd) {background-color:#eee;}

CSSでのコーディングで左右均等に割り付けレイアウトってどうやってますか？

以前はfloatなどを使って数値入力をして空白をとったりしていたのですが、最近は下記のやり方で落ち着きました。

ul{text-align:center;width:100%;display:table;table-layout:fixed;}
li{display:table;}

リストタグでなくてもできますが、リスト構造の場面で使うことが多いように感じます。

レスポンシブではblockにしてやると通常のリストに戻すことができます。