CSSでfloatを使って二段組レイアウトをつくった場合、フッターにfloatの効果を解除するには、clear:bothなどを使っていました。
しかし、clear:bothを使うと、marginなどのCSSの効果が打ち消されてしまいます。
そこで今回は、clear:both以外の方法でfloatの効果を解除する方法を調べました。
clear:bothの代わりに、floatの効果を解除する方法として、overflow:hidden;があります。
この設定を、floatを設定しているタグの上にあたる親要素に設定します。
以下のようなコードになります。
<div style=”overflow:hidden”>
<div style=”float:left;width:200px;”>
<p>左側のコンテンツ</p>
</div>
<div style=”float:right;width:500px;”>
<p>右側のコンテンツ</p>
</div>
</div>
<div>
<p>フッター</p>
</div>
一番最初のdiv要素が親要素になるので、ここにoverflow:hidden;を設定します。
この親要素を閉じた後にある、div要素（フッター部）は、floatが解除された状態で表示されます。
Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む
Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む
Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む
縦横比を保ったまま画像のサイズを変えて表示する方法です。 例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによ…続きを読む
ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む
CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「～かつ、～」というセレ…続きを読む
GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します（ここで…続きを読む
Googleカレンダーに、別のGoogleアカウントのカレンダーを同期させることはできますが、別のGoogleアカウントで複数設定しているカレンダーをそれぞれ同期させる方法がわからなかったので調べまし…続きを読む
FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、 「8ビット文字コードへ変換するコマンドに失敗しました」 というメッセージが出てしまい、削除できないことがあ…続きを読む
CSSを使ってウェブサイトの画面レイアウトを、スマホ用とPC用とで切り替える方法です。 画面の幅によって表示方法を切り替える スマホを認識するというよりは、画面の横幅が何ピクセル以下か、によって読み込…続きを読む