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

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

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

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

あなたのサイトもWordpressで運営してみませんか?

http://takayakondo.com/

あなたのサイトをWordpressで運営できる様にいたします。
毎月5件の限定受注。お見積もりはいつでも無料です。

片方だけ横幅を設定して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関連の記事でお役に立てれば幸いです。

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

  • 【スマホサイト】iPhoneからフォームを入力するとき勝手に画面を拡大させない方法

    iPhoneでWEBサイトの検索フォームを利用する場合など、自動的に画面が拡大されてしまいます。この機能、便利に感じる場合もありますが、ちょっと【うっとおしい】とかんじる場合もあります。今回は、この画面拡大を回避する方法のご紹介です。 記事を読む

  • CSSで正円形を描く方法【コピペで簡単】

    CSSで正円形を描く機会がありましたので、その方法を備忘録としてまとめておきます。基本的にコピペだけで実装可能。サイズや背景色を任意に変更するだけでOKです。参考にしてください。 記事を読む

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

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

  • バナーデザインの基本が分かる!7つのコンテンツをご紹介します。

    バナーデザインの基本が分かる!7つのコンテンツをご紹介します。サイトを運営しているとバナーを制作する機会は多くあると思います。でも、自分で作ると素人っぽくなりませんか?しっかりと基本を抑えてプロっぽいバナーを作成して見ましょう。 記事を読む

  • CSSだけで文章を縦書きにする方法

    CSSだけで文章を縦書きにする方法えおご紹介しています。文章を縦書きにしたいけどやり方が分からない方は必見です。3分後には自由自在に文章を縦書きにすることが出来ます。 記事を読む

コメントを残す


(必須)

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)