【html/css】よくあるWebページ、結局どう作るの? 第4回 〜トップの画像のエリア(SP版)編〜

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

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

〜目次〜

文字の調整

文字の調整をします。今回は文字サイズの変更だけなのでシンプルですね。

外枠の調整

外枠のサイズを調整します。height: 64rem;のままだとスマホなどでは大きいですね。そしてheaderの時と同様に、画面幅が960px以下の時に中の文字が端によらないようbigimageクラスにpaddingを追加します。また、innerクラスのpaddingも合わせて小さくし、文字の位置を整えます。

これでSP版完成です!以下の画像の通りになっているでしょうか?

完成コードの確認(クリックで開きます)

index.html
style.css

第4回はここまでです。いかがでしたでしょうか。次回はメインコンテンツのエリア、footer(PC版)を制作していきます。

【html/css】よくあるWebページ、結局どう作るの? 第5回 〜メインコンテンツのエリア、footer(PC版)編〜

2019年2月6日

コメントを残す

メールアドレスが公開されることはありません。

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