HTMLとCSSでレスポンシブなサイトを作成する際のメモ

HTMLとCSSでレスポンシブなサイトを作成する際のメモBootstrap使えばある程度よいかもしれないんですが、理解するために勉強です。あ、あと、単純にドットインストールの数をこなしたい的なところもあります。

メディアクエリ

@mediaを利用して条件に合致した場合のみCSSを適用するようにする。min-widthの部分は条件設定。下記の場合、480pxより横幅が狭ければ基本スタイルに加えてスマホのスタイルだけが読み込まれる。480-768pxならば真ん中、768px以上なら最後だけ読み込まれる。

/* 基本的なスタイル */

...

/* スマホのスタイル */

#headerNav {
    display: none;
}

/* タブレットのスタイル */

@media all and (min-width: 480px) {
    #footerNavLink {
        display:none;
    }
    #headerNav {
        display: block;
    }
    #footerNav {
        display: none;
    }
}

/* PCのスタイル */

@media all and (min-width: 768px) {
    #container {
        overflow: hidden;
    }
    #main {
        float: left;
        width: 78.061225%;
    }
    #sub {
        float: right;
        width: 20.4081633%;
    }
}

非表示

display: none;で非表示。

#headerNav {
    display: none;
}

viewport

スマホなどのデバイスに対応しているよということを宣言。(参考)

<meta name="viewport" content="width=device-width, initial=1.0">

iframeの表示

iframeの表示にはコツが必要らしい。今回はYoutubeの例。最上位のdivはちょっと手抜きでhtmlファイル内に記載されている様子。

html

<div style="width: 75%; margin:0 auto">
    <div class="movie">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/PlqVgkVq1gw" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
.movie {
    position: relative;
    height: 0;;
    padding-top: 56.25%; /* youtube 16:9 */
}

*css*

iframe {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

参考

Pocket
LINEで送る

You may also like...