CSS3 メディアクエリの例

この章では、いくつかのメディアクエリの例を紹介します。

始める前に、電子メールのリンクリストを作成しましょう。HTMLコードは次のとおりです。

例1

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px;
    display: block;
}
</style>
</head>
<body>

<ul>
<li><a data-email="[email protected]" href="mailto:[email protected]">John Doe</a></li>
<li><a data-email="[email protected]" href="mailto:[email protected]">Mary Moe</a></li>
<li><a data-email="[email protected]" href="mailto:[email protected]">Amanda Panda</a></li>
</ul>

</body>
</html>

試してみる »

注意data-email属性。HTMLでは、接頭辞をdata-付けた属性を使用して情報を保存できます。

幅520pxから699px - メールアイコンを追加

ブラウザの幅が520pxから699pxの場合、メールリンクの前にメールアイコンを追加します：

例2

@media screen and (max-width: 699px) and (min-width: 520px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

試してみる »

700pxから1000px - テキストの接頭辞情報を追加

ブラウザの幅が700pxから1000pxの場合、メールリンクの前に「Email: 」を追加します：

例3

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

試してみる »

幅1001px以上 - メールアドレスを追加

ブラウザの幅が1001pxより大きい場合、リンクの後にメールアドレスを追加します。

私たちはdata-属性を使用して、それぞれの名前の後にメールアドレスを追加します：

例4

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}

試してみる »

幅1151px以上 - アイコンを追加

ブラウザの幅が1001pxより大きい場合、名前の前にアイコンを追加します。

この例では、追加のクエリブロックを記述していません。既存のメディアクエリの後にカンマ区切りで他のメディアクエリを追加できます（OR演算子に似ています）。

例5

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

試してみる »

その他の例

ウェブページのサイドバーでメールリストリンクを使用する
この例では、ウェブページの左サイドバーにメールリンクリストを追加しています。

その他の拡張