title-coding
Design

サイトコピーしてコーディング修行 その2

こんにちは!新人森田です。
そろそろ桜も咲いてきましたね。お花見したいです。
今年はどのお花見スポットに行こうかなあ。

さて、それでは前回に引き続きサイトコピーしてコーディングの修行をしていきたいと思います。

Tosakenのインデックスページをコピーする

今回もギャラリーサイトから気になるサイトを見つけてきました。
株式会社トサケンのオフィシャルサイトです。
内容はシンプルですが、縦横100%に引かれたこのラインをどうやって表現するかが鍵になりそうです。

0328-1b

構成を考える

はじめ私は縦100%のborderをもった空divをposition: absoluteで置いてから中を作り込んでいこうと考えました。
でもpositionで場所指定すると、何層にも重なった要素のレイヤーの一番上にきてしまいます。
見た目だけ同じになっても、リンクが機能しなかったりとサイトとしては成立しませんでした。

最終的にこんな風に整理してみました。

0328-2b

まずborder-bottomをもった横100%のブロックで要素を横に分割。
その中に横幅が等しいブロックを入れ子にしてborder-left,rightをつけて線がつながっているように見せる。
内容は更にその中に記述していく。
という感じです。

ホバーエフェクトをコピーする

一枚目のスクリーンショットをよく見ると、“NEWS”の上に黒丸が表示されています。
これはホバー時に表示されて、普段は非表示になってます。

森田:
displayで表示切り替えだと要素の高さ分ずれたりするだろうし…
htmlの方に●って書いておいてfont-colorを白→黒にすればいっか!

師匠:
それだと本来必要ないものがhtml上に記述されることになるよね。
こういう時は疑似要素を使うといいよ。

疑似要素とは。
私がよく見るのは“:before”、“:after”あたりです。
float解除とかアイコンフォント用に使っていますが実はよく分からずに使ってました。
contentと併せてコード上に実体はないけど仮の要素を生成する仕組みのようです。
どうやらこれを極めると表現の幅がグッと広がるらしいです。面白そう!

0328-3

その第一歩として:beforeを使って作ってみました。
10pxの円をpositionで位置指定しています。
文字のクリッカブル領域内だと近い気がして、ちょっとはみ出してます。
これが気になる人は文字のpaddingを調整すればボックスに収まると思います。

ちなみに:hoverは疑似クラスといって、要素のスタイル指定を表示するための条件定義のようなもののようです。
これも今まで何気なく使ってきてました。そういうことだったのか。

文字列をタテ幅の中央に揃える

ヨコ幅の中央だったらtext-align: center;もしくはmargin: 0 auto;でそんなに苦労なく揃えられます。
でもそれがタテになるとヨコほど一筋縄じゃなかったりします。
タテの高さを揃える為に使うスタイルはvertical-alignなのですが、これが子要素に効かないからです。

vertical-alignを使って一発で中央揃えしたい場合は“display: table”の出番です。
ブロックをテーブル扱いにすると楽に解決できちゃうんです。

0328-4b

このように親要素をdisplay:table;にして、子要素をdisplay:table-cell;にすれば楽でした。
また、table-cellのブロックを分けることで3行の文字列に対してアイコンが中央に来てくれるという嬉しいおまけ付き。
なるほどこういうやり方もあるんですね。

アイコンはFontawesomeから同じ意味合いのもので代用してあります。

displayスタイルの違い?

これで完成!と思って全体のチェックをしていると、

0328-5b

あれ。borderが1pxずれてる…。

最初はborderの位置を%で指定したからウインドウ幅で誤差が生じているのかと思いました。
(実際ウインドウ幅によって合ったり合わなかったりしてました)
でもどのクラスも同じスタイルを継承してあるので、ずれるはずがありません。

違いがあるとすれば、上のdivはdisplay:block;、下のdivはdisplay:tableだということです。
結果的に全てをdisplay:tableにすることで解決しましたが、
もしかするとそれぞれの座標の出し方がちょっと違うのかもしれません。

ここを直して、フォントの調整もして改めて完成です。

一応レスポンシブになってます。
1230pxくらいのウインドウで比べるとちょっと似てる気がします。

まとめ

というわけで、インデックスページをコピーしてみました。
シンプルなサイトではありましたが、タイトルロゴ・メニュー・コンテンツと役割の異なる要素が盛り込まれていて、前回よりボリュームのある内容になったんじゃないかと思います。

大体ひととおり作れるようになったかなとサクッとやるつもりでいたら、初歩的なことをいくつも気付かされました。
クラス名の付け方も根本的に見直したりして、やっぱりまだ足りないことだらけです。
クラスの扱いに関して気付いたことなどはまた別でまとめたいと思います。

あとは、当たり前といえばそうなんですが、やっぱりやるのとやらないのとでは全然違います。
出来そうなところから少しずつでもコーディングしてくのがホントに大事だなと思いました。
手をうごかしてこー。おす!

標準