お久しぶりです。WEB制作チームのウサナミです。
最近、WEBサイトのレイアウトについての記事を複数書いていました。
そこで今回はWEBコーディング時に陥りやすいcssでのレウアウト崩れとその対処法を書いていこうと思います。

floatでの崩れを解消する。

要素を簡単に横並びにしてくれるcssですが、ちゃんと使い方を分かっていないと私の中では一番レイアウト崩れが起きやすいcssだと思っています。
特に昔はこのfloatで崩れているサイトが多かったイメージです。

< style >
.box01, .box02, .box03 {
   margin-bottom: 15px; /*要素の下に15pxの余白を入れたいがビタッとくっついて表示がおかしい*/
}
.box01  {
  float: left;
}
.box02 {
  float: right;
}
< /style >

対処法

対処法は至って簡単でclear: both;を横並びを終了させたい要素に追加するだけです。
ですが、結構clear: both;を書き忘れてサイトが崩れてしまうことが多いです。

< style >
.box03 {
  clear: both;/*clearすることにより、イメージ通りに余白が入った*/
}

positionでの崩れを解消する。

自由度が高く要素を好きなところに配置してくれるcssですが、稀に要素がどこかへ消えたりする事があります。

< style >
.box0201, .box0202, .box0203 {
  position: absolute;/*absoluteはかけたが、移動させる範囲を指定していないため、変な所へ要素が飛んでいく*/
}
.box0201  {
  left: 0;
}
.box0202 {
  right: 0;
}
< /style >

対処法

レイアウトが崩れたりすることは珍しいかもしれませんが、親要素にかけなければいけないposition: relative;の指定を違う要素にかけてしまって崩れる場合があります。

< style >
.positionbox {
   position: relative;/*どの要素の中でabsoluteを移動させるかを指定すると要素が変な所へ飛ばなくなる*/
}
.box03 {/*absoluteで左右中央揃え*/
  left: 0;
  right: 0;
  margin: 0 auto;
}
< /style >
bodyから要素がはみ出るのを解消する。
割とよく起きるのがこの現象で、起きてしまうとサイトに意図しない横スクロールがでてサイトがガタガタに…。なんてことがあります。私も稀にやってしまいます。


box01
box02
box03

< style >
box {
  width: 300px;
}
.box01 {
  width: 300px;
}
.box02 {
  width: 340px;
}
.box03 {
  width: 300px;
}
< /style >

対処法
親要素より横幅が大きくなってしまい、はみ出た要素の幅を調整するのが基本的な対処法となりますが、簡単な作りのサイトであればすぐに修正も可能です。
ですが、複雑な作りのサイトであればそれも難しくなってきます。
複雑なサイトの場合は親要素を一つづつ消していき、サイトの崩れが直ればその消した要素が原因になるので、その要素のcssを調整します。
そうすれば複雑なサイトであっても修正する事が可能です。


box01
box02
box03

< style >
.box02 {
  width: 300px;/*boxに収まるサイズに修正*/
}
< /style >

サイトを作る上で意図しないサイト崩れなどは誰しも経験すると思いますが、対処法さえわかっていれば言うほど厄介なものではありません。
サイト作りには色々と知識が必要かと思いますが、皆さん頑張って素敵なWEBサイトを作ってください。




●「LINE公式アカウント」上のサービス利用情報やアンケート結果などのユーザーデータとの紐づけによる、より高度なメッセージ配信の最適化



●PayPayやYahoo!JAPANなどのZHDグループ各社サービスとの連携によるユーザー接点の強化



●業種特化型パッケージプランの提供



つまり、今まで外部マーケティングソフトを使用しないとできなかったユーザーごとのタグ付けをLINEの管理画面からもできるようにしたり、PayPayなどの連携、業種に特化した機能の追加など「よりユーザーが欲しい情報」を友だちに提供できるようにLINE公式アカウント自体の機能が拡張されます。



さらに上記の強化で、企業側から情報を一括で送るだけでなく、ユーザーからもアクションを双方向でやり取りすることでより個々のユーザーとの深いつながりを生み出すツールへと変化を遂げていくことで、ますますLINE公式アカウントの重要性は確立されるんじゃないかと期待しています!



実質、無料メッセージ通数が少なくなってしまうことで値上げのようなイメージを持たれてしまう側面もございますが、「LINE公式アカウントの価値を全体的に高めるための措置」と捉えて、いままで「なんとなく」配信していたメッセージの内容やセグメントを、「50代以上の既婚者に響く配信をする」など、配信の目標を明確化して、ユーザーを意識した配信を再検討してみてはいかがでしょうか？











LINE公式アカウントの導入、活用はプランニングAへ!



でも実際どう配信の内容を見直していいかわからないよー、タグ付けってそもそも何？どうせそんなに活用してなかったしお金かかるならもうやらなくていいや。。というお客様も多いかと思います。



そんな時は、「もういいや」と諦めるまえに、ぜひLINE正規代理店の当社へご相談ください！







LINE公式アカウントで達成したい目標をお伺いした上で、アカウント構造や配信内容はもちろんのこと、ご要望によってはマーケティングツールと連携して顧客管理、予約管理、会員証管理などもご提案させていただきます。







ご相談、お問い合わせお待ちしております！







WEB広告担当・広報担当必見！



新規受注の頭打ち、マーケットリサーチの改善、ブランド認知度の向上、顧客獲得の戦略改善



新たな販売チャネルの開拓、競合分析と差別化・・・・・



やらなきゃいけないことはあるけど、全然解決できない！！そんな担当者必見！