「html&css」カテゴリーアーカイブ

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.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.2.21
html&css

block要素がまとめてあるサイト

block要素って実はあんまりよく分かってなかったりする。
firebugで適当に変更していい感じで表示されたものを使ってたりもする…（これはよくない
というわけで仕事の合間に勉強ということで以下のサイトを見つけました。

わかりやすい！

https://seopack.jp/internal-seo/smartphone/handy-css-display.php

2016.12.14
html&css

一枚の大きな背景画像をブラウザいっぱいに貼る！そして繰り返さない！

最近流行してる大きな画像をbodyに設定するやつ！
よくそういうデザイン作ってますが、単純に「background-size: cover;」 だと横は良いけど縦が繰り返す！
ってことで下のコードで固定されて安心安心

body {
background-color: #000;/* 見えちゃった時の保険 */
background-image: url("hogehoge.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
新しい投稿 →