初投稿は聖杯レイアウトの作成です。
一番最初は、何回かに分けて、
HTML,CSS,JavaScriptを使った、
ホームページをデザインしていきたいと思います。
今回については
『しまぶーのIT大学』さんの動画を参考にレイアウトを作成します。
聖杯レイアウトとは
上方にヘッダー、下方にフッター、中部左右にナビゲーションを配置して真ん中にコンテンツを置く、20世紀後半に主流だった典型的な段組のことだそうです。
昔は作るのが難しいとされていたそうですが、
『Flex Box』をつかい簡単に作成できるようになりました。
完成したソースコード
こちらが動画を見て完成したソースコードです。
index.html
<!DOCTYPE HTML><html><head><metacharset="utf-8"><linkhref="./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:0auto;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;}@mediascreenand(max-width:900px){body,nav,aside{width:100%;}div{flex-direction:column;}
学習の際に気をつけた点
当たり前なのですが、動画を見て書いただけでは学習にならないので、
どこのコードがどこに適用されるかを実験しながら書きました。
コピペは基本的にしちゃダメです!