だんだんページが出来てきましたね。前回トップの画像エリアのPC版が完成しました。続けてSP版を作っていきましょう。以下の画像のデザインです。

〜目次〜
文字の調整
文字の調整をします。今回は文字サイズの変更だけなのでシンプルですね。
1 2 3 4 5 6 7 8 9 10 11 |
style.css @media screen and (max-width:768px) { .bigimage__main-catch { font-size: 2.4rem; } .bigimage__sub-catch { font-size: 1.2rem; } } |
外枠の調整
外枠のサイズを調整します。height: 64rem;のままだとスマホなどでは大きいですね。そしてheaderの時と同様に、画面幅が960px以下の時に中の文字が端によらないようbigimageクラスにpaddingを追加します。また、innerクラスのpaddingも合わせて小さくし、文字の位置を整えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
style.css .bigimage { /*省略*/ padding-left: 2rem; padding-right: 2rem; } @media screen and (max-width:768px) { .bigimage { height: 30rem; } .bigimage__inner { padding-top: 10rem; } } |
これでSP版完成です!以下の画像の通りになっているでしょうか?

完成コードの確認(クリックで開きます)
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style/style.css"> </head> <body> <header> <div class="header__inner"> <div class="header__logo"> <img src="./img/logo.png"> </div> <div class="header__nav"> <a href="#section1" class="nav__item">リンク1</a> <a href="#section2" class="nav__item">リンク2</a> <a href="#section3" class="nav__item">リンク3</a> </div> <div class="header__menu"> <img src="./img/menu.svg" alt=""> </div> </div> </header> <div class="body"> <div class="bigimage" style="background: url(./img/bigimage.jpg) no-repeat center; background-size: cover"> <div class="bigimage__inner"> <div class="bigimage__text"> <div class="bigimage__main-catch"> html/css Practice </div> <div class="bigimage__sub-catch"> 〜a common page〜 </div> </div> </div> </div> </div> <footer> </footer> </body> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
* { box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; margin: 0; } a { display: block; color: #000; text-decoration: none; } img { display: block; width: 100%; height: auto; } header { width: 100%; height: 6rem; background: #000; padding-left: 1.5rem; padding-right: 1.5rem; } .header__inner { width: 100%; max-width: 96rem; height: 100%; margin: auto; display: flex; justify-content: space-between; align-items: center; position: relative; } .header__logo { width: 15rem; } @media screen and (max-width:768px) { .header__logo { margin: auto; } } .header__nav { width: 25rem; display: flex; justify-content: space-between; } @media screen and (max-width:768px) { .header__nav { display: none; } } .nav__item { color: #fff; font-size: 2rem; } .header__menu { display: none; width: 3rem; height: 3rem; position: absolute; top: 1.5rem; right: 0; } @media screen and (max-width:768px) { .header__menu { display: block; } } .bigimage { width: 100%; height: 64rem; padding-left: 2rem; padding-right: 2rem; } .bigimage__inner { width: 100%; max-width: 96rem; height: 100%; margin: auto; padding-top: 30rem; } @media screen and (max-width:768px) { .bigimage { height: 30rem; } .bigimage__inner { padding-top: 10rem; } } .bigimage__text { display: flex; align-items: flex-end; flex-direction: column; } .bigimage__main-catch { display: inline-block; font-size: 4.8rem; background: #fff; padding: 1rem; } .bigimage__sub-catch { display: inline-block; font-size: 2rem; background: #fff; margin-top: 1rem; padding: 0.5rem; } @media screen and (max-width:768px) { .bigimage__main-catch { font-size: 2.4rem; } .bigimage__sub-catch { font-size: 1.2rem; } } |
第4回はここまでです。いかがでしたでしょうか。次回はメインコンテンツのエリア、footer(PC版)を制作していきます。
コメントを残す