TECH::EXPERT【HTML/CSS】flexbox,svgタグ等【84日目】

【学習内容】

・HTML/CSSの考え方
・flexboxの使い方
・svgタグの扱い方

【HTML/CSSの考え方】

現在、メルカリTOPページの実装を行っているのですが、サイトを模写するときに、Googleデベロッパーツールを使用してサイト内の構造を見ていると使用するタグの使い方や当てるCSS云々の前に正しくレイアウトを把握することの方が何倍も重要であると気付きました。

つまり、サイトデザインを見て、どのようなHTML構造をするべきかをイメージし、HTMLのブロックレベル要素、インラインレベル要素の特性についての理解と、これらを正しく入れ子状に設計できることが強く求められます。

HTML・CSSの設計はよく家を建てることに例えられますが、精密な設計書で勝負は8割方決定すると思っています。

個人的にはview実装には大きく4ステップに分かれると思っています。

①大枠のブロックに分ける
②各ブロックの中身を設計する
③CSSをあてる
④既存のブロックを利用する

特に①、②のアプローチ方法を間違えてしまうと、インテンドが深くなり、より複雑な親子関係が生まれ、後々相当面倒なCSSをあてる羽目になります。

このあたりは基本のキなのですが、実際にコードを書き始める前に一度紙とペンでせめて大枠だけでも見える化しておくとだいぶ進み方が違ってきます。

ProgateのHTML,CSSコースをやったことがある方は体感していると思いますが、最初に大きな枠を3，4つどかっと作っておいて、後から箱の中身をちょこちょこ付け足していく方法が良いでしょう。

個人的には、大きな箱を複数個作ったら、heightとbackground-colorだけあてて、境界をわかりやすくしています。

②各ブロックの中身を設計する

箱の中に要素はいくつ入っているのかカウントし、設計を進めます。
このあたりは検証ツールで答えを確認してから臨む方がいいと思います。

また、このあたりからクラス命名も考慮しなければいけません。

基本的にBEMの命名規則に則っていきますが、設計段階であれば自分が1番わかりやすい名前にしていく方がいいと思います。

ブロック要素とインライン要素の違いに留意しつつ、とりあえず箱の中に箱を積み重ねていくイメージで大枠→中枠の設計を行います。

この時にポイントになるのが、高さ（レベル）の関係です。

横並びの要素（floatやflexboxを使用する場合）が存在する場合は、ひとまずそれらを格納する箱を用意しておきましょう。

大きな箱を用意する→その中に要素を列挙する→横並びが必要なものは中サイズの箱に入れる

イメージ的にはこんな感じです。

③CSSをあてる
ここからはCSSを使用して、各要素の位置関係や色などを調整していきます。

僕が1番最初に取り掛かるのはpaddingやmarginといった要素ごとの間隔調整です。

その後、textの中身について編集します。

このあたりはCSSプロパティが多すぎるので割愛しますが、このステップぱっと見のイメージは完成します。

④既存のブロックを利用する
親要素や子要素にあてたCSSを利用して孫要素等の調整を行います。

このあたりからだんだんとCSSの記述が多くなってくるので、コメントアウト等を利用してここまでがheaderとか書いておくとわかりやすいですね。

【flexboxの使い方】

flexboxは、floatで実現していた横並びを簡単に作れるようにしたもので、簡単に並び向きを指定したり、折り返しを指定することができます。

◎横並びの実現

deiplay:flex は指定した要素の子要素を横並びにすることができます。
また、子要素に対してflex:auto を指定すると画面いっぱいに要素が広がります。

<ul class=”flex-list”>
 <li class=”li1”>1つめの子要素</li>
 <li class=”li2”>2つめの子要素</li>
 <li class=”li3”>3つめの子要素</li>
 <li class=”li4”>4つめの子要素</li>
</ul>

. flex-list {
 display:flex;
}

.flex-list li {
 flex: auto;
}

◎折り返しのある横並びの実現

flex-wrap: wrap; を指定すると、子要素のサイズに応じて折り返すことができます。

折り返したい要素の親要素にflex-wrap: wrap;を指定し、折り返したい子要素にはwidthを指定します。2列にしたいときは50%です。

<ul class=”flex-list”>
 <li class=”li1”>1つめの子要素</li>
 <li class=”li2”>2つめの子要素</li>
 <li class=”li3”>3つめの子要素</li>
 <li class=”li4”>4つめの子要素</li>
</ul>

. flex-list {
 display:flex;
 flex-wrap: wrap;
}

.flex-list li {
 flex: auto;
 width:50%;
}

これを使えばレスポンシブデザインなんかも簡単に実現できますが、今回は割愛します。

【svgタグの扱い方】

メルカリ実装を進めていく中でロゴ画像の採取をしようとした時に、見慣れないタグが目に飛び込んできました。それは、<svg>です。

コードを見る限りどうやら画像のような扱いをされているみたいなのですが、僕が知っているのは<img>だけでした。

チーム内にこのあたりの知識が豊富なメンバーがいたので、そのときに教えてもらった内容を記述します。

○ラスター画像とベクター画像

世の中の画像データは「ラスター画像」と「ベクター画像」の2種類に分類されます。

ラスター画像とは、ピクセル（画素）によって構成され、たくさんのピクセルで構成されるほど、単位面積あたりの画素数は増えるので、なめらかで高画質な画像になります。
（GIF、JPEG、PNG）

一般的な用途は写真です。高画質のカメラはたくさんの画素（ピクセル）を含んでいるということです。

一見きれいに見える画像であったとしても、画像をどんどん拡大していくとやがてぼやけてきます。

一方、ベクター画像とは、数式によって定義された曲線によって描画される画像です。（SVG）

一般的には企業のロゴや名刺、パンフレットなどに使用されます。

ベクター画像の一番のメリットはサイズ変更のしやすさで、サイズを変えてもイメージのクオリティは変わらず、良い状態に保たれます。

しかし、ラスター画像のように絶妙な色のグラデーションを出しにくいという短所もあります。

ちなみに、画像自体のサイズは前者のラスター画像の方が大きいです。

<ここまでのまとめ>
・GIF、JPEG、PNGなどは「ラスター画像」、SVGは「ベクター画像」
・ベクター画像は拡大縮小しても劣化に強い
・複雑な画像には「ラスター画像」、単純なロゴ画像には「ベクトル形式」が適している

○SVGの4つの表示方法

svgタグをHTMLの中に表示させる方法は大きく4種類あります。

①<img>のsrcでファイルを読み込む

<img src="hoge.svg" alt="hoge">

②background-imageプロパティでファイルを読み込む

div {
background-image: url('hoge.svg');
}

③htmlにインラインで直接SVGタグを記述する

<div>
<svg ～～>
<!-- 略 -->
</svg>
</div>

④object要素のdata属性でファイルを読み込む

<object id="hoge" type="image/svg+xml" data="hoge.svg"></object>

直接書くのは大変なので、基本的にはimg/backgroundでの表示がベーシックな方法です。

jsで操作したい場合はobjectで表示します。

○動的に色を変化させる

svgの色を変化させるには④object要素で表示させた後、svgの中身の数値をjavascriptでいじることで実現可能になります。

・svgの中身のサンプル

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 241 105.8" style="enable-background:new 0 0 241 105.8;" xml:space="preserve">
<style type="text/css">
.red{fill:#FF0000;}
.blue{fill:#0000FF;}
</style>
<path id="XMLID_2_" class="red" d="M241,49.8h-3.2H4C4,49.8,98.6,0,170.1,0C241.6,0,241,49.8,241,49.8z"/>
<path id="XMLID_53_" class="blue" d="M237,105.8h-3.2H0c0,0,94.6-49.8,166.1-49.8S237,105.8,237,105.8z"/>
</svg>

<path>というタグの中にredやblueといった記述があることがわかります。

①svg要素を取得
jQueryで要素と色彩に関するクラスを取得し、変数に格納します。

var svg = document.getElementById('hoge').contentDocument,
$svg  = $(svg),
$svgRed = $svgBg.find('.red'),
$svgBlue = $svgBg.find('.blue'),

このコードをよく見てみると下記のような記述があり、色を定義しているようです。

.red{fill:#FF0000;}

よって、jQueryのCSSメソッドでここをいじってあげれば色が変化することになります。

$svgRed.css('fill', '#0000FF');
$svgRed.css('fill', '#FF0000');

イベント発火の条件はとりあえずmouseoverとかにしておいて、アニメーション時間を指定してあげれば、それっぽい色彩変化が実現できます。