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

html5 css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

の4パターンを用意。

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

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

最新サンプルはこちらで見ることができます。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

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

近年、Webのフロント開発では当たりのレスポンシブウェブデザイン。それを実現するには、とくにCSSに専門性の高い知識が求められています。

（高度なことを行う場合はJavaScriptも）

でも、じっさいに触ってみると意外と簡単にできてしまうのもHTML、CSSの魅力です。今回HTMLとCSSだけで、レスポンシブウェブデザイン対応のHTMLの基本フォーマットを作成しました。

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

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

4パターンのサンプル作成

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の定義だけが実行されフォーマットが切り替わります。

プログラムでHTMLのclass属性を変えて動的に変更することもできる。

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

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

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

PC版はひとつだけ工夫が必要です。サイドメニューの表示位置をCSSで調整しました。

  • display: inline-block
  • float: left

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

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

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

HTML&CSSで不可能な高度なことをしたいときはJavaScriptを使います。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ
前の投稿
HTML5&CSS iframe, マップ, YouTubeがスマホではみ出ないように表示する
HTML5&CSS3, レスポンシブ対応の基本フォーマットを作成した
次の投稿
  1. ホーム /
  2. 上級者 - 最高のWebマスター /
  3. HTMLとCSS /
  4. HTML&CSS,【旧】レスポンシブ対応の基本フォーマットを作成した

HTML&CSSの本

post-cta-image

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

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

コメントを残す

*

新着記事