htmlcss 記事一覧エリアを作ろう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

記事一覧エリアを作ろう

HTML×CSS|2018年10月16日

2018年10月16日
  • このエントリーをはてなブックマークに追加

ブログや記事エリアは、多くのウェブサイトで導入されています。
何かサイトを作れば、必ず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も使い分けられるようにしておきましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら