タグ

ブックマーク / www.webbibo.com (2)

  • テキストボックスを画像の下に回り込ませない方法|web bibo

    /* CSS(スタイルシート)に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ: HOME » CSS レイアウト・ボックス » テキストボックスを画像の下に回り込ませない方法 画像のサイズが変わっても、隣接するテキストボックスは画像の下に回り込まず、なおかつ、テキストボックスのサイズが画像に合わせて自動的に変わる方法をご紹介します。 画像のサイズが変わってもテキストが折り返さない 大きい画像から小さい画像に差し替えることになっても、テキストが折り返すことはなくなるので、簡単に更新作業ができます。 HTML 下記の通りHTMLを記述します。 <div class="box"> <img src="images/text_wrap.jpg" alt="" /> <p>text text text text text text tex

  • 1px欠けの角丸ボックスをCSSだけで作る方法|web bibo

    スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:

  • 1