HTML&CSS: 【旧】レスポンシブ対応の基本フォーマットを作成した

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
html5 css3 image
イラストACの画像をもとに加工しています。

HTMLとCSSだけで、レスポンシブに対応したWebページの基本フォーマットを作成しました。

  • 1カラム
  • 2カラム(左メニュー、右メニュー)
  • 3カラム(両端メニュー)

の4パターンを用意しています。

cssクラスを1か所変えるだけでパターン変更ができて、スマホサイズになるとサイドメニューが下の方に表示されるようにしています。

HTML5, CSS3から、もっとかんたんに作れるようになったので、ソースコードサンプルを全面的に見直しました。
最新サンプルはこちらで見ることができます。

HTML,CSS基本フォーマット作成に際して

近年、Webのフロント開発では当たり前になっているレスポンシブウェブデザイン。

それを実現するには、とくにCSSに専門性の高い知識が求められています。
(高度なことを行う場合はJavaScript, jQueryも)

ですが、実際に触ってみると意外と簡単にできてしまうのもHTML、CSSの魅力です。

今回、HTMLとCSSだけで、レスポンシブウェブデザイン対応のHTMLの基本フォーマットを作成しました。

このようなものは、WordPressのテーマなどテンプレートの中にすでに組み込まれています。普段は意識する必要はないですし、絶対に必要な知識でもありません。

しかし、根本的なことを知ることは損ではないので、学習用としてあってもいいかなと思って作成しました。

HTMLは約20行です。CSSは150行ぐらいですが、読みやすいようにあえてまとめた記述をしていません。また、視覚的にわかりやすいような定義も30%ぐらいあるので、レスポンシブの部分に関する記述は少ないです。

たったこれだけの記述で、cssのクラス名を1か所変えるだけで、4パターンのフォーマットが切り替えられるようになっています。

パターンは次の4つです。

  • 1カラム(メインコンテンツのみ
  • 2カラム(左メニュー、右メインコンテンツ
  • 2カラム(右メニュー、左メインコンテンツ
  • 3カラム(両端メニュー、中央メインコンテンツ

これにヘッダとフッタの領域も付けました。

スマホやタブレットサイズで表示するときは、メニューがメインコンテンツの下に表示されます。

レスポンシブデザインをどのように実現しているのか知りたい人にぜひ参考にしていただければと思います。

レスポンシブに対応したHTML文

HTMLの全文です。たったこれだけです。

<!DOCTYPE HTML>
<html>
<head>
    <link rel='stylesheet' id='rwd-base-css' href='rwd-base.css' type='text/css' media='all' />
</head>
<body>
    <div class="header">Header</div>
    <div class="content column1">
        <div class="left-group">
            <div class="main">Main Content</div>
            <div class="side-menu side-left">Left Side Menu</div>
        </div>
        <div class="right-group">
            <div class="side-menu side-right">Right Side Menu</div>
        </div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

レスポンシブに対応したCSS記述

150行くらいありますが、レスポンシブ用のCSSは、40行目以降からです。難しいことは何1つしていません。

/* base configure */
div {
    margin: .5em auto;
    padding: .5em;
    text-align: center;
    font-size: 1.2rem;
    color: #fff;
}
.main {
    background: #7fc2ef;
}
.side-left {
    background: #d685b0;
}
.side-right {
    background: #dbe159;
}
.header, .footer {
    background: #ffe9b6;
}
.main, .side-left, .side-right {
    min-height: 200px;
}

/* content width init */
.column1 .main {
    width: 976px;
}
.column2-left .main, .column2-right .main {
    width: 670px;
}
.column3 .main {
    width: 670px;
}

/* detail configure of responsive web design */
/* above pc laptop (exclude iPad Pro) */
@media (min-width: 1025px) {
    .column3 .main {
        width: 475px;
    }
}

@media (min-width: 1100px) {
    .column3 .main {
        width: 540px;
    }
}

@media (min-width: 1200px) {
    .column3 .main {
        width: 650px;
    }
}

@media (min-width: 1300px) {
    .column3 .main {
        width: 670px;
    }
}

.column2-left .side-menu, .column2-right .side-menu {
    width: 300px;
}
.column3 .side-menu {
    width: 260px;
}

.right-group {
    vertical-align: top;
}

/* display column */
.column1 .side-left, .column1 .side-right {
    display: none;
}
.column2-left .side-right, .column2-right .side-left {
    display: none;
}

/* PC All */
@media (min-width: 992px) {
    .left-group, .right-group {
        display: inline-block;
    }
    .column2-left .main, .column2-left .side-left {
        float: right;
    }
    .column3 .main, .column3 .side-left {
        float: right;
    }
    /* tweak */
    .side-left {
        margin-right: 6px;
    }
}

/* iPad Pro */
@media (max-width: 1024px) {
    .column3 .right-group {
        display: block;
    }
    .column3 .side-right {
        margin-left: 310px;
        margin-right: 50px;
        margin-top: 10px;
        width: 640px;
    }
}

/* PC: laptop */
@media (max-width: 1200px) {
    .column2-left .side-menu, .column2-right .side-menu {
        width: 270px;
    }
}

/* Tablet */
/* phone */
@media (max-width: 991px) {
    .column1 .main {
        max-width: 990px;
        width: auto;
    }
    .column2-left .main, .column2-left .side-menu {
        max-width: 990px;
        width: auto;
    }
    .column2-right .main, .column2-right .side-menu {
        max-width: 990px;
        width: auto;
    }
    .column3 .main, .column3 .side-menu {
        max-width: 990px;
        width: auto;
    }
    .column3 .side-right {
        margin: 0;
        max-width: 990px;
        width: auto;
    }
}

レスポンシブ対応基本フォーマットのサンプルページ

それぞれ4パターンのサンプルページを用意しました。ソースは上のHTML、CSSの2つです。各ボタンを押すとサンプルが表示されます。

ブラウザの横幅を変えるだけでレスポンシブにコンテンツが変化します。ブラウザの開発ツールでテスト用スマホ、タブレットでも確認できます。

1カラム(メインコンテンツのみ)のサンプルページ

2カラム(左メニュー、右メインコンテンツ)のサンプルページ

HTMLの8行目の<div class="content column1">を<div class="content column2-left">に変更するだけで、コンテンツが切り替わります。

2カラム(右メニュー、左メインコンテンツ)のサンプルページ

HTMLの8行目の<div class="content column1">を<div class="content column2-right">に変更するだけで、コンテンツが切り替わります。

3カラム(両端メニュー、中央メインコンテンツ)のサンプルページ

HTMLの8行目の<div class="content column1">を<div class="content column3">に変更するだけで、コンテンツが切り替わります。

まとめ

クラス名を変えるだけでフォーマットが変更される仕組みは、すべてのフォーマットに対応するクラス名をCSSに書くことです。

これで、HTMLでクラス名を変更すると、それに対応したCSSの定義だけが実行され、フォーマットが切り替わります。プログラムでクラス名を変更して動的にフォーマット変更することもできます。

そのほかのCSSのポイントは、スマホ、タブレットサイズの記述はほとんどないことです。PC、iPadPro用に入れたwidthの処理をクリアしているだけです。

max-width: 990px;
width: auto;

スマホ、タブレットサイズのコードはこれだけです。

また、PC版の場合はひとつだけ工夫が必要です。サイドメニューを"display: inline-block""float: left"を使って表示位置を調整しました。

HTMLはスマホの表示順に合わせてサイドメニューを定義しています。スマホ、タブレットの場合、CSSではほとんど制御していません。HTMLを上から順に表示しています。

  • HTMLはスマホの表示順に合わせて書く
  • CSSのスマホ・タブレットの記述はwidthのクリア処理だけ
  • CSSは、PC、iPadPro用のサイズ指定とサイドメニューの位置調整が中心
  • フォーマット切り替えはクラス名を変更するだけ

レスポンシブの方法はだいたいこんな感じです。ほとんどのことはこれの応用でできるでしょう。

HTML、CSSで不可能な高度なことをしたい場合は、JavaScript(jQuery)を使うことになります。

 

最近Webカテゴリでよく読まれている記事です。
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!