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

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

大容量ファイルをメールで送る方法

写真や音楽データ、その他メールでは送信できない大容量ファイルをメールで送る方法です。実際はメールで送ると言うより、ファイルをアップロードし、ダウンロードURLをメールでお送りする事で大容量のファイルを …

カスタムフィールドのループ内でループを使う方法

Custom Field Suiteを使えば無料で簡単にループ処理が出来ます。

ttfをwoffに簡単に変換できた!

ttfをwoffに簡単に変換できた!

ワードプレスにグーグルアドセンスを導入する方法

ワードプレスにアドセンスを導入する際に効率の良い導入方法をご紹介いたします。

サーバーの申込み方法【サクラインターネット】

今回はホームページやブログを運営していく為に必要不可欠なサーバーの申込み方法です。