投稿者「あたい」のアーカイブ

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" />
2017.3.27
js

phpを使わずグローバルナビの現在ページに～の改良版？

前に書いたやつもいいのですが、正直階層化してるサイトには向かないです。
ということでこれが使えます。

<script>
//グローバルナビの現在ページの取得
$(function(){
var id = $("body").attr("id");
$(".g_navi ul li a."+id).addClass("on");
});
</script>

各ページのbodyにidで付けた名前と、グローバルナビのaタグにclassで付けた名前が一致すればcurrent的なクラスが付与されます！（ここではclass=”on”
これならいくら階層化してようが問題ナシです

2017.3.25
html&css, js

phpを使わずに現在のページのナビボタンに色を付ける

これはすごく便利。

絶対パスでの指定

CSS

#menu a{color: #777}
#menu a.on{color: #000}

html

<ul id="menu" class="cf">
<li><a href="http://abc.com/index.html">home</a></li>
<li><a href="http://abc.com/page_sub1.html">sub1</a></li>
<li><a href="http://abc.com/page_sub2.html">sub2</a></li>
<li><a href="http://abc.com/page_sub3.html">sub3</a></li>
<li><a href="http://abc.com/page_sub4.html">sub4</a></li>
</ul>

JS

$(function(){
var url = $(location).attr('href');
$('#menu').find('a').each(function(){
var link = $(this).attr('href');
if(link == url){
$(this).addClass('on');
}
});
});

直接○○.htmlとしてしまうような場合には下記のようにJSを書き換えます。Aタグの中身で分岐して一つのコードにしても良いかと思います。

html

<ul id="menu" class="cf">
<li><a href="page_index.html">home</a></li>
<li><a href="page_sub1.html">sub1</a></li>
<li><a href="page_sub2.html">sub2</a></li>
<li><a href="page_sub3.html">sub3</a></li>
<li><a href="page_sub4.html">sub4</a></li>
</ul>

JS

$(function(){
var url = $(location).attr('href');
var url_sp = url.split("/");
var file = url_sp[url_sp.length - 1];
$('#menu').find('a').each(function(){
var link = $(this).attr('href');
if(link == file){
$(this).addClass('on');
}
});
});

現在アクセス中のURLを取得し、次に/最後のテキストを取得します。この取得したテキストの内容に応じてクラスをつけています。

2017.3.25
html&css, js

ページ読み込んだときに要素をフワっと出すやつ

スクロールしたら要素をふわっと出すコラムはいっぱいあるけど、
ページを読んだ瞬間にイベント発火ってなかなかない…。

というわけで作りました。
flashつくれないんだな～～！って人にいい感じだと思いますます。
外部jsで読んでもいいよ。

<script>
$('#animation').css('visibility','hidden');//ふわっと表示
$(function () {
var windowHeight = $(window).height(),
topWindow = $(window).scrollTop();
$('#animation').each(function(){
var targetPosition = $(this).offset().top;
if(topWindow > targetPosition - windowHeight + 1){
$(this).addClass("fadeInDown");
}
});
});
</script>

CSSはこちら

.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-ms-animation-duration:2s;
animation-duration:2s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

「2s」は何秒でふわっとが終わるかの設定だよ。
「-100px」はどんくらい移動するかの設定だよ。

最近のCSSはすごいね！！！！

2017.3.25
html&css

ulの中にliで並べたメニューを綺麗に等分出来るやつ

ulとliを駆使してメニュ－を並べたい時ってあるよね！
でも横幅1000pxに対してメニューのボタンが7つ！なんか小数点出る気がする～～～～！
って時に便利なのがこれだ！

li.7col {
width : 14.285% ; /* 未対応ブラウザ用フォールバック */
width : -webkit-calc(100% / 7) ;
width : calc(100% / 7) ;
}

ベンダープレフィックスつきだよ！

あとこれだと何故かliの間に隙間が空いて最後のメニューがどっか行くパターンあるので以下をやる！

ul {
font-size: 0;
}
li {
font-size: 12px;
}

ulとliに各々追加してあげれば綺麗に収まる！楽ちんだ！

2017.3.7
html&css

flexbox便利

flexboxって便利ですね

ゲーム感覚で出来るお勉強サイト

http://flexboxfroggy.com/#ja

分かりやすく解説しているサイト

http://scene-live.com/page.php?page=59

floatだと他の要素の干渉を受けて狂いがちですけど、これは結構安定感ある気がします。
これから覇権を取る気がするCSS

2017.3.6
Photoshop

Photoshopでのバッチ処理（画像のリサイズ系）

https://techacademy.jp/magazine/2048

バッチで処理すると大量の画像を一気に作業できるよ。
アプリの製造とかの時にリソース切らされるときに使えるよ。

カンバスサイズの変更から画像解像度変更までというかアクションで覚えさせるのでなんでも来いです。
ちなみに、例えば一括で画像を「左に+50px」したい！「右に-40px」したい！とかありますよね。

そういうときは、カンバスサイズの「□相対」にチェックを入れてマイナスとかプラスとか入れた状態で数値を入れればOK！

べんりだ！！！！！

2017.3.6
useful

エディタでの正規表現～特定の文字列を含む行を削除～

タイトルのまんまです。
結構、そういうことあります。

ってことで以下記載。

^.*『特定の文字列』.*\r\n

※OSとかの違いで改行コードが

「\n」や「\r」

だったりするので適宜変えよう。

← 以前の投稿
新しい投稿 →