HTML&CSS FlexBoxの使い方（６）〜flexプロパティの練習
flexプロパティの練習用サンプルを作成しました。
flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。
値は数字の０以上の整数を入れてください。
数値入力後に「CSS設定する」ボ...
2016-09
HTML&CSS HTML&CSS FlexBoxの使い方（５）〜flexプロパティについて（動画あり）
flexプロパティの動画
flexプロパティについて解説します。
display:flexを指定したときflexコンテナはblockの性格を持ち、親要素の幅いっぱいに広がります。flexコンテナでflexアイテムをき...
php&MySQL Windows10にしたらXAMPPのApacheが使えなくなる現象
OSをWindows10にバージョンアップしたらXAMPPのApacheが使えなくなりました。
これはWindowsがデフォルトでポート80を使用しているためです。
原因
Microsoft Internet Informatio...
HTML&CSS FlexBoxの使い方（４）〜display:inline-flexについて（動画あり）
inline_flexの動画
「inline-flex」を簡単に説明すると「inline-block」の拡張版と言えます。
「inline-block」の性格を持ちながら、尚且つ「flex」の性格を持ちます。結構万能に使...
HTML&CSS FlexBoxの使い方（３）〜flexアイテムの順番を入れ替え（動画あり）
flexアイテムの順番の入れ替えについて解説します。
flex アイテムに対するプロパティの使い方動画
flexBoxレイアウトの初期状態
flexBoxレイアウトをorderプロパティで並べ順を変えた状態
...
HTML&CSS FlexBoxの使い方（２）〜整列の方法とfloatレイアウトとの違い
FlexBoxを使った整列の方法とfloatとの違いを解説します。
floatレイアウトとFlexBoxレイアウトの違い
flexレイアウトの例・・・・自動で高さが揃う
floatレイアウトの例・・・・高さを揃えることができな...
HTML&CSS FlexBoxの使い方（１）〜display:flexについて（動画あり）
通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来上がります。また、今...
HTML&CSS 可変レイアウト（Fluid Layout）作成のポイント
DogRoboの一日は朝食で始まる。
ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7：3に決めている。...