onmouseover属性とonmouseout属性を使用しての画像の切り替えをコーディングで使用することも多いと思いますが。
PCでは問題なく画像が表示されていても、iPhoneで画像をタップすると画像が消えてしまうバグが存在します。
リンク先には飛べますが、リンクからバックで戻ってきても画像がそのままの状態でキープされてしまい、リロードしないと再表示されない状態になります。
元の画像が消えないように
onmouseoverでロールオーバー画像を指定（PC表示）
onmouseoutでロールオーバー前の画像を指定（PC表示）
onmouseupでタップ前の画像を指定（iPhone表示）
3つの指定をしなければなりません。
readyはDOMツリーの構築が完了してから実行されます。
loadは画像などのサイト内のデータなど、全てが読み込まれてから実行されます。
readyは画像などが表示されるより前に実行されます。
$(function(){
alert('');
});
$(document).ready(function() {
alert('');
});
$(window).on('load',function(){
alert('Hello');
});
記事を公開してから指定した期間「新着アイコン」を表示
WordPresで新着に記載した記事に対して、「新着」のアイコンの表示を可能にする方法です。
新着アイコンを表示させたい場所に、下記を記述します。「$days = 7;」の部分に指定したい期間を入力するとその期間、新着アイコンが表示されます。
下記では、投稿してから一週間、新着アイコンが表示されます。
$elapsed ) {
echo '新着';
}
?>
pcで見たときのメニューボタンを押したときのスライドの動きは横から、spの表示の時には上から表示させる方法です。
以下では、ウィンドウサイズを拾得して、その画面サイズが768px以下の時に、動きを切り替えています。
応用次第でレスポンシブコーディングに役立てることが可能です。
また、iphoneやandoroidといった機種を指定での条件分岐も可能です。
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
スマートフォンでの処理
} else {
pcの場合の処理
}
場合によって、使い分けるとよいでしょう
Transformとはあらかじめ設定された要素を変形させることが可能です。
注意すべきことはベンダープレフィックスが必要であるということです。
記述する際にはIE9、androidのブラウザに対応させるため,
ベンダープレフィックスの記述する必要があります。
-webkit-transform : rotate(10deg) ; -ms-transform : rotate(10deg) ; transform : rotate(10deg) ;
X軸側への横軸の移動/Y軸側への横軸の移動/Z軸…奥行きの移動
transform: translateX(50px);
transform: translateY(50px);
transform: translateZ(50px);
上記の記述だけでなくショートハンドラで省略して記述が可能です。
X軸とY軸側への移動
transform: translate(50px, 50px);
X軸とY軸とZ軸側への移動
transform: translate3d(50px, 50px, 50px);
$('button').click(function() {
alert('');
});
onを使って、下記のように.on()を使ってイベントを定義できます
$('button').on('click', function() {
alert('');
});
.on()で可能なこと
１、複数のイベントを、同じイベントハンドラを定義することができます。
２、複数のイベントとイベントハンドラを一括定義
.on()の第一引数にイベントタイプをキー、イベントハンドラを値を指定することで、イベントごとに異なる処理を一括して定義できます。
３、データを渡すことができます。.on()では、引数を渡すことができます
４、.on()で定義したイベントを、.off()を使って解除ができます。
flexアイテムが3カラムの場合に、afterなど擬似要素を利用して空白のflexアイテムを生成することで、どんな数でも左寄せに表示することができます。
.box{
border:3px solid #21a8cd;
padding:10px;
display : flex;
flex-wrap : wrap;
justify-content:space-between;
}
.box::after{
content:"";
display: block;
width:30%;
}
.box li{
border:3px solid #ae21cd;
padding:10px;
margin-bottom:10px;
box-sizing:border-box;
width:30%;
}
グラデーションは background プロパティに linear-gradient の値を指定します。
content {
background: linear-gradient(#05FBFF, #1E00FF);
}
■角度を変更
deg で角度を指定できます。
content {
background: linear-gradient(-135deg, #333333, #22233);
}
■円形グラデーション
直線でのグラデーションではなく、円形のグラデーションを実装するには linear-gradient ではなく radial-gradient を使います。
content {
background: radial-gradient(#AAAAAA, #666666);
}
要素の横幅を均等に分けたレイアウトをコーディング
したいとき、Flex boxは便利なプロパティです。
box-flexプロパティは子要素を並べた時の余白の領域を分配する比率を指定してくれます。
.box {
display: -webkit-box;
display: box;
}
.box div {
-webkit-box-flex: 1;
box-flex: 1;
width: 100%;
}
width: 100%」とするとすべての子要素が同じ100%の横幅になろうとしますが、均等に縮めるように配置されるため、均等幅になります。
ワードプレスで、urlによって表示させる内容を分岐させる方法です。
表示させる内容 表示させる内容
動的に吐き出されるソースで、urlさえわかっていれば、メイン画像の切り替えなどが可能になります。