WEBデザイン

justify-content のプロパティオプションは前に紹介したのよりもっとたくさんあるらしい。 また、どう違うのかがいまいち分かりにくいので、全部実際に試してみる。 justify-contentオプション center■■■中央寄せ...

ヘッダ・フッター以外の本文部分を縦に3つに割るのではなく、上下方向に三段にして、中にFlexboxで３つずつ子領域を作成。 子領域の中身によって幅が伸縮するので、縦方向では三列だけどズレた配置になる。 グリッドレイアウトに似ているけど、こち...

「P」や「H1～H6」「PRE」「TABLE」などの一般的なタグのスタイルが、使用しているテンプレートやテーマによって既に規定されていて、記事の中で使う時に予想外の表示になって困惑することがあります。 ※このブログは「Simplicity2...

結論から言うと、自分の下らないミスなんですが このブログの記事の中で、テーブルを使って表を作った際に、全体の幅に合わせてセルの幅が伸縮してくれず、妙な余白ができてしまう状態になっていました。 こんな感じ #main table.test{b...

Flexboxに挑戦の9番目の記事で、Flexbox 非対応ブラウザで見た場合、回り込みが解除されて縦一列になってしまうという記事を書きました。 ブラウザは、基本的には、「知らないスタイル指定は無視する」という動作をするようなので、Flex...

Flexbox の基本的な使い方はだいたい分かったけれど。 せっかくなので、これを何かに活用できないか？考えてみた。 （WEBレイアウトなんて、それが仕事の人でもなければ、そうそうやるもんでもないですしね。。。） タイル状に埋め尽くすように...

まず、下記のように子アイテムを用意 TEST これを内包する親領域のフレックスボックスを作成 （width: 320px;height: 160px;） TEST TEST TEST #main .parent{width:320px;he...

フレックスボックスのアイテムは、「order」を使って順番を自由に入替えられます。これは結構便利かも。レイアウトの自由度が増しますね。 例：下記のように、配置したとして・・・ 1 2 3 4 5 6 7 8 9 10 11 各アイテムに下記...

スマホのブラウザはFlexboxへの対応が一番遅れていたようですが、現在はだいたい対応しているようですね。 なので、ここでは非対応ブラウザへ対応させるという話ではなく、レスポンシブデザインにしてみる実験。 スマホに対応せるには、メディアクエ...

Flexboxはまだ新しい規格なので、ブラウザによって対応状況が異なっているようですね。 最新のブラウザを使ってればそれほど酷く崩れることは無いと思いますが、例によってマイクロソフトは独自路線を行く傾向は相変わらずで、IEだと問題が起きやす...

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