WEBデザイン

「flex-direction」は並び方を横に並ばせるか縦にならばせるかを指定する。 「flex-direction:row;」だと横並び（左から右へ） 「flex-direction:column;」だと縦並び（上から下へ） 例１　row...

フレックスボックスを使ったタイル状のインデックスページ、改訂版 幅を変えて段組みを簡単に変更できます。 また、order の設定でタイルブロックの配置を自由に変えられるので、レイアウト変更が簡単にできてよいですね。 これ、２カラム・３カラム...

Flexboxレイアウトで、３カラムデザインなのだけど、タイル状配置を利用したレイアウトを考えてみた。 （こういうタイル状レイアウトを「グリッドレイアウト」っていうらしい） TITLE TEST1 Lorem ipsum dolor sit...

２カラム・３カラムのレイアウトを作ってみる。（※初めてやったので参考程度にお願いします。） ２カラム TITLE カテゴリ カテゴリ カテゴリ カテゴリ カテゴリ カテゴリ 本文 ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊...

フレックスボックスは左右・中央寄せがとても簡単 これ、理解したらとても便利だと思いました。 ん？中央寄せなんて「text-align:center;」で済む話では？ と思うかも知れませんが、縦方向の中央寄せは難しいですよね。 縦位置の中央寄...

フレックスボックスの、子アイテムのスタイルでは、ショートハンドとして、このような書き方が推奨されているとか。 flex:＜因数1＞ ＜因数2＞ ＜因数3＞; これは何を意味しているかというと 因数1 ⇒ flex-grow:＜数値＞; 因数...

フレックスボックスは、中に数が定まっていない複数のアイテムが詰め込まれるような状況が得意ということですかね。（うまくレイアウトを調整して埋めてくれるような感じ） #main .smpl1{ width:300px; border:2px s...

★フレックスボックスとは？ フレックスボックスを使うと、従来のFLOATなどを使ったレイアウトより、少しだけ自由度が高い配置ができる。 ※フレックスボックスを使うと、FloatをかけてあとでClearするための空の領域を作ったりする必要がな...

今更ですが、float解除の３つの方法、覚書 flaotを使って回り込みをした場合、floatを解除してやらないと、思わぬところでレイアウトが崩れる場合がありますね。(親要素の中にある子要素にfloatプロパティが設定されていると、内容をも...

テーブルを使って表を作った時に、縦軸と横軸に見出し・項目を並べた時、左上の角のマスがひとつ空欄になってしまいますね。 よくそこには斜線を引いておいたりしますね。手書きや表計算ソフトなら、それでいいのですが、WEB上の表記ではそれが実現できる...