タグ

floatに関するkgsiのブックマーク (3)

  • Processingで見るプログラミングスタイル七変化 - Qiita

    序 この記事では、次のような一つの簡単なProcessingスケッチについて、様々なスタイルでコードを書いて比較してみます。 float[][][]d=new float[32][2][2]; float f(float[]x){return x[0]+=((frameCount%30==0?x[1]=random(100):x[1])-x[0])/4;} void setup(){size(800,800);fill(252,32);} void draw(){ square(0,0,800); scale(8); for(float[][]e:d) line(e[0][0],e[1][0],f(e[0]),f(e[1])); }#つぶやきProcessing pic.twitter.com/055DFzHmwF — FAL @STG制作とプログラミングお絵かき (@falworks_j

    Processingで見るプログラミングスタイル七変化 - Qiita
  • CSSで2カラムを作ってみる - kojika17

    CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい

    CSSで2カラムを作ってみる - kojika17
  • floatした際に背景が消える件【css tip】

    floatした際に背景が消える件【css tip】 親ボックスに背景を適用して、内包する子ボックスに対してfloatを適用した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、以下のような表示に

    floatした際に背景が消える件【css tip】
  • 1