会津ラボ

Webサイトをコーディングするとき、いかにレイアウトを範囲認識するかで、コーディングの出来栄えが左右する。コンポーネントとする範囲が広大だと、上階層CSSセレクタに依存してしまい使い回せず、再利用性に欠けたものになってしまうためだ。 もちろん一意的なレイアウトならば、それで構わないのだが、CSS設計が謳われる昨今では、コンポーネント単位で捉え、ほかを汚染しない再利用を考慮した作りが是とされている。 このエントリーでは、会津ラボサイトを使ってレイアウトの捉え方を説明していく。参考となれば良いのだが、あくまで一例であることは理解いただきたい。 範囲を考える まずデザインを見て、再利用可能な範囲を考えよう。考える作業は、意識内で行ってもよいが、紙にプリントして色ペンで囲うとわかりやすい。視覚的に認識することでコーディング高速化に寄与することだろう。とても、おすすめだ。 会津ラボサイトをコンポーネント単位で見た図である。枠線で囲ったところが、再利用可能な範囲というわけだ。枠線の単位でCSSセレクタ名を与えれば、ほかを汚染することもなくなる。 緑線、赤線の関係は、緑線のコンポーネントに赤線のコンポーネントが入り子構造になっていることを示しているが、CSSセレクタまで入り子構造にするわけではなく、それぞれ独立した再利用可能な状態を保たなければならない。 HTML構造を考える 再利用可能な範囲が理解できたところで、それに沿ったHTML構造を考えよう。 枠線は再利用可能な範囲だった。いかなる箇所に配置しても利用できるHTML構造でなければならない。そのことを念頭にHTMLを組み立てるわけだが、前工程を紙に起こしているのであれば一目瞭然だと思う。 それでは会津ラボサイトのコンテンツを構成するソースコードをご覧いただこう。下記①〜⑨は、単独で成り立つもので、⑩〜⑫は、①〜⑨のコンテンツを内包することで成り立つものとなっている。 ① 会津ラボが掲げるスローガンを構成していて、h1タグを使っているのがポイントだ。 ② グローバルメニューを構成している。 ③ ユーティリティメニューを構成している。 ④ ヒーローエリアを構成している。 ⑤ カード型コンテンツを構成している。 ⑥ 見出しエリアを構成している。 ⑦ 最新情報などのアーカイブコンテンツを構成している。 ⑧ バナーコンテンツを構成している。 ⑨ フッターコンテンツを構成している。 ⑩ ヘッダーコンテンツを構成しているわけだが、そのなかに①②③を内包している。 上述からの変更点は、①②③のトップレベル要素にheader-xxxの要領でclassを付与したことだ。①②③のコンポーネントは、再利用性を担保するため位置に関わることは記述していない。配置された先で余白や幅の指定が邪魔になるからだ。もし余白や幅の指定が不要ならば、class付与しなければよい。 このケースだと、headerコンポーネント内の余白調整は、headerコンポーネントに任せることとなり、それぞれheader-xxxが追記されたというわけだ。 ⑪ カード型コンテンツを並べたエリアを構成していて、⑤を内包している。 ⑤も同様に余白や幅のスタイルは持たず、gridコンポーネントの中で良しなにしてもらう魂胆だ。ところが新たにclass付与はしていない。 もしもfeatureコンポーネントをgridコンポーネントの小要素として余白を与えてしまうと、境界ボーダー1px分だけ片一方のコンテンツ幅が短くなってしまう。そんな理由からgridコンポーネント直下の配置は避けて、横並びした要素に内包するようにしたわけだ。 ⑫ ここは新着情報エリアを構成していて、⑥⑦を内包している。⑥⑦にあたっては、配置先で余白や幅の必要がないため、article-xxxのようなclassは付与していない。 まとめ デザインのレイアウトから再利用可能な範囲を認識して、それをHTML構造にする一連の工程を説明してきた。これは私自身いまでも難しく思うし、やり甲斐を感じる工程である。以前、電車通勤していたころ、中吊り広告を見て範囲を考えるなんてことをしていた。メモ帳に書いてみたりもした。もし暇なときは挑戦してみてはどうだろう。レイアウト認識を習慣付けておけば、仕事でも役立つはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

他人のソースコードから得られる知識は、想像以上に多くて眺めているだけでも大変勉強になる。 私はマークアップエンジニアということもあり、Webサイトのソースコードを閲覧する習慣がある。Webサイト訪問ついでにソースコードを覗く訳だ。ユニークな記述があれば、悪怯れることもなく我がものとしてしまう。なんと傍若無人なことか。 ほかにもオンラインエディタやgithubなども守備範囲である。他者のソースコードを容易に閲覧・学習することができることは有り難い限りだ。 さて、そんななか他者のソースコードに感嘆の声をもらしたことはないだろうか？ 私には、思い及ばないアプローチのコーディングに関心してしまった経験がある。思わず隣席のエンジニアに自慢してしまうほどだった。 その内容をご覧にいれようと思うが、マークアップエンジニアでなければ興味をもてないかもしれない。そこはご容赦いただきたい。 ソースコード HTML CSS 説明 このソースコードのどこに感嘆したのかはflexboxの折り返した状態と同様のことが再現できていたことだ。各.boxは、内包するテキストの分量が違うため、高さが異なる。無思慮にfloatで横並びさせると高さの異なる.boxに引っかかり、まともに左端へ折り返すことができない。ところが、上述のスタイルだと、不測のこともなく左端へ折り返してくれる。 この件について、「flexboxでいいじゃん」と思ったのならば、それはもっともな意見だ。flex-wrapならば、引っかかることなく左端へ折り返すだろう。そのとおりである。 しかし上述ソースコードを認めたのがIE8などが要件に含まれるような時代のことで、flexboxなど使えるものではなかった。 そして当時このようなレイアウトは、jQueryプラグインで高さを揃える対策がとられていた。heightLine.jsやfixHeight.jsと聞いてピンと来るなら同じ時代を過ごした戦友なのだと思う。ただJavaScriptによる対策だと、読み込みまでのタイムラグがあるため、わずかなチラつきが生じる。私はこれが気に食わなかった。 そんななかの上述ソースコードだったから、感嘆したのも頷ける。 まとめ 私の思い出話になってしまったわけだが、数年たったいまでも記憶しているほどの内容だったということだ。確かにHTMLにもCSSにもJavaScriptにも関心したものはあったはずだが、すでに我が身に消化して記憶すらしていない。 自身のソースコードも他者に閲覧されていることを自覚して、世に発信しなければと考えるようになったのも、この頃からだったと思う。 私も、他者に影響や知覚させれるほどのものをコーディングしていきたいと改めて思い直すとして、このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。