クリエイター：コーディング備忘録ブログ – ページ 58 – クリエイター：コーディング備忘録ブログ

幅サイズ不明のdiv要素を中央揃え

2017/7122017/712 admin コメントをする

中央寄せにする、横幅が可変な要素をdivタグで囲い、外側の要素にtext-align: center;を指定します。
中央寄せにしたい要素にdisplay: inline-block;を指定します。

指定することで、親要素のtext-align: center;によって中央寄せになります。

■html

テスト
テスト
テスト

■css
.test_wrapper {
text-align: center;
}
.test {
display: inline-block;
}

bxSliderカスタマイズ

2017/7112017/711 admin コメントをする

簡単に設置することができるjQueryのスライドショー、bxSliderのカスタマイズ

たくさんのオプションが用意されており、
■mode

スライドショーの種類

デフォルトで：horizontal

horizontal：横スライドする
vertical：縦スライドする
fade：フェードイン・フェードアウト

など色々な方法で表現ができます。

写真をマスク

2017/7102017/710 admin コメントをする

プロパティのclip: rect(上側, 右側, 下側, 左側 )で画像の表示範囲を指定することが可能です。
positionプロパティをabsoluteに、rectの中は(上側右側下側左側)です。
■css
.test img{
position: absolute;
clip: rect(50px 50px 50px 50px);
}

初期値は auto（切り抜かない）です。

画像の上に文字を配置

2017/772017/77 admin コメントをする

マウスオーバーで注釈を出す方法です。
通常時に注釈を隠し、マウスオーバー時にtranslateY()で縦方向に移動させることで
配置します。

■html

■css
figure.test {
text-align: center;
overflow: hidden;
position: relative;
width: 100%;
}

figcaption.overray-cap {
bottom: 0;
left: 0;
position: absolute;
transform: translateY(100%);
transition: all .35s;
width: 100%;
-webkit-transition: all .35s;
}

figure.test:hover .overray-cap {
transition-delay: .1s;
transform: translateY(0);
}

figure.test img {
vertical-align: bottom;
width: 100%;
}

レスポンシブ

2017/762017/76 admin コメントをする

レスポンシブ化する前に、CSSを指定する時に知っておくと便利なこと

■widthやheightの固定を解除する
widthやheightはautoを指定する事が可能です。
widthはブロック要素なら％指定で横幅いっぱいに、heightはコンテンツ内容に合わせた高さになります。

■max-width などの上限下限指定を消す
max-width, max-heightはnoneを指定するが可能です。

■position:absolute; の打ち消し
position:relative;を指定で、top:50pxなど位置の指定はtop:autoと指定することで打ち消す事ができます。

1行で、レスポンシブ改行テクニック

2017/752017/75 admin コメントをする

■html

てすとてすとてすとてすとてすとてすと

■css
span{display:inline-block;}

span要素に「display:inline-block;」を指定。
タグを改行したい部分、後ろ側に指定して、画面とテキストの量に応じて自動的に改行してくれます。
使い道として、見出しやコピーライトなどに使うことができます。

メインビジュアルの背景を動画にする

2017/752017/75 admin コメントをする

自社のサイトリニューアルの際に、メインビジュアルで動画を流すことになったので、
html5のvideoタグと、再生を制御するjavascriptについて解説します。

■HTMLソース

<div id="mainVisual">
  
  <div id="cover"></div>
    <video autoplay id="bgvid">
      <source src="asset/movie/video.mp4" type="video/mp4">
    </video>

</div>
<!-- /mainVisual -->

■css

html, body {
    height: 100%;
}
#mainVisual {
    width: 100%;
    height: 100%;
}
#mainVisual video#bgvid {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}
#cover {
    background: url(../../asset/movie/cover.jpg) no-repeat;
    background-size: cover;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: 5s;
}
#cover.fade {
    opacity: 0;
}

今回は、動画をフェードインさせる必要があったので、video要素の直前にカバー画像用のdivを作りました。
video自体をjQueryでフェードインさせると、処理が重たくなり再生がスムーズにされなかったので、
フェードイン効果はcss3で実装しています。

■javascript

<script>
$(window).load(function() {
  $('#cover').addClass('fade'); //#coverにクラスを付与
});
$(function() {
        var video = document.getElementById('bgvid');
        //再生位置を秒で設定する
        video.currentTime = 11;
        // 再生速度を変更する
        video.playbackRate = 1;
        // 再生開始
        video.play();
    });
</script>