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

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

関連記事

Gmailでメールの配信エラーを解消する方法

ある日急にGmailからのメールが「メールの配信エラー」と出て送信できなくなった時の対処法をご説明いたします。

【Xサーバ】hostsの設定で動作確認

前回Xサーバの動作確認URLで実際の動作が確認できませんでしたが、hostsの設定で確認できますよ。

no image

PDFファイルの作り方

情報商材でよくみるPDFファイル、これってどうやって作るのか・・・そんな悩みを解決致します。

インフォトップの登録方法

情報商材の販売をするならやっぱりインフォトップ

メルカリの出品から発送までの流れ

メルカリに出品してみて入金されるまでの流れをご紹介させて頂きます

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