Loading

プレオ日誌

blog

やさしいコーディングテクニック

やさしいコーディングテクニック

こんにちは、フロントエンドエンジニアの岡田です。

今回はコーディングしていく上でよくつまずきそうな箇所とその解決策をまとめてみました。

display:inline-block;の横並びで発生する隙間

【問題】
要素を横並びにする際に色々とやり方はありますが、display:inline-block;で横並びにした際このような隙間ができてしまいます。
display:inline-block;の隙間

 

【解決方法】
(1)display:inline-block;を指定している要素の親要素にfont-size:0;を指定してあげると隙間はなくなります。
(2)htmlコードを記述する際に、display:inline-block;を指定している要素を改行せずに記述すると隙間はなくなります。(もしくはコメントアウト<!—->で繋げる。)

display:inline-block;の隙間

画像下の隙間

【問題】
marginもpaddingも指定していないのに画像下に隙間が発生!

画像下の隙間

 

【解決方法】
画像要素に対してvertical-align:bottom;を設定し、画像位置を下に揃えてあげることで解決します。

画像下の隙間

iPhoneでinput要素のボタンにcssが効かない

【問題】
フォームなどで使用するinput要素のボタンをこんな感じにレイアウトしました。

input要素のボタン

確認のためにiPhoneで見てみるとなぜかグラデーション???

input要素のボタン

 

【解決策】
こんな時は-webkit-appearance:none;を指定してあげます。
角丸もいらない場合はborder-radius:0;を指定してあげましょう。

input要素のボタン

長いURLがはみ出す

【問題】
ブログなど記事内に記載した長いURLがはみ出してレイアウトが崩れてしまう…。

長いURLがはみ出す

 

【解決策】
word-wrap:break-word;を指定して折り返してあげましょう。

長いURLがはみ出す

今回は簡単に解決できるものを選んでみました。
崩れ方や原因によっては、jsを使用したり要素を変更したりする必要も出てくるかもしれません。

ちょっとした細かい箇所まで丁寧に制作したいですね!

ご質問などお気軽にお問い合わせください

お電話でのお問い合わせ

096-312-3430

月〜金曜日(祝日除く) 9:00〜18:00

メールでのお問い合わせ

お問い合わせフォーム >

デザイン相談会
デザイン相談会を行っています。毎週月曜開催・予約制

これから開業する方はもちろん、事業主の方も大歓迎です。デザインやWEBサイト、ブランディングなどについて今現在お困りのことがあればお気軽にご相談ください。プレオデザインでお役に立てることがあれば嬉しいです。

相談会に申し込む >

TOPへ戻る