HTML/CSS

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

投稿日:

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の学習ステップ一覧

 

その他HTML/CSSに関する記事

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  step0 学習の見通しを持つための記事を読んでおこう!   step1 教材を用意しよう! step2 HTMLとCSSの意味を理解しよう! step3 HTMLとCSSを使って開発できる環境を ...

続きを見る

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

 

続きを見る

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

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【無料あり】と書かれた画像
HTMLとCSSのオススメ教材を紹介【無料あり】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコ ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コー ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像
HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS

Copyright© エンジニアてんし君ブログ , 2021 All Rights Reserved.