HTML, CSS: Created a basic format for responsive

Other language site
ja ja
Google Translate
  • -

    シェア
  • ---

    LINEで送る
  • -

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

    pocket
  • -

    rss
html5 css3 logo

I created a basic format responsive only with HTML and CSS.

Four patterns of 1 column, 2 columns (left menu or right menu), 3 columns (both ends menu) are achieved by switching the css class.

When it comes to smartphone size, the side menu is displayed on the lower side.

In recent years, Responsive Web Design has become commonplace in the front development of the Web.

In order to realize that, special knowledge is required especially for CSS.
(JavaScript, jQuery too)

However, HTML, CSS, and JavaScript are attractive features that can be made unexpectedly easily by actually touching it.

In this time, HTML and CSS alone created a basic HTML format for responsive web design.

Such things are built in templates like WordPress themes and so there is no need to be conscious of development.

However, knowing the fundamental thing is not a loss, I created it thinking whether it might be for learning purposes.

The HTML is about 20 lines. CSS is about 150 lines, but I do not dare write it for easy reading.

Besides, since there are about 30% definitions that are easy to understand visually, there are few descriptions about the parts of responsive web design.

With only this description, the 4 pattern format can be switched just by changing the class name of css one place. The patterns are as follows.

  • 1 column (main content only)
  • 2 columns (left menu, right main content)
  • 2 columns (right menu, left main content)
  • 3 columns (both ends menu, central main content)

We also added a header and footer area to it.

When displaying in smartphone or tablet size, the menu is displayed under the main content.

I would like you to refer to those who want to know how to realize responsive web design.

HTML

The full text of HTML. That's it.

<!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

Although there are about 150 lines, CSS for responsive web design is from line 40 onwards. I do not do anything difficult.

/* base configure */
div {
    margin: auto;
    font-size: 1.2rem;
    color: #fff;
}
.main {
    background-color: blue;
}
.side-left {
    background-color: red;
}
.side-right {
    background-color: green;
}
.header, .footer {
    background-color: orange;
}
.header {
    margin-bottom: 10px;
}
.footer {
    margin-top: 10px;
}
.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;
}

/* tweak */
.content {
    text-align: center;
}
.main, .side-menu {
    text-align:left;
}
.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;
    }
}

Sample

Each sample page of 4 patterns was prepared. There are two sources, HTML and CSS above. Press each button to display the sample.

Just changing the width of the browser will change the content with responsive web design. You can also look at the test smartphone or tablet with the browser development tool.

Sample page of 1 column (main content only)

Sample page of 2 columns (left menu, right main content)

Just change the <div class = "content column1"> in the 8th line of HTML to <div class = "content column2-left">, and the content switches.

Sample page of 2 columns (right menu, left main content)

Just change the <div class = "content column1"> in the 8th line of HTML to <div class = "content column2-right">, and the content switches.

Sample page of 3 columns (both ends menu, central main content)

Just change the <div class = "content column1"> in the 8th line of HTML to <div class = "content column3">, and the contents switched.

The final summary

The point of CSS, smartphone, tablet size processing is rare. It is only clearing the processing of the width put in for PC and iPadPro.

max-width: 990px;
width: auto;

This is all for smartphone, tablet size code. HTML also defines the side menu according to the display order of the smartphone.

For smartphone, tablet, HTML is displayed in order from the top.

The way of responsive web design is almost like this, most of it can be done by modifying it and adding it.

If you want to do more sticking, you will use JavaScript (jQuery).

SNS also distributes articles.
Leave a Reply

*

If you like this article, share it!