教本では学べない、CSSの不具合解決法

実務では、修正するスキルが求められる！
ケース1.「ページ内の背景色、画像を左右いっぱいに伸ばしたい」
ケース2.「画像と画像の間に生じた余白を消したい」

実務では、修正するスキルが求められる！

Web制作案件は新規制作に限らず、既存ペーシの改廃や修正の依頼も数多く入ってきます。実務経験のない方には、まず既存ページの改廃、修正などを任されるケースが多いのではないでしょうか。こういったケースでは、今まで学習してきたことを応用するスキルが求められます。

ところが、経験のないうちは対処法が分からず、先輩や上司に質問を繰り返してしまい…。わからないことを尋ねるのは悪いことではありませんが、何度も繰り返していると、他人の工数を奪うことになりかねない、あなた自身の評価にも影響しかねません。

私の場合も同様でした。「これ修正できる？」と上司から依頼がくると、「承知いたしました！」と答えて、早速ググって対処法を探すことに…。

修正方法を事前に知っているのと知らないのとでは、実際にかかる作業工数に大きな差がでますので、その差は事前に解消すべきです。

コレ当たり前なんですけれど、実際に制作の現場にいかないと気づくことができなかったりします。

私の場合も同様に、コーディング初心者の頃は大変困りました。最初の頃は時間をかなり費やしたとしても、何も言われないかもしれません。しかし、しだいに上司や先輩から「どのぐらいでできる？」と確認が飛んできます。ところがこういったケースでは即答できないことが大半。必要以上に工数を費やしてしまった苦い経験がたくさんあります。

その経験から、実務未経験時代に出合った、CSSの困ったケースを挙げてみました。

ケース1.「ページ内の背景色、画像を左右いっぱいに伸ばしたい」

「widthを100%に変更」がまず浮かんでくるのですが、変更を入れてもCSSが効かない。該当箇所、その親要素に変更をかけてもやはり効かない。

該当箇所もしくは、その親要素に変更をかけてもCSSが効かない場合は、コンテンツ全体の領域のwidthに固定値（px）で指定が入っている可能性が高いです。

例えば下記のイメージです↓

section1～5をくくっている親要素のcontentsにwidth 1000pxの固定値が設定されています。そのため、例えばsecition2と4の左右幅をいっぱいに引き伸ばすことができません。

こういったケースでは少々トリッキーな手法ですが「ネガティブマージン」の設定を行うことで解消できます。具体的には、左右幅いっぱいに伸ばしたいsection2,4に下記スタイルをあてていくと、

margin: 0 400% padding: 0 -400%

下記イメージのとおり、section2と4の背景色を左右いっぱいに引き伸ばすことができます。

上記設定だけでははみ出した部分がすべて表示されてしまいますので、コンテンツ全体の領域をくくるdiv要素を追加して、overflow-x: hiddenをここに当てれば完成です。

このネガティブマージンは、アンカーリンクを設定したけれど、ヘッダーに隠れてジャンプ先の見出しがうまく表示されないケースでも応用がききます。

HTMLのアンカーリンクでページ内リンクを設定する | マインドステージ

アンカーリンクとは？ Webサイトのページ間をリンクさせるアンカータグ（aタグ）ですが、同じページ内の特定の位置へリンクすることも可能です。同ページ内へのリンクを「アンカーリンク（ページ内リンクとも言います。）」と言います。例えば、以下の

私がこれまでに参考にさせていただいたページはこちらです。はにわまんさんのページで紹介されているものは、上記とはちがった記述なので、こちらもぜひ参考にしてみてください。

https://accelboon.com/tn/css-途中で要素を画面いっぱいに広げる/

子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS | HPcode（えいちぴーこーど）

子要素を親要素からはみ出して画面いっぱいにするは、今までであれば親要素から出してコーディングし直すというのが一般的でした。ただし、今ではcalcとvwとい新たなCSSの概念があるので、子要素を親要素からはみ出して画面いっぱいにするというこ

ケース2.「画像と画像の間に生じた余白を消したい」

ほぼ画像で作られたランディングページやHTMLメールの制作の際に生じる不具合です。ローカル環境では問題なかったのに、本番環境にあっぷしたところ、画像と画像の間に余白が生じてしまいました。

たいていの場合、imgタグのボトム側に、この余白は発生するようです。私もこれまでに何度もこのケースに出合ってきたのですが、その際、以下の手順をたどれば解決することができました。

対処方法① 該当のimgタグにvertical-alignプロパティを指定する。

img { vertical-align: bottom; }

対処方法②

上記①が効かない場合は、同じimgタグにdisplayプロパティを指定する

img { display: block; }

対処方法③ 上記①②ともに効かない場合は、余白が生じているimgタグ全体をくくるdiv要素を追加し、このdiv要素にline-heightプロパティを指定する。例えば、下記のソースを表示させると、

<body>
    <div>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
    </div>
</body>

画像と画像の間に余白が生じます↓

そこでimgタグ全体をくくるdivタグに、line-heightプロパティを下記の通り指定すると


<style>
    div { line-height: 0; }
</style>

<body>
    <div>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
        <img src="https://placehold.jp/300x150.png"><br>
    </div>
</body>

ご覧のとおり、画像の間の余白を解消することができます。