朝の通勤時、近所の中学に通う女子3名がいつも道路の向かって左側を横並びで歩いてくる。 その道路は一車線一方通行で両脇に歩道があり、お互いが向かって左側を歩けば人同士がすれ違えないような狭い道路ではない。 どうやら手前にある向かって左側の側道からくる生徒と待ち合わせをしているらしく、そのまま向かって左側を歩いてきているようだった。 一方通行のこの道は、自分より背面から車が来る道でもある。 つまり、女子中学生3人を避けるには、自分が後ろから来るかもしれない車をケアしつつ、車道側にでなくてはいけない。 労力が理不尽であることもさることながら、単純に危険だ。 そんなことにも気づいていないのだから、教えてやらねばならない。 かと言っていきなり話しかけても変質者だ。 仕方がないので、いわゆる歩道の白い線の内側を直進することにした。 ところがこの3人組は、一向に横並びの隊列を返す様子がない。 頭の中では

ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、 フロントエンドのデベロッパーはCSSでレイアウトを実装する時に何を考えるか、その思考プロセスを言語化した解説記事を紹介します。 下記は、頭の中のメガネで見える実装のイメージです。 Thinking Like a Front-end Developer by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインのディテールは脇に置いておく 配下ページのレイアウトを実装する時に考えること ディテールを掘り