2016-09

HTML&CSS

FlexBoxの使い方(6)〜flexプロパティの練習

flexプロパティの練習用サンプルを作成しました。 flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。 値は数字の0以上の整数を入れてください。 数値入力後に「CSS設定する」ボ...
HTML&CSS

FlexBoxの使い方(5)〜flexプロパティについて(動画あり)

flexアイテムを拡大、縮小してflexコンテナにぴったりと収める方法の解説をおこないます。
php&MySQL

Windows10にしたらXAMPPのApacheが使えなくなる現象

OSをWindows10にバージョンアップしたらXAMPPのApacheが使えなくなりました。 これはWindowsがデフォルトでポート80を使用しているためです。 原因 Microsoft Internet Informatio...
HTML&CSS

FlexBoxの使い方(4)〜display:inline-flexについて(動画あり)

シンプルなナビゲーションを作成する場合inline-flexは非常に便利に使えます。inline-flexを使用するとflexコンテナはflexアイテムの大きさに依存した幅になってくれますので、中央揃えなどが簡単になります。サンプルを使った説明をしますので参考にしてください。
HTML&CSS

FlexBoxの使い方(3)〜flexアイテムの順番を入れ替え(動画あり)

FlexBoxではorderプロパティでflexアイテムの並び順を変えることができます。また、flex-directionプロパティでrow-reverseやcolumn-reverseで逆順に並べることも簡単にできます。
HTML&CSS

FlexBoxの使い方(2)〜整列の方法とfloatレイアウトとの違い

FlexBoxを使用するとfloatより簡単に便利なレイアウトを作成できます。特に垂直方向の整列が簡単にできることが注目に値します。
HTML&CSS

FlexBoxの使い方(1)〜display:flexについて(動画あり)

通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しく入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来上がります。まずは簡単に横並びのレイアウトを作成してみましょう。
HTML&CSS

可変レイアウト(Fluid Layout)作成のポイント

DogRoboの一日は朝食で始まる。 ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7:3に決めている。...
スポンサーリンク
タイトルとURLをコピーしました