読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CODEMYマンツーマンレッスン後記】~CSS3 flexが便利すぎる~

f:id:wp-lesson:20160908155827j:plain

CSSレックスBOXを使いこなしましょう。
 
 
CSS3で策定されたプロパティ「flex」。
これを使うと、ウェブページのコンテンツを
縦や横にきれいに簡単に並べることができます。
 
 
ボックス同士の余白を均等割りするのも、
プロパティ1発でOK。
 
 
いちいち、ボックスの個数に応じて
パディングやマージンを計算する必要も
ありません。
 
 
従来は、float を使って並べる方法が主流でしたが、
clear を忘れてレイアウトが崩れたり、
float を使ったタグの親要素の高さが認識されないなど、
煩わしい問題がありました。
 
 
flex」はそういった問題を解決してくれます。
Safariの対応が遅れていることを考慮して、
ベンダープレフィックスの「-webkit-」だけ
つけておけば良いでしょう。
 
 
例として、横4列で余白を自動で均等割り
する方法をご紹介します。
 
 
▼HTML

<ul>
 <li>1つ目</li>
 <li>2つ目</li>
 <li>3つ目</li>
 <li>4つ目</li>
 <li>5つ目</li>
 <li>6つ目</li>
</ul>

▼親要素 ulタグのCSS

ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

 
▼子要素 liタグのCSS

li {
    width: 24%;
}

 
こうすると、子要素4つ(合計96%)ずつが1行に並び、
余白も、100% - 96% = 4% が均等割りになるように自動で計算されます。

コーディングやウェブプログラミングのお悩み、
お気軽にご相談くださいね。

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

 
『ホームページ作成のツボとコツがゼッタイにわかる本』

定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!