HTML/CSSの練習でsplatoonの画面をマークアップした(１)
背景
フロントエンドが得意とは言えない身分なので
少しでもうまくなりたいなーと最近思っており
特にCSS系は本当に苦手意識MAXで見ているだけで「ん"ん"！！！」ってなるほどダメ。
でもそんなの何年も言ってらんないので
そろそろ苦手克服するかーと思っていたところに
ふとゲーム画面が飛び込んできて「これだ！！！」となったわけです。
これをいまからマークアップ練習の題材にします。アサリがB帯なのは気にしないでください
— ごま@エンジニアしたいお母さん (@gomaaburamax) March 24, 2019
自分の好きなゲーム画面なら嫌な気持ちも半減だし
しかもゲーム画面なので答えがあるわけじゃない。
既存のサイトを写経するとそこに答えがあるのでめっちゃ見たくなる。
その点ゲーム画面というのはwebページばりに構造的だし
情報も詰まっていて良さそうということで題材に選んだ
できたもの
実践(教えてもらったメモ
今回、講師はhoto氏( hoto (@hoto17296) | Twitter )です。 無理やり教えてもらいました。
(1) 文書として見てみよう
「この画面を見た時に文書とした時に文字として起こすものをまずマークアップしてみよう」 ということでHTMLを書いていく
どうしてもデザインが気になって、デザイン用のタグを書きたくなるけどそこは我慢してやる。
今回の題材の場合,文書ぽくないから少し難しかったけど
見栄え上ついている要素(例えばランクのバー、コインとかサザエの要素)は文字の要素ではないので切り捨てていき
対してルールやステージの項目は見出しっぽいので<h2>にしてみた
(2) 大きな部分からスタイルを当てよう
(1)でできたマークアップに対して、できるだけ要素を追加しないように
スタイルを当てていく
当てる順番は大きなレイアウト部分から順に小さくしていく。
今回のレイアウトだと
２段組なのでまず二段組のレイアウトを作って
次に左上のステータス部分、ステージ情報部分、右側の参加者部分
という順にやっていった。
(3) 細かい要素をやっていく
flexbox
ゲーム画面だったけど
webの練習なのでレスポンシブ対応するという前提で実装
その時肝になってくるのがflexboxだった
今回での主な用途は「画面の横幅が変わっても２段組を維持する」というところ (時間切れでステージ情報のところがwindowサイズの変化についていかないので次回直す)
複数の塊を並べて揃えてレスポンシブ対応という時にめっちゃ使うということがよくわかったのでちゃんと使いこなせるようになりたい
重なりやズレ
ずらしたい要素をposition:abusoluteにすることで
絶対位置で要素の配置が可能になる
めっちゃ使う。
float解除
参加者一覧のとこで
ランクをfloat:rightしているので次の要素が回り込んでランクの左に来てしまう問題を解決するために
floatを使い終わったらそれを終了する必要がある。
そのやり方は上Qiita通りなんだけども
疑似要素を入れた時にcontent:""してあげないとタグが描画されないのはなかなか解せぬという気持ちになったので慣れていくしか無い
傾き
傾きを表現するのは意外にも簡単 transform:rotate(-0.3deg);一発
まとめ
久々にガッツリマークアップをやって、あーーーそんなのあったわーーーみたいな記憶を取り戻す旅をしてました。
左/右揃えとかfloatしか知らない古い頭だったのでアップデートされてよかった。
「マークアップできます!」って言える人マジでかっこいいと思う。
html構造がぐしゃぐしゃでもすぐに構造を捉えて適切に要素を追加したりスタイルを治せる人にワタシハナリタイ。
次回、同じ題材で「CSSで波線をつくる＋背景が動くようにする」をやっていきます
