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