CSS 「float」で指定した要素の幅サイズが揃わない
「float」は「float」で指定した要素の内部の要素を均等な幅サイズで表示するという、レスポンシブコーディングには欠かせないプロパティです。
「float」を使用してコーディングした以下の画像をご覧ください。
とても微妙なのですが、高さが揃っていないのがお分かりになると思います。
全て同じサイズの画像を入れていますので、高さが揃っていないということは、幅が微妙に異なるために高さに影響してしまっていると考えられます。
画像提供：ワインブティックヴァンヴァン様
文章を入れると画像がガタガタする
試しに画像だけで更新してみると、キレイに４等分サイズで揃っていました。
文字を入れるとガタガタしてしまうようです。
先の画像をよーく見ると、サイズの大きな画像は文字が端まで行っており、小さい画像は文字が端まで行かずに改行しています。
これが影響しているのでは？と考えました。
CSSで文章の改行位置を揃える（禁則処理）を行う
バラバラとしてしまう改行のおしりを全てカチッと揃えるCSSを振る事で解消される事があります。
※ブラウザの仕様によります
p {
text-align: justify;
text-justify: inter-ideograph;
}
これで解決できる！と思ったのですが、このCSSは「ひとつのブロック内の改行位置を揃える」という指示で「複数のブロック内の改行位置を全て同じように揃える」というものではありませんので、無意味である事にきがつきました。
改行ルールが優先されて幅が広くなってしまう場合も
上記のCSSを入れない場合は、「float」の等分ルールより、文字の改行ルールが優先されます。
文字の改行ルールとは、例えば「ショッキング」「スーパーマン」という単語について
シ ョッキング
ショ ッキング
スーパ ーマン
という小文字や伸ばし棒を文の頭に来るような改行にはしないという決まりです。
小文字や伸ばし棒が多い単語があった場合、それが影響して改行ができず、横に広い幅が必要になってしまい、他の要素を圧迫してひとつだけ幅広くなってしまう事があります。
上記の改行位置を揃える記述を入れれば解消されますが、おかしなところで改行されてしまうのは問題があります。
小文字や伸ばし棒の多い単語がある時には、適宜手動で区切りの良い場所に改行を入れる事をおすすめいたします。
まとめ
「float」は便利なプロパティですが、文字の改行位置などテキスト要素に影響されてしまう事があります。
CSSで改行位置を揃える方法は意味がありませんので、手動で改行を揃えるか、気になるようでしたら幅を指定する他なさそうです。しかし幅を指定してしまったら「float」の良さが消えてしまいますので考えどころです。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
