HTML & CSS 道場コース 上級編

1. ヘッダーをレスポンシブ対応させよう！
index.html
<header>
<div class=”container”>
<div class=”header-left”>
<img class=”logo” src=”https://prog-8.com/images/html/advanced/main_logo.png”>
</div>

<!– モバイル用のヘッダーのメニューアイコン –>
<span class=”fa fa-bars menu-icon”></span>

stylesheet.css
.menu-icon {
color: white;
float: right;
font-size: 25px;
padding: 21px 0;
/* デフォルトではメニューアイコンは非表示に */
display: none;
}

responsive.css
/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {

}

/* モバイル向けレイアウト */
@media all and (max-width: 670px) {
.header-right {
display: none;
}

.menu-icon {
display: block;
}
}

2. トップ部分をレスポンシブ対応させよう！

/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {
.top-wrapper h1 {
font-size: 32px;
}
}

/* モバイル向けレイアウト */
@media all and (max-width: 670px) {
.header-right {
display: none;
}

.menu-icon {
display: block;
}

.top-wrapper .btn {
width: 100%;
}

.facebook {
margin-bottom: 10px;
}

.top-wrapper {
text-align: left;
}

.top-wrapper h1 {
font-size: 24px;
}

.top-wrapper p {
font-size: 14px;
}
}

3. レッスン一覧部分をレスポンシブ対応させよう！
レイアウトの崩れを修正⇒　float: left; を解除

index.html
<div class=”lesson-wrapper”>
<div class=”container”>
<div class=”heading”>
<h2>Learn Where to Get Started!</h2>
</div>
<div class=”lessons”>
<div class=”lesson”>
<div class=”lesson-icon”>
<img src=”https://prog-8.com/images/html/advanced/html.png”>
<p>HTML & CSS</p>
</div>
<p class=”text-contents”>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
</div>
<div class=”lesson”>
<div class=”lesson-icon”>
<img src=”https://prog-8.com/images/html/advanced/jQuery.png”>
<p>jQuery</p>
</div>
<p class=”text-contents”>素敵な動きを手軽に実装できるJavaScriptライブラリです。アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
</div>
<div class=”lesson”>
<div class=”lesson-icon”>
<img src=”https://prog-8.com/images/html/advanced/ruby.png”>
<p>Ruby</p>
</div>
<p class=”text-contents”>オープンソースの動的なプログラミング言語で、シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
</div>
<div class=”lesson”>
<div class=”lesson-icon”>
<img src=”https://prog-8.com/images/html/advanced/php.png”>
<p>PHP</p>
</div>
<p class=”text-contents”>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
</div>
</div>
<!– float: left; を解除 –>
<div class=”clear”></div>
</div>
</div>

stylesheet.css
/* float: left; を解除 */
.clear {
clear: left;
}

4. フッターをレスポンシブ対応させよう！

/* タブレット向けレイアウト */
@media all and (max-width: 1000px) {
.top-wrapper h1 {
font-size: 32px;
}

.heading h2 {
font-size: 20px;
}

.lesson {
width: 50%;
margin-bottom: 50px;
}

footer {
text-align: center;
}
}

/* モバイル向けレイアウト */
@media all and (max-width: 670px) {
.header-right {
display: none;
}

.menu-icon {
display: block;
}

.top-wrapper .btn {
width: 100%;
}

.facebook {
margin-bottom: 10px;
}

.top-wrapper {
text-align: left;
}

.top-wrapper h1 {
font-size: 24px;
}

.top-wrapper p {
font-size: 14px;
}

.lesson {
width: 100%;
}

.message-wrapper .btn {
width: 100%;
}
}