片方だけ横幅を設定して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化したけど操作できないと、あなたが頭を抱えることはありません。

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

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

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

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

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

  • 2015-11-08

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

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

  • 2016-04-04

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

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

  • 2018-09-18

    【たった1分】ドメインから使っているサーバーを調べる方法

    ドメインからサイトが設置されているサーバー会社を調べる方法をご紹介しています。専門的な知識は必要ありません。コンテンツの中で紹介しているWEBサービスを利用(無料)すれば、どなたでもドメインからサーバー会社を調べることができます。 記事を読む

  • 2016-03-29

    知らずに損した!最初・最後・奇数・偶数・○番目など、要素を指定して装飾する方法

    疑似クラスを使うことで、CSSを複雑にすることなく指定要素を装飾することができます。「この3番目のliタグだけ色を変えたい」など特定の要素だけを装飾したいケースの参考にしてください。 記事を読む

  • 2016-02-16

    iPhoneのsubmitボタンのスタイルを初期化する方法

    iPhoneのsubmitボタンのスタイルを初期化する方法をご紹介します。iPhoneのsubmitボタンはデフォルトで角丸のスタイルが適用されています。このスタイルを解除する方法をまとめてみました。簡単な内容ですが知らない方には重宝な内容になっています。 記事を読む

コメントを残す


(必須)