CSS初心者へ❦スタイルの不具合ってどうやって直すの?その工程、見てみよぉ!

幅のせまいスマホから見ると、枠から画像や文字がはみ出す。対処ページを探しコードをコピペするため検索検索検索。検索と確認をくりかえし時間を費やすより、それぞれ状況が違うから、原因を突き止めてから検索するほうが早いときもあります。

  • 不具合を調べるとき、知ってる人はどこを見てる

知りたいと思いませんか?

ちなみに画像や文字が はみ出す原因の解決法は、親要素より、子要素の幅が大きいときの対処。max-width:100%だけ内側余白とボーダー分がはみ出すとき。文字が改行されず、はみ出し横揺れするときの対処で書いてます。

  • それでも、親要素からはみ出すとき。

親のスタイルが原因で、子要素の画像や文字が枠から はみだします。その様子と原因の調べ方、解決するまでの工程を書くので、これから先CSSでカスタマイズして同じようなことが起こったとき、原因を探すのに役に立つので見ていきましょう^^

CSSの不具合の直し方、のぞき見しちゃおう!

スポンサーリンク

画面の横幅の狭いスマホで画像・文字がはみ出す原因

テーマを変更して、旧テーマで使っていたカスタマイズを持ってきたら、親要素からハミ出してました。画像の説明をブログ上に表示するキャプション文字画像が、下記画像の黄色の親要素の枠から飛び出して、ブサイクになってます。

画像とキャプションを囲う親要素からはみ出してる

親要素(ピンク色部分)からはみ出した例

原因のヒントが見つかる工程・調べかたを順に書きますね。

スタイルCSSがおかしくなっている原因をHTMLで調べる

CSSを確認するには、はみ出した画像と、それを囲っている(親要素の)タグを見てどのスタイルが影響しているか見るために、HTMLを確認します。

  • HTMLはブログの骨組みで装飾するときの目印となるタグを付け、それを指定して装飾するのがCSS。
    • HTMLタグを見て、そのタグで囲まれた要素(テキストや画像など)をCSSで指定し装飾してるから。

何言ってるか分かんない。って思うなら、初級の下記リンクを参考にどうぞ❦

LINK初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?

以降ゆっくり見てくださいね。

はみ出した要素(画像・文字)を囲っているHTMLタグを見る

ブログではみ出した箇所。リスト内のキャプション付き画像

この場合、リストulタグの中のliタグ内のdivで囲った親要素からはみ出した画像文字であるキャプションを入れたときの状態です。

ザックリしまくったHTMLは下記のとおり。スぺースで階層を作ったのは、要素を囲んだ範囲を示してます。

<ul>
<li>テキスト
<div (画像とキャプションを囲った親要素)>
<img (divはみ出した画像) >
<p>キャプション</p>
</div>
</li>
</ul>

ピンク色がはみ出した要素。それ(画像とキャプション)を囲った親要素からはみ出たものを直したいけど、冒頭でいった3つ(width:100%など)がキチンと効いてる状態です。

この場合ほかに原因があるから、divを囲んだ親要素である、番号なしリストliを確認していきます。

ポイント

親のスタイルは子要素まで継承するものがあるので、親のスタイルを順番に確認して、左に寄って はみ出している原因を探します。

  • タグで囲っているのが親要素
  • タグで囲まれているのが子要素
  • はみ出た要素を囲んでないものは親要素ではないから関係ない

この意味がわからないとき、下記をどうぞ。

LINK基本CSSのセレクタの指定★親子孫要素を知れば装飾が反映するよ!ブログ構造HTMLを見て理解

HTMLを見るにはPCで要素の検証画面を使うと便利

HTMLを見るのに、ブログの投稿画面にあるビジュアルやテキスト(HTML)で確認、さらにはHTMLを書いてるテーマファイルまで確認して見るのは面倒だから、PCの要素の検証が便利です。

ブログで はみ出た画面を開いて、Ctrlキー+Shiftキー+Cキーで検証画面を開きます。チェックマークが青になってる状態で、画像をクリック。

矢印マークが青状態で画像をクリック

右側や下側や別画面に要素の検証が出ている場合も同じです。次にElementを確認してHTMLの部分を少し上へスクロールしたら、親要素が見えてきます。

imgタグの親要素・関係ない要素

はみ出した画像の親要素は、HTMLタグで囲まれているかどうかで判断できますよ。

imgタグを囲っている親要素

親であるdivをクリックして調べて、そのまた親であるliタグをクリックして調べる。こうしてHTMLタグを装飾しているスタイルを確認していきます。

親要素から継承されたスタイルを確認し原因をしらべる

要素の検証画面で親要素リストのスタイルを確認

要素の検証で右側のElementにある親要素リストのHTMLタグか、ブログのリストのテキストをクリックしたらそのスタイルを確認してください。

パッと見て、左にズレてる原因が分からないとき、CSSを消していけば原因が分かりますよ。 margin: 0.8em 0;の隣にチェックがあるのでクリックしたら、その装飾が消えてズレが戻らなければ、チェックを元に戻す。

Chrome要素の検証画面text-indent: -1.4em;のチェックを外して画像とキャプションが親要素にハマった画像

text-indentの右側にチェックが入っているので、チェックを外すと収まります。チェックを付けるとはみ出す・・・左にズレる原因発見❦

ズレた原因はtext-indentを指定してたから。その意味が分からなければ、ココで検索すれば分かります。

text-indentプロパティは、文章の段落などの一行目のインデント幅を指定する際に使用します。インデントには負の値を指定することもできます。

引用元:text-indent 一行目のインデント幅を指定する|スタイルシートリファレンス

段落の始まりにスペースを確保したいとき使うスタイルねっ!と解ったら、この指定をなかった事にする(初期化)か、調整するかしないといけません。

スタイル横にあるチェックマークで、装飾を消したり付けたりすれば、CSSが分からなくても遊び感覚で原因が分かりますよっ^^

要素の検証画面:スタイル横のチェックマーク

要素の検証は、初心者のカスタマイズに最適なので、その他使いかたは下記をどうぞ。

LINK要素の検証の使い方!初心者がカスタマイズできる方法!HTMLとCSS入門編

原因であるtext-indentの対処、CSSでスタイルを指定

左にズラしているのがtext-indentが原因だと分かったら、CSSでスタイルを追加してあげます。

段落のはじめを揃える装飾text-indentが-1.4文字ズラしているのは、リスト前にあるWebFont(チェックマーク)の装飾でリストの文字分左へ移動させてるからです。

テキストインデントあり

この記載を初期化するには、リストをtext-indent: 0;にすればキレいにハマります。でも全ての番号なしリストが下記のように回り込むスタイルになって影響がでるので、リストにtext-indent: 0;は使いません。

テキストインデントなし

番号なしリストul liの中にある画像とキャプションを指定して、左の外側1.4em(1.4文字)ズラして元に戻せば、親要素にはまるので、margin-left: 1.4em;などで調整します。

  • 2行目の指定
    • Simplicity2の記事を指定している親要素.entry-contentの番号なしulのリストli内にあるキャプション.wp-caption内画像imgを指定
  • 3行目の指定
    • ulのリストli内にあるキャプションテキスト.wp-caption-textを指定
  • 4行目の装飾
    • 外側余白の左側を1.4文字(右へ)移動

ザックリしたHTMLは下記

<div class=”entry-content”>
<ul>
<li>リスト内テキスト
<div class=”wp-caption”>
<img>
<p class=”wp-caption-text”>キャプション</p>
</div><!– /.wp-caption –>
</li>
</ul>
</div><!– /.entry-content –>

さいごに

リストの装飾text-indentが子要素にも継承されて、画像とテキストが左へズレてしまった例です。対応させるには、リスト内の画像とテキストを指定し、margin-leftなどスタイルを書けば、ズレの修正が可能です。

ただリストに限らず子要素入れるもの、全てこのように編集が必要になるスタイルtext-indentは使っちゃダメですね。

毎回面倒だから・・・><

リストの子要素に画像やリスト入れ子にしても修正しなくて良い、番号なしリストを装飾するカスタマイズを公開します。

それでは、かうたっくでした。

スポンサーリンクと関連記事

関連記事(広告含む時あり)

シェアする

フォローする

  • Follow Me →
スポンサーリンク
トップへ戻る