なんて便利!こんな時にも使えるcssの裏技使い方!

横幅の計算を省略しよう

ページのレイアウトを考えるとき「全体の横幅が980pxだから、サイドが…」といちいち計算してはいませんか?相対指定を活用すれば、計算の手間を省くことができますよ。
使い方は簡単です。.wrapper {width:980px}と全体の横幅を指定したら、その中の要素を.wrapper .side{width:30%}、.wrapper .main {width:70%} とpxの代わりに%で指定するだけです。また、メインとサイドの間で余白を撮りたいときも、.wrapper .side{width:25%;margin-right:5%}といったように、余白も%で指定することができます。ただし、利用の際は、すべての横幅を足したら100%になるように注意してください。

不要な要素はdisplay:noneで消しちゃおう

レスポンシブデザインなど、スマホとパソコンの両方のデザインをひとつのCSSで管理している時「この要素はパソコンでは必要だけど、スマホだとデザインの邪魔になるな…」と困ることはありませんか?そんなときに便利なのがdisplay:noneです。
display:noneは「指定された要素を表示させなくする」CSSの技です。ただ見えなくするだけでなく、高さ横幅もなくなるため、完璧にその要素を消すことができます。利用方法としては、たとえば「この改行はパソコンでは必要だけどスマホでは不要」というとき、スマホの時だけ<br style="display:none">となるように記述しましょう。すると、スマホの時は改行されずに表示されるようになるのです。メニューボタンやバナー作成の時に便利な技ですよ。
ただし、長文コンテンツなどをdisplay:noneで消すことはSEO的に良くありません。乱用は控えましょう。

ホームページ作成の実績にこだわりながら業者選びをすることで、初めての人にとっても、納得のゆくサービスを受けることが可能です。