稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

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

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

関連記事

スパムコメントを自動で削除してくれるAkismet

ワードプレスをインストール時に最初からインストールされているAkismetの使い方をご紹介いたします 関連記事: 一つのプラグインで最低限の機能が揃うJetpack シーサーブログにメニューを作る方法 …

サクラで日本語ドメインを使う方法

サクラサーバーで日本語ドメインを利用するちょっとした裏技をご紹介いたします。 関連記事: お名前.comでドメインを取得する方法 お名前.comのドメインをさくらサーバーで使用する方法 お名前.com …

画像を特定のサイズで表示させる方法WordPress

カスタムフィールドで登録した画像を指定のサイズで表示させる方法をご紹介いたします。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 カスタムフィールドを使って計算 WordP …

【画像あり】XAMPPを使ってPHPの動作確認方法

PHPの動作確認をするのにXAMPPは絶対に必要です。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 PHPでechoとprintの違いについて ワードプレスの分岐topペ …

お名前.comのドメインをさくらサーバーで使用する方法

サーバーの最安値とドメインの最安値を一緒に利用出来ます 関連記事: サクラで日本語ドメインを使う方法 お名前.comでドメインを取得する方法 サクラサーバーに転入する方法2015 お名前.comのWh …