Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8694

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

$
0
0

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

一番最初は、何回かに分けて、
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;}

学習の際に気をつけた点

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


Viewing all articles
Browse latest Browse all 8694

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>