floatに関するmizu0x19fのブックマーク (2)
-
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目︵レイアウト︶を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"︵青い背景色の領域︶を可変、div class="side"︵赤い背景色の領域︶を固定にそれぞれする方法で、固
-
HTMLとかCSS ひよこちゃん向けシリーズ、︻float︼編です!CSSの︻float︼について本気出して説明してみた。left right ,clearってなに!?? HTMLとかCSSとかこれから!な、ひよこちゃん向けシリーズ、︻float︼編です! 2016/07/15 一番最後のほうにfloat clearfixの修正版追加しました。 float(フロート)とはなんぞや? floatとは、要素︵<div>とか<p>とか︶を右に寄せたり、左に寄せたりするときに使います。 よくサイトで見られるサイドバーとかサイドメニューとかもfloatで配置することが多いですね。 まずは、プロパティをおさらいしておきましょう! left ︻左に寄せる︼ right ︻右に寄せる︼ none ︻やっぱフロートやめる︼ inherit ︻継承させる︼←使うことあまりない プロパティは以上です。基本的にi
-
1