月別アーカイブ: 9月 2017

2017.9.12
html&css

HTMLとCSSだけでタブが実装！？？！

できるんだなァこれが…

HTMLはこれ

<div class="tab-content">
<input type="radio" id="tab1" name="tab" checked><label for="tab1">タブ1</label><input type="radio" id="tab2" name="tab"><label for="tab2">タブ2</label><input type="radio" id="tab3" name="tab"><label for="tab3">タブ3</label>
<div class="tab-box">
<div id="tabView1">コンテンツ1の内容が表示されます。コンテンツ1の内容が表示されます。</div>
<div id="tabView2">コンテンツ2の内容が表示されます。コンテンツ2の内容が表示されます。</div>
<div id="tabView3">コンテンツ3の内容が表示されます。コンテンツ3の内容が表示されます。</div>
</div>
</div>

CSSはこれ

.tab-content input[type="radio"] {
display: none;
}

.tab-content label {
display: inline-block;
padding: 5px 10px;
font-weight: bold;
font-size: 13px;
color: #009900;
background-color: #e1fae1;
cursor: pointer;
box-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.3);
border-radius: 5px 5px 0 0;
box-sizing: border-box;
}
.tab-content label:hover,
.tab-content input[type="radio"]:checked + label {
color: #FFF;
background-color: #009900;
}

.tab-content .tab-box {
width: 250px;
height: 100px;
padding: 10px;
border: 2px solid #009900;
border-radius: 0 5px 5px 5px;
box-sizing: border-box;
}

.tab-content > .tab-box > div {
display: none;
}

#tab1:checked ~ .tab-box > #tabView1 {
display: block;
}

#tab2:checked ~ .tab-box > #tabView2 {
display: block;
}

#tab3:checked ~ .tab-box > #tabView3 {
display: block;
}

素晴らしい

2017.9.12
html&css, js

スマートフォン閲覧時のみリンク先を切り替えるヨ

htmlはこんな感じ。

<a href="http://hogehogehoge.hoge" data-sp-href="http://hogehogehoge.hoge/sp">りんくりんく</a>
//
// スマートフォンかどうか判断して、スマートフォンの場合のみ処理。
//
if (IsSmartPhone())
{
//
// ソースが全て書き出された後に処理。
//
$(function()
{
//
// 全ての『data-sp-href』属性を繰り返し処理。
//
$('body').find('[data-sp-href]').each(function()
{
//
// リンクを入れ替え。
//
$(this).attr('href', $(this).attr('data-sp-href'));
});
});
}
//
// スマートフォンかどうか判断するメソッド。
//
function IsSmartPhone()
{
// デバイスの種類。
var media =
[
'iPhone',
'Windows Phone',
'Android'
];
var pattern = new RegExp(media.join('|'), 'i'); //デバイスの種類を正規表現にする。
return pattern.test(navigator.userAgent); //ユーザーエージェントにデバイスが含まれるかを調べる。
}
2017.9.12
js

元画像サイズを取得して拡大縮小 

<div class="hoge">
<img src="./img/gazo.png">
</div>

とかで、

.hoge img{
width: 50%;
}

とかにすると確実に親要素のhogeの横幅の50％になりがち。
元画像サイズの50%がいいんだけどそういうプロパティも無いっぽいから
無理矢理力技でねじ伏せる！

ということで以下。

<img src="hoge.png" onload="this.width = this.width*0.5" />