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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
en_US en_US
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

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

/* 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の処理をクリアしているだけです。

タブレット・スマホのCSS
.xxxx {
  max-width: 990px;
  width: auto;
}

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

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

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

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

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

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

HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

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

*

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

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