frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

モジュール・コンポーネントを意識したhtml、css設計(後半)

スポンサードリンク


スポンサードリンク


www.frontendmemo.xyz

前回の続きで、モジュール・コンポーネントを意識したhtml、css設計の後半を書きます。

前回は、見出し、リストでしたが今回はリンク、レイアウト、ボックスです。
モジュール・コンポーネントは他にもありますが、この基本の5つを抑えることで応用できるかと思います。

リンクテキスト

リンクを作る時の注意点は以下です。
リンクはa:visited, a:hover, a:focus, a:activeを入れる。指定の順序も←のようにします。

  • visitedは訪問済みか否かをしています。
  • focusはTAB操作などで要素にフォーカスした時の指定です。こちらは通常hoverと同じ値にします。
  • activeはクリックされてから離されるまでの状態です。こちらも通常hoverと同じ値にします。

上記はアクセシビリティの観点からも必須となりますのでリンク要素、ボタン要素には必ず指定します。

See the Pen VzEVPP by funclur (@funclur) on CodePen.


a要素にあてるべきdisplayプロパティ

See the Pen MvxWvQ by funclur (@funclur) on CodePen.

a要素のdisplayプロパティの初期値はinlineです。この場合marginをあてても反映されません。
そこでリンクテキストにdisplay:blockをあてます。

display:blockにすることでmarginは反映されますが、テキストの範囲外(テキストの行)もクリッカブルになっています。
テキストだけをクリック可能にしたいためこのやり方も誤りです。

通常a要素はp要素やli要素で包括すれば、問題ありませんがa要素単体で使用する場合はdisplay: inline-blockをあてればmarginが反映されてテキストだけがクリッカブルになります。

また、ボックス全体をクリッカブルにしたい場合はhtml5ではa要素で包括することができます。その時はwidthを指定してdisplay:blockにします。

単一リンクとリンクリストを作る

リンクテキストは大きく分けて3種類あります。文章中リンクと単一リンクとリンクリストです。
単一のリンクとわかっている場合はp>a、リンクが増える場合はリストになるためul>liで組む必要があります。

See the Pen BdqGdx by funclur (@funclur) on CodePen.


リンクを作る時注意点まとめ

  • a:visited, a:hover, a:focus, a:activeに値をあてる。
  • テキストのリンクにはdisplay: blockを指定しない。逆にパネルリンクなどはa要素で囲みdisplay: blockを指定することも出来る。
  • リストのリンクはliで。ビュレット付きのリンクも折り返し時はビュレットの下に文字が来ないようにします。

レイアウト

いろんな横並びを理解しよう

下記は、float、inline-block、table、flex、gridで横並びにしています。

See the Pen MvzQOr by funclur (@funclur) on CodePen.

各々特徴があり、よくfloatは終わったなんて話も聞きますが、そんなことはなくそれぞれの特性や対応ブラウザを理解して使うことが重要です。

各々の特徴

float

レガシーブラウザも網羅している定番の横並びプロパティです。
clear:fixをする必要があります。

inline-block

親要素にfont-size:0を指定しないと横並びにした要素の間に余計な空きが出来てしまう。個人的にはテキストブロックを横並びにしたい時に使用する時があります。

table

float:に変わってdisplay:tableが使われることが多くなりました。しかし、マージンを空けることが思うようにいかなかったり下記のように1行にしか並ばないので複数行にする場合親で区切るしかなかったり運用性は悪くなります。

float

<ul>
<li></li>
<li></li>
</ul>

table

<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>

そのため、グローバルナビなどの1行の横並びに有用です。

flex

display:flexは横並びにするための様々なオプション(プロパティと値)が多数用意されています。

www.frontendmemo.xyz

使用する時は対応ブラウザはチェックしておきましょう。
http://caniuse.com/#search=flex

grid

最新のレイアウト手法がgridです。
横並びと言うより全体のレイアウトを組む時に検討価値があります。
自分も仕事ではまだ使用したことがありません。
http://caniuse.com/#search=grid

左右のマージン、上下のマージンを打ち消す

横並びの要素にマージンをあてる場合最初か最後の要素のマージンを打ち消す必要があります。first-childやlast-child、nth-childで消すことも可能ですが、下記のやり方がおすすめです。

See the Pen vJvBJq by funclur (@funclur) on CodePen.

親の要素に下と左にネガティブマージンをあて、子要素の下と左にマージンをあてます。そうすることでカラム数に限定しないマージンの打ち消しが可能です。

ボックス

  • 最初のマージントップを消す
  • テキストはp
  • ボックスサイジングを理解しよう

悪い例

See the Pen brOqmP by funclur (@funclur) on CodePen.

上記は1個目がマージントップで空きを統一した場合にできる余分な余白のボックスです。
2個目がマージンボトムで空きを統一した場合にできる余分な余白のボックスです。
この余分な余白を消してみましょう。

良い例

See the Pen vJvxMV by funclur (@funclur) on CodePen.


box-sizingを理解しよう

box-sizingは幅をpaddingを足した分として出さなくて良くなった革新的なプロパティです。

See the Pen MvZmWb by funclur (@funclur) on CodePen.

上記から分かるようにbox-sizing: border-box;は大変便利ですね。
そのため昨今のサイトでは全称セレクタにbox-sizing: border-box;指定したりします。

*, *::before, *::after {
    box-sizing: border-box;
}

では、もう1つの値であるbox-sizing: content-box;は使わないのかと言うとそうではありません。
レスポンシブデザインの構造部分でよく使用します。

See the Pen dzwWoq by funclur (@funclur) on CodePen.

幅が広いためcodepenのロゴをクリックして開発ツールで幅をご確認ください。

例えばコンテンツ幅が1000pxにしたいとします。
レスポンシブデザインの場合、ウィンドウ幅1000px以下だった場合のことも考えるためwidthではなくmax-width:1000pxにします。

しかしそれだけだとテキストなどが幅いっぱいに広がりますので、paddingを使用します。ここでbox-sizing: border-boxを使用していた場合1000 - 60の940pxがコンテンツ幅になってしまうため1000pxのコンテンツが実現されていません。

content-boxをあてる、またはpadding60pxを足した1060pxを使う必要があります。

まとめ

以上で、モジュール・コンポーネントを意識したhtml、css設計の後半でした。
全てサイトを構築する上でよく使用されるモジュール・コンポーネントです。

一つ一つ正しく理解しましょう。

www.frontendmemo.xyz