汁なし坦々麺JP > UI/UX > CSS > Flex Box > [A-00130]CSS レイアウト入門

[A-00130]CSS レイアウト入門

公開日: カテゴリー: CSS、Flex Box、UI/UX コメントはまだありません タグ: 、、、、、、、、、、、

css+HTMLでレイアウトを考えたいと思います。

フロントエンドに疎い自分の考察のための記事。

・Navigation+Content構成について

単純なレイアウトから考えたいと思います。

まずはNavigation+Contentの構成です。基本的には下記のようなシンプルな構図になると考えられます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigator+Content</title>
    <link rel="stylesheet" href="layout.css" />
  </head>
  <body>
    <header class="NavigationMenu">
        <p>Navigation</p>
    </header>
    <div class="Content">
        <p>Web Site Contents</p>
    </div>
  </body>
</html>
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.NavigationMenu {
    height: 90px;
    text-align: center;
    background-color: #1e90ff;
    color: #fff;
}

.Content {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-top: 15px;
}

上記を表示すると下記のような画面になります。

bodyのcssプロパティにflex-directionを定義しています。値をcolumnとする事で下に向かってスタックしていくレイアウトになります。

非常に物足りないですね。これにFlexBoxを用いてもう少し工夫したいと思います。

・NavigatorにItemを追加してみる

イメージ図としては下記のようなレイアウトです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigator+Content</title>
    <link rel="stylesheet" href="layout.css" />
  </head>
  <body>
    <div class="NavigationMenu">
        <div class="flex_box_item">
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
        </div>
        <div class="flex_box_item">
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
        </div>
        <div class="flex_box_item">
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
        </div>
        <div class="flex_box_item">
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
        </div>
    </div>
    <div class="Content">
        <p>Web Site Contents</p>
    </div>
  </body>
</html>
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.NavigationMenu {
    background-color: #eee;
    padding: 10px;
    display: flex;
}

.Content {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-top: 15px;
}

.flex_box_item {
    color: #fff;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

.flex_box_item:nth-child(1) {
    background-color: #2196F3;
}

.flex_box_item:nth-child(2) {
    background-color: #4caf50;
}

.flex_box_item:nth-child(3) {
    background-color: #3F51B5;
}

.flex_box_item:nth-child(4) {
    background-color: #00bcd4;
}

上記のコードで表示した結果は下記のとおりです。

Navigatorブロックにうまくボックスアイテムを突っ込むことができました。

・コンテンツにItemを追加してみる

次にコンテンツブロックにItemを追加したいと思います。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigator+Content</title>
    <link rel="stylesheet" href="layout.css" />
  </head>
  <body>
    <div class="NavigationMenu">
        <div class="flex_box_item">
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
            Navi1
        </div>
        <div class="flex_box_item">
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
            Navi2
        </div>
        <div class="flex_box_item">
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
            Navi3
        </div>
        <div class="flex_box_item">
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
            Navi4
        </div>
    </div>
    <div class="Content">
        <div class="flex_content_item">
            Content1
        </div>
        <div class="flex_content_item">
            Content2
        </div>
        <div class="flex_content_item">
            Content3
        </div>
        <div class="flex_content_item">
            Content4
        </div>
    </div>
  </body>
</html>
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.NavigationMenu {
    background-color: #eee;
    padding: 10px;
    display: flex;
}

.Content {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-top: 15px;
}

.flex_box_item {
    color: #fff;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

.flex_box_item:nth-child(1) {
    background-color: #2196F3;
}

.flex_box_item:nth-child(2) {
    background-color: #4caf50;
}

.flex_box_item:nth-child(3) {
    background-color: #3F51B5;
}

.flex_box_item:nth-child(4) {
    background-color: #00bcd4;
}

.flex_content_item {
    color: #fff;
    padding: 10px;
    margin: 50px;
    border-radius: 5px;
    height: 100px;
}

.flex_content_item:nth-child(1) {
    background-color: #2196F3;
}

.flex_content_item:nth-child(2) {
    background-color: #2196F3;
}

.flex_content_item:nth-child(3) {
    background-color: #2196F3;
}

.flex_content_item:nth-child(4) {
    background-color: #2196F3;
}

下記のような画面が表示されます。

最初と比べればだいぶマシなレイアウトになりました。

・NaviとContentの位置を変えてみる

次は大元のレイアウトを変えてみようと思います。

Naviを左、Contentsを右に配置します。

これはflex-directionというプロパティで操作します。flex-directionの値をrowとする事で左寄せにスタックしていきます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigator+Content</title>
    <link rel="stylesheet" href="layout2.css" />
  </head>
  <body>
    <div class="NavigationMenu">
       <p>Navigation</p>
    </div>
    <div class="Content">
        <p>Web Site Contents</p>
    </div>
  </body>
</html>
body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
}

.NavigationMenu {
    width: 300px;
    text-align: center;
    background-color: #1e90ff;
    color: #fff;
}

.Content {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-left: 15px;
}

表示したら下記のようになります。

・Navigationを充実させる

Naviを充実させたいと思います。具体的には下記のレイアウトです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigator+Content</title>
    <link rel="stylesheet" href="layout2.css" />
  </head>
  <body>
    <div class="NavigationMenu">
      <div class="navi_item">
        Navi1
      </div>
      <div class="navi_item">
        Navi2
      </div>
      <div class="navi_item">
        Navi3
      </div>
      <div class="navi_item">
        Navi4
      </div>
    </div>
    <div class="Content">
        <p>Web Site Contents</p>
    </div>
  </body>
</html>
body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
}

.NavigationMenu {
    width: 300px;
    text-align: center;
    background-color: #1e90ff;
    color: #fff;
    flex-direction: row;
}

.Content {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-left: 15px;
}

.navi_item {
    height: 200px;
    padding: 10px;
    margin: 10px;

}

.navi_item:nth-child(1) {
    background-color: #eeb290;
}

.navi_item:nth-child(2) {
    background-color: #ee90c5;
}

.navi_item:nth-child(3) {
    background-color: #90ee9b;
}

.navi_item:nth-child(4) {
    background-color: #9b90ee;
}

下記のように画面に表示されます。

・コンテンツを充実させる

次はコンテンツにグリッドのようなイメージでItemを持たせたいと思います。

イメージはこんな感じです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navigator+Content</title>
    <link rel="stylesheet" href="layout2.css" />
  </head>
  <body>
    <div class="NavigationMenu">
      <div class="navi_item">
        Navi1
      </div>
      <div class="navi_item">
        Navi2
      </div>
      <div class="navi_item">
        Navi3
      </div>
      <div class="navi_item">
        Navi4
      </div>
    </div>
    <div class="Content">
        <div class="contents_container">
          <div class="container_item">
            Container1 Item1
          </div>
          <div class="container_item">
            Container1 Item2
          </div>
          <div class="container_item">
            Container1 Item3
          </div>
          <div class="container_item">
            Container1 Item4
          </div>
        </div>
        <div class="contents_container">
          <div class="container_item">
            Container2 Item1
          </div>
          <div class="container_item">
            Container2 Item2
          </div>
          <div class="container_item">
            Container2 Item3
          </div>
          <div class="container_item">
            Container2 Item4
          </div>
        </div>
        <div class="contents_container">
          <div class="container_item">
            Container3 Item1
          </div>
          <div class="container_item">
            Container3 Item2
          </div>
          <div class="container_item">
            Container3 Item3
          </div>
          <div class="container_item">
            Container3 Item4
          </div>
        </div>
    </div>
  </body>
</html>
body {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
}

.NavigationMenu {
    width: 300px;
    text-align: center;
    background-color: #1e90ff;
    color: #fff;
    flex-direction: row;
}

.Content {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-left: 15px;
    flex-direction: column;
}

.contents_container {
    display: grid;
    grid-template-columns: 400px 400px 400px 400px;
}

.container_item {
    height: 230px;
    width: 320px;
    padding: 20px;
    margin: 20px;
}

.container_item:nth-child(1) {
    background-color: #eeb290;
}

.container_item:nth-child(2) {
    background-color: #ee90c5;
}

.container_item:nth-child(3) {
    background-color: #244227;
}

.container_item:nth-child(4) {
    background-color: #9b90ee;
}


.navi_item {
    height: 200px;
    padding: 10px;
    margin: 10px;
}

.navi_item:nth-child(1) {
    background-color: #eeb290;
}

.navi_item:nth-child(2) {
    background-color: #ee90c5;
}

.navi_item:nth-child(3) {
    background-color: #90ee9b;
}

.navi_item:nth-child(4) {
    background-color: #9b90ee;
}

上記をブラウザに表示すると下記にようになります。

・サイドコンテンツ構成＋フッターを追加

上記のコンテンツレイアウトにフッターを追加し、かつコンテンツを左側右側にしてみようと思います。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Side Contents and Footer</title>
    <link rel="stylesheet" href="layout3.css" />
  </head>
  <body>
    <div class="NaviMenu">
        <p>Navigation</p>
    </div>
    <main>
        <div class="LeftContent">
            <p>Left Contents</p>
        </div>
        <div class="RightContent">
            <p>Right Contents</p>
        </div>
    </main>
    <div class="Footer">
        <p>Footer is Here</p>
    </div>
  </body>
</html>
body {
    flex-direction: column;
    display: flex;
}

.NaviMenu {
    height: 90px;
    text-align: center;
    background-color: #1e90ff;
    color: #fff;
}

main {
    display: flex;
    min-height: 76vh;
    margin: 15px 0 15px 0;
}

.LeftContent {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-right: 15px;
}

.RightContent {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-left: 15px;
}

.Footer {
    height: 90px;
    text-align: center;
    background-color: #1e90ff;
    color: #fff;
}

上記を動かした結果が下記です。

・コンテンツに色々盛り込んでみる

コンテンツブロックに色々盛り込んでみようと思います。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Side Contents and Footer</title>
    <link rel="stylesheet" href="layout3.css" />
  </head>
  <body>
    <div class="NaviMenu">
        <p>Navigation</p>
    </div>
    <main>
        <div class="LeftContent">
            <div class="wrapper">
                <div class="item">One</div>
                <div class="item">Two</div>
                <div class="item">Three</div>
                <div class="item">Four</div>
                <div class="item">Five</div>
                <div class="item">Six</div>
                <div class="item">Seven</div>
            </div>
        </div>
        <div class="RightContent">
            <div class="wrapper">
                <div class="item">One</div>
                <div class="item">Two</div>
                <div class="item">Three</div>
                <div class="item">Four</div>
                <div class="item">Five</div>
                <div class="item">Six</div>
                <div class="item">Seven</div>
                <div class="item">Eight</div>
                <div class="item">Nine</div>
            </div>
        </div>
    </main>
    <div class="Footer">
        <p>Footer is Here</p>
    </div>
  </body>
</html>
body {
    flex-direction: column;
    display: flex;
}

.NaviMenu {
    height: 90px;
    text-align: center;
    background-color: #1e90ff;
    color: #fff;
}

main {
    display: flex;
    min-height: 76vh;
    margin: 15px 0 15px 0;
}

.LeftContent {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-right: 15px;
}

.RightContent {
    flex: 1;
    background-color: #90ee90;
    text-align: center;
    margin-left: 15px;
}

.Footer {
    height: 90px;
    text-align: center;
    background-color: #1e90ff;
    color: #fff;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.item {
    height: 200px;
    margin: 30px;
    text-align: center;
    line-height: 200px;
    color: #fff;
}

.item:nth-child(1) {
    background-color: aliceblue;
}

.item:nth-child(2) {
    background-color: rgb(58, 100, 137);
}

.item:nth-child(3) {
    background-color: rgb(57, 173, 202);
}

.item:nth-child(4) {
    background-color: rgb(92, 71, 161);
}

.item:nth-child(5) {
    background-color: rgb(31, 42, 51);
}

.item:nth-child(6) {
    background-color: rgb(138, 155, 64);
}

.item:nth-child(7) {
    background-color: rgb(68, 138, 52);
}

.item:nth-child(8) {
    background-color: rgb(238, 112, 53);
}

.item:nth-child(9) {
    background-color: rgb(197, 75, 136);
}

上を動かすと下記のようになります。

レイアウトを考えると色々な構図になります。

また新しいレイアウトが思い浮かんだらここに記載していこうと思います。

・Appendix

MDN(Mozilla)の参考文献はこちら

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout

https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

参考文献はこちら

【初めてのサイト作成】HTMLのレイアウト　基本パターンを紹介！

https://ws-pilgrimage.jp/webcreate/605/

https://mamewaza.com/support/blog/howto-use-flex.html

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

*