CSS/Float
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2025
ソーシャルデザイン演習/2025
情報デザイン論/2025
情報デザイン演習IIA/2025
コンピュータ概論/2025
3DCG演習/2025
情報デザイン研究/2025
卒業研究/2025
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*CSS|Float
~
&color(red){Flexboxの登場により、この手法の仕様頻度は減っ...
~
***Floatの仕様
Floatには、以下のようなプロパティーがあります。
-left:指定要素を左寄せします。後続の要素はその右側に回り...
-right:指定要素を右寄せします。後続の内容はその左側に回...
-none:デフォルト値です。
~
***Float によるレイアウト
以下のように あるブロック(箱)のCSSに float を書き加える...
float : left; ( float : right; )
ただし、回り込みは一旦定義すると、左右に余白がある限り、...
clear : both; (clear : left; clear : right; )
と書きます。
~
***floatとclearfix
さて、その回り込みの解除ですが、floatを解除する為に''次の...
html
<div id="mainbox" class="clearfix"> ← class="clearfix...
<div id="box-a"> 〜 </div> ← float
<div id="box-b"> 〜 </div> ← float
:
</div>
css
.clearfix:after {
content: "";
display: block;
clear: both;
}
これは要するに、親要素の最後にダミー文字を挿入して、それ...
~
***floatを用いたメニューの横並びレイアウトの例
floatを用いてメニューを横に並べるには、以下のようにします。
-HTML側の記述
メニュー部分のHTMLが以下のようになっていることを前提とし...
nav という箱の中に li で囲まれた小さな箱が複数入るイメー...
&size(12){<li>を使わず<br>で改行したものは、いくらが...
<nav>
<ul class="clearfix">
<li ><a href="#">top</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
-CSS側の記述
nav {
width:700px; ← 項目が並ぶだけの幅の余裕が必要です。
: その他略
}
nav li{
float:left;
width:100px;
: その他略
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
~
~
終了行:
*CSS|Float
~
&color(red){Flexboxの登場により、この手法の仕様頻度は減っ...
~
***Floatの仕様
Floatには、以下のようなプロパティーがあります。
-left:指定要素を左寄せします。後続の要素はその右側に回り...
-right:指定要素を右寄せします。後続の内容はその左側に回...
-none:デフォルト値です。
~
***Float によるレイアウト
以下のように あるブロック(箱)のCSSに float を書き加える...
float : left; ( float : right; )
ただし、回り込みは一旦定義すると、左右に余白がある限り、...
clear : both; (clear : left; clear : right; )
と書きます。
~
***floatとclearfix
さて、その回り込みの解除ですが、floatを解除する為に''次の...
html
<div id="mainbox" class="clearfix"> ← class="clearfix...
<div id="box-a"> 〜 </div> ← float
<div id="box-b"> 〜 </div> ← float
:
</div>
css
.clearfix:after {
content: "";
display: block;
clear: both;
}
これは要するに、親要素の最後にダミー文字を挿入して、それ...
~
***floatを用いたメニューの横並びレイアウトの例
floatを用いてメニューを横に並べるには、以下のようにします。
-HTML側の記述
メニュー部分のHTMLが以下のようになっていることを前提とし...
nav という箱の中に li で囲まれた小さな箱が複数入るイメー...
&size(12){<li>を使わず<br>で改行したものは、いくらが...
<nav>
<ul class="clearfix">
<li ><a href="#">top</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
-CSS側の記述
nav {
width:700px; ← 項目が並ぶだけの幅の余裕が必要です。
: その他略
}
nav li{
float:left;
width:100px;
: その他略
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
~
~
ページ名: