片方だけ横幅を設定してfloatする方法
  • 記事公開:2015/11/11
  • 最終更新:-------------

片方だけ横幅を設定してfloatする方法

片方だけ横幅を設定してfloatする方法をご紹介します。横並びの要素で一方だけ横幅を設定したいあなたは、このコンテンツを参考にしてください。2分後にはあなたの希望が形になります。

この記事は約 2 分で読めます。

片方だけ横幅を設定してfloatする方法

横並びの要素があるとき、その一方だけ横幅を指定して、もう一方の横幅は指定せず【auto】にしたいときの記述方法です。

以下の要素があったとして【コンテンツA】の横幅だけを指定してみます。

<div id="out_box">
<div id="a">コンテンツA</div>
<div id="b">コンテンツB</div>
</div>

CSSで以下の様に定義してやりましょう。

#out_box {
overflow: hidden;
}
#a {
float: left;
width: 300px;
background: #999;
}
#b{
margin-left: 300px;
background: #ccc;
}

ポイントは以下の部分です。

  • 横幅を設定したいブロックだけにfloatを設定する。
  • 横幅を設定しないブロックはfloatを設定せず、上記ブロックの横幅の分だけmarginをとる。
  • marginを横幅より大きく取ればブロック間にスペースを設けることができる。

まとめ

片方だけ横幅を設定してfloatする方法をご紹介しました。

以前に携わった案件で参考にした内容ですが、どの様な場面で必要だったのか思い出せません。
今回の内容を見て「これだ!」と思われた方は、ぜひ参考にしてください。

この記事が気に入ったら【いいね】しよう!

あなたのWEBサイトをWordpressで
管理できるようにしませんか?

あなたのWEBサイトを見た目そのままでWordpress化いたします。
以下に興味のある方は、お気軽にご相談下さい。

  • あなたのWEBサイトを、Wordpressで運営できる様にいたします。ページの編集や追加も簡単に行えるようになります。
  • どの様な形式のサイト(例えば、アメブロ、MTサイトなど)でもWordPress化いたします。
  • Wordpress化でサイトのデザインが崩れるなどの心配は必要ありません。デザインもサイト構成もほぼ変わらない、高い再現率が自慢です。
  • 単にWordpress化するだけではありません。デザイン変更など+αの作業にも対応することも可能です。
  • 他案件との兼ね合いもありますが、最短即日であなたのサイトをWordpress化いたします。
  • 初心者でもWordpressが使えるよう、納品後に徹底的な操作サポートをご提供いたします。Wordpress化したけど操作できないと、あなたが頭を抱えることはありません。

興味のある方は、以下のリンクからチェックしてみてください。

詳細を確認する

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2016-04-04

    画像加工はもう不要!CSSだけで画像を円形にする方法

    CSSだけで画像を円形にする方法をご紹介します。この方法を知っていれば、画像を個別に加工する必要はなくなります。スタイリッシュな円形画像をサイトデザインに取り入れたい方、ぜひ参考にしてください。それでは、CSSだけで画像を円形にする方法をどうぞ! 記事を読む

  • 2015-11-21

    チェックボックスを一括でチェックor解除する方法

    チェックボックスを一括でチェックor解除する方法をご紹介します。簡単な記述だけで一括チェックと解除を実装することができます。気になった方は2分間だけこのコンテンツを見てください。 記事を読む

  • 2017-07-03

    WordPressサイトにWebアイコン【Font Awesome】を実装する方法

    WordPressサイトにWebアイコン【Font Awesome】を実装する方法をご紹介します。WEBアイコンは簡単に使えて非常に便利。この機会に使い方をマスターしてください。初心者の方でも3分間でWEBアイコンの使い方をマスターすることができます。 記事を読む

  • 2015-11-08

    完全無料!よく利用するフリー写真素材の配布サイトを17個まとめてみた。

    WEBサイトの制作やブログのアイキャッチなどを作る時など、フリーの写真素材を使う機会が多くあると思います。頻繁に使用しているフリー写真素材の配布サイトをまとめてみました。 記事を読む

  • 2017-07-21

    レスポンシブサイトで要素が画面に収まらない主な原因4つと解決策のまとめ

    レスポンシブサイトで要素が画面に収まらない主な原因4つと解決策をまとめてみました。レスポンシブサイトの制作時には頭を悩ませる問題かと思います。現に悩まれている方、このコンテンツで頭痛の種を取り除いてください。 記事を読む

コメントを残す


(必須)

CAPTCHA