ブログや記事エリアは、多くのウェブサイトで導入されています。
何かサイトを作れば、必ず1つは存在するようなレイアウトです。
なお、今回1点、注意事項があります。
ここではfloatとflexboxというプロパティが出てきます。
横並びのレイアウトを作るためのプロパティです。
2つ以上の要素を横並びにして表示させる時に使います。
シンプルに言えば、floatが古い技術で、flexboxが新しい技術です。
そしてTwitter界隈を中心に「floatは古いから学ぶな」的な話が出ています。
確かに古いのですが、floatは今も現場でよく使われる技術の1つです。
例えば、大企業のサイトなどで運用を任された場合。
float自体は既存のサイトに、かなり使われていることが多いです。
前に作った大規模サイトが、そのまま運用されているからです。
完全にfloatを理解していなければ、いじれません。
かといって、すべてflexで書き換えようとしたら、工数が大幅にかかるだけです。
今は新技術と過去の技術が入り時っている時期。
この状況はあと数年は続くでしょう。
floatを使っている案件は、今でも現実、たくさん存在します。
先日、とある超有名プロテインのサイト案件で、実際にありました。
しかも、そうした案件は、1時間で数万円稼げるほど高額です。
わざわざflexに書き換えれば、時給換算2,000円程度まで落ちるでしょう。
そんなことはする必要ありません。
大企業等の場合、どちらにしろ次のリニューアルで全て最新技術に置きかわります。
中途半端に受託をやっている人にはわからないと思います。
なぜなら、彼らは、そうした案件を受けていないからです。
受ける必要が無いから、やっていないだけ、とも言えます。
わざわざ、自分の仕事の領域を、狭める必要はありません。
古いからと言って、知らない、使えない、で言い訳がないのです。
どちらも使えるからこそ、状況によって使い分けることができる。
だからこそ、より柔軟に状況に対して対応できるのです。
いずれ全てがflexになるにしろ、今の時代はどちらも使えるべきです。
flexboxは、正直、誰でも簡単に扱えます。
しかしfloatもまだ使われるので使ってみてください。
下記の内容を再現してみてください。
■ MISSION 4 – 1 floatを利用
https://base91.net/mission/cording/4/index.html
■ MISSION 4 – 2 flexを利用
https://base91.net/mission/cording/4/index2.html
■ 解答ファイルのダウンロード
https://base91.net/mission/cording/4/mission4.zip
※ zipファイルって何？ どうやって開くの？
http://base91.net/zip-how-to-open/
もし、どうしても分からなければ、解答ファイルをダウンロードして中身を確認しましょう。
一人で何も見ることなく、MISSION4を再現できたら次に進んでみてください。
今回活用しているHTMLとCSSは下記の通りです。
floatとclearの概念は最初は難しいかもしれません。
しかし、それぞれ、意味を考えながら、使ってみましょう。
上記floatの横並びが完了したら、もう1つのflexを使ってみてください。
flexの方が簡単に横並びにできますが、floatもまだ頻繁に使われます。
今は時代の変わり目で、どちらか片方だけ使えれば良いわけではありません。
最新の技術だけ使うのではなく、古い技術も使えるようにしましょう。
新出のHTMLタグ
特にありません。mission3以前を参考にしてください。
各タグにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/html/
新出のCSSプロパティ
margin-right:10px;
隣接する要素との間に、隙間を空けます。
似た効果のプロパティとしてpaddingがあります。
paddingは要素の内側に開け、marginは外側に開けます。
paddingと同じくright、left、top、bottomをつけることで、方向を指定して隙間を空けられます。
方向をつけないpadding単体の場合は、全方向に値の数だけ隙間が開きます。
最初は使い分けがピンと来ないかもしれませんが、何度も使っているうちに理解できるでしょう。
※ 10pxという値は仮のものになります。
float:left;
対象の要素を「横並び」にします。
横並びにするという考え方と同時に「次の要素を回り込ませる」機能であることを覚えておきましょう。
隣接する「次」の要素を「floatをかけた要素の隣」にまわりこませることで横並びにします。
display:inline-block;等でも横並びにできますが、inline-blockでは少し要素と要素の間に、無駄な隙間が空いてしまうこともしばしば。
横並びにする際は、floatを使うことでぴったり隙間なく横並びになります。
clear:both;
floatは「次の要素を回り込ませる」という特性があります。
ゆえに、横並びにする最後の要素で、一度floatを解除しなければなりません。
3つ横並びにしたら、3つめ以降は回り込ませないように指定します。
解除する、とも言いますが、解除なしでは、その次の余分な要素まで回り込んでしまいます。
なので、3つめの要素の「次」に、clearを使って、一度floatを解除する必要があります。
floatを解除する時のテクニック
floatをclearする時は、下記のタグを活用してみてください。
.clearfix:after{
content:"";
display:block;
clear:both;
line-height:0px;
font-size:0px;
}
まず上記をcssファイルに書きましょう。
そして、floatした要素を囲む「親要素」に対しclass=”clearfix”と書くだけです。
上記cssのポイントは2つあります。
まず1つが「:after」というタグ。
これは指定した要素の「閉じタグの直前」に「擬似的な要素(:after)」を作り出します。
今回はclearfixというクラスが当てられた要素の、閉じタグの直線に:afterというタグが入るという意味です。
実際、デベロッパーツールなどで確認すると、htmlには書いていない:afterというタグが、差し込まれているはずです。
この:afterというタグそのものが「擬似要素」として現れます。
作り出した擬似的な要素には、cssを適応することができます。
<div class=”cleafix”></div>であれば</div>の直前に擬似要素が現れます。
<div class=”cleafix”>:after</div>というように疑似要素:afterを作り出せます。
必ず、閉じタグの手前に出現します。
しかし実際のところ「:afterだけ」では擬似的な要素は作り出せません。
もう1つ重要なのが「content:””;」です。
2つのプロパティと組み合わせることで、閉じタグの直前に擬似要素を作り出せます。
こうして作り出した疑似要素:afterに対しclear:both;を適応することで、floatを解除しています。
line-heightやfont-sizeをゼロにしているのは、隙間を作らないためです。
:afterをつけると僅かに余分な隙間があきます。
それは、:afterに対して、font-sizeやline-heightが最初から適応されているためです。
下記にclearfixの説明動画を用意しました。
少し書き方は違いますが、合わせて確認してみてください。
最後の要素にのみcssを適応する方法。
例えば、横並びにした3つの要素があった時。
要素と要素の隙間を空けるために、margin-right:10px;と指定したとします。
ただ、3つめの要素には、右に隙間を空ける必要はありません。
1番目と2番目の要素にmargin-right:10px;を指定すれば適切に隙間はあきます。
こんな時、最後の要素だけ、margin-rightを消したい時があるんですね。
そこで使われるのが下記のタグです。
.abcde:last-child{
margin-right:0px;
}
.abcdeはもちろん適当につけたクラスなのですが、その次です。
:last-childとついていますね。
この:last-childをつけることで、並んでいる最後の要素にのみcssを適応できます。
今回であれば、横並びにした最後の要素のみmarginを消したいので、margin-right:0px;を適応しています。
先程の:after含め、こうしたタグを「疑似クラス」と呼びます。
各プロパティにおける、より詳しい内容を知りたい場合は、下記のURLを参考にしてみてください。
http://www.htmq.com/style/
flexを使ってみよう
なお、横並びにする手段にflex-boxというCSSもあります。
自動的に要素を横並びにしてくれます。
今は、横並びのテクニックとして、こちらが主流です。
display: flex;
上記を横並びにしたい要素の「親要素」につけてみましょう。
すると、中の子要素が横並びになるはずです。
こちらはclearも特に必要ありませんので、楽に横並びができます。
以上です。
非常に簡単ですね。
また、flexには様々な使い方があります。
中の要素を右寄せにしたり、左寄せにしたり。
レイアウトを作るのが非常に楽になりますので、試してみてください。
より詳しくflexについて知りたい方はこちら
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
なお、flexとfloatの使い分けですが、明確な理由が1つあります。
まずfloatはレイアウトというよりも「文字の回り込み」に使うべきです。
長文の中に画像をレイアウトするとします。
その画像を回り込ませる形で、文字を配置したい時などに使います。
flexは、本来、レイアウト中心に使われるべき方法ではあります。
しかし、冒頭でもお話したように、今は時代の境目です。
どちらも知った上で、flexもfloatも使い分けられるようにしておきましょう。