こんにちは。周です。
みなさん、「CSS」はWebサイトの見栄えを整える役割を果たしています。
レイアウトの組み立てから細かいサイズ、色の指定まで、幅広く利用されています。
Webサイトのコーディングにとっては欠かせない存在です。

今日は、私が「CSS」応用の失敗談と、失敗の中で学んだCSSの指定方法をいくつか紹介します。

参った！縮んだら崩れる…
ー 計算で余白を指定する方法 ー

今のウェブサイトでは、インパクトを図るファーストビューを除き、
多くのコンテンツは一定の幅以内に収め、その幅を超えると余白になるという様式が一般的です。
それは、モニターのサイズが極端に大きくても崩れないようにするためです。

また、ウェブサイトに迫力を出すために、固定幅のコンテンツの間に、画面幅に合わせるコンテンツを入れることも多いです。
時には、画面50%のコンテンツなど、少し変わった様式もあります。

その固定幅を超えるコンテンツのレイアウトを組むため、計算式を書く必要があります。

入社当時の私はCSSファイルに計算式を書く概念が薄かったです。
指定の甘さで、画面サイズによって崩れが多発し、苦戦していました。

上記の図の場合、以下のように計算することができます。

• 画像の幅：50% – 90px
  
• 文字の幅：(960px / 2) + 90px
• 文字の右余白：50% – (960px / 2)

違う単位の計算はデフォルトのCSSでも使える「calc」関数を使えば、クリアです。

いったい何番目や、もう分からん！
ー 等間隔で要素の並びを指定する方法 ー

固定幅の中で、等間隔でいくつかの要素を並ぶコンテンツもウェブサイトで多く見られます。
1行の最初の要素の左側と、最後の要素の右側は、余白が要りません。

それをどうのように対応していたら良いかを考えると、
昔私は「nth-child」や「nth-of-type」という何番目の要素を指定できる命令を使っていました。

しかし、デバイスによって、並ぶ要素の数も変わります。
そのため、まず前の指定を上書きでリセットする上で、新しい指定をする必要があります。
デザインの変更や並ぶ要素の数を調整する必要が出てきて、必死に考えても動かないという苦しい境地に立ってしまいました。

そこで、先輩から下記の方法を教えてもらいました。
まず、すべての要素の左側と上側にmarginを指定します。
そして親要素に、マイナスの値を指定することで、子要素に指定した余分な余白をはみ出させてしまう方法です。
また、要素の幅は、「(100%/並ぶ要素の数)-左余白の幅」という計算式を与えます。
その方法で、nth-childで数分の要素を指定する闇から抜け出すことができました。

高さを揃えたい！しかし…
ー 横並び要素の高さを揃える方法 ー

上記の図のように、横並びの要素に入っているテキストの量はバラバラで、高さを揃えたいです。

まず、文字の行数がバラバラなので、すべての行数を同じすれば良いではないかという考えが出ました。
文字の行数をすべて2行にして、2行を超える分は非表示にし、2行目の最後は「…」省略記号を表示すれば解決です！

ですが、
「いや、省略してほしくないっすよ！」とツッコまれて、
私は落ち込んでしまいました。。。

そこで、１番行数の多い要素を基準に、すべての要素を同じ高さに調整する考えが出ました。
すべての要素に「height: 100%」を指定したら、1番大きい基準になるではないかと思いました。

ChromeやFirefoxはその指定を受け入れてうまく表示してくれた（拍手）
と喜んでいましたが、
Safariで見てみると大崩れしてしまい、大ショックでした。（涙）
Safariでは「height:100%」を指定した要素の高さが画面いっぱいになってしまい、大きな余白ができてしまいました。

では、どうすればよいでしょうかと思って、人にたずねたり、調べたりすると、以下の方法が出てきました。
まずは、すべての要素に「height:auto」に設定し直しました。
そして、要素の親に以下のように指定しました。

「stretch」は親要素に合わせて伸縮する指定です。
Safariも問題なく表示することできました。ばんざい！

まとめ

プログラムやコーディングで躓いてしまうことが日常茶飯事です。
自分の小さいミスで、大きな迷惑をかけてしまうこともありますが、
失敗の中で経験を重ねて、失敗を繰り返さないようにすることが重要です。
今日の失敗を明日の成功につなぐように努めていきます。