HTMLとCSSのレイアウト『ベース』

4919 ワード
レイアウト CSS HTML5 初心者向け CSS テキストリンク

初投稿は聖杯レイアウトの作成です。

一番最初は、何回かに分けて、
HTML，CSS，JavaScriptを使った、
ホームページをデザインしていきたいと思います。

今回については
『しまぶーのIT大学』さんの動画を参考にレイアウトを作成します。

聖杯レイアウトとは

上方にヘッダー、下方にフッター、中部左右にナビゲーションを配置して真ん中にコンテンツを置く、20世紀後半に主流だった典型的な段組のことだそうです。

昔は作るのが難しいとされていたそうですが、
『Flex Box』をつかい簡単に作成できるようになりました。

完成したソースコード

こちらが動画を見て完成したソースコードです。

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="./style.css" rel="stylesheet" />
<title>sample</title>

</head>

<body>
   <header>header</header>

   <div>
      <nav>left</nav>
      <main>center</main>
      <aside>right</aside>

   </div>


   <footer>fotter</footer>

</body>
</html>
style.css


body {
    margin: 0 auto;
    width: 800px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    }


header{
    height: 150;
    }


div {
    display: flex;
    flex: 1;

    }


main {
    flex: 1;
    }

nav {
    width: 150px;
    }

aside{
    width: 200px;
    }

footer {
    height: 200;
    }

@media screen and (max-width:900px) {

body, nav, aside{
     width: 100%;
    }

div {
    flex-direction: column;
}

学習の際に気をつけた点

当たり前なのですが、動画を見て書いただけでは学習にならないので、
どこのコードがどこに適用されるかを実験しながら書きました。
コピペは基本的にしちゃダメです！

Wordpress常用コード解釈
オペレーティングシステムmooc第五章作業