フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

[プログラミングの課題] HTMLとCSS #1 Flexで横並び

はじめに

HTMLとCSSでどのようにして、横並びにするのでしょうか。
今まではFloatが主流でしたが、回り込み問題などいろいろややこしかったですが、
Flexbox Layoutというものが出てきて、Floatを使用することなく簡単に横並びが出来るようになりました。

Container と Item

Screenshot 2018-09-30 11.25.32.png
参照: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexを使用するとき、containerとitemsがあります。図とその名の通りの関係ですが、今回の例ではクラス名でそれぞれ .container.item と名付けます。

それぞれに指定のプロパティを使うことでflexを使いこなせるようになります。

課題

Screenshot 2018-09-30 11.42.20.png

上記のような画像をHTMLとCSSを使用して作成してみましょう。

回答: jsfiddle.net/NaggiGoishi/6urw2qsb/

=====使用した色========
header: #008B8B
footer: #B8860B
container: #9932CC
item: #8B0000
=====================

=====WidthとHeight===
header height: 50px
footer height: 50px
item width: 200px
item height: 200px
====================
[紹介元] CSSタグが付けられた新着投稿 – Qiita [プログラミングの課題] HTMLとCSS #1 Flexで横並び

コメント

記事に戻る

コメントを残す