HTML/CSS

CSSでWEBサイトのメイン要素のレイアウト崩れを修正しよう

2021年2月3日

CSSでWEBサイトのメイン要素のレイアウト崩れを修正しようと書かれた画像

 

あなた
WEBページを作っているのですが、メインのレイアウトが崩れてしまっています。

修正方法を教えて下さい。

 

これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。

前回はWEBページのサイドメニューを装飾する方法を紹介しました。

前回の記事:CSSでサイドメニューを装飾しよう【コード付きで紹介】

 

しかし、前回のままだとメインの要素が崩れてしまっています。

そこで今回はメインのレイアウト崩れを修正していきます。

 

ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。

>>HTMLとCSSの学習ステップ一覧はコチラ

 

【この記事でわかること】

WEBページのメインのレイアウト崩れの直し方

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

ではさっそく見ていきましょう。

 

WEBページのメイン要素のレイアウト崩れの修正方法

 

では本題のレイアウト崩れの修正方法を解説します。

前回の状態だと以下のような状態になっています。

 

cssでサイドメニューを修正したHTMLファイル

 

サイドメニューは整っていますが、メインの「注目記事」などは左すぎたり、サイドメニューとかぶってしまっています。

 

こちらを直していきましょう。

 

修正の検討をつけましょう

 

ここまでHTMLとCSSの基本を身に着けて、各要素を作ってきましたね。

そろそろ、今起きているレイアウト崩れの修正方法をなんとなく検討をつけれるようにしましょう。

 

少なくとも「メインの要素の左に余白を指定することは必要そうだな」と考えることができるようにはなっておいてください。

 

今のメイン要素は次の画像の青の部分です。

 

レイアウトが崩れているwebページ

 

この青い部分の横幅を指定しつつ、左に余白を付けてあげるといい感じになるはずですよね?

次の画像のオレンジの部分が余白です。

 

レイアウト崩れを修正したページ

 

このような「修正のイメージ」をすぐに持てるようになっておくことは大事ですよ。

 

ちなみにCSSでHTML要素の余白をコントロールする方法はこちらでも解説しています。

>>WEBサイトのタイトルをCSSでデザインしてみよう【大きさや場所を変更】

 

実際のコードで修正しよう

 

修正の検討がついたところでさっそく修正していきましょう。

次のコードをstyle.cssにつけたしてください。

 

main #Main_box {
    height: auto;
    width: 450px;
    float: left;
    margin: 30px 0px 0px 20px;
}

 

height:auto → 高さを自動調節するように指示をしています

width: 450px → 横幅を450pxに指定しています
float: left → 左寄せしています
margin: 30px 0px 0px 20px → 上、右、下、左の順に余白を指定しています

 

これで崩れは収まったと思います。

ブラウザで再確認しておきましょう。

 

次に、「注目記事」「新着情報」「最新のブログ記事」の間に余白を付けます。

コードは次のとおりです。

 

#Main_box .MainBox_item {
    width: 450px;
    float: left;
    margin-bottom: 20px;
}

 

以下のように余白が付きます。

 

cssで余白をつけた画像

 

そのほかもう少し見た目を良くしておきましょう。

以下のコードを追加しておきます。

 

#Main_box .MainBox_item .MainTitle {
    width: 450px;
    height: 25px;
    margin-top: 0px;
    margin-bottom: 7px;  
} 

#Main_box .MainBox_item .MainTitle h2 {
    font-size : 12px;
    color: #4A4A4A;
    margin: 0 0 0 10px;
    padding: 5px;
}

#Main_box .MainBox_item .MainBox_news {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom-width: 1px;
    border-bottom-color: #747474;
    border-bottom-style: solid;
}

 

すると以下のようになります。

だいぶスッキリしましたね。

 

webページのメイン要素を修正したもの

よく出てくるCSSのプロパティを覚えて、すぐに修正できるようにしておこう

 

今回はWEBページのメイン要素のレイアウト崩れを修正する方法について解説しました。

 

さいごにあなたに伝えておきたいのは「修正方法をなんとなくイメージできるようにして、簡単なプロパティは覚えておこう」ということです。

 

プロパティというのは「width」や「margin」のことです。

CSSでHTML要素をデザインする基本はこちらでも解説しています。

理解できていない方は復習しておきましょう。

>>CSSでHTML要素を指定してデザインする方法

 

今回は以上です。

 

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

 

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

© 2021 エンジニアてんし君ブログ