Schooをご利用になるには、JavaScriptの設定を有効にしてください。 →JavaScriptの設定方法（参考）

10/12(Sat)

今日の生放送

21:00 - 21:57

【見逃し配信】あしたからできる発想力の鍛え方第1回

初心者が中級WEBデザイナーにレベルアップするためのHTML5/CSS3テクニック15選

2019年10月07日 14:25 更新

ーー目次ーー

１、「HTML５」とは？

２、初心者が中級WEBデザイナーにレベルアップするためのHTML５/CSS３テクニック15選

３、「HTML５」をさらに学んでみよう！

４、スクーなら動画でわかりやすく学べる！

初心者が中級WEBデザイナーにレベルアップするためのHTML5/CSS3テクニック15選。それが、独学でコーディングを勉強し、もっとスキルアップしたい人にオススメの授業。

かいせつ先輩

Webサイトを作成する際、必要になるのが「コーディング」。なかでも、「HTML」や「CSS」は基本中の基本といわれています。とはいえ、テクニックがたくさんありすぎて、何から覚えればいいのかわからない人もいるのでは？ここでは、授業で教えていただいたテクニックのうち、5つを紹介していくよ。

「HTML５」とは？

そもそも「HTML」というのは、Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略語で、Webページ作成に必要な言語のこと。アップデートを重ね、初期の「HTML」から数えて５番目の言語です。

そしてその「HTML」と密接な関係にあるのが、「CSS」（＝Cascading Style Sheets、カスケーディング・スタイル・シート）。Webページの色やサイズ、レイアウトなどのスタイルを指定するためのもので、「HTML」で作成した文章などを装飾するものと考えれば、わかりやすいかもしれませんね。

Webデザイナーの必須スキルともいえる「HTML５」や「CSS」のテクニックについて、授業を通して学んでいきましょう！

先生のご紹介

狩野祐東　Web／アプリケーションUIデザイナー

サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。書籍執筆のほか、セミナーや研修講師としても活動中。主な著書に『HTML5&CSS3デザインレシピ集』（技術評論社）、『いちばんよくわかるHTML5&CSS3デザインきちんと入門』『確かな力が身につくJavaScript「超」入門』『スラスラわかるHTML&CSSのきほん』（SBクリエイティブ）など。

初心者が中級WEBデザイナーにレベルアップするためのHTML５/CSS３テクニック15選

テクニック１：ブラウザの開発ツール

狩野先生：まず、ブラウザの開発ツール。これ、みなさん使ったことありますか？　だいたいの人は使ったことはあるんじゃないかと思いますけども、ブラウザについている開発者向け、コーダー向けの機能です。

メニューから選んで開くことができるんですが、よく使うのでぜひこの機会にショートカットを覚えておきましょう。Windowsの場合は、F12キーを押します。Macの場合は、「Command+Option+I」を押すと開いたり閉じたりします。

今回の話題はHTMLとCSSなんですが、HTMLやCSSを書いてる時は、開発ツールの上のツールバーの「Elements」をクリックして、選択してることがほとんどだと思います。

この状態の時に、左側に表示されている画面のHTMLソースが表示されて、右側にCSSが表示されている状態になっています。で、このHTMLのソースからタグをクリックする、このようにタグをクリックすると上表示画面のところがハイライトします。これで、このタグがどこに表示されているかっていうアタリをつけることができる。

受講生代表：わかりやすいですね。

狩野先生：そうですね。で、今選択しているHTMLに適用されているCSSは右側に表示されています。逆にですね、この開発ツールの、Chromeの場合は一番左上のボタンをクリックした状態で表示画面の方にマウスを持っていくとハイライトします。

このハイライトした部分をクリックすると、該当するHTMLタグが自動的に選択されるようになる。という風になります。なので、表示されている画面からタグを選択することもできるし、タグから表示されている部分を調べることもできる、という風になっています。

今回ちょっと紹介したいのは、ぜひみなさんこの開発ツールを使って今公開されているたくさんのウェブサイトですね、このデザインはどうやって作ってるんだろうとか、そういうの疑問に思ったらぜひ調べて自分のものにしてほしいということで、そういう他の人が作ったサイトのソースコードを調べる方法で、まぁ良い方法というのを紹介したいと思います。えーちょっとnpmというサイトを開きます。

受講生代表：npm。

狩野先生：はい、これJAVAスクリプトのライブラリを配布してるサイトなんですが、まぁこういう、どこでもいいんですけども、このnpmのサイトで上の方にですね、ライブラリを検索するためのテキストフィールドと、それからボタンが表示されています。

で、テキストフィールドにボタンがくっついて配置されているように見えますよね。で、これどうやって作るのって、まぁ疑問に思ったとする時の調べ方をちょっと紹介していきたいと思います。

まず、Chromeの場合は左上のボタンをクリックして、表示されてる画面のところをマウスでなぞります。そうすると、たとえばテキストフィールドに見えるところにマウスのカーソルを持っていくとこのようにハイライトしてます。このボタンの部分も、このテキストフィールドに含まれてますよね。

受講生代表：はい、そうですね。一緒になってますね。

狩野先生：はい。これはおそらくボタンはpositionで配置してるんだろうと、なんとなく予想をして、あと調べるわけです。実際にこれクリックすると検索用のインプットタグがあって、それがdivに囲まれてて、ボタンタグがすぐ下にあると。このボタンタグが検索用のボタンになっているのが、ハイライトすることでわかると思います。

このボタンを選択しますね、その時にCSSの方のタブでComputedと書かれているのをクリックします。これは最初にボックスも出る、どういう数値で表示されているのかがわかるんですが、その下に結果的に今選択している要素に適用されているCSSのプロパティが一覧で表示されています。

この下の方に見ていくと、やっぱりボタンのところにpositionで値がabsoluteになっているということがわかるようになっています。それにrightとかtopとか、こういうプロパティもかかってるんだなぁということ。これによってまぁそのボタンをpositionの機能を使って配置してるんだなということがわかります。

実際にCSSでどういうソースで書かれているのかを調べたい時は、このComputedの時にプロパティにロールオーバーすると右矢印が出てきます。で、これをクリックすると実際に書かれているソースコードに切り替わりまして、このようなCSSが書かれているとcomponents.cssというファイルに、コロンの後ろ、行数なんですが、2384行目に書かれているという、まぁかなり大きなCSSが適用されているんだなぁということがわかるんじゃないかなと思います。

みなさん、どんなサイトでもこれで調べることができるので、ぜひそのテクニック、不思議に思ったら積極的に調べてみるのもいいんじゃないかなと思います。

テクニック２：継承・カスケード・詳細度～CSSが適用される仕組みを詳しく知ろう～

狩野先生：次、テクニック２番。「継承・カスケード・詳細度」という、この3つともCSSの仕様で、大雑把に言えばCSSのプロパティをある要素に適用する時に、どんな優先順位で何のプロパティを適用するかを決めるための仕様です。初心者の方にはやっぱり難しいというか、知識がないおかげでCSSが長くなってしまうとか無駄なコードを書いてしまうっていうケースがよく見受けられるのでこの辺のことを多少、詳しく知ろうかなという風に思っています。

ちょっと簡単なHTMLを作ってきました。見出しと、それからulのリストですね。この下の所はちょっと今関係ないんですが、まず、継承というものがどういうものなのか紹介します。見出しとulがあると、divでclass="contents"というものに両方囲まれてます。

ここでさっきの見出しとリストのテキストをすべて色を変えたい、という時にこのcontentsですね。一番外で囲んでるdivにcolor:redとかまぁこういう風にプロパティを設定すると見出しとリスト、両方とも色が変わります。contentsという要素にcolorプロパティを設定しているのに、まぁその子要素ですね、見出しとリストも同じようにプロパティが反映される、これを継承といいます。親要素に指定したCSSの状態を子要素にも引き継ぐ、同じものをそのまま適用するというのを継承っていうんですが、CSSのプロパティの中にはこうやって子要素に継承するものがあります。継承しないものもあります。これたとえばですね、こっちじゃなくて、えっと、ulの方に class=list と書いてあるのでこのlistの方にそうですね、margin:40pxとかまぁこういう風に適用するとこれ実際に違いがわかるかどうか。これ今オレンジ色で表示されている所がmarginなんですが、40px、まぁ四方に40pxぐらいのmarginが適用されてることがわかりますね。で、もしこのmarginプロパティが継承するんだったら子要素のliにもmarginがつくはずなんですが、これ実際に見てみるとオレンジ色の部分がありませんね。

受講生代表：ないですね。

狩野先生：ということは、このプロパティは子要素に継承しないということなんです。で、colorプロパティは継承するけども、marginプロパティは継承しないと。CSSのプロパティによって継承するものとしないものがあるということですね。で、テキストやフォントに関係するもの、colorだったりfont sizeだったり、そういうものっていうのは基本的に継承します。ボックスモデルに関するもの、marginとかpaddingとか、そういうものは子要素に継承しないようになっています。

これを知っておくことがなぜ重要かというのをちょっと今からお見せしたいと思います。ちょっとmarginは戻して、今、これ両方全部テキスト赤くなってますけども、やっぱりやめてリストの分を、ビン・カン・ペットボトルというこのテキストは元の黒に戻したいっていう修正を、するとします。

この時にですね、まぁよくやりがちなのは親要素に今 color:red って書いてあってここ、継承するプロパティでここ全体を赤い色にしてる状態で、listプラスだけcolor:blackとかにして、まぁこれで戻す、まぁ実際に見た目は戻す、戻るんですが、この継承するプロパティをキャンセルするようなCSSっていうのは書くのは避けたほうがいいです。

なぜかというと、今回はソースコードが短いので、元の色っていうのがすぐわかるんですが、実際のWebサイトってもっと、まぁさっきも何千行っていうソースがあった通り、元の色って調べないとわからないケースが多いんですよね。

で、そういう時に、元の色を調べないといけないってのは時間の無駄にもなりますし、効率もよくない。たった見出しとリストの色を変えるだけで6行もとってしまうのは、やっぱり効率は良くないです。

継承するプロパティで大事というか注意しないといけないのは、この継承をどこまで許すかというのを考えてですね、この場合だったらcontentsという親要素にcolorプロパティを適用するんじゃなくて、むしろ、見出しだけ色を変えて後は変えないと。

このようにすればh2には子要素がないですから、いいはず。このul class=listの方には何もCSSを適用しなくてもまぁ通常の色で表示されると、いうことになります。このようにこのプロパティが継承するかどうかをある程度把握しておいて、上手い具合に継承させるというか、継承するプロパティを使ってるのに継承をキャンセルするようなCSSは書かないように心がけるのが上手くCSSを書くポイントのひとつです。

受講生代表：なるほど。はい。

狩野先生：その次、カスケードについて説明したいと思います。今見出しにcolor赤が適用されてますけども、これやっぱり青にしたいっていう修正が入ったりした時に、title…まぁこのようにすれば、色が赤から青に変わります。これカスケードって言います。カスケードっていうのは、上に書かれてるstyleのルールを下に書かれてるstyleのルールが上書きするという仕様・ルールですね。実際に開発ツールを見てみると、こっちの先に書かれてる方のstyleに打ち消し線が引かれて、まぁ上の方が適用されてるよっていうのがわかるようになっています。で、このカスケードをうまく使うためには修正するコードをできるだけCSSの下の方に書く、書き足すときは下の方に書き足す、ということがポイントです。その際、まぁ後から紹介しますけどもセレクターは同じものを使って詳細度を同じにしておくと、下に書いたCSSが適用されるようになると。これあんまりカスケードのことよくわからずにですね、元あるCSSより上に書いてしまったりするとまぁ適用されないわけですよね。下に書いたやつの方が適用順位が高いので。

受講生代表：なるほど、下に書くんですね。

狩野先生：はい。必ず下に書くと。これを心掛けてください。で、下に書く行数を調べて、絶対に下に書くぞと、そういう気持ちで修正に臨むと、そういうことですね。これがカスケードです。修正の時は下に書くというのがポイント。

次、詳細度についても簡単に説明したいと思います。今、見出しにclass属性とid属性、まぁ名前は同じですけどもclassとidがついてます。当然のことながらidセレクターを使って、CSSを書くこともできるんですが、この詳細度というのはセレクターの強さですね。詳細度が高いものの方が適用される優先順位が高くなるというものです。修正する時には下に書けといいましたが、idセレクターを使って上に書いてもこのように上に書かれてる方が適用されます。なぜかというと、idセレクターの方がclassセレクターよりも詳細度が遥かに高いからなんでねすね。詳細度が高ければそれが適用されるので、上に書いててもやっぱり下の方は無視すると。まぁこういう風になっています。で、えっと詳細度っていうのはまぁちょっと簡単に説明しますけど、まずidセレクターが一番強いと思ってください。実際にね、一番強いのはタグのstyle属性なんですけども、まぁstyle属性は絶対に使わないと。で、idセレクターで、classセレクターですね。classセレクターとか、属性セレクター、それからhoverみたいな疑似classっていうのはidセレクターよりも弱い詳細度を持つセレクターになります。

その次に弱いのが、たとえばh2とかpとかって書く、タイプセレクターですね、タグ名で選択するセレクターはclassセレクターよりも弱いです。それから、CSS３的にはコロンを2つ書くbeforeとかafterとかこういう疑似要素ですね、疑似要素の詳細度も低いです。CSSを書く時のポイントはこのclassセレクターを中心に使ってください。心掛けなきゃいけないのは、セレクターの詳細度は極力低く保つ。あとから修正しやすいように詳細度をできるだけ低く保つように心掛けてください。

メインに使うのはclassセレクターね。たとえばさらに言うと、このulを選択する時にclassセレクターだけを使っても書けるし、ul.listっていうこうタイプセレクターとclassセレクターを組み合わせて書くやり方があるんですが、これは詳細度を無駄に高くするだけなので、できるだけclassセレクターだけを使ってセレクターを書くと。

詳細度を低く保つように心がけるということをするとソースが長くならず、ビックリマークのimportantっていう、まぁこういうものも、これ使ってはいけない、使ってはいけないというかCSSの修正のために使っちゃいけないんですけども、こういうのが増えてくるとまぁだんだん修正しにくいCSSになっていくので、そういうものを避けるためにはclassセレクターをメインに使用する、ということを覚えておいてください。

受講生代表：なるほど、はい、ちょうどですね、先ほどコメントでですね、受講生から「importantを優先順位がわからなくなった時に使うので、余計わからなくなってしまいます」というコメントが来てたんですが、駄目なんですね。

狩野先生：そう、駄目なんですよ。あのこれ絶対使っちゃいけないわけじゃないんですが、CSSを適用するためだけに使うのはおすすめしないというか、絶対にやらない努力をするということですね。

受講生代表：そしてひとつだけ、あゆみさんが「カスケードに頼らずに修正前のコードを消去しては駄目なんでしょうか」ということなんですが。

狩野先生：ああ、それでもいいですよ。はい。あの、それができるんだったらそれが一番いいんですけど、ただたとえばワードプレスとかを使ってる時に、プラグインが適用してるCSSとかを無闇にはいじれないんですよね。で、CSSって必ずいじれるとは限らないので、そういう場合にはカスケードを使って上書きすると、そういう作戦をとるケースも多いです。

テクニック３：コードが荒れないCSSの書き方・変更の仕方を知ろう

狩野先生：３つ目は、「コードが荒れないCSSの書き方」ということで、まぁテクニックとしてはいくつかあるんですが、今回はボックス、blockの幅の指定の方法について集中的に紹介していきたいと思います。

みなさんご存知かもしれませんが、display:block;が適用されいる要素というのは親要素の幅いっぱいに伸びて表示されます。で、これがまぁ特徴ですね。ここで紹介したいのはボックスの幅を指定するためにはwidthプロパティを使うんですが、このwidthプロパティはできるだけ使わない方がいいんです。

使うんだったら親要素に指定するっていうのを心掛けてください。たとえばですね、今このNORMAL BLOCKって書いてあるこのblockはえーとHTMLのソースとしてはここです、div class="normal" と書かれているここなんですが、このボックスの幅をまぁ狭めたいとしますね。

狭める時に、div class="normal" そのものに幅を指定するんじゃなくて、おそらく親要素の幅を指定しておいた方が後々修正が楽だよという話です。ですから、たとえば containerのwidth:600pxとかにしておくと、まぁそれだけでこのblockには直接幅は指定してないんだけど親要素が狭めたからこのボックス自体も狭まると。

このように親要素に指定しておく方が、まぁ後々やっぱりやめたから幅広くしようとかっていう修正が入った時に、一か所書き換えるだけでボックスの幅を調整できるので、できるだけ親要素にwidthを指定する、ということを覚えておいてください。

ちょっとそれがわかりやすい例を紹介します。コメントを消してですね、ボックスを一個追加します。

……まぁ真ん中に設定します、でボックスを追加します。でこのボックスを親要素のこのcontainer今600pxって設定してありますけども、これより狭くしたいっていうときには、この狭くしたいボックスにwidthプロパティを直接設定するんじゃなくて、margin、左右のmarginを掛けることを検討してください。

これが絶対に答えっていうわけじゃないんですが、margin、たとえば0の50pxとか、左右に50pxのmarginを掛けるだけで、このようにwidthプロパティを使わなくてもボックスを狭くすることができます。

なので、marginでまかなえるんであればmarginを使った方がおそらくあとで修正が入った時にやりやすくなると思います。逆に幅を広くする時も、widthを使わずに今度はマイナスmarginを使うと、親要素よりも幅の広いボックスを作ることができます。0、たとえば-50pxという風に左右に50px、大きいボックスを作ることもできます。

このようにしてできるだけwidthを使わない、たとえばですね、ここでwidthプロパティ、marginの代わりにwidthプロパティを何px、何pxと書いてるとページ全体の幅を広げたり狭めたりした時に３か所修正をしなきゃいけないですよね。

ですが、まぁこのようにwidthプロパティを指定するところを減らしておくと、幅を広げた時に自動的に他のも比率でというか、広がったり狭まったりするので修正としては１か所で済むということなので、できればwidthプロパティを使う時はちょっとよく考えて、できるだけ親要素で、少ない回数で指定するということを心掛けておくといいかなと思います。

テクニック４：シンプルにコラムレイアウトを実装しよう

狩野先生：この３つは、どちらかといえばCSSの仕様に近いものですね。継承、カスケード、詳細度というのは、全てセレクターとかCSSの書く場所による。これを理解してた方がソースが荒れないよ、整理して書けるよという話。今お見せしたwidthの指定方法については、HTMLのそのblockレベル要素ですね、display、blockがかかってる要素の挙動を利用してできるだけ幅、widthプロパティを直打ちするというか、指定してしまう場所を減らす、親要素で指定して子要素はもうその広がるに任せるっていう方法を使うことで修正する箇所を減らそうという話でした。

４つ目以降は、flexボックスの話をします。レスポンシブWebデザインが当たり前になったので、レスポンシブデザインにはやっぱりフロートよりもflexボックスの方が相性がいいということで、ソースコードも短くなりますし、管理もしやすくなるのでぜひflexボックスを覚えておいてほしいな、使えるようになってほしいなと思って、今回４番・５番はflexボックスにしました。

4番ですね。これコラム、２コラムレイアウトを実装する方法を今からお見せします。HTMLにはヘッダーとフッターだけが今ある状態で、ここからHTMLを書いていきます。これナビゲーションでフッターの間のところにmainタグとそれからmain-containerというclass名がついたdivを作ります。ここにですね、２コラム分作るんですが、まずmainのcontentsを囲む、maincol、まぁこういうdivを用意します。

これがコラム１、それからもうひとつはsidebarですね、これコラム２です。このmainlol classとそれからsidebar class、この２つの要素をflexボックスで横に並べます。で、中身がないとわかりづらいのですが、ちょっと中身を変えてやる時間がないので、３分クッキング状態であのもう、はじめからもうコピペする用のソースコードを用意しておいたんで、これをちょっとコピペします。お待ちください。

受講生代表：３分クッキング中です（笑）。

狩野先生：はい、「お知らせ」と書いてある部分で、まぁ四角に囲まれたのがいくつかありますけど、ここがmainのcontentsの部分です。sidebarという方に書いてあるのが、この「About」以下の部分ですね。

このようにレイアウト用にCSSを適用しなければこういう風に縦に並んで表示されると。まぁこれ言ってみれば、スマホのデザインってほぼこれで、ここからあと調整すればいいぐらいのレイアウトがもう簡単にできる状態です。まぁ狭めればなんとなくそういうイメージになるんですが、ここにflexボックスでコラムレイアウトをしていきます。非常に簡単なので覚えておくと役に立つと思います。

flexボックスの場合、今、maincolというこのdivと、ここまでmaincolというdivと、それからsidebarというdiv、この２つのボックスを横に並べようとしています。その時にその2つを囲む親要素、ここではmain-containerという名前がついてるこの要素に、display:flexと書きます。これだけで、２つのボックスが２つに並んでいます。で、ここからさらに幅を調整しないといけないんですが幅を調整したい時は、このmaincolというのがmainのcontentsの方ですね。sidebarというclassの方が、sidebarの方、この２つにflexというプロパティを適用します。sidebarの方は、0 0 300pxという風に指定します。で、main-contentsの方はflexで1 1 autoという風に指定します。このようにすることで、今このサイドバーの方の幅が広くなりましたよね。ウィンドウを狭めるとサイドバーの方は幅を固定したまんまメインのコンテンツだけが伸縮すると。まぁこういうレイアウトを作ることができます。３行書くだけというものがflexボックスってお手軽で使いやすいんじゃないかなと思うんですけども。このflexプロパティに適用したこの値の説明をちょっとします。

今、サイドバーの方は幅を固定してました。で、メインのコンテンツの方だけウィンドウに合わせて伸縮していたんですけども、ものすごく簡単な説明をすればこのflexプロパティの１番目の値というのは親要素が広がった時に、その子要素、今だとmaincolとかsidebarですね。

こういうボックスが、その親要素が広がった時に何対何で広がるかを決めるのが１番目の値です。これmaincolの方は１、sidebarの方は０になってるので、１対０で拡大することになります。親要素が拡大した時に、maincolとsidebarは1対0で拡大するのでmaincolの方だけ拡大してsidebarの方は拡大しないということになります。

２番目の値は逆に縮小した時ですね。親要素が縮小した時にそのままだとはみ出ますよね。そのはみ出るのを避けるために縮めなきゃいけないんだけど、その縮めるときの割合を示しています。ここもmaincolの方を１にして、sidebarの方を０にしてるので、１対０で縮む、つまりサイドバーの方は幅変わらずにmaincolの方だけ、あの親要素に合わせて縮まると、そういう風になっています。

で、３番目の値は元の幅を指定します。ここの場合、ここではsidebarの方を300pxで固定して、maincolの方は特に幅の指定がなくてこう柔軟に伸びたり縮んだりするので、そういう場合にはautoにする、という風にします。

数値の設定の仕方がわからなくてもだいたい２コラムとかの場合は、親要素にdisplay:flexを適用して、固定したい方は00固定したい幅、それから伸縮させたい方は11autoと適用すると覚えておけばまぁそれでだいたい間違いないと思います。

受講生代表：大丈夫、どれにでも使える。

狩野先生：はい、そうですね。で、まぁひとつだけ、おまけでもうひとつ別のプロパティを紹介しておきます。flexボックスには、その子要素にorderというプロパティを適用することができます。

このorderには数値を指定するんですが、指定した数値の小さい方が左に並びます。今右サイドにサイドバーがあったのが左サイドバーになったのがわかると思います。で、これフロートとかを使ってると、これ左右入れ替えるのすごく大変なんですが、flexボックスの場合はorderプロパティを使って自在に右左を入れ替えられる。

これ３コラムの時とかも、orderの番号123とかにすれば自在に入れ替えることができます。こういうプロパティがあるのを覚えておきましょう。

テクニック５：多数のボックスを整列して並べよう

狩野先生：最後のテクニック。これもflexボックスです。えー「多数のボックスを整列して並べよう」ということで、今２コラムレイアウトを作ったんですけども、今回はシングルコラムで、そのコラムの中に小さいボックスをこう横に５つ並べる。さらに５つ並んでもうはみ出そうだよという風になったら、Z状にですね、改行して、ボックスをまた５個並べて、改行して、またボックスを並べるというような、ボックスを改行しながら並べるっていう方法をflexボックスで実現したいと思います。

ここも”クッキング”をやります。

今あの、作りました。こんな風に拡大してるんですけど、HTMLのソースを確認すると、news-contentsというclassがついてるulがあって、その中にLiタグでたくさんボックスを作っています。一個一個ですね、まぁこれ合計で12個作ってあるんですが、今何もCSSを適用してないのでものすごい拡大されて、画像も拡大されてまぁ表示されています。で、これをflexボックスで整列して、横に並べたいという時ですね。ul class=news-contents、これが、Liがちっちゃいボックスになるので、これが親要素で、news-contentsというulが親要素なので、news-contents、ここに先ほどと同じようにdisplay:flexとこのように書くと、もうそれだけで今まで縦に並んでたやつが全部横に並びます。ただし、12個、縮小して、12個無理やり並べるのでこのままでは駄目なんですが、まぁdisplay:flexと書く、親要素に書けばそれで子要素は横に並ぶと。

ここからサイズをまず調整していきます。で、今Li、news-contentsの子要素のLiにかかるCSSに、flexプロパティを使います。で今度は0 0 19%という風に設定します。５個ボックスを並べて、適度に隙間をつくりたいので、大きさを20%じゃなくて１%少ない19%にしています。この幅を%に指定してるので、やっぱり親要素に合わす。親要素のパーセンテージなので、もうこの時点で縮小したり拡大したりしそうですよね。なので、flexボックスの機能としては、拡大率・縮小率どちらも０にして、flexボックスの機能としては０にします。これ多数のボックスを並べる時の一般的なテクニックで、幅を%にする時は、flexプロパティの最初の値と次の値は０にするとまぁ上手くいくということですね。

今まだ途中で、大きさが適度に調整されたんですが、まだ改行してないので、思いっきり親要素がはみ出した状態でここに並んでます。次にボックスを改行して表示させるようにします。その時はdisplay:flexに書いた親要素の方にflex-flowという、これまた新しいプロパティを適用します。このflex-flowプロパティには、２つ値を指定する必要があります。１つはrowという値ですね。これは子要素のボックスを横に並べるという意味です。別のやつでcolumnというのがあるんですが、columnにするとボックスが縦になるということになります。それ以外にもう１つ、wrapという値を指定します。このwrapという値にすると、子要素が横に並んでて、親要素からはみ出そうになったら改行してくれるという設定になります。flex-flowにrow、wrapという値を指定すると、このように改行して表示されるようになります。今まだこのボックスとボックスの間に隙間が、詰まった状態なので、ここに隙間を空けるためにまた親要素、display:flexがついてる方の要素にjustify-contentという、これもflexボックス関係のプロパティなんですが、justify-content:space-betweenという風にします。そうすると、このようにボックスとボックスの間に、隙間が空いてるのがわかると思います。今適用したこのjustify-contentというプロパティは、ボックスをどうやって並べるかを設定するプロパティで、色んな値があるんですが、今回使ったspace-betweenというのは親要素が自分たちより大きい場合に均等配置するというプロパティになります。なので、marginとかを設定しなくても勝手に均等に並んでくれると。まぁ良いことづくめのように見えるんですが、実はですね、flexボックスには弱点がありまして、最後の行がこう、左と右に広がった状態で表示されてしまうんです。やっぱりこの右側のボックスは、この辺（左側のボックスの右隣）に表示したいですよね。

これをやるための機能がflexボックスには、残念ながらないんですよ。解決手段としては、私も色々試していたんですが、一番いいのは今Liが12個並んでて、５個ずつ並んでるので、あと3つLiがあれば、寄るだろうと（笑）

ということで、空のLiを３つ足します。でこうすれば、今はまだ線がついてますけども、ボックスは左に寄ったと。これflexボックスのやっぱり弱点で、ちゃんと割り切れる数にしておかないと最後のガニ股みたいな状態で表示されるので、埋め合わせの無駄なタグが必要というのが、あのflexボックスの弱点といえば弱点ですね。今Liにborderがついてる状態なので、これを消したいと思います。消す時にですね、これはあんまりみなさん使ったことがないんじゃないかと思うんですけども、news-contentsのLiに、 :emptyという、このemptyという疑似classがあります。このemptyという疑似classは今選択してるLiタグの中にcontentsが何もない時だけstyleを適用します。なのでここでborderを消す、border:noneとかにしておけば最後に追加した３つのLiからはborderが消えるようになります。このempty、:emptyという疑似クラスはまぁ結構使えるんじゃないかなと。ボックスを並ばせるテクニックっていうのは、ギャラリーページとかでおそらく使えると思うのでこれぜひ覚えて帰ってください。