副業で稼ぐ仕組みの作り方

floatはもう古いinline-block最強

投稿日:2022年8月27日 更新日:

レスポンシブデザインが当たり前になってきている中、横並びのデザインは何を使う?

はじめに

今までは横並び系のデザインを作る時はfloatを使うのが当たり前でした。ただfloatを使うとレスポンシブデザインにした時、大幅にずれてしまいます。

そんな時に出会ったのが[inline-block]です。

注意事項

サイトによってはfloatも良いので、サイトによっては考えてみましょう

floatを使うとずれる

p { float:left; }

今までは横並び系のデザインを作成する時はfloatを使っていたのですが、floatを使うと以下のように結構ずれた経験ありませんか?

これ、この横幅で調整をしたとしても

結局、赤枠の所のようにずれてしまいます。

なので、PC用、タブレット用、スマホ用とレスポンシブデザインで作らないといけないのが面倒でした。

そんな時に出会ったのがinline-blockです。

inline-blockはレスポンシブ向け

p {
display: inline-block;
vertical-align: top;}

先ほどと同じデザインでfloat→inline-blockに変更してみました。
vertical-align: topを入れる事で上に揃える形にしています。

このように横並びでも問題ありません。
横幅を狭めてみましょう。

このように、次の段落でも横並びで綺麗に揃っています。

これを知ってからは横並び系は全てfloatからinline-blockに変えました。

それぞれわかりやすいようにデモページを作成したので、わからない方はこちらからソースをパクッてくださいね。

デモページはこちら

以上でfloatはもう古いinline-block最強の説明を終了致します。

さいごに

デザイン変えるのめんどい

今までPC用、タブレット用、スマホ用ってな感じでサイト構造を作っていたのですがinline-blockを使うようになってから仕事のやり方やタイミングがめちゃくちゃ簡単になりました。

-副業で稼ぐ仕組みの作り方
-

執筆者:


comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Xサーバーの動作確認用URLはSSL対応していない

Xサーバーにはドメイン移行前に、ドメイン移行をした後の状況を確認できる「動作確認用URL」がありますが・・・

WordPressで記事の盗用をさせないWP-Copyright-Protection

5時間かけて書いた記事が色々なところで盗用されているなんて悲しい事ありますよね

スマホ画面の一番下にふわっとコンテンツを表示させる方法

スマートフォンでホームページを見た際に常に一番下に表示されているふわっとした広告枠の出し方を紹介いたします。

さくらインターネットの請求書払い反映されるまで

さくらインターネットで支払い方法を請求書払い(コンビニ払い)にしている際の反映されるまでの時間を調べてみました。

ECCUBE4でメールテンプレートを増やす方法

ECCUBE4はメール周りもカスタマイズしなければいけません。

人気の副業記事(24時間で更新)